HTML语义化标签指的是具有特定含义和作用的HTML元素,这些元素有助于描述其所包含内容的意义和结构。使用语义化标签能够提升网页的可访问性、SEO优化效果,并使代码更具有可读性和维护性。以下是一些常见的HTML语义化标签:
1. <header>
表示页面或区块的头部,通常包含导航链接、页眉、标题等内容。
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
2. <nav>
表示页面的导航部分,包含链接到其他页面或页面内部不同部分的导航链接。
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
3. <main>
表示页面的主要内容部分,一个页面只能有一个<main>
元素。
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<section>
<h2>其他内容</h2>
<p>其他部分内容...</p>
</section>
</main>
4. <section>
表示文档中的一个区段或部分,通常包含一个标题。
<section>
<h2>节标题</h2>
<p>节内容...</p>
</section>
5. <article>
表示独立的内容块,比如一个博客文章或新闻文章。
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
6. <aside>
表示与页面主要内容相关但不是核心的部分,比如侧边栏、广告、引用等。
<aside>
<h2>侧边栏</h2>
<p>侧边栏内容...</p>
</aside>
7. <footer>
表示页面或区块的页脚部分,通常包含版权信息、联系方式等。
<footer>
<p>© 2024 公司名称. 版权所有.</p>
</footer>
8. <figure>
和 <figcaption>
<figure>
表示一组媒体内容,比如图片、图表、视频等;<figcaption>
为 <figure>
元素提供标题。
<figure>
<img src="image.jpg" alt="图片描述">
<figcaption>图片标题</figcaption>
</figure>
9. <time>
表示日期或时间,可以用于标记发布日期、会议时间等。
<p>文章发布于 <time datetime="2024-06-10">2024年6月10日</time></p>
这些语义化标签不仅使HTML结构更具有语义化和逻辑性,还有助于屏幕阅读器和搜索引擎理解页面内容,提升了网页的可访问性和SEO效果。在编写HTML时,尽量使用这些语义化标签来构建网页结构,有助于提高代码的质量和可维护性。