什么是HTML语义化

待我称王封你为后i 2022-05-26 05:23 297阅读 0赞

## 说HTML语义化就要先说说HTML到底负责的什么？下面摘自维基百科： ##

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。  
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。  
关于对于语义化的理解[顾轶灵：如何理解 Web 语义化？][Web]这里讲的很清楚了我就简单说一下我的理解：  
通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。单纯的HTML代码是**不带任何样式的**只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等，但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？那是因为各个浏览器都自带的有相应标签的默认样式，为了方便在没有设定样式的情况下友好的展示页面。

良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。

## 优点 ##

*  标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。
 *  有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？

#  #

这是一些语义化的元素([source][]).

*  [`<article>`][article]
 *  [`<aside>`][aside]
 *  [`<details>`][details]
 *  [`<figcaption>`][figcaption]
 *  [`<figure>`][figure]
 *  [`<footer>`][footer]
 *  [`<header>`][header]
 *  [`<main>`][main]
 *  [`<mark>`][mark]
 *  [`<nav>`][nav]
 *  [`<section>`][section]
 *  [`<summary>`][summary]
 *  [`<time>`][time]

# 参考链接 #

*  [语义化标签一节元素标签][Link 1]  
    
 *  [https://www.zhihu.com/question/20583492/answer/260535796][https_www.zhihu.com_question_20583492_answer_260535796]
 *  [https://www.zhihu.com/question/20455165][Web]
 *  [https://www.zhihu.com/question/20583492][https_www.zhihu.com_question_20583492]
 *  [https://www.cnblogs.com/freeyiyi1993/p/3615179.html][https_www.cnblogs.com_freeyiyi1993_p_3615179.html]
 *  [http://www.html5jscss.com/html5-semantics-section.html][http_www.html5jscss.com_html5-semantics-section.html]
 *  [https://segmentfault.com/a/1190000004179484][https_segmentfault.com_a_1190000004179484]

[Web]: https://www.zhihu.com/question/20455165
[source]: http://www.w3schools.com/html/html5_semantic_elements.asp
[article]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article
[aside]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside
[details]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details
[figcaption]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figcaption
[figure]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure
[footer]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/footer
[header]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header
[main]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main
[mark]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/mark
[nav]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav
[section]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section
[summary]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/summary
[time]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/time
[Link 1]: http://http//www.html5jscss.com/html5-semantics-section.html
[https_www.zhihu.com_question_20583492_answer_260535796]: https://www.zhihu.com/question/20583492/answer/260535796
[https_www.zhihu.com_question_20583492]: https://www.zhihu.com/question/20583492
[https_www.cnblogs.com_freeyiyi1993_p_3615179.html]: https://www.cnblogs.com/freeyiyi1993/p/3615179.html
[http_www.html5jscss.com_html5-semantics-section.html]: http://www.html5jscss.com/html5-semantics-section.html
[https_segmentfault.com_a_1190000004179484]: https://segmentfault.com/a/1190000004179484