HTML 的标签可以分为很多种,比如 img、video、audio 之类的替换型媒体标签。我今天要讲的标签是:语义类标签。
语义类标签也是大家工作中经常会用到的一类标签,主要的区别在于它们表示了不同的语义,多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标
签代为表达。
我们现在写代码,很多都不用复杂的语义标签, 只靠 div 和 span 就能撸个页面。这样做实际通上也行的,但是在很多情况下语义类标签也有它们自己无可替代的优点:语义类标签对开发者更为友好,使用语义类标签增强了代码的可读性,便于团队的开发和维护;除了对人类友好之外,语义类标签也十分适宜机器阅读,更适合搜索引擎检索(SEO)。但是如果错误地使用语义标签,就会给机器阅读造成混淆、增加嵌套,给 CSS 的编写加重负担。
作为整体结构
<body>
<header>
<nav>
……
</nav>
</header>
<aside>
<nav>
……
</nav>
</aside>
<section>……</section>
<section>……</section>
<footer>
<address>……</address>
</footer>
</body>
aside 表示跟文章主体不那么相关的部分,它可能包含导航、广告等性质的内容 。侧边栏是 aside,但是aside 不一定是侧边
栏。
除此之外,还有 article,它是一种特别的结构,它表示有独立性质的文章,在文章主体部分,若主体部分具有明确的独立性,则可以用 article 来包裹。。多文章结构可以用article来组织:
<body>
<header>……</header>
<article>
<header>……</header>
<section>……</section>
<section>……</section>
<footer>……</footer>
</article>
<article>
……
</article>
<footer>
<address></address>
</footer>
</body>
hgroup, h1, h2
h1-h6 表示了文章中不同层级的标题。有时我们会有副标题,为了避免副标题产生额外的一个层级,我们使用 hgroup 标签,hgroup 是标题组。
abbr
abbr 标签表示缩写
<abbr title="Republic Company">REC</abbr>
hr
如果我们需要表示一条很长的横线,而我们都知道 hr 标签表示横向分隔线,那么是否要用 hr 呢?因为hr 表示故事走向的转变或者话题的转变,所以我们应该使用 CSS 的 border 来把它当作纯视觉效果来实现,是不需要用hr的。
blockquote,q,cite
三个跟引述相关的标签 blockquote 表示段落级引述内容,q 表示行内的引述内容,cite 表示引述的作品名。
figure,figcaption
插入文章中的内容(图片,代码、表格等),只要是具有一定自包含性(类似独立句子)的内容,都可以用 figure。我们用 figcaption 表示内容的标题,也可以没有标题。
<figure>
<img src=""/>
<figcaption>nowadays's polution</figcaption>
</figure>
dfn
dfn 标签是用来包裹被定义的名词
pre, samp, code
pre 元素可定义预格式化的文本,即不需要浏览器帮我们做自动换行,因此可以使用 pre 标签,表示这部分内容是预先排版过的,不需要浏览器进行排版。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在<pre> 所定义的块里。
<samp> 标签是一个短语标签,对文档中的文本进行格式化:<samp>计算机样本</samp>,用来定义计算机程序的样本文本。
提示:我们并不反对使用这个标签,但是如果您只是为了达到某种视觉效果而使用这个标签的话,我们建议您使用 CSS ,这样可能会取得更丰富的效果。
<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容
补充
标签 | 说明 |
small | 之前表示字体缩小的废弃标签,现在H5表示补充评论 |
s | 之前表示划线的废弃标签,现在H5表示错误的内容,常用于电商表示打折前的价格 |
i | 之前表示斜体的废弃标签,现在H5表示读的时候变调 |
b | 之前表示黑体的废弃标签,现在H5表示关键字 |
u | 之前表示下划线的废弃标签,现在H5表示避免歧义的标记 |
data | 跟time标签类似,给机器阅读的内容,意义广泛,可以自由定义 |
kbd | 用户输入,表示键盘按键居多 |
sub | 下标,多用于化学/物理/数学领域 |
sup | 上标,多用于化学/物理/数学领域 |
bdi,bdo | 用于多语言混合时指定语言或者书写方向(左到右或者右到左) |
mark | 表示高亮,这里并非指显示为高亮,而是从读者的角度希望的高亮(与strong的区分) |
wbr | 表示可以换行的位置,主要是英文等不允许单词中间换行,这个标签一般把多个单词粘成很长的单词的时候用 |
main | 整个页面只出现一个,表示页面的主要内容,可以理解为特殊的div |
最后的最后
语义类标签有利也有弊,我们应该使用我们熟悉的语义类标签,这样才能避免语义类标签的滥用