HTML语义化的案例分析 | 语义化与非语义化标签

用户71042439630
171 阅读3分钟

笔记内容：分析一些实际网站的HTML结构，对比非语义化标签的差异

课程链接：前端与 HTML - 掘金

什么是 HTML 语义化？

HTML语义化是指使用具有明确意义的标签来编写网页内容，而不是仅仅为了布局或样式。语义化标签可以清楚地描述网页内容的结构和含义，使网页易读，易维护，并且有助于搜索引擎优化（SEO）和无障碍功能。

为什么要做到语义化？

  • 提高可读性：让开发者和其他人（如搜索引擎）更容易理解网页结构。
  • SEO优化：搜索引擎可以更好地理解页面内容，提升页面排名。
  • 增强可访问性：对于视力障碍的用户，使用语义化标签有助于屏幕阅读器正确解读网页内容。

非语义化：

语义化：

苹果官网语义化标签分析（网址）

image.png

展示一个选择不同机型尺寸的表单

结构层级：

  • <fieldset> 包含一个 <legend> 和多个产品选择项 <div class="rc-dimension-selector-row">。
  • 每个产品选择项有一个 <input> 和对应的 <label>，展示产品详细信息及价格。

第一部分，机型选择： <fieldset class="rc-dimension rf-bfe-product-dimension-group">...</fieldset>

<fieldset>: 通常用于将多个输入框、单选框、复选框等相关的表单元素包裹在一起，表示它们属于同一组

<legend>
    <h2 id="dimensionScreensize" class="rf-bfe-dimension-header typography-eyebrow" tabindex="-1">
        <span>机型： </span><span class="as-subheading">哪一款适合你？</span>
    </h2>
</legend>

<legend>: 提供该部分表单的标题，告诉用户这里是在选择“机型”

id ：标识页面中一个特定的元素。比如：通过 id 给该元素添加特殊样式 class ：将多个元素归类在一起，方便统一管理它们的样式或行为。比如：某几个部分的文字需要相同颜色

<div class="rc-dimension-selector-group form-selector-group">
    <div class="rc-dimension-selector-row form-selector">
        <label for=":r7:" class="form-selector-label" id=":r7:_label">
            <span class="row">
                <!--型号，尺寸，价格-->
            </span>
            <span class="form-label-small row rf-bfe-selector-subtext">
                <img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-selector-icon-apple-intelligence-202409?wid=34&hei=42&fmt=p-jpg&qlt=95&.v=1724970464935" alt="" width="17" height="21" class="ir">
                为 Apple 智能预备好
            </span>
        </label>
    </div>
</div>

在 <fieldset> 内部，有多个选择项，每个选择项是一个 单选按钮（radio button），用户可以选择其中一个。

  • 每个选择项都有一个 <input> 标签，用于实现单选按钮
  • 每个单选按钮都有一个 <label> 标签，点击文本部分可以选择对应的单选按钮
  • 机型名、尺寸、价格等内容 通过 span 标签来包装，定义不同的class来设置样式
  • <img> 标签用于显示图片，图片来源通过 src 属性指定，alt 提供了图片的文本描述

使用 <label> 标签可以让用户点击文本部分来选中单选按钮，而不仅仅是点击那个小小的单选按钮本身（<input type="radio"> ）。这让用户界面变得更加友好、易于操作

第二部分：协助选择机型： <div class="rf-bfe-decision-support">...</div>

<div class="rf-bfe-decision-support">
    <div class="rc-decisionsection as-util-relatedlink" data-trigger-click="click [data-relatedlink=':r9:_link']" data-autom="dimensionScreensize_decisionsection" data-analytics-region="selectionarea">
        <div class="rc-decisionsection-details typography-body-reduced">
            <div class="rc-decisionsection-info">
                <div id=":r9:" class="rc-decisionsection-header typography-body-reduced-tight">需要协助选择机型？</div>
                <div class="rc-decisionsection-desc typography-body-reduced-tight">了解不同屏幕尺寸和电池续航的区‍别。</div>
            </div>
        </div>
        <a href="/shop/browse/overlay/iphone/compare_models/iphone_16_pro" role="button" aria-labelledby=":r9:_showmore :r9:" data-relatedlink=":r9:_link" data-trigger-stoppropagation="true" data-ase-loader="buyflow-info-overlay-loader" data-ase-loader-action="load" data-display-name="AOS: overlay/iphone/compare_models/iphone_16_pro" class="rc-decisionsection-button" data-analytics-title="需要协助选择机型？">
            <span id=":r9:_showmore" class="visuallyhidden">展开</span>
        </a>
    </div>
</div>

主要用<div>（非语义化标签），依赖class 和 id 来定义样式和行为，起到结构化的作用

<a> 标签用于创建按钮样式的链接，允许用户跳转到其他页面。href 属性指定了目标链接的 URL

右上角的按钮引导用户到一个链接页面，进一步提供比较和选择功能

avatar
文章
阅读
粉丝