HTML语义化的案例分析：分析一些实际网站的HTML结构，对比非语义化标签的差异
1、HTML语义化
语义化是为了利于人的阅读，不管html还是html5或者是xml都可尽量做到语义化，只是HTML5提出了语义元素，规范了语义化。
HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】
1.1 HTML5语义化标签
- 非语义 元素：
<div>和<span>无法提供关于其内容的信息。
- 语义 元素：
<form>、<table>以及<img>清晰地定义其内容。
HTML5语义元素简单结构：
HTML5 提供了定义页面不同部分的新语义元素：
| 语义元素 | 定义 | 作用 |
|---|---|---|
<section> | 元素定义文档中的节 ( 节是有主题的内容组，通常具有标题 ) | 可以将网站首页划分为简介、内容、联系信息等节 |
<article> | 元素规定独立的自包含内容，即文章 | 文档有其自身的意义，并且可以独立于网站其他内容进行阅读 常用于论坛、博客、新闻 |
<header> | 文档或节所规定的页眉 | 用作介绍性内容的容器 |
<footer> | 文档或节规所定的页脚 | 提供有关其包含元素的信息 常用作标明文档的作者、版权信息、使用条款链接等 |
<nav> | 定义导航链接集合 | 旨在定义大型的导航链接块 |
<aside> | 页面主内容之外的某些内容（比如侧栏） | 其内容与周围内容相关 |
此外还有以下这些，不多作介绍：
<details>、<figcaption>、<figure>、<summary>、<main>、<make>、<time>
1.2 HTML4 与 HTML5 的语义化差异
如果使用 HTML4 的话，开发者会使用他们喜爱的属性名来设置页面元素的样式：header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...例如这些：<div id="nav"> <div class="header"> <div id="footer">。
如此，浏览器便无法识别正确的网页内容。
而通过 HTML5 元素，比如：<header> <footer> <nav> <section> <article>，此问题迎刃而解。
1.3 语义化的优势
- 在
没有CSS样式的情况下，页面整体也会呈现很好的结构效果 代码结构清晰，易于阅读，利于开发和维护方便其他设备解析（如屏幕阅读器）根据语义渲染网页。有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
2、一些实际网站的HTML语义化
查看了许多网站的源代码，基本上不会完全使用HTML5语义元素标签，常用的还是<header>、<nav>以及自定义的规范。
这里选择以 某乎 作分析：
该界面只有
<header>、<main>与<nav>这几个HTML5语义化标签，
而其他语义化标签如:
<title ……>首页 - 知乎</title><circle ……> …… </circle>- ……
2.1 与非语义化标签对比
实际上该网站代码存在一些非语义化代码，如：
<div id="root" >...</div><span class="GlobalSideBar-navText">我关注的问题</span>- ……
这些标签与语义化标签相比，由于其依靠class或id标识区分，不易理解该模块类型，广泛使用div 或 span 标签使得代码的整体结构就显得繁琐复杂，不够清晰明确。
2.2 分析方法
-
在该页面直接查看网页源代码
这个方法大家应该都会……
在页面中单击鼠标右键选择，或直接用快捷键
ctrl+U -
用
页内查找工具查看是否存在HTML5的语义化标签 -
用
页内查找工具查看网页比较明显的模块，如'首页'、'关注'等
2.3 分析结果
许多网站会选择运用HTML语义化，一方面语义化的优势十分显著，既对页面维护十分友好，又有利于增加可读性；但整体来说，并没有完全采用语义化标签，这与我一开始的预期不大一样。
结合网上查询到的说法，归纳整理出为什么不使用语义化的原因：1、语义化标签对不同浏览器可能样式不同；2、网页大规模对代码可读性要求不高，用class标识好更好；3、语义化标签不够丰富。
写在最后的话
个人对前端知识尚且认识浅薄，查看了许多网页的源代码，感觉实际的网站开发的代码十分复杂，与自己所预期的不同。同时，可能眼界与精力所限，无法完整归纳出整体结构。
本文尽可能以自己的见解分析，若有过失之处，请多指教。
主要参考来源：W3school HTML 语义
