这是我参与「第四届青训营 」笔记创作活动的的第1天。
本文结合青训营课程的内容与平时浏览的相关资料，叙述个人在前端学习过程中对HTML语义化的理解。
什么是HTML语义化
语义化：是指机器在需要更少的人类干预的情况下，能研究和收集信息，让网页能够被机器更好地理解。
HTML 标签语义化: 是让大家直观的认识标签元素和属性的用途和作用。
我们可以将HTML语义化做如下总结：
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应遵循语义来编写HTML
- 如：有序列表用
<ol>；无序列表用<ul>
- 如：有序列表用
- lang属性表示内容所使用的的语言
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人度页面的内容
语义化的好处
- 搜索引擎优化：有利于SEO，有助于爬虫抓取更多有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重），有了良好的结构和语义的网页内容, 自然容易被搜索引擎抓取 。
- 提升代码可读性，即使没有CSS，页面也能很好地呈现内容结构，即使“裸奔”也对网页主要信息无影响。
- 可维护性：遵循 W3C 标准的团队都遵循这个标准, 可以减少差异化 。
- 提升无障碍性：方便其他设备解析 (如屏幕阅读器, 盲人阅读器, 移动设备) 以语义化的方式来渲染网页 。
如何做到语义化?
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
以下列举一些具体方式：
- 少使用如
<span>、<div>无语义的标签 - 若语义不明显时，尽量用
<p>(在默认情况下有上下间距, 对兼容特殊终端有利),次选<div> - 需强调文本时，可使用
<strong>、<em>标签中。 - 使用表格时，标题用
<caption>，表头用<thead>，主体部分用<tbody>，尾部用<tfoot>。 - 每个
<input>对应的说明文本都需要使用<label>, 并且通过为<input>设置id属性, 在<label>中设置for=xxxld来让说明文本和相对应的<input>关联起来 。
内容划分与语义化标签
- header 标题：包括大标志、标题、标语，从一个网页到另一个网页保持不变。
- nav 导航栏 ：菜单按钮、链接或选项卡表示。
- main 主体内容：包含给定网页的大部分独特内容，其代表一个文档，可包括视频，文章，地图等等
- article 部分内容：主要是布局文章、内容方面内容。
- aside 侧边栏：一些外围信息、链接、引用、广告等。
- footer 页脚：通常包含版权声明或联系信息。
其他与语义化相关的标签：
- hgroup标题：若有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签。
- address地址： 代表“区块容器”, 必须是作为“联系信息”出现, 邮编地址、邮件地址等等,一般出现在 footer 。
- section节/区段：在一个网页中，可根据不同业务需求，对网页进行分节。如在一个电商主页中，可用
<section>将其分为导航栏、轮播图、商品分类、促销活动等等区域。
HTML5的十大新特性
- 语义标签
- 增强型表单
- 视频和音频
- Canvas绘图
- SVG绘图
- 地理定位 Geolocation
- 拖放API
- Web Worker
- Web Storage
- WebSocket
此处附上HTML5的十大新特性，方便提醒后续进行深入学习探索，关于HTML的重点知识内容，笔者认为是如何对标签以及属性进行贴切合理的运用，做到网页书写的一种规范化。
