Skip to content

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

文章来源于自己总结和网络转载,内容如有任何问题,请大佬斧正!联系我