💡HTML 元素一览表
6 大类（按种类）、13 小类（按功能）
元素是网页的一部分。在 XML 和 HTML 中，元素可能包含数据项、文本块、图像，或什么都没有。一个典型的元素通常包括一个带属性的开始标签、文本内容和一个结束标签。
每个元素里可以放哪些内容，是由该元素的内容模型决定的。
1. 元素 vs 标签
虽然元素和标签的名称是一样的，但它们不是一个东西。
在 HTML 中，标签用于创建元素，而元素是由开始标签和结束标签组成的。所以，标签是在网页的源代码里，而元素则存在于 DOM 中——DOM 就是在浏览器中展示网页的文档模型。
文档的解析流程：源码字符串 → token → tag（标签）→ element（元素）
2. 元素种类
有 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 种元素都是有一个开始标签和一个结束标签
3. 元素一览表
为了方便理解和使用，我们按照功能对元素进行如下分类。
3.1 文档结构
<html>
main root，HTML 文档的 root，root element
<head>
包含文档的 machine-readable 信息，即 metadata
<body>
section root，HTML 文档的 content，一个文档只能有一个
3.2 元数据
元数据包含了页面相关的信息。
<style>, <link>
样式
<script>, <noscript>
脚本
<meta>, <base>, <title>
帮助软件使用和渲染的数据（eg.浏览器/搜索引擎）
详细信息可查阅元数据。
3.3 内容块
内容块元素（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>元素）一种论调：可以在内容块中随意嵌套，这会被屏幕阅读器自动处理
一种论调：嵌套标题元素，从未被认为是最佳实践，是不合格的？详见 There Is No Document Outline Algorithm
不要使用标题标签来改文本大小，应该用 CSS 控制
<section>
表示一段 generic standalone section
只有在没有更具体的语义元素来表示的时候用，比如搜索结果列表、地图及其控件
<section>应该被识别（identified），通常是包含一个<h1>~<h6>子元素（尽量）如果是仅仅需要一个样式包装器，可以用
<div>
browser reader mode（浏览器阅读器模式）功能在提取专门的阅读器视图时，会读取以上元素。
3.4 文本内容
文本内容元素有助于 Accessibility 和 SEO，它们能标识出内容的目的和结构。
<ol>, <ul>, <li>
<dl>, <dt>, <dd>
<figure>, <figcaption>
<pre>
<blockquote>
<p>
<hr>
<div>
没啥语义，一般用于分块
3.5 内联文本
内联文本定义单词/行或任意文本的含义、结构或样式。
<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>
没啥语义，一般用于分组，为了样式/共享属性
3.6 多媒体资源
图片、音频、视频。
<img>
<area>, <map>
<picture>, <source>
<audio>, <video>
<track>, <source>
3.7 表格
<table>
<caption>
<colgroup>,<col>
<thead>, <tbody>, <tfoot>
<tr>, <th>, <td>
3.8 表单
表单元素包含用于提交信息的可交互控件。
<form>
<input>, <button>
<textarea>
<select>, <optgroup>, <option>
<label>
<fieldset>, <legend>
<datalist>, <option>
<progress>, <meter>
<output>
3.9 可交互
<details>, <summary>
<dialog>
<menu>
<ul>的语义化表示（目前兼容性不好）
3.10 脚本
脚本元素可创建 dynamic content 和 Web applications。
<canvas>
可使用以下 API 绘制 graphics 和 animations - canvas scripting API - WebGL API
3.11 SVG 和 MathML
外来元素，它们不属于 HTML 命名空间，分别属于 SVG 和 MathML 命名空间。
<svg>
<math>
可直接写
3.12 Web Components
<template> <slot>
3.13 内嵌内容
用于嵌入网页或其它内容。
<iframe>, <portal>
<embed>
<object>, <param>
3.14 已废弃
<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>
4. 主要参考
Last updated