【前端】HTML语义标签的作用与实践
在HTML中，语义标签（Semantic Tags） 是指能够明确描述其内容含义和目的的HTML元素。与<div>和`span>等通用容器不同，语义标签为浏览器、搜索引擎和辅助技术提供了清晰的内容结构信息。
为什么要使用语义标签？
- SEO优化：搜索引擎更容易理解页面内容结构
- 可访问性：屏幕阅读器能更准确地解析页面内容
- 代码可读性：开发者能直观理解文档结构
- 维护性：清晰的语义结构便于协作开发
常用语义标签一览表
| 标签 | 含义 | 使用场景 |
|---|---|---|
<header> | 页面/区块的头部 | 网站顶部LOGO、导航栏 |
<nav> | 导航区域 | 主导航菜单、侧边栏导航 |
<main> | 文档主体内容 | 页面核心内容区（唯一性：一个页面只能有一个） |
<article> | 独立内容区块 | 博客文章、新闻卡片、论坛帖子 |
<section> | 文档中的主题分区 | 章节、带标题的内容分组 |
<aside> | 侧边/辅助内容 | 相关链接、广告、引用内容 |
<footer> | 页面/区块的页脚 | 版权信息、联系方式、相关链接 |
<figure> | 独立媒体内容容器 | 包裹图片、图表、代码片段 |
<figcaption> | <figure>的标题 | 图片/图表的说明文字 |
<time> | 时间/日期 | 发布时间、事件日期 datetime属性提供机器可读格式 |
<mark> | 标记的文本 | 搜索关键词高亮、重点标注 |
<address> | 联系信息 | 作者/组织的联系方式 |
语义化布局示例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>语义标签示例</title>
</head>
<body><!-- 页眉 -->