前言

最近学习着重学前端，但有些内容可能平时用不太上，故将知识和理解加工成文章，共享给大家，希望大家不吝指教！
本篇做一个总起，后面会记录一些语义化标签，以追根溯源的文章形式陆续放出~

一、什么叫HTML标签的语义化

先上MDN的说法吧：HTML中的语义
可能做出来的页面没什么区别，像paragraph标签与division标签

<p></p>
<div></div>

区别在哪呢，哦~，区别就在标签名上
举个例子：

<p></p> => paragraph => 段落。顾名思义，这个标签的内容是一个段落
<header></header> => header => 头部。那这个标签内容，就该是页面的头部内容

等等诸如此类…

二、使用场景

1.文档类页面

来个案例

字节跳动小程序文档
截图的条条框框，更像是给页面做一个内容划分， 就像是在说，这个地方应该用header标签包起来，那个地方应该用aside标签包起来一样。

2.词条类页面

来个更经典的案例

MDN MDN直接用上了相应的标签，大家可以打开开发者工具（f12）看下

MDN

使用意义

某梁姓同学：搞这些花里胡哨的没用，没有不也好好的？

这位同学说对了一半
没有这些语义化标签，确实页面也能搭起来，确实div + span一把梭很爽，确实没什么影响
更深入来讲，有些标签还会自带样式，像ul li之流，一个不慎就把页面给搞乱了
不好使

但是，不代表它没用

读起代码来更好懂
换一个人来看你的代码，他可以更容易地，不用看标签内容地发现，header标签对应的是你的页面的头部这块地方，aside对应的是侧边栏；
利于SEO
你的代码更有纹理，受益的不止是阅读你的代码的人，还有机器。搜索引擎虫会根据标签的上下文来权衡关键字的重要性；
无障碍阅读
读屏软件可以通过标签了解你的页面架构~
自带样式
在网络不给力的情况下，CSS很难加载出来，这个时候语义化标签自带的样式能够让页面不那么难看

这里有篇文章，详细介绍了原因

使用注意

当然，你不能因为有点使用意义就急冲冲地去使用它们。
一个main标签给放到头部，我相信这对SEO不是什么好事

总结

以上就是今天要讲的内容，本文仅仅简单介绍了下语义化标签的定义和场景意义。希望能启发大家平时留意一下平时忽略的标签，后面也会将采集到的标签，做一篇篇寻根问底的介绍文章。

也希望大家多多给出意见！谢谢！

【语义化标签】【Semantic HTML】div span a之外的内容相关推荐

结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面
** CSS+DIV页面布局 ** 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面.要求: (1)header标签定义页面头部区:nav标签定义导航区:div标签定义中 ...
从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
HTML5概述 - 语义化标签
一.HTML5 简介 1.什么是 HTML5 HTML5 不是一门新的语言,而是我们之前学习的 HTML 的第五次重大修改版本. 2.HTML 的发展历史 •超文本标记语言(第一版,不叫 HTML 1 ...
html5新语义化标签
HTML5的浏览器兼容支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本,Chrome (谷歌浏览器),Safari, Opera等; 国内的遨游浏览器(Maxthon ...
图片标签|| 列表标签||链接标签||div和span|| 语义化标签
图片标签 img:展示图片 * 属性: * src:指定图片的位置相对路径 * 以.开头的路径 ...
HTML 字体标签图片标签列表标签链接标签 div span 语义化标签表格标签
文章目录 HTML 字体标签图片标签列表标签链接标签 div span 语义化标签表格标签 HTML 概念:是最基础的网页开发语言 Hyper text markup language 超文本 ...
html语义化标签是什么,HTML语义化标签探析
什么是HTML语义化 HTML语义化就是根据具体内容,选择合适的标签进行代码的编写.便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别. 为什么要语义化有利于SEO:搜索引擎的爬虫是 ...
H5新增特性之语义化标签
H5新增特性之语义化标签语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
好程序员web前端分享常见html5语义化标签
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享常见html5语义化标签,我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总 ...

【语义化标签】【Semantic HTML】div span a之外的内容

文章目录

前言