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
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
相关推荐
kyriewen6 分钟前
豆包和千问同时关了智能体,我用它们搭的 3 个自动化全废了——迁移方案整理
前端·javascript·ai编程
前端一小卒19 分钟前
我用 TypeScript 从零手写了一个 Claude Code,然后发现它的核心只有 30 行
前端·agent
Waay20 分钟前
面试口述版:个人对 Prometheus 完整理解
运维·学习·云原生·面试·职场和发展·kubernetes·prometheus
大圣编程2 小时前
Python中continue语句的用法是什么?
开发语言·前端·python
yuhaiqiang2 小时前
随手 vibecoding 的浏览器插件已经 6000 多次下载,聊聊他的产品设计
前端·后端·面试
之歆2 小时前
Vue商品详情与放大镜组件
前端·javascript·vue.js
再吃一根胡萝卜3 小时前
如何把小米 MiMo 接入 CodeBuddy,打造私有 Agent
前端
负责的蛋挞4 小时前
异步HttpModule的实现方式
java·服务器·前端
黄敬峰5 小时前
🚀 从 Prompt 到 Harness:AI 编程的下半场,我们如何给大模型套上“挽具”?
面试
用户852495071845 小时前
手搓自然语义搜索:从传统匹配到向量化,理解 RAG 的第一步
面试