HTML：动态标准
网页开发者版 — 最后更新于 2024年9月12日
网页开发者版 — 最后更新于 2024年9月12日
Introduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content
所有当前引擎都支持。
body 元素所有当前引擎都支持。
html 元素中的第二个元素。body 元素内的第一个内容不是 ASCII 空格 或 注释，则可以省略 body 元素的 开始标签，除非 body 元素内的第一个内容是 meta、noscript、link、script、style 或 template 元素。body 元素后面没有紧跟着 注释，则可以省略 body 元素的 结束标签。onafterprintonbeforeprintonbeforeunloadonhashchangeonlanguagechangeonmessageonmessageerroronofflineononlineonpageswaponpagehideonpagerevealonpageshowonpopstateonrejectionhandledonstorageonunhandledrejectiononunloadHTMLBodyElement。在符合标准的文档中，只有一个 body 元素。document.body IDL 属性使脚本可以轻松访问文档的 body 元素。
body 元素将 Window 对象的一些 事件处理程序内容属性 作为 事件处理程序内容属性 公开。它还镜像了它们的 事件处理程序 IDL 属性。
Window 对象的 事件处理程序（由 Window 反映的 body 元素事件处理程序集 命名），在 body 元素上公开，用相同名称的通用 事件处理程序（通常受 HTML 元素 支持）替换它们。
因此，例如，在 Document 的 body 元素 的子元素上分派的冒泡 error 事件将首先触发该元素的 onerror 事件处理程序内容属性，然后是根 html 元素的 onerror 事件处理程序内容属性，并且只有然后才会触发 body 元素上的 onerror 事件处理程序内容属性。这是因为事件将从目标冒泡到 body，到 html，到 Document，到 Window，并且 body 上的 事件处理程序 正在监视 Window 而不是 body。但是，使用 addEventListener() 附加到 body 的常规事件侦听器将在事件通过 body 冒泡时运行，而不是在事件到达 Window 对象时运行。
此页面更新一个指示器，以显示用户是否在线。
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Online or offline?</ title >
< script >
function update( online) {
document. getElementById( 'status' ). textContent =
online ? 'Online' : 'Offline' ;
}
</ script >
</ head >
< body ononline = "update(true)"
onoffline = "update(false)"
onload = "update(navigator.onLine)" >
< p > You are: < span id = "status" > (Unknown)</ span ></ p >
</ body >
</ html > article 元素所有当前引擎都支持。
HTMLElement。article 元素 表示 文档、页面、应用程序或网站中一个完整或独立的组合，并且原则上可以独立分发或重复使用，例如在联合发布中。这可能是一个论坛帖子、一篇杂志或报纸文章、一篇博客文章、用户提交的评论、一个交互式窗口小部件或小工具，或任何其他独立的内容项。
当 article 元素嵌套时，内部 article 元素表示原则上与外部文章内容相关的文章。例如，在一个接受用户提交评论的网站上的博客文章可以使用 article 元素来表示评论，这些评论嵌套在博客文章的 article 元素中。
与 article 元素关联的作者信息（参见 address 元素）不适用于嵌套的 article 元素。
当专门用于联合发布中要重新分发的内容时，article 元素的目的类似于 Atom 中的 entry 元素。[ATOM]
schema.org 微数据词汇表可用于使用 CreativeWork 子类型之一为 article 元素提供发布日期。
当页面的主要内容（即不包括页脚、页眉、导航块和侧边栏）都是一个独立的组合时，可以使用 article 来标记该内容，但在这种情况下，从技术上讲它是冗余的（因为页面是一个独立的组合是显而易见的，因为它是一个独立的文档）。
此示例显示了一个使用 article 元素的博客文章，其中包含一些 schema.org 注释。
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > The Very First Rule of Life</ h2 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</ p >
< p > ...</ p >
< footer >
< a itemprop = "discussionUrl" href = "?comments=1" > Show comments...</ a >
</ footer >
</ article > 这是同一篇博客文章，但显示了一些评论。
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > The Very First Rule of Life</ h2 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3 days ago</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</ p >
< p > ...</ p >
< section >
< h1 > Comments</ h1 >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/Comment" id = "c1" >
< link itemprop = "url" href = "#c1" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > George Washington</ span >
</ span ></ p >
< p >< time itemprop = "dateCreated" datetime = "2009-10-10" > 15 minutes ago</ time ></ p >
</ footer >
< p > Yeah! Especially when talking about your lobbyist friends!</ p >
</ article >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/Comment" id = "c2" >
< link itemprop = "url" href = "#c2" >
< footer >
< p > Posted by: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > George Hammond</ span >
</ span ></ p >
< p >< time itemprop = "dateCreated" datetime = "2009-10-10" > 5 minutes ago</ time ></ p >
</ footer >
< p > Hey, you have the same first name as me.</ p >
</ article >
</ section >
</ article > 请注意 footer 的用法，用于提供每个评论的信息（例如谁写了评论以及何时写）：footer 元素可以在适当的时候出现在其部分的开头，例如在这种情况下。（在这种情况下使用 header 也不是错误的；这主要取决于作者的偏好。）
在此示例中，article 元素用于在门户页面上承载窗口小部件。为了获得特定的样式和脚本行为，窗口小部件被实现为 自定义内置元素。
<!DOCTYPE HTML>
< html lang = en >
< title > eHome Portal</ title >
< script src = "/scripts/widgets.js" ></ script >
< link rel = stylesheet href = "/styles/main.css" >
< article is = "stock-widget" >
< h2 > Stocks</ h2 >
< table >
< thead > < tr > < th > Stock < th > Value < th > Delta
< tbody > < template > < tr > < td > < td > < td > </ template >
</ table >
< p > < input type = button value = "Refresh" onclick = "this.parentElement.refresh()" >
</ article >
< article is = "news-widget" >
< h2 > News</ h2 >
< ul >
< template >
< li >
< p >< img > < strong ></ strong >
< p >
</ template >
</ ul >
< p > < input type = button value = "Refresh" onclick = "this.parentElement.refresh()" >
</ article > section 元素所有当前引擎都支持。
HTMLElement。section 元素 表示 文档或应用程序的通用部分。在此上下文中，部分是指内容的主题分组，通常带有一个标题。
部分的示例包括章节、选项卡对话框中的各个选项卡页面或论文的编号部分。网站的首页可以分为介绍、新闻项目和联系信息等部分。
鼓励作者在可以联合发布元素内容时，使用 article 元素代替 section 元素。
<section> 元素不是一个通用的容器元素。当某个元素仅用于样式目的或作为脚本的便利时，建议作者改用 <div> 元素。一个通用的规则是，只有当元素的内容会在文档的 大纲 中被明确列出时，<section> 元素才适用。
在下面的例子中，我们看到一篇关于苹果的文章（网页的一部分），包含两个简短的章节。
< article >
< hgroup >
< h2 > Apples</ h2 >
< p > Tasty, delicious fruit!</ p >
</ hgroup >
< p > The apple is the pomaceous fruit of the apple tree.</ p >
< section >
< h3 > Red Delicious</ h3 >
< p > These bright red apples are the most common found in many
supermarkets.</ p >
</ section >
< section >
< h3 > Granny Smith</ h3 >
< p > These juicy, green apples make a great filling for
apple pies.</ p >
</ section >
</ article > 这是一个毕业典礼的节目单，有两个部分，一个是毕业人员名单，一个是典礼的描述。（此示例中的标记使用了有时用于最小化 元素间空白 数量的非常规样式。）
<!DOCTYPE Html>
< Html Lang = En
>< Head
>< Title
> Graduation Ceremony Summer 2022</ Title
></ Head
>< Body
>< H1
> Graduation</ H1
>< Section
>< H2
> Ceremony</ H2
>< P
> Opening Procession</ P
>< P
> Speech by Valedictorian</ P
>< P
> Speech by Class President</ P
>< P
> Presentation of Diplomas</ P
>< P
> Closing Speech by Headmaster</ P
></ Section
>< Section
>< H2
> Graduates</ H2
>< Ul
>< Li
> Molly Carpenter</ Li
>< Li
> Anastasia Luccio</ Li
>< Li
> Ebenezar McCoy</ Li
>< Li
> Karrin Murphy</ Li
>< Li
> Thomas Raith</ Li
>< Li
> Susan Rodriguez</ Li
></ Ul
></ Section
></ Body
></ Html > 在这个例子中，一位图书作者将一些章节标记为章节，一些标记为附录，并使用 CSS 对这两类章节的标题进行不同的样式设置。
< style >
section { border : double medium ; margin : 2 em ; }
section . chapter h2 { font : 2 em Roboto , Helvetica Neue , sans-serif ; }
section . appendix h2 { font : small-caps 2 em Roboto , Helvetica Neue , sans-serif ; }
</ style >
< header >
< hgroup >
< h1 > My Book</ h1 >
< p > A sample with not much content</ p >
</ hgroup >
< p >< small > Published by Dummy Publicorp Ltd.</ small ></ p >
</ header >
< section class = "chapter" >
< h2 > My First Chapter</ h2 >
< p > This is the first of my chapters. It doesn't say much.</ p >
< p > But it has two paragraphs!</ p >
</ section >
< section class = "chapter" >
< h2 > It Continues: The Second Chapter</ h2 >
< p > Bla dee bla, dee bla dee bla. Boom.</ p >
</ section >
< section class = "chapter" >
< h2 > Chapter Three: A Further Example</ h2 >
< p > It's not like a battle between brightness and earthtones would go
unnoticed.</ p >
< p > But it might ruin my story.</ p >
</ section >
< section class = "appendix" >
< h2 > Appendix A: Overview of Examples</ h2 >
< p > These are demonstrations.</ p >
</ section >
< section class = "appendix" >
< h2 > Appendix B: Some Closing Remarks</ h2 >
< p > Hopefully this long example shows that you < em > can</ em > style
sections, so long as they are used to indicate actual sections.</ p >
</ section > <nav> 元素所有当前引擎都支持。
HTMLElement。<nav> 元素 表示 页面中链接到其他页面或页面内部分的一节：包含导航链接的一节。
并非页面上的所有链接组都需要放在 <nav> 元素中——该元素主要用于包含主要导航块的部分。特别是，页脚通常包含一个指向站点各个页面的简短链接列表，例如服务条款、主页和版权页。在这种情况下，仅使用 <footer> 元素就足够了；虽然在这种情况下可以使用 <nav> 元素，但通常没有必要。
针对可以从初始渲染中省略导航信息或可以从立即提供的导航信息中受益的用户（例如屏幕阅读器）的用户代理可以使用此元素来确定页面上最初跳过或根据请求提供（或两者兼而有之）哪些内容。
在下面的例子中，有两个 <nav> 元素，一个用于站点的主要导航，另一个用于页面本身的辅助导航。
< body >
< h1 > The Wiki Center Of Exampland</ h1 >
< nav >
< ul >
< li >< a href = "/" > Home</ a ></ li >
< li >< a href = "/events" > Current Events</ a ></ li >
...more...
</ ul >
</ nav >
< article >
< header >
< h2 > Demos in Exampland</ h2 >
< p > Written by A. N. Other.</ p >
</ header >
< nav >
< ul >
< li >< a href = "#public" > Public demonstrations</ a ></ li >
< li >< a href = "#destroy" > Demolitions</ a ></ li >
...more...
</ ul >
</ nav >
< div >
< section id = "public" >
< h2 > Public demonstrations</ h2 >
< p > ...more...</ p >
</ section >
< section id = "destroy" >
< h2 > Demolitions</ h2 >
< p > ...more...</ p >
</ section >
...more...
</ div >
< footer >
< p >< a href = "?edit" > Edit</ a > | < a href = "?delete" > Delete</ a > | < a href = "?Rename" > Rename</ a ></ p >
</ footer >
</ article >
< footer >
< p >< small > © copyright 1998 Exampland Emperor</ small ></ p >
</ footer >
</ body > 在下面的例子中，页面在几个地方都存在链接，但只有一个地方被认为是导航部分。
< body itemscope itemtype = "http://schema.org/Blog" >
< header >
< h1 > Wake up sheeple!</ h1 >
< p >< a href = "news.html" > News</ a > -
< a href = "blog.html" > Blog</ a > -
< a href = "forums.html" > Forums</ a ></ p >
< p > Last Modified: < span itemprop = "dateModified" > 2009-04-01</ span ></ p >
< nav >
< h2 > Navigation</ h2 >
< ul >
< li >< a href = "articles.html" > Index of all articles</ a ></ li >
< li >< a href = "today.html" > Things sheeple need to wake up for today</ a ></ li >
< li >< a href = "successes.html" > Sheeple we have managed to wake</ a ></ li >
</ ul >
</ nav >
</ header >
< main >
< article itemprop = "blogPosts" itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > My Day at the Beach</ h2 >
</ header >
< div itemprop = "articleBody" >
< p > Today I went to the beach and had a lot of fun.</ p >
...more content...
</ div >
< footer >
< p > Posted < time itemprop = "datePublished" datetime = "2009-10-10" > Thursday</ time > .</ p >
</ footer >
</ article >
...more blog posts...
</ main >
< footer >
< p > Copyright ©
< span itemprop = "copyrightYear" > 2010</ span >
< span itemprop = "copyrightHolder" > The Example Company</ span >
</ p >
< p >< a href = "about.html" > About</ a > -
< a href = "policy.html" > Privacy Policy</ a > -
< a href = "contact.html" > Contact Us</ a ></ p >
</ footer >
</ body > 您还可以在上面的示例中看到使用 schema.org 词汇表提供博客文章的发布日期和其他元数据的微数据注释。
<nav> 元素不必包含列表，它也可以包含其他类型的内容。在此导航块中，链接以散文形式提供
< nav >
< h1 > Navigation</ h1 >
< p > You are on my home page. To the north lies < a href = "/blog" > my
blog</ a > , from whence the sounds of battle can be heard. To the east
you can see a large mountain, upon which many < a
href = "/school" > school papers</ a > are littered. Far up thus mountain
you can spy a little figure who appears to be me, desperately
scribbling a < a href = "/school/thesis" > thesis</ a > .</ p >
< p > To the west are several exits. One fun-looking exit is labeled < a
href = "https://games.example.com/" > "games"</ a > . Another more
boring-looking exit is labeled < a
href = "https://isp.example.net/" > ISP™</ a > .</ p >
< p > To the south lies a dark and dank < a href = "/about" > contacts
page</ a > . Cobwebs cover its disused entrance, and at one point you
see a rat run quickly out of the page.</ p >
</ nav > 在此示例中，<nav> 用于电子邮件应用程序，以允许用户切换文件夹
< p >< input type = button value = "Compose" onclick = "compose()" ></ p >
< nav >
< h1 > Folders</ h1 >
< ul >
< li > < a href = "/inbox" onclick = "return openFolder(this.href)" > Inbox</ a > < span class = count ></ span >
< li > < a href = "/sent" onclick = "return openFolder(this.href)" > Sent</ a >
< li > < a href = "/drafts" onclick = "return openFolder(this.href)" > Drafts</ a >
< li > < a href = "/trash" onclick = "return openFolder(this.href)" > Trash</ a >
< li > < a href = "/customers" onclick = "return openFolder(this.href)" > Customers</ a >
</ ul >
</ nav > <aside> 元素所有当前引擎都支持。
HTMLElement。<aside> 元素 表示 页面中的一节，该节包含与 <aside> 元素周围的内容间接相关的内容，并且可以被认为与该内容是分开的。此类部分通常在印刷排版中表示为侧边栏。
该元素可用于排版效果，如摘录或侧边栏、广告、<nav> 元素组以及其他被认为与页面主要内容分隔开的内容。
不建议仅将 <aside> 元素用于插入语，因为它们是文档主要流程的一部分。
以下示例显示了如何在较长的关于欧洲的新闻报道中使用 aside 来标记关于瑞士的背景资料。
< aside >
< h2 > Switzerland</ h2 >
< p > Switzerland, a land-locked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</ p >
</ aside > 以下示例显示了如何在较长的文章中使用 aside 来标记摘录。
...
< p > He later joined a large company, continuing on the same work.
< q > I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</ q ></ p >
< aside >
< q > People ask me what I do for fun when I'm not at work. But I'm
paid to do my hobby, so I never know what to answer.</ q >
</ aside >
< p > Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</ p >
...以下摘录显示了如何使用 <aside> 来为博客上的博客汇总和其他侧边内容。
< body >
< header >
< h1 > My wonderful blog</ h1 >
< p > My tagline</ p >
</ header >
< aside >
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
< nav >
< h2 > My blogroll</ h2 >
< ul >
< li >< a href = "https://blog.example.com/" > Example Blog</ a >
</ ul >
</ nav >
< nav >
< h2 > Archives</ h2 >
< ol reversed >
< li >< a href = "/last-post" > My last post</ a >
< li >< a href = "/first-post" > My first post</ a >
</ ol >
</ nav >
</ aside >
< aside >
<!-- this aside is tangentially related to the page also, it
contains twitter messages from the blog author -->
< h1 > Twitter Feed</ h1 >
< blockquote cite = "https://twitter.example.net/t31351234" >
I'm on vacation, writing my blog.
</ blockquote >
< blockquote cite = "https://twitter.example.net/t31219752" >
I'm going to go on vacation soon.
</ blockquote >
</ aside >
< article >
<!-- this is a blog post -->
< h2 > My last post</ h2 >
< p > This is my last post.</ p >
< footer >
< p >< a href = "/last-post" rel = bookmark > Permalink</ a >
</ footer >
</ article >
< article >
<!-- this is also a blog post -->
< h2 > My first post</ h2 >
< p > This is my first post.</ p >
< aside >
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
< h2 > Posting</ h2 >
< p > While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</ p >
</ aside >
< footer >
< p >< a href = "/first-post" rel = bookmark > Permalink</ a >
</ footer >
</ article >
< footer >
< p >< a href = "/archives" > Archives</ a > -
< a href = "/about" > About me</ a > -
< a href = "/copyright" > Copyright</ a ></ p >
</ footer >
</ body > <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 元素所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
所有当前引擎都支持。
<hgroup> 元素的子元素。HTMLHeadingElement。这些元素 表示 其所在部分的标题。
这些元素的语义和含义在关于 标题和大纲 的部分中定义。
这些元素具有由其名称中的数字给出的 标题级别。 标题级别 对应于嵌套部分的级别。<h1> 元素用于顶级部分，<h2> 用于子部分，<h3> 用于子子部分，依此类推。
就其各自的文档大纲（其标题和部分结构）而言，这两个片段在语义上是等价的
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< h2 > Diving in</ h2 >
< h2 > Simple shapes</ h2 >
< h2 > Canvas coordinates</ h2 >
< h3 > Canvas coordinates diagram</ h3 >
< h2 > Paths</ h2 >
</ body > < body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< section >
< h2 > Diving in</ h2 >
</ section >
< section >
< h2 > Simple shapes</ h2 >
</ section >
< section >
< h2 > Canvas coordinates</ h2 >
< section >
< h3 > Canvas coordinates diagram</ h3 >
</ section >
</ section >
< section >
< h2 > Paths</ h2 >
</ section >
</ body > 作者可能更喜欢前一种风格的简洁性，或者更喜欢后一种风格的额外样式挂钩。哪种更好纯粹是作者偏好的问题。
<hgroup> 元素所有当前引擎都支持。
<p> 元素，后跟一个 <h1>、<h2>、<h3>、<h4>、<h5> 或 <h6> 元素，然后是零个或多个 <p> 元素，可以选择与 脚本支持元素 交织在一起。HTMLElement。<hgroup> 元素 表示 标题和相关内容。该元素可用于将 <h1>–<h6> 元素与一个或多个 <p> 元素组合在一起，这些元素包含表示副标题、备用标题或标语的内容。
以下是一些包含在 <hgroup> 元素中的有效标题示例。
< hgroup >
< h1 > The reality dysfunction</ h1 >
< p > Space is not the only void</ p >
</ hgroup > < hgroup >
< h1 > Dr. Strangelove</ h1 >
< p > Or: How I Learned to Stop Worrying and Love the Bomb</ p >
</ hgroup > <header> 元素所有当前引擎都支持。
<header> 或 <footer> 元素后代。HTMLElement。<header> 元素 表示 一组介绍性或导航辅助。
<header> 元素旨在通常包含标题（<h1>–<h6> 元素或 <hgroup> 元素），但这不是必需的。<header> 元素也可用于包装部分的目录、搜索表单或任何相关的徽标。
以下是一些示例标题。第一个是游戏的标题
< header >
< p > Welcome to...</ p >
< h1 > Voidwars!</ h1 >
</ header > 以下代码段显示了如何使用该元素来标记规范的标题
< header >
< hgroup >
< h1 > Fullscreen API</ h1 >
< p > Living Standard — Last Updated 19 October 2015< p >
</ hgroup >
< dl >
< dt > Participate:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen" > GitHub whatwg/fullscreen</ a ></ dd >
< dt > Commits:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen/commits" > GitHub whatwg/fullscreen/commits</ a ></ dd >
</ dl >
</ header > <header> 元素不是 分节内容；它不会引入新的部分。
在此示例中，页面有一个由 <h1> 元素给出的页面标题，以及两个由 <h2> 元素给出的标题的子部分。<header> 元素之后的内容仍然是 <header> 元素中开始的最后一个子部分的一部分，因为 <header> 元素不参与 大纲 算法。
< body >
< header >
< h1 > Little Green Guys With Guns</ h1 >
< nav >
< ul >
< li >< a href = "/games" > Games</ a >
< li >< a href = "/forum" > Forum</ a >
< li >< a href = "/download" > Download</ a >
</ ul >
</ nav >
< h2 > Important News</ h2 > <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
< p > To play today's games you will need to update your client.</ p >
< h2 > Games</ h2 > <!-- this starts a third subsection -->
</ header >
< p > You have three active games:</ p >
<!-- this is still part of the subsection entitled "Games" -->
...<footer> 元素所有当前引擎都支持。
头部 或 脚注 元素后代。HTMLElement。footer 元素表示其最近的祖先 分节内容 元素或 body 元素（如果不存在这样的祖先）的脚注。脚注通常包含与其部分相关的信息，例如作者是谁、相关文档的链接、版权数据等等。
当footer 元素包含整个部分时，它们表示附录、索引、冗长的版权信息、详细的许可协议以及其他此类内容。
部分作者或编辑的联系信息应放在address 元素中，可能本身位于footer 内。署名和其他可能适合header 或footer 的信息可以放置在其中任何一个（或都不放）。这些元素的主要目的是帮助作者编写易于维护和设置样式的自解释标记；它们并非旨在强加于作者特定的结构。
脚注不一定必须出现在部分的末尾，尽管它们通常是如此。
当不存在祖先 分节内容 元素时，它适用于整个页面。
这是一个包含两个脚注的页面，一个在顶部，一个在底部，内容相同。
< body >
< footer >< a href = "../" > Back to index...</ a ></ footer >
< hgroup >
< h1 > Lorem ipsum</ h1 >
< p > The ipsum of all lorems</ p >
</ hgroup >
< p > A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</ p >
< footer >< a href = "../" > Back to index...</ a ></ footer >
</ body > 这是一个示例，它显示了footer 元素既用于站点范围的脚注，也用于部分脚注。
<!DOCTYPE HTML>
< HTML LANG = "en" >< HEAD >
< TITLE > The Ramblings of a Scientist</ TITLE >
< BODY >
< H1 > The Ramblings of a Scientist</ H1 >
< ARTICLE >
< H1 > Episode 15</ H1 >
< VIDEO SRC = "/fm/015.ogv" CONTROLS PRELOAD >
< P >< A HREF = "/fm/015.ogv" > Download video</ A > .</ P >
</ VIDEO >
< FOOTER > <!-- footer for article -->
< P > Published < TIME DATETIME = "2009-10-21T18:26-07:00" > on 2009/10/21 at 6:26pm</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< ARTICLE >
< H1 > My Favorite Trains</ H1 >
< P > I love my trains. My favorite train of all time is a Köf.</ P >
< P > It is fun to see them pull some coal cars because they look so
dwarfed in comparison.</ P >
< FOOTER > <!-- footer for article -->
< P > Published < TIME DATETIME = "2009-09-15T14:54-07:00" > on 2009/09/15 at 2:54pm</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< FOOTER > <!-- site wide footer -->
< NAV >
< P >< A HREF = "/credits.html" > Credits</ A > —
< A HREF = "/tos.html" > Terms of Service</ A > —
< A HREF = "/index.html" > Blog Index</ A ></ P >
</ NAV >
< P > Copyright © 2009 Gordon Freeman</ P >
</ FOOTER >
</ BODY >
</ HTML > 某些站点设计具有有时称为“粗脚注”的内容——包含大量内容的脚注，包括图像、其他文章的链接、发送反馈的页面的链接、特别优惠……在某些方面，脚注中包含了一个完整的“首页”。
此片段显示了具有“粗脚注”的站点的页面的底部。
...
< footer >
< nav >
< section >
< h1 > Articles</ h1 >
< p >< img src = "images/somersaults.jpeg" alt = "" > Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. < a href = "articles/somersaults/1" > Part
1</ a > · < a href = "articles/somersaults/2" > Part 2</ a ></ p >
< p >< img src = "images/kindplus.jpeg" > Tired of walking on the edge of
a clif<!-- sic --> ? Our guest writer Lara shows you how to bumble
your way through the bars. < a href = "articles/kindplus/1" > Read
more...</ a ></ p >
< p >< img src = "images/crisps.jpeg" > The chips are down, now all
that's left is a potato. What can you do with it? < a
href = "articles/crisps/1" > Read more...</ a ></ p >
</ section >
< ul >
< li > < a href = "/about" > About us...</ a >
< li > < a href = "/feedback" > Send feedback!</ a >
< li > < a href = "/sitemap" > Sitemap</ a >
</ ul >
</ nav >
< p >< small > Copyright © 2015 The Snacker —
< a href = "/tos" > Terms of Service</ a ></ small ></ p >
</ footer >
</ body > address 元素所有当前引擎都支持。
header、footer 或address 元素后代。HTMLElement。address 元素表示其最近的article 或body 元素祖先的联系信息。如果那是 body 元素，则联系信息适用于整个文档。
例如，W3C 网站上与 HTML 相关的页面可能包含以下联系信息。
< ADDRESS >
< A href = "../People/Raggett/" > Dave Raggett</ A > ,
< A href = "../People/Arnaud/" > Arnaud Le Hors</ A > ,
contact persons for the < A href = "Activity" > W3C HTML Activity</ A >
</ ADDRESS > address 元素不得用于表示任意地址（例如邮政地址），除非这些地址实际上是相关的联系信息。（p 元素是通常用于标记邮政地址的适当元素。）
address 元素不得包含联系信息以外的信息。
例如，以下是address 元素的非符合性用法。
< ADDRESS > Last Modified: 1999/12/24 23:37:50</ ADDRESS > 通常，address 元素将与footer 元素中的其他信息一起包含。
在此示例中，脚注包含联系信息和版权声明。
< footer >
< address >
For more details, contact
< a href = "mailto:[email protected]" > John Smith</ a > .
</ address >
< p >< small > © copyright 2038 Example Corp.</ small ></ p >
</ footer > h1–h6 元素具有标题级别，该级别由元素名称中的数字给出。
这些元素表示标题。标题的标题级别越低，标题拥有的祖先部分就越少。
大纲应用于生成文档大纲，例如在生成目录时。在创建交互式目录时，条目应将用户跳转到相关的标题。
如果文档有一个或多个标题，则大纲中至少应有一个标题的标题级别为 1。
每个标题在大纲中紧跟另一个标题lead之后，其标题级别必须小于、等于或比lead的标题级别大 1。
以下示例是非符合性的。
< body >
< h1 > Apples</ h1 >
< p > Apples are fruit.</ p >
< section >
< h3 > Taste</ h3 >
< p > They taste lovely.</ p >
</ section >
</ body > 可以按如下方式编写，然后它将符合规范。
< body >
< h1 > Apples</ h1 >
< p > Apples are fruit.</ p >
< section >
< h2 > Taste</ h2 >
< p > They taste lovely.</ p >
</ section >
</ body > 以下标记片段。
< body >
< hgroup id = "document-title" >
< h1 > HTML: Living Standard</ h1 >
< p > Last Updated 12 August 2016</ p >
</ hgroup >
< p > Some intro to the document.</ p >
< h2 > Table of contents</ h2 >
< ol id = toc > ...</ ol >
< h2 > First section</ h2 >
< p > Some intro to the first section.</ p >
</ body > …导致 3 个文档标题。
<h1>HTML：生活标准</h1>
<h2>目录</h2>.
<h2>第一部分</h2>.
大纲的呈现视图可能如下所示。
首先，这是一个文档，它是一本章节和子部分都很短的书。
<!DOCTYPE HTML>
< html lang = en >
< title > The Tax Book (all in one page)</ title >
< h1 > The Tax Book</ h1 >
< h2 > Earning money</ h2 >
< p > Earning money is good.</ p >
< h3 > Getting a job</ h3 >
< p > To earn money you typically need a job.</ p >
< h2 > Spending money</ h2 >
< p > Spending is what money is mainly used for.</ p >
< h3 > Cheap things</ h3 >
< p > Buying cheap things often not cost-effective.</ p >
< h3 > Expensive things</ h3 >
< p > The most expensive thing is often not the most cost-effective either.</ p >
< h2 > Investing money</ h2 >
< p > You can lend your money to other people.</ p >
< h2 > Losing money</ h2 >
< p > If you spend money or invest money, sooner or later you will lose money.
< h3 > Poor judgement</ h3 >
< p > Usually if you lose money it's because you made a mistake.</ p > 其大纲可以按如下方式呈现。
文档可以包含多个顶级标题。
<!DOCTYPE HTML>
< html lang = en >
< title > Alphabetic Fruit</ title >
< h1 > Apples</ h1 >
< p > Pomaceous.</ p >
< h1 > Bananas</ h1 >
< p > Edible.</ p >
< h1 > Carambola</ h1 >
< p > Star.</ p > 文档的大纲可以按如下方式呈现。
<!DOCTYPE HTML>
< html lang = "en" >
< title > We're adopting a child! — Ray's blog</ title >
< h1 > Ray's blog</ h1 >
< article >
< header >
< nav >
< a href = "?t=-1d" > Yesterday</ a > ;
< a href = "?t=-7d" > Last week</ a > ;
< a href = "?t=-1m" > Last month</ a >
</ nav >
< h2 > We're adopting a child!</ h2 >
</ header >
< p > As of today, Janine and I have signed the papers to become
the proud parents of baby Diane! We've been looking forward to
this day for weeks.</ p >
</ article >
</ html > 文档的大纲可以按如下方式呈现。
以下示例符合规范，但不建议使用，因为它没有标题的标题级别为 1。
<!DOCTYPE HTML>
< html lang = en >
< title > Alphabetic Fruit</ title >
< section >
< h2 > Apples</ h2 >
< p > Pomaceous.</ p >
</ section >
< section >
< h2 > Bananas</ h2 >
< p > Edible.</ p >
</ section >
< section >
< h2 > Carambola</ h2 >
< p > Star.</ p >
</ section > 文档的大纲可以按如下方式呈现。
以下示例符合规范，但不建议使用，因为第一个标题的标题级别不是 1。
<!DOCTYPE HTML>
< html lang = en >
< title > Feathers on The Site of Encyclopedic Knowledge</ title >
< h2 > A plea from our caretakers</ h2 >
< p > Please, we beg of you, send help! We're stuck in the server room!</ p >
< h1 > Feathers</ h1 >
< p > Epidermal growths.</ p > 文档的大纲可以按如下方式呈现。
鼓励用户代理向用户公开页面大纲以帮助导航。对于非视觉媒体（例如屏幕阅读器）尤其如此。
例如，用户代理可以按如下方式映射箭头键。
| 元素 | 目的 |
|---|---|
| 示例 | |
body
| 文档的内容。 |
| |
article
| 文档、页面、应用程序或站点中完整或独立的组合，原则上可以独立分发或重复使用，例如在联合发布中。这可能是论坛帖子、杂志或报纸文章、博客文章、用户提交的评论、交互式窗口小部件或小工具，或任何其他独立的内容项目。 |
| |
section
| 文档或应用程序的通用部分。在此上下文中，部分是内容的主题分组，通常带有标题。 |
| |
nav
| 页面的一部分，用于链接到其他页面或页面内的部分：包含导航链接的部分。 |
| |
aside
| 页面的一部分，其内容与aside 元素周围的内容相关，可以将其视为与该内容分离。此类部分在印刷排版中通常表示为侧边栏。 |
| |
h1–h6 | 标题 |
| |
hgroup
| 标题和相关内容。该元素可用于将h1–h6 元素与一个或多个p 元素组合，这些元素包含表示副标题、替代标题或标语的内容。 |
| |
header
| 一组介绍性或导航辅助工具。 |
| |
footer
| 其最近的祖先 分节内容 元素或 body 元素（如果不存在这样的祖先）的脚注。脚注通常包含与其部分相关的信息，例如作者是谁、相关文档的链接、版权数据等等。 |
|
section 构成其他内容的一部分。article 是其自身的内容。但是，如何区分两者？大多数情况下，真正的答案是“取决于作者的意图”。
例如，可以想象一本包含“青苹果”章节的书，其中只写着“这些多汁的青苹果是制作苹果派的绝佳馅料。”；这将是一个章节，因为可能还有许多其他章节（也许）介绍其他种类的苹果。
另一方面，可以想象一条推特、Reddit 评论、Tumblr 帖子或报纸分类广告，其中只写着“青苹果。这些多汁的青苹果是制作苹果派的绝佳馅料。”；那么它将是文章，因为这就是全部内容。