HTML5 语义元素

在 HTML5 中，引入了许多新的语义化元素，这些元素可以让我们更好地描述页面的结构和内容，提高网页的可读性和可访问性。在本章节中，我们将介绍一些常用的 HTML5 语义元素，并举例说明它们的用法。

<header>

<header> 元素用于定义页面或区块的头部，通常包含网站的标题、导航栏等内容。一个页面可以包含多个 <header> 元素。

示例代码：

// www.javascriptcn.com code example
<header>
    <h1>我的网站</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>

<nav>

<nav> 元素用于定义页面的导航部分，包含一组导航链接。通常位于 <header> 或 <footer> 元素中。

示例代码：

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

<section>

<section> 元素用于定义页面的一个区块或部分，通常包含一个主题或内容。

示例代码：

<section>
    <h2>最新文章</h2>
    <article>
        <h3>文章标题</h3>
        <p>文章内容...</p>
    </article>
</section>

<article>

<article> 元素用于定义页面的一个独立的文章内容，可以独立于页面的其他内容进行分发或重用。

示例代码：

<article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
</article>

以上是 HTML5 中一些常用的语义元素，通过合理地使用这些元素，可以让我们的网页更加结构化和易于理解。