一个HTML文档包括 <head> 部分和 <body> 部分：
<!DOCTYPE html>
<html>
<head>
......
</head>
<body>
......
</body>
</html>其中 <head> 元素的内容是不可见的，所有可见的内容都定义在 <body> 元素中。
<body> 元素又可以细分出一些基本组成部分，这些组成部分都有对应的标签，包括页眉 <header> 、导航栏 <nav> 、主内容 <main> 、页脚 <footer> ，主内容中还可以有各种子内容区段，比如文章 <article> 、边栏 <aside> ，如下图所示：
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>测试页面</title>
</head>
<body>
<header>
<h1>这是一个测试页面！</h1>
</header>
<nav> <!-- 本站统一的导航栏 -->
<ul>
<li><a href="#">主页</a></li>
<!-- 共 n 个导航栏项目，省略…… -->
</ul>
<form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
<input type="search" name="q" placeholder="要搜索的内容">
<input type="submit" value="搜索">
</form>
</nav>
<main> <!-- 网页主体内容 -->
<article>
<!-- 此处包含一个 article（一篇文章），内容略…… -->
</article>
<aside> <!-- 侧边栏在主内容右侧 -->
<h2>相关链接</h2>
<ul>
<li><a href="#">这是一个超链接</a></li>
<!-- 侧边栏有 n 个超链接，略略略…… -->
</ul>
</aside>
</main>
<footer> <!-- 本站所有网页的统一页脚 -->
<p>© 2050 某某保留所有权利</p>
</footer>
</body>
</html>注意事项：
<main>存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于<body>中。最好不要把它嵌套进其它元素。<article>包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。<section>与<article>类似，但<section>更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇<article>分成若干部分并分别置于不同的<section>中，也可以把一个区段<section>分成若干部分并分别置于不同的<article>中，取决于上下文。<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。<header>是简介形式的内容。如果它是<body>的子元素，那么就是网站的全局页眉。如果它是<article>或<section>的子元素，那么它是这些部分特有的页眉（此<header>非彼 标题）。<nav>包含页面主导航功能。其中不应包含二级链接等内容。<footer>包含了页面的页脚部分。