本页目录

HTML 理论知识点

HTML 语义化

HTML 语义化是指根据内容的结构化（内容语义化）来选择合适的标签（代码语义化），即用正确的标签做正确的事情

语义化的优点

HTML 语义化增强文档的可识别性

可以使页面在没有 CSS 样式表的情况下也能呈现出很好的内容结构
有利于 SEO 优化（爬虫依赖 HTML 的标签来确定渲染关键字的权重）
方便其他设备解析（屏幕阅读器、盲人阅读器）提升了用户体验
增强了代码的可读性和可维护性

常用的语义化标签

<article>：表示文章主体部分
<aside>：表示跟文章主体不那么相关的部分，一般包含导航、广告等工具性质的内容
<details> 和 <summary>：表示可以查看或隐藏的其他详细信息
<figure> 和 <figcaption>：表示与文章相关的图像、照片等流内容
<footer>：通常出现在尾部，包含作者信息、相关链接、版权信息等
<header>：表示导航或者介绍性的内容
<h1> ~ <h6>：表示文章中不同层级的标题
<main>：表示文章的主要内容
<nav>：表示导航
- 在 header 中大多表示文章目录
- 在 aside 中大多是关联页面或者是整站地图
<section>：表示文章中的“节”或“段”
<time>：表示日期或时间

HTML5 标签选择流程图

HTML5 标签选择流程图

HTML 中的语义 —— MDN

Copyright © 2019-present jeffery