1.1 标签 <header>
HTML5语义标签帮助开发者创建更有结构和易于阅读的文档，同时提升了可访问性和SEO（搜索引擎优化）。这些标签提供更清晰的网页结构和内容描述。下面我们详细讨论一下主要的语义标签。
标签 <header> 用于表示内容或部分的标题。这个元素通常包含介绍信息、导航链接、标志、标题和其他与内容顶部相关的元素。
使用示例：
HTML
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
主要特点：
- 位置：标签
<header>可以用于整个文档，也可以用于单独的部分，比如<article>或<section>。 - 内容：通常包含标题、标志、导航元素和其他介绍元素。
1.2 标签 <footer>
标签 <footer> 用于表示内容或部分的底部。这个元素通常包含作者信息、相关文档链接、隐私政策、联系信息和其他与内容底部相关的元素。
使用示例：
HTML
<footer>
<p>© 2024 My Website</p>
<nav>
<ul>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#terms">Terms of Service</a></li>
</ul>
</nav>
</footer>
主要特点：
- 位置：标签
<footer>可以用于整个文档，也可以用于单独的部分，比如<article>或<section>。 - 内容：通常包含作者信息、法律信息、导航链接和其他结尾元素。
1.3 标签 <article>
标签 <article> 用于表示独立的自包含内容块，可以分发和重复使用。这可以是博客文章、新闻文章、评论、用户帖子等。
使用示例：
HTML
<article>
<header>
<h2>Blog Post Title</h2>
<p>Published on July 6, 2024</p>
</header>
<p>This is the content of the blog post. It can include text, images, and other media.</p>
<footer>
<p>Author: John Doe</p>
</footer>
</article>
主要特点：
- 独立性：标签
<article>用于可以独立使用和分发的内容。 - 结构：通常包含标题（
<header>）、主要内容和结尾部分（<footer>）。
应用：
- 文章
- 博客帖子
- 新闻
- 评论
优势：
- 标志独立的内容片段
- 帮助搜索引擎和其他服务识别和重复使用内容
1.4 标签 <section>
标签 <section> 用于定义主题相关的内容组。这可以是章节、部分或其他大的内容部分。与 <div> 不同，后者用于无语义意义的样式化和分组，<section> 有明确的语义意义。
使用示例：
HTML
<section>
<header>
<h2>About Us</h2>
</header>
<p>This section provides information about our company and its history.</p>
</section>
主要特点：
- 主题分组：标签
<section>用于将内容分为主题组。 - 结构：通常包含标题（
<header>）和主要内容。
应用：
- 文章内部的部分
- 主题相关的内容组
- 逻辑上可以区分的页面部分
优势：
- 提高文档的结构和可读性
- 帮助搜索引擎更好地理解和索引内容
GO TO FULL VERSION