article
article 元素表示网页中完整的信息，比如论坛中的帖子、报纸中的报道、博客文章、用户评论或者其他独立完整的内容。
<article>
<header>
<h2>文章标题</h2>
<p>发表时间 评论数</p>
</header>
<p>内容段落</p>
</article>article 元素属于Sectioning content类型。
HTML 结构元素
前端
HTML
HTML 中的结构元素用于定义网页的结构和语义，以便浏览器和搜索引擎能够正确地呈现和理解网页内容。通过这些结构元素的组合使用，我们可以创建复杂的网页布局和内容结构。
html元素
html 元素表示一个 HTML 文档的最顶端元素，或者是根元素，其他元素都包含于html元素之中。
html 元素有一个重要属性lang，用于指定文档的语言，以方便语音合成、翻译工具、浏览器等工具决定采用何种规则来处理网页。
下面的例子指定网页的内容为中文：
<!DOCTYPE html>
<html lang="zh">
<head>
<title>泰戈尔</title>
</head>
<body>
<p>离你越近的地方，路途越远；最简单的音调，需要最艰苦的练习。</p>
</body>
</html>文档元数据相关元素
head
head元素是html元素的第一个子元素，用来标记HTML文档的一系列元数据（如文档标题、作者、关键词、相关样式表、相关脚本等等）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
...title
title元素位于head元素之中，用来标记整个 HTML 文档的标题或名称，title元素不得重复出现。
base
base元素位于head元素之中，通过href属性设定文档基准 URL、通过target属性设定文档中所有超级链接的默认打开方式。
如：
<!DOCTYPE html>
<html>
<head>
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the <a href="archives.html">archives</a>.</p>
</body>
</html>上例中base元素href的值必须为绝对地址。p 元素中的超级链接最终实际地址为：
"http://www.example.com/news/archives.html"以下代码将使得网页中超级链接的打开方式设定为新建窗口打开：
<!DOCTYPE html>
<html>
<head>
<title>This is an example for the <base> element</title>
<base target="_blank" />
</head>
<body>
<p>Visit the <a href="http://www.baidu.com">archives</a>.</p>
<p>Visit the <a href="http://www.baidu.com" target="_self">archives</a>.</p>
</body>
</html>上例中的第一个超级链接将在新建窗口打开，第二个超级链接将在自身窗口打开。
link
link元素位于head元素中，用来连接和当前文档相关的外部资源。link元素必须指定rel属性。如：
<link rel="stylesheet" href="main.css" type="text/css">meta
meta元素用来标记不能被title、base、link、style 和 script元素标记的其他各种元数据，如网页关键词、版权信息、页面编码信息等等，最常见的是通过meta元素设定页面的编码信息：
<meta charset="UTF-8">字符编码是一项极为复杂的主题，字符编码指示文件将显示什么字符，在选择一种字符编码之前，必须确保所使用的文本编辑器能够使用这种编码方式保存文档（多数文本编辑器的默认编码方式就是 UTF-8）。Unicode 是一种表示所有字母和符号的可靠方式，Unicode 目前支持超过 99000 个字符。
meta元素除了拥有全局性属性外，还可设定name、http-equiv、content值。
<!DOCTYPE html>
<html lang="zh">
<head>
<!-- 指定页面编码方式 -->
<meta charset="utf-8">
<!-- 设定浏览器使用最新内核 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设定 HTML 文档的关键词 -->
<meta name="keywords" content="HTML5 技术">
<!-- 设定 HTML 文档的描述信息 -->
<meta name="description" content="HTML5 技术学习及练习">
<!-- 设定文档每隔 3 秒自动刷新频率 -->
<meta http-equiv="Refresh" content="3">
<!-- 设定文档在 1 秒后跳转到指定网址 -->
<meta http-equiv="Refresh" content="1; URL=page4.html">
<title>meta 元素实例</title>
</head>
<body>
</body>
</html>style
style元素是head元素的子元素，用来设定 HTML 文档的内部样式表。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My favorite book</title>
<style>
body { color: black; background: white; }
</style>
</head>
<body>
<p>My <em>favorite</em> book of all time has <em>got</em> to be
<cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
about the <i lang="la">Felis Catus</i> in modern human society.</p>
</body>
</html>区块元素
body
Body 元素用来标记全部文档内容。在 HTML 文档中，应该只能有一个 body 元素。
body 元素属于Sectioning root类型的元素，即它可以包含其他区块元素。
section
section 元素表示文档或者应用中一般意义上的分区，比如二级标题及段落的组合，就是一个分区。
<article class="book">
<header>
<h2>My Book</h2>
<p>A sample with not much content</p>
<p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
<h3>My First Chapter</h3>
<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">
<h3>It Continues: The Second Chapter</h3>
<p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
<h3>Chapter Three: A Further Example</h3>
<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">
<h3>Appendix A: Overview of Examples</h3>
<p>These are demonstrations.</p>
</section>
<section class="appendix">
<h3>Appendix B: Some Closing Remarks</h3>
<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>
</article>section 元素也属于Sectioning content类型。
aside
Aside 元素用来表示和当前文档内容相关的区块，比如广告、相关链接以及其他和当前文档相关的内容。
aside 元素属于Sectioning content类型。
h1,h2,…h6
这些元素用来标记对应区块的标题，其中 h1 为最高级别，h6 为最低级别的子标题。
合理使用标题元素，也有利于搜索引擎对页面内容的理解。
建议使用标题元素来组织文档的大纲。在 chrome 浏览器中，安装”html5 outline”扩展可查看文档大纲。
一般而言，一个页面应该只有一个一级标题。
这些元素属于Heading content类型。
header
header 元素不同于 head 元素，header 用来标记文档的简介或者导航区域。