开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

有很多企业在招聘要求里，要求掌握html语义化。那么什么是语义化？为什么要语义化？都有哪些语义化标签呢？

什么是语义化

顾名思义，就是不通过内容就知道要表达的是什么。html语义化是标签本身就代表了某种特定含义。 比如，一个页面结构，通常包含页眉、页脚、主体内容、侧边内容。如下图：

这里面的所有标签都是语义化标签，代表了一定的含义：

• header：定义文档的页眉。
• main：规定文档的主要内容。对于文档来说应当是唯一的。在一个文档中，不能出现一个以上的main元素。
• footer：文档中的页脚部分。
• aside:定义其所处内容之外的内容。可用作文章的侧边栏。
• nav：定义导航链接的部分。
• article:代表了文档、页面或者是应用程序当中的独立完整可以被外部引用的内容。

为什么要语义化呢？

想想如果通篇都是div、span，那对于开发者或维护者来说，只能通过大量的注释才能读懂；对于浏览器来说，只能从大量的内容里提取。既不利于阅读维护，也不利于SEO推广。
语义化，

• 对于开发者来说，有利于修改、维护页面，增加可读性、可维护性
• 对于浏览器来说，能更好地展示页面，提高性能
• 对于搜索引擎来说，能快速提取关键词、排序，提升SEO优化效果
• 对于屏幕阅读器来说，可以给盲人读页面，达到无障碍阅读

语义化标签有哪些呢？

除了上面提到的结构标签外，常见的语义标签还有：

• blockquate：长引用。引述文本，默认新的一行显示。
• cite：短引用。指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。
• q：短引用。短的引述（跨浏览器问题，尽量避免使用）。
• time：标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。     
• abbr：解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。
• dfn：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
• address：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
• del：移除的内容。
• ins：添加的内容。
• code：标记代码。包含示例代码或者文件名 （< <  > >）
• pre：预格式化文本。保留文本固有的换行和空格。        
• meter：表示分数的值或者已知范围的测量结果。如投票结果。*
• progress：完成进度。可通过js动态更新value。

还想说一下input

input有很多属性，我所常用的是type、value、name、max、min、disabled、checked、autofoucus、readonly等，还有一些实用的属性被我忽略了：

• list:
  

引用包含输入字段的预定义选项的 datalist。结合datalist可以把输入框做成关键字模糊选择输入框。

<input list="countries" />
<datalist id="countries">
   <option>Greece</option>
   <option>United Kingdom</option>
   <option>United States</option>
</datalist>

• pattern：
  

规定用于验证输入字段的模式（正则表达式）

<form action="/example/html5/demo_form.asp" method="get">
    国家代码：<input type="text" name="country_code" pattern="[A-z]{3}" title="三个字母的国家代码" />
    <input type="submit" />
</form>

写在最后

虽然语义化对于大多前端来说都不陌生，但确很容易被忽略。写此文作为对自己的提醒。