语义化概念：通过丰富的语义关系对数据进行逻辑化描述，便于数据人机可读、检索挖掘和共享交换，实现信息处理的自动化和智能化；即人类提供良好结构的、作为人能识别的数据给机器，让不同机器能准确高效的意会和处理数据反馈给人类。
语义化实现方案有多种，如RDF、RDFa、Microformats、Microdata等规范，虽其复杂性、数据模型、属性类型等特性不尽相同，但都支持HTML5语言，项目如有特定需求可采用相关规范，实现丰富的语义关系。本篇Web语义化仅从HTML5语言标准下的“标签语义”和“属性命名语义”两部分展开。
标签语义
Web重构工作主要是语义化排版文档信息，构建语义明确、结构清晰的文档，便于浏览器解析渲染、搜索引擎建立索引抓取页面，提升内容的交互性、可读性和可维护性，视觉呈现上即使没有引入样式，人还是能“愉快”的阅读主体内容，如标题就是标题、段落就是段落、列表就列表…
根据文档特征，在HTML 4.01规范中定义了大量的语义标签，如文本、列表、表格、链接、媒体对象、表单等范畴下的标签元素；在HTML 5中更为详细的规范化了文档特征，添加了新的标签元素用以更明确的定义和描述文档的结构，并且对所有元素按 Metadata、Flow、Sectioning、Heading、Phrasing、Embedded、Interactive 等属性重新定义了分类规则，如下图(来源：W3C/HTML 5.2 / 3.2.4.2. Kinds of content)：
合理使用语义标签，主要是分明层次嵌套、清晰标签职责。
属性命名语义
属性命名语义，主要是class、id、data-*等属性的命名，其中最主要的是class属性命名，主要有OOCSS、BEM、SMACSS、SUITCSS、Atomic等方案，各种方案都是意图通过样式命名让文档具备逻辑表达能力。OOCSS主要侧重样式的抽象、独立、封装与复用，BEM、SMACSS、SUITCSS主要侧重减轻样式对HTML层级结构嵌套依赖，Atomic主要侧重剥离具体样式表现的特性。
属性命名依赖于HTML结构，早期在项目中尝试过长命名、短命名方案，团队小、项目小都还可以定义与维护，在多人参与的一定规模的项目中，长命名kebab-case会变得很长很晦涩，短命名层级嵌套会变得越来越深，总有队友深怕会与他人产生冲突刻意为之。
属性命名具体实现建议：
- 采用
BEM + OOCSS + Atomic + SCSS/LESS/Stylus/PostCSS组合方案 - 样式用属性使用
.class，数据钩子使用#id - 不用‘大小、颜色、方位、形状’等表象的词
- JavaScript钩子属性名采用
j_lowerCamelCase前缀加小驼峰方式
BEM规则可参考：
Block独立模块：中横线Element子元素：俩下划线Modifier模块状态：一个下划线Block下的所有Element不考虑层级嵌套关系，扁平化处理都属于Block，即连续的__下划线只能出现一次
BEM实现为：
- 模块：
.block - 模块_状态：
.block_modifier - 模块__子元素：
.block__element - 模块__子元素_状态：
.block__element_modifier
附上常用命名词：
| 用途 | ClassName |
|---|---|
| 主次 | primary, secondary, accent, weak, bold, light 建议用于变量 |
| 大小 | base, normal, regular, small, medium, large, xlarge, xxlarge, xxxlarge 建议用于变量 |
| 结构 | site, page, topbar, header, footer, container, title, main, content, aside, pendant, section, module, wrapper, inner, row, column |
| 导航 | nav, navigation, navbar, menu, breadcrumb, prev, next, first, last, pagination, pager, forward, back, up |
| 列表 | list, item, group, panel |
| 组件 | alert, dialog, popover, modal, dropdown, tooltip, accordion, collapse, tabs, carousel, slide, media, card, colorpicker, timepicker, datepicker, datetimepicker, calendar, switch, select, radio, checkbox, transfer, upload, cascader, tree-select, label, badge, avatar, backtop, loading, spin, message, notification, overlay, steps, timeline, progress, scroll, rate, divider, spacer, gallery |
| 页面 | index, archive, detail, special, contact, search, about, forum |
| 状态 | default, toggle, active, current, cancel, checked, hover, focus, success, fail, warning, danger, info, error, close, on, off, in |
| 常用 | vertical, horizontal, btn, more, icon, attach |
扩展阅读：
（本篇结束）