HTML5 版本的结构化元素

<article> 元素

用来定义 HTML 页面中的可独立分配或可复用结构

代码：

<article>
    <h1></h1>
    <p></p>
    <p><small></small></p>
</article>

<section> 元素

定义 HTML 页面中的独立部分，该独立部分没有更具体的的语义元素来描述该元素。

代码：

<section>
  <h1></h1>
  <p></p>
</section>

注：

关于 <section> 元素在开发中的使用时需要注意如下要点：

• 一般通过是否包含一个标题元素（<h1> ~ <h2>）作为子级元素来识别每一个 <section> 元素。
• 如果元素内容可以分为几个部分的话，应该使用 <article> 元素 而不是<section> 元素。
• 不要将 <article> 元素作为一个普通容器使用，这应该是 <div> 元素的用法。

<nav> 元素

HTML <nav> 元素用来定义 HTML 页面中的导航链接，比较常见的是菜单，目录和索引。

代码：

<nav>
    <ul>
        <li><a href="#">设计与构建静态网站</a></li>
        <li><a href="#">JavaScript基础核心语法</a></li>
        <li><a href="#">DOM编程艺术</a></li>
    </ul>
</nav>

效果：

<aside> 元素

用来定义一个和 HTML 页面中其余内容几乎无关的内容，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。通常比较常见的是侧边栏或者标注框。

<header> 元素

定义 HTML 页面中的具有引导和导航作用的内容，比较常见的是 Logo、搜索框、作者名称等。

一个 HTML 页面并没有限制只能出现一个 <header> 元素，可以为每个内容区块添加一个 <header> 元素。

<main> 元素

定义 HTML 页面中的主要内容。主内容区块指与页面标题或主要功能直接相关的内容。这部分内容在HTML页面中应当是独一无二的，不包含任何任何重复的内容。

注：

关于 <main> 元素在开发中的使用时需要注意如下要点：

• 一个 HTML 页面中只能出现一个 <main> 元素。
• <main> 元素不能出现在 <article> 元素、<aside> 元素、<main> 元素、<naw> 元素和 <footer> 元素的内部。

<footer> 元素

用来定义 HTML 元素中的一个章节内容或根元素的页脚。一个页脚通常包含该章节作者、版权数据或文档相关链接等信息。

关于 <footer> 元素在开发中的使用时需要注意 <footer>元素中的作者信息应该包含在 <address> 元素中。

拓展

空白处理

当浏览器运行并解析 HTML 页面时，遇到两个或两个以上的连续空格时，只将其显示为一个空格效果。这种特性叫做白色空间折叠。

<p>这是一个 段落内容.</p>
<p>这是另一个  段落内容.</p>

转义符

如果想要在浏览器运行 HTML 页面呈现出这些特殊字符，必须通过使用转义字符（有些资料称为实体引用）来实现。