HTML语义化的案例分析 | 豆包MarsCode AI刷题

2024-11-20 82 阅读2分钟

什么是HTML语义化

HTML语义化指使用语义元素来描述内容的结构和意义。语义元素是拥有语义的元素，能够清楚地向浏览器和开发者描述其意义。

为什么需要语义化

非语义化

语义化

显然，语义化的代码更清晰易读，页面结构更明确。

语义化的意义

代码结构清晰：提高代码可读性和团队协作效率，使得代码更易于阅读和维护，有利于团队合作开发。
设备兼容性：帮助屏幕阅读器和其他辅助设备更好地解析页面内容，提高网站的可访问性。
搜索引擎优化：增强搜索引擎的爬取和理解能力（SEO），有助于搜索引擎更好地理解页面内容，提升网站在搜索结果中的排名。

常见语义元素

结构性标签

<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section>和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main>中。
<footer>：页脚。

内容性标签

<article>：独立的文章或内容区块。
<ul>：无序列表。
<ol>：有序列表。
<li>：列表。
<form>：表单。<fieldset>、<legend>、<label>、<input>组织表单元素。
<img>、<video>、<audio>：图像、视频和音频内容。

文本语义标签

<strong>：重要内容，通常加粗显示。
<em>：次要强调内容，通常斜体显示。
<mark>：高亮文本，常用于搜索结果。
<abbr>：定义缩写或缩略词，包含全称说明。
<blockquote>：引用较长文本。
<q>：引用短文本，通常加引号显示。
<time>：时间或日期，可设置机器可读格式。

表单类标签

<label>：定义描述性标签。
<fieldset>：分组相关的表单控件。
<legend>：为 <fieldset> 分组提供说明。
<button>：可点击的按钮，替代 <input type="button">。

案例分析

京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！

优点

部分区域使用语义化标签：
- 页面中使用了如 <header>、<footer> 等语义化标签，用于标识头部和底部区域。
SEO优化与内容分隔：
- 关键词的语义标签（如 <strong>、<em>）在特定商品描述中使用，用来突出重点内容。

不足

过度依赖非语义化标签：
- 页面中大量使用 <div> 和 <span>，降低了代码的可读性和语义表达效果。首页的商品分类、广告区域和导航模块，大多由嵌套的 <div> 实现，缺乏语义化标签（如 <section> 或 <article>、<nav>）来区分内容块。
辅助技术不足：
- 缺少无障碍功能，如动态组件缺乏适当的 aria-* 属性，不便于使用屏幕阅读器。