html的语义化

说说对 html 语义化的理解

  1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  2. 有利于 SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  3. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  4. 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循 W3C 标准的团队都遵循这个标准,可以减少差异化。 HTML5 中新增加的很多标签(如:<article>、<nav>、<header> 和 <footer> 等) 就是基于语义化设计原则)下面就是语义化 html 代码;
js 复制代码
<div id="header">
   <h1>标题</h1>
   <h2>专注Web前端技术</h2>
</div>

总结一下,总之就是:

  • 用正确的标签做正确的事情!
  • html 语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
  • 在没有样式 CCS 情况下也以一种文档格式显示,并且是容易阅读的。
  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
相关推荐
数据狐(Datafox)几秒前
京东商品列表API技术解析与落地应用(含标准 JSON 示例)
java·大数据·前端·人工智能·python·数据分析·json
风萧何1 分钟前
架构艺术,是权衡的艺术。
前端·javascript·架构
YIAN3 分钟前
ESLint 新版 Flat Config 实战:团队代码风格统一,从这一份配置开始
前端·团队管理
计算机魔术师3 分钟前
英伟达单季营收逼近千亿美元,黄仁勋放话:真实需求远超想象
前端
明月_清风5 分钟前
看完这段关于"全插件化架构"的技术分析后,我整理了一份笔记
前端·后端
学习星球5 分钟前
DSA 面试精讲 · Trie 前缀树:一文掌握字符串前缀匹配
面试·职场和发展
YIAN10 分钟前
Next.js App Router 全栈实战:从 0 到 1 写一个 Todo 应用,前端后端一个项目搞定
前端·全栈·next.js
计算机魔术师15 分钟前
英伟达预计 2028 财年营收同比增 70%,黄仁勋称实际需求远高于此
前端
掘金酱26 分钟前
🔥 AI 时代,Token 就是你的数字燃料!晒账单,赢好礼!
前端·人工智能·ai编程
计算机魔术师31 分钟前
Warp用Claude搭自我改进智能体
前端