目的

让HTML标签说人话。

根据内容，选择合适的标签。

注意

语义不明显，使用<div>和<p>都可以时，使用<p>
不使用纯样式标签
- 如b，font，u等
- 用CSS设置
显示强调的文本
- 可以包含在<strong>或<em>标签中
- <strong>是加粗（不要用<b>）
- <em>是斜体(不要用<i>)
做表格
- 标题用<caption>
- 表头用<thead>
- 主体部分用<tbody>包围
- 尾部用<tfoot>包围
- 表头和一般单元格要分开
表单
- 表单域用<fieldset>标签包起来
- 用<legend>说明表单的用途
- 每个<input>对应的说明文本都用<label>
- 为input设置id属性
  - 在<label>中设置for=someld让说明文本和input关联起来

节点元素标签

节元素标签	文本元素标签	分组元素标签	嵌入元素标签
`<header></header>`	a（anchor 的缩写）	div	img（图片）
`<footer></footer>`	em(emphasis 的缩写)	p	iframe(页面)
`<hgroup></hgroup>`	strong	dl	video(视频)
`<nav></nav>`	p	dt	audio(音频)
`<aside></aside>`	b（bold 的缩写）	dd	canvas(绘画)
`<section></section>`	i（italic 的缩写）	ol
`<article></article>`	code	ul
`<body></body>`	q（quote 的缩写）	li
`<address>`	cite	hr
`h1-h6`	u （underline 的缩写）	blockquote
	abbr （abbreviation 的缩写）	pre
	dfn （defining instance 的缩写）	figure
	var	figcaption
	samp （sample 的缩写）
	kbd （keyboard 的缩写）
	wbr (word break)的缩写
	span
	br
	time
	mark

节元素标签详解

header

含义
- 代表“网页”或“section”的页眉
- 定义文档的页面组合，通常是引导和导航信息
使用
- 包含<h1>—<h6>元素，或者<hgroup>
  - 作为整个页面或者一个内容块的标题
  - 一节的目录部分
  - 一个搜索框
  - 一个<nav>
  - 任何相关<logo>
- 不限制<header>个数
代码

<header>
  <hgroup>
    <h1>网站标题</h1>
    <h1>网站副标题</h1>    
  </hgroup>
</header>

浏览器显示

footer

含义
- 代表“网页”或“section”的页脚（底部部分）
使用
- 包含该节的基本信息
  - 作者姓名
  - 文档创作日期
  - 联系信息
  - 相关文档链接
  - 版权资料
- 包含整个节，代表以下信息
  - 附录
  - 索引
  - 题跋
  - 许可协议
  - 标签、
  - 类别
- 没有个数限制
代码

<footer>
  COPYRIGHT@Cao
</footer>

浏览器显示

代码

<article>
  <h1>一篇文章</h1>
  <p>文章内容</p>
  <footer>
    <p><small>版权：XX所属，作者：XXX</small></p>
  </footer>
</article>

浏览器显示

代码

<!--article嵌套article-->
<article>
  <header>
    <h1>一篇文章</h1>
    <p><time putdate datetime="20180-4-23"></time></p>
  </header>
  
  <p>文章内容...</p>
  
  <article>
    <h2>评论</h2>
    <article>
      <header>
        <h3>评论者：XXX</h3>
        <p><time pubdate datetime="2018-04-23T14:30-15:30">~1 hour ago</time></p>
      </header>
      <p>我勒个去</p>
    </article>
    
    <article>
      <header>
        <h3>评论者：XXX</h3>
        <p><time pubdate datetime="2018-04-23T14:30-15:30">~1 hour ago</time></p>
      </header>
      <p>我勒？个？去？</p>
    </article>
  </article>
</article>

浏览器显示

代码

<!--article嵌套section-->
<article>
  <h1>前端技术</h1>
  <p>前端技术有哪些</p>
  
  <section>
    <h2>CSS</h2>
    <p>样式...</p>    
  </section>
  
  <section>
    <h2>JS</h2>
    <p>脚本</p>
  </section>
  
  <section>
    <h2>HTML</h2>
    <p>框架</p>
  </section>
</article>

浏览器显示

代码

<!--section嵌套article-->
<section>
  <h1>介绍：网站制作的成员配备</h1>
  
  <article>
    <h2>设计师</h2>
    <p>设计网页的</p>
  </article>
  
  <article>
    <h2>程序员</h2>
    <p>后台写程序的</p>
  </article>
  
  <article>
    <h2>前端工程师</h2>
    <p>给楼上两位打杂的</p>
  </article>
</section>

浏览器显示

hgroup

含义
- 代表“网页”或“section”的标题
使用
- 当元素有多个层级时，该元素将<h1>到<h6>元素放在其内
- 比如，文章主标题和副标题的组合
- 注意
  - 只需要一个h1-h6标签，不用hgroup
  - 连续多个h1-h6标签，使用hgroup
  - 连续多个标题和其他文章数据
    - h1-h6用hgruop包住
    - 其他文章数据放入header标签

nav

含义
- 代表页面的导航链接区域，定义页面的主要导航部分
使用
- 整个页面主要导航部分
- 侧边栏上目录
- 面包屑导航
- 搜索样式
- 下一篇上一篇文章
代码

<nav>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</nav>

浏览器显示

aside

含义
- 包含在<article></article>元素中作为主要内容的复述信息部分
- 内容
  - 与当前文章的有关的相关资料、标签、名词解释等
  - 相当于特殊的section
使用
- 侧边栏
  - 日志串联
  - 其他组的导航
  - 广告
- 没有article与之对应，最好不用

section

含义
- 代表文档中的“节”或“段”
  - “段”指的一篇文章按照主题的分段
  - “节”一个页面里的分组
使用
- 通常带标题，最好手动给标题降级
- 一张页面可以用section划分为简介、文章条目和联系信息
- 在文章内页，用article
- section不是一般意义上的容器元素
- 如果想作为样式展示和脚本的便利，可以用div
- 特殊的section
  - article
  - nav
  - aside
- 能用article、nav、aside就不用section
- 没实际意义就用div

article

含义
- 代表在一个文档，页面或者网站中自成一体的内容
- 目的是让开发者独立开发或者重用
使用
- 用途
  - 一篇论坛的帖子
  - 一则网站新闻
  - 一篇博客上的文章
  - 一篇用户的评论
  - 一个互动的widget小工具
- article会有一个标题（在header里），有一个footer页脚
- article里嵌套article
  - 内嵌的article应该与外部的内容相关，比如博客里的评论
- article里嵌套多个section
  - sectio部分虽然是独立的部分，但只能算是组成整体的一部分
  - section从属于article
- section里嵌套多个article
  - 每个article都是一个独立的整体
  - section将这些自成一体的article包裹，组成一个团体
- div
  - 只用来组合元素或者给元素加样式
- 自身独立的情况下，用article
- 是相关内容的，用section
- 没有语义的，用div
代码

<article>
  <p>内容</p>
  <aside>
    <h1>作者简介</h1>
    <p>Cao，一个学习者</p>    
  </aside>
</article>

浏览器显示

body

address

代表区块容器
作为联系信息出现，邮编，邮件地址等
一般出现在footer里

h1h6

允许出现多个h1

文本元素标签详解

a

用于定义超链接

em

em 是句意强调，加与不加会引起语义变化，也可以理解为局部强调，用在语句某个单词上来改变句子的侧重。

strong

strong表示重要，strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。

p

p元素

b

b 元素原本就是加粗，现在表示“文体突出”文字，
通俗讲是用来在文本中高亮显示某个或者几个字符，旨在引起用户的特别注意，无强调作用。
譬如文档概要中的关键字，评论中的产品名，以及分类名。

i

i 元素原本只是倾斜，
现在描述为在普通文章中突出不同意见或语气或其他的一段文本，就像剧本里的话外音（外语、译音）
也可以用做排版的斜体文字。

code

定义计算机代码文本。

q

用于定义一段引用的内容（短内容）

cite

用于定义引用内容出自书籍或杂志等的标题，不允许其他信息，如作者，日期等。

u

定义下划线文本

abbr

定义一个缩写文本，建议在 abbr 的 title 属性中描述缩写的全称

dfn

用于定义一个术语

var

定义计算机代码中的变量

samp

由程序输出的示例文本

kbd

定义由键盘输入的文本

wbr

定义换行的时机

span

没有任何语义

br

定义一个换行符

time

含义
- 标记一篇文章的发布时间
使用
- 格式
  - 2018年04月23日
- 组成
  - 机器可识别的时间戳：
    - 格式必须是年月日的数字以减号相隔，如果增加时间，那就在日期后面加字母T然后跟24小时格式的时间值以及时区偏移量，形如datetime="2018-4-23T15:10:40+08:00"
  - 人可识别的文本内容
    - 格式随意，只要能看懂。
  - 一个可选的pubdata标记
    - pubdata是个布尔值，如果需要，写上属性名就好pubdata。但是为了美观，我们也可以写成pubdata=""
注意
- time位于一个article中，那么它表示这篇文章的发布时间；
- 不在article之中表示整个文档的发布时间。
代码

<article>
  <header>
    <h1>XX公司<time datetime="2018-04-23">4月23日</time>成立</h1>
    <p>发布<time datetime="2018-04-24" pubdate>2018年4月24日</time>分类：前端交流</p>
  </header>
  <p>你好世界！</p>
</article>

浏览器显示

mark

定义有记号的文本。
需要突出文本时使用标签
代码

<p>Do not forget to buy <mark>milk</mark> today.</p>

浏览器显示

注意

在下面这些元素都不适合的时候：表重要的 strong ，表强调的 em ，表标题的 h1–h6，表高亮或标记文本的 p 等，就用 b 来表示。
em 的强调是用在语句某个单词上来改变句子的侧重，可以说是局部的，而strong 和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。

分组元素标签详解

div

p

dl

定义了定义列表（definition list）

dt

定义列表中的项目（即术语部分）

dd

描述列表中的项目

ol

start属性
- 定义列表编号的起始位置
reversed
- 表示将列表反转
代码

<ol start="4" reversed>
  <li>中国</li>
  <li>日本</li>
  <li>美国</li>
</ol>

浏览器显示

ul

li

hr

blockquote

标记一段长引文。
标记短引文（行内引文），用q元素

pre

定义预格式化的文本
被包围在pre元素中的文本通常会保留空格和换行符
文本呈现为等宽字体
用于表示源代码
pre和code的关系类似blockquote和q的关系

figure

包含一块独立内容（图像、图表、照片、代码等等）
该内容被移除掉不会对周围的内容有影响
用途
- 图片
- 统计表
- 图表
- 音频
- 视频
- 代码片段
不是所有图片都用figure来包裹
- 只是为了呈现图，不在其他地方引用，就不用figure
和上下文相关，可以移到附录，使用aside
aside内容更广
- 如果一段内容对周围内容来说是一个要点，很重要，可使用figure
- 否则使用aside

figcaption

给figure元素的内容加标题
只能作为figure元素的子元素
可以放在figure元素内的任何位置
一个figure内只能放一个figcaption元素，也可以不放

嵌入元素标签详解

img（图片）

iframe(页面)

video(视频)

audio(音频)

canvas(绘画)

具体演示代码见codepen

参考文章： HTML5语义化标签

关于语义化 HTML 以及前端架构的一点思考

About HTML semantics and front-end architecture

HTML Design Principles

文档描述

20180423初稿

HTML语义化 - zilongxuan001/LearnFreecode GitHub Wiki

目的

注意

节点元素标签

节元素标签详解

header

footer

hgroup

nav

aside

section

article

body

address

h1h6

文本元素标签详解

a

em

strong

p

b

i

code

q

cite

u

abbr

dfn

var

samp

kbd

wbr

span

br

time

mark

注意

分组元素标签详解

div

p

dl

dt

dd

ol

ul

li

hr

blockquote

pre

figure

figcaption

嵌入元素标签详解

img（图片）

iframe(页面)

video(视频)

audio(音频)

canvas(绘画)

文档描述

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️