HTML5 语义元素|程序员教程

HTML5 语义元素

`<header>`

<header> 元素表示页面或区域的顶部，通常包含标题、导航和徽标等内容。

                <header>
                    <h1>网站标题</h1>
                    <nav>
                        <!-- 导航链接 -->
                    </nav>
                </header>

`<nav>`

<nav> 元素用于包裹页面的主要导航链接。虽然并非所有链接都需要放在 <nav> 内，但是它有助于突出显示重要的导航元素。

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

`<main>`

<main> 元素表示页面上的主要内容。一个页面应该只包含一个 <main> 元素，以便让搜索引擎和辅助技术更好地识别页面的主要部分。

                <main>
                    <article>
                        <!-- 文章内容 -->
                    </article>
                </main>

`<article>`

<article> 元素表示独立的、可以自包含的内容。这可以是一篇博客文章、论坛帖子或新闻报道等。

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

`<section>`

<section> 元素用于对页面内容进行组织和划分。它表示一个与页面主题相关的独立部分，通常包含标题元素（如 <h1> 至 <h6>）。

                <section>
                    <h2>相关文章</h2>
                    <ul>
                        <!-- 列表项 -->
                    </ul>
                </section>

`<aside>`

<aside> 元素表示与页面主内容相关但可独立存在的辅助信息，如侧栏、注释或广告等。

                <aside>
                    <h3>推荐阅读</h3>
                    <ul>
                        <!-- 列表项 -->
                    </ul>
                </aside>

`<footer>`

                <footer>
                    <p>© 2022 MyWebsite. All rights reserved.</p>
                </footer>

`<figure>` 和 `<figcaption>`

<figure> 元素用于表示嵌入到文档中的插图、照片或代码片段等内容，而与之相关的 <figcaption> 元素则可提供解释性文字。

                <figure>
                    <img src="image.jpg" alt="示例图片">
                    <figcaption>这是一张示例图片</figcaption>
                </figure>

以上就是一些常用的 HTML5 语义元素及其用法。通过使用这些元素，您可以创建出结构清晰、易于理解和访问的网页。在实际开发过程中，请确保充分测试不同浏览器对这些语义元素的兼容性。