【前端】HTML语义标签的作用与实践

最新推荐文章于 2025-08-04 14:37:55 发布

不懂可否

最新推荐文章于 2025-08-04 14:37:55 发布

阅读量1k

点赞数 20

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 html

在HTML中，语义标签（Semantic Tags） 是指能够明确描述其内容含义和目的的HTML元素。与<div>和`span>等通用容器不同，语义标签为浏览器、搜索引擎和辅助技术提供了清晰的内容结构信息。

标签	含义	使用场景
`<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>
<

200万优质内容无限畅学