HTML语义化标签有哪些？header和footer标签怎么用？

html语义化标签的作用是提升网页结构清晰度、可读性和seo效果，并增强无障碍访问。常见标签包括<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等。一、常见的语义化标签有<header>用于页面头部，<nav>用于导航区域，<main>表示主要内容区（每页仅一个），<article>代表独立内容块，<section>为带标题的区块，<aside>用于侧边栏，<footer>作为页面或区块的底部。二、<header>通常置于页面顶部或嵌套在<section>或<article>中作为局部头部，常包含标题、导航菜单、搜索框等功能。三、<footer>一般放在页面底部，用于展示版权信息、联系方式、社交链接等内容，也可嵌套在<article>或<section>内。四、使用时需注意：不能滥用标签如多个<main>，语义化标签不依赖样式需配合css使用，考虑老旧浏览器兼容性问题，且<section>应有标题而<div>仅为容器。合理使用语义化标签有助于提升网页结构和可访问性。

HTML语义化标签的作用是让网页结构更清晰、可读性更强，同时也有助于SEO和无障碍访问。常见的语义化标签包括<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等。

下面重点说说几个常用的语义化标签以及<header>和<footer>的使用方法。

一、常见的HTML语义化标签有哪些？

除了我们熟悉的<div>和<span>这些通用标签之外，HTML5引入了不少语义化标签，帮助开发者更好地描述页面内容的结构：

立即学习“前端免费学习笔记（深入）”；

• <header>：通常用于页面或区块的头部，比如网站的导航栏、标题区域。
• <nav>：表示导航链接部分，常见于顶部菜单或侧边栏导航。
• <main>：页面主要内容区域，每个页面只能有一个。
• <article>：独立的内容块，比如博客文章、新闻条目。
• <section>：文档中的一个区块，通常有标题。
• <aside>：侧边栏内容，与主内容相关但非核心。
• <footer>：页面或区块的底部区域，常用于版权信息、联系方式等。

这些标签虽然在外观上没有特殊样式，但在结构和语义表达上比<div>更有意义。

二、<header>标签怎么用？

<header>一般放在页面最顶部，也可以嵌套在某个<section>或<article>中作为局部头部。它通常包含：

• 网站Logo或标题
• 导航菜单（可以用<nav>包裹）
• 搜索框或其他辅助功能

例如：

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

<header>
  <h1>我的博客</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于我</a></li>
    </ul>
  </nav>
</header>

注意：不要在一个页面中多次使用<header>作为全局头部，除非它是某一块内容（如文章）的局部头部。

三、<footer>标签怎么用？

<footer>通常出现在页面底部，用来放置版权信息、联系方式、友情链接等内容。也可以嵌套在<article>或<section>里，表示该部分内容的结尾信息。

基本用法如下：

<footer>
  <p>&copy; 2025 我的博客. 保留所有权利。</p>
  <p>联系邮箱：<a href="mailto:me@example.com">me@example.com</a></p>
</footer>

有些网站会在<footer>中加入更多实用内容，比如社交媒体图标、站点地图、隐私政策链接等。这部分内容虽然不显眼，但对用户体验和SEO都很重要。

四、语义化标签使用的注意事项

虽然语义化标签能提升代码结构，但也有一些细节需要注意：

• 不能滥用：比如多个<main>或错误嵌套会破坏语义结构。
• 不是样式依赖：语义标签本身不会影响样式，需要配合CSS来布局。
• 兼容性考虑：现代浏览器都支持这些标签，但如果需要兼容老旧浏览器（比如IE），可能需要加一些处理脚本。

另外，像<section>和<div>的区别也容易混淆。简单来说，<section>应该有自己的标题（如<h1>~<h6>），而<div>只是纯粹的容器。

基本上就这些了，语义化标签并不复杂，但用好了能让网页结构更清晰，也更容易被搜索引擎和辅助工具识别。

以上就是HTML语义化标签有哪些？header和footer标签怎么用？的详细内容，更多请关注php中文网其它相关文章！