HTML 元素一览表
6 大类（按种类）、13 小类（按功能）
Last updated
6 大类（按种类）、13 小类（按功能）
Last updated
元素是网页的一部分。在 XML 和 HTML 中，元素可能包含数据项、文本块、图像，或什么都没有。一个典型的元素通常包括一个带属性的开始标签、文本内容和一个结束标签。
每个元素里可以放哪些内容，是由该元素的内容模型决定的。
虽然元素和标签的名称是一样的，但它们不是一个东西。
在 HTML 中，标签用于创建元素，而元素是由开始标签和结束标签组成的。所以，标签是在网页的源代码里，而元素则存在于 DOM 中——DOM 就是在浏览器中展示网页的文档模型。
文档的解析流程：源码字符串 → token → tag（标签）→ element（元素）
有 6 种不同的元素：
void elements，空元素
raw text elements，原始文本元素
escapable raw text elements，可转义的原始文本元素
template element，模板元素
foreign elements，外来元素
normal elements，普通元素
它们对应的元素有：
空元素
<meta>, <base>, <link>
<input>
<img>, <area>, <source>, <track>
<br>, <wbr>, <hr>, <col>
<embed>, <param>
原始文本元素
<script>, <style>
可转义的原始文本元素
<textarea>, <title>
模板元素
<template>
外来元素
来自 MathML 命名空间和 SVG 命名空间的元素
普通元素
除以上 5 种之外的所有元素
空元素只有一个开始标签（不能为空元素指定结束标签）
外来元素要么是一个开始标签加一个结束标签，要么是一个被标记为自闭合的开始标签
其余 4 种元素都是有一个开始标签和一个结束标签
为了方便理解和使用，我们按照功能对元素进行如下分类。
<html>
main root，HTML 文档的 root，root element
<head>
包含文档的 machine-readable 信息，即 metadata
<body>
section root，HTML 文档的 content，一个文档只能有一个
元数据包含了页面相关的信息。
<style>, <link>
样式
<script>, <noscript>
脚本
<meta>, <base>, <title>
帮助软件使用和渲染的数据（eg.浏览器/搜索引擎）
详细信息可查阅元数据。
内容块元素（content sectioning elements）允许我们将文档内容组织成逻辑片段，给页面内容创建一个 outline（大纲），比如 header、footer、navigation 以及标识内容的标题。
<main>
文档 <body> 的 main content area
一个文档只能有一个（可见的）<main>
<main> 里的内容应唯一，通常不包括多个页面的重复内容，比如侧边栏、导航链接、版权信息、站点logo、搜索框等
<main> 是纯信息类元素，它不影响文档的 outline（大纲），比如 <body>, <h1> 等会影响
ARIA 相关
main landmark（地标）
skip navigation 以快速定位到页面的 main content
<aside>
其内容与文档的 main content 间接相关
形式通常是 sidebar 或 call-out box
<nav>
提供 navigation links，可以去当前文档或其它文档
常见的，比如菜单、目录和索引
不是所有的链接都需要包含在 <nav> 中
比如 <footer> 中的链接列表，就不需要用 <nav> 包裹
<nav> 仅用于导航链接的 major block
一个文档可以有多个 <nav>
比如一个用于站点导航，一个用于页内导航
此时可以使用 aria-labelledby 和 id 来提高可访问性
屏幕阅读器可以使用此元素，来决定初始是否显示 navigation-only 内容
<nav> 元素的语义是提供链接，所以除了列表之外，它还可以包含其它类型的内容，比如带有 <a> 的一段话
<article>
表示一段自包含的内容，可以独立分发或重用
比如论坛帖子、文章、博客、产品卡片、评论、交互式小组件、以及任何其它的独立内容项
一个文档可以有多个 <article>
<article> 应该被识别（identified），通常是包含一个 <h1>~<h6> 子元素
<article> 元素可以嵌套，内部的表示与外部相关的 article，比如博客文章嵌套评论
相关元素
article 元素的作者信息，可以用 <address>
article 元素的发布日期和时间，可以用 <time datetime="2022-05-16 19:00">May 16</time>
<address>
提供 contact information 信息
比如居住地、URL、邮件地址、电话号码、社交账号、地理坐标等
<address> 应该包括联系人信息所指的姓名或组织名称
可描述 <article> 的作者信息
<address> 只能用来表示离其最近的 <article> 或 <body> 祖先元素的联系信息
<address> 不能相互嵌套，也不能有其它内容块标签
<address> 的默认样式类似 <em>
<header>
表示 introductory content（介绍性内容），通常是一组介绍信息或导航信息
可能包含一些标题元素, logo, search form, 作者姓名, 公司名称, slogan 等
当 <header> 的上下文是 <body> 时，它就定义了一个 banner 地标（landmark）
否则，就不被考虑成是 banner 地标了，比如当 <header> 是 <main>, <aside>, <nav>, <article>, <section> 等元素的后代
子元素不能包括 <header>, <footer>
祖先元素不能是 <header>, <footer>, <address>
<footer>
是离它最近的祖先“内容块”元素的 footer（页脚）
通常包含块的 author 信息、文档的 copyright 和相关 links
关于 author 的信息，可以包含在 <footer> 中的 <address> 元素里
<footer> 不会引入新的 outline（大纲）部分
子元素不能包括 <header>, <footer>
祖先元素不能是 <header>, <footer>, <address>
<h1>, <h2>
<h3>, <h4>
<h5>, <h6>
heading content
浏览器可以使用标题信息来自动生成文档的目录（a table of contents）
不跳级使用标题，始终从 <h1> 开始
一个页面应该只有一个 <h1> 元素，用来描述页面的内容（类似于文档的 <title> 元素）
一种论调：可以在内容块中随意嵌套，这会被屏幕阅读器自动处理
不要使用标题标签来改文本大小，应该用 CSS 控制
<section>
表示一段 generic standalone section
只有在没有更具体的语义元素来表示的时候用，比如搜索结果列表、地图及其控件
<section> 应该被识别（identified），通常是包含一个 <h1>~<h6> 子元素（尽量）
如果是仅仅需要一个样式包装器，可以用 <div>
browser reader mode（浏览器阅读器模式）功能在提取专门的阅读器视图时，会读取以上元素。
文本内容元素有助于 Accessibility 和 SEO，它们能标识出内容的目的和结构。
<ol>, <ul>, <li>
<dl>, <dt>, <dd>
<figure>, <figcaption>
<pre>
<blockquote>
<p>
<hr>
<div>
没啥语义，一般用于分块
内联文本定义单词/行或任意文本的含义、结构或样式。
<a>
<cite>, <q>
<code>, <samp>
<sub>, <sup>
<ruby>, <rp>, <rt>
<abbr>, <dfn>, <time>, <var>
<kbd>, <data>
<mark>
<strong>, <em>, <i>, <small>
<s>, <u>
<del>, <ins>
<br>, <wbr>
<bdi>, <bdo>
<span>
没啥语义，一般用于分组，为了样式/共享属性
图片、音频、视频。
<img>
<area>, <map>
<picture>, <source>
<audio>, <video>
<track>, <source>
<table>
<caption>
<colgroup>,<col>
<thead>, <tbody>, <tfoot>
<tr>, <th>, <td>
表单元素包含用于提交信息的可交互控件。
<form>
<input>, <button>
<textarea>
<select>, <optgroup>, <option>
<label>
<fieldset>, <legend>
<datalist>, <option>
<progress>, <meter>
<output>
<details>, <summary>
<dialog>
<menu>
<ul>的语义化表示（目前兼容性不好）
脚本元素可创建 dynamic content 和 Web applications。
<canvas>
可使用以下 API 绘制 graphics 和 animations - canvas scripting API - WebGL API
外来元素，它们不属于 HTML 命名空间，分别属于 SVG 和 MathML 命名空间。
<svg>
<math>
可直接写
<template> <slot>
用于嵌入网页或其它内容。
<iframe>, <portal>
<embed>
<object>, <param>
<font>, <basefont>, <big>, <blink>
<center>, <marquee>
用CSS更合适
<acronym>, <strike>, <rb>,<rtc>
<plaintext>, <tt>, <xmp>
<dir>, <menuitem>
<frameset>, <frame>, <noframes>
<keygen>
<shadow>, <content>
有更合适的替代元素
<image>, <bgsound>, <noembed>
<spacer>, <nobr>
非标准
<applet>, <hgroup>
一种论调：嵌套标题元素，从未被认为是最佳实践，是不合格的？详见
