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类型的元素，即它可以包含其他区块元素。
article
article 元素表示网页中完整的信息，比如论坛中的帖子、报纸中的报道、博客文章、用户评论或者其他独立完整的内容。
<article>
<header>
<h2>文章标题</h2>
<p>发表时间 评论数</p>
</header>
<p>内容段落</p>
</article>article 元素属于Sectioning content类型。
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类型。
nav
nav 元素用来表示一组连接到外部网页的链接，即导航条。
<nav>
<h1>Navigation</h1>
<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>nav 元素属于Sectioning content类型。
aside
Aside 元素用来表示和当前文档内容相关的区块，比如广告、相关链接以及其他和当前文档相关的内容。
aside 元素属于Sectioning content类型。
h1,h2,...h6
这些元素用来标记对应区块的标题，其中 h1 为最高级别，h6 为最低级别的子标题。
合理使用标题元素，也有利于搜索引擎对页面内容的理解。
建议使用标题元素来组织文档的大纲。在 chrome 浏览器中，安装"html5 outline"扩展可查看文档大纲。
一般而言，一个页面应该只有一个一级标题。
这些元素属于Heading content类型。
header
header 元素不同于 head 元素，header 用来标记文档的简介或者导航区域。
footer
footer 元素通常包括版权信息、相关文档、机构简介等等内容。