- 案例网站一：新闻资讯类网站（语义化良好的例子）
- HTML 结构分析：
- 头部（
<header>）部分：通常会包含网站的标志（<img>标签结合<a>标签指向首页）、导航栏（<nav>）。例如，在一个新闻网站中，导航栏可能有 “国内新闻”、“国际新闻”、“财经新闻” 等分类链接。这些链接使用<a>标签包裹在<li>标签内，组成一个无序列表（<ul>）放置在<nav>标签中，这样的结构清晰地表明了这是一个用于页面导航的部分。
- 主体（
<main>）部分：这是展示新闻内容的主要区域。每一篇新闻可能会被包裹在一个<article>标签中。在<article>标签内部，会有新闻标题（<h1> - <h6>标签，通常新闻标题用<h1>）、新闻发布时间（可以使用<time>标签）、新闻作者（如果有）、新闻内容（<p>标签）等。例如：
<article>
<h1>重大科技突破：量子计算机取得新进展</h1>
<time datetime="2024 - 11 - 26T10:00:00">2024年11月26日10:00</time>
<p>科学家们在量子计算机领域取得了一项重大突破，这将对未来的计算技术产生深远的影响……</p>
</article>
- 侧边栏（
<aside>）部分：如果有相关新闻推荐或者广告等内容，会放在<aside>标签中。例如，一些热门新闻的链接列表或者与当前新闻主题相关的其他资讯推荐，以吸引用户进一步浏览。
- 底部（
<footer>）部分：包含网站的版权信息、联系方式、友情链接等内容。可能会有<p>标签用于版权声明，<ul>标签用于友情链接列表等。
- 与非语义化标签的差异：
- 若不使用语义化标签，可能会大量使用
<div>标签来划分页面区域。例如，头部部分可能是一个<div id="header">，导航栏是<div id="nav">，主体是<div id="content">等。这样的结构对于开发者来说可能容易理解其布局用途，但对于搜索引擎和屏幕阅读器等工具来说，很难明确每个部分的真实语义。搜索引擎在解析页面时，无法快速准确地识别出哪些是重要的内容区域（如新闻主体），哪些是辅助信息（如侧边栏）。屏幕阅读器也不能很好地为视障用户提供有逻辑的内容解读，比如无法明确区分新闻标题和普通文本。
- 案例网站二：电商产品展示网站（语义化良好的例子）
- HTML 结构分析：
- 头部（
<header>）部分：同样有网站标志和导航栏。导航栏可能包括 “商品分类”（如服装、电子产品等）、“购物车”、“用户中心” 等链接，其结构和新闻网站类似，<nav>标签包裹导航链接列表。
- 主体（
<main>）部分：对于产品展示，每个产品可能被包裹在一个<article>标签或者<section>标签中。以一个电子产品展示为例，在<article>标签内会有产品图片（<img>标签）、产品名称（<h2>标签）、产品价格（<p>标签结合一些特定的类名来进行样式设置和语义表示，如<p class="product - price">）、产品描述（<p>标签）、购买按钮（<button>标签）等。例如：
<article>
<img src="product - image.jpg" alt="智能手机产品图">
<h2>XX品牌智能手机</h2>
<p class="product - price">$599</p>
<p>这款智能手机拥有高分辨率屏幕、强大的处理器和出色的摄像头……</p>
<button>加入购物车</button>
</article>
- 侧边栏（
<aside>）部分：可能会有产品分类导航（更详细的分类列表）、热门产品推荐或者用户评价的摘要等内容。
- 底部（
<footer>）部分：包含公司信息、售后服务条款、隐私政策等链接和文本内容。
- 与非语义化标签的差异：
- 没有语义化标签时，使用
<div>标签划分区域。例如，产品展示部分可能全部是<div>标签，如<div class="product - container">来包裹产品信息。这会导致搜索引擎在索引产品信息时效率降低，因为它不能直观地识别产品的关键元素，如价格、名称等。对于屏幕阅读器来说，用户在浏览产品时，不能很好地通过语义信息了解正在阅读的是产品的哪个部分（是名称还是价格），降低了用户体验。
- 案例网站三：个人博客网站（语义化良好的例子）
- HTML 结构分析：
- 头部（
<header>）部分：包含博客名称（<h1>标签，同时也是网站标志的文字部分，可能结合<a>标签指向首页）和导航栏（<nav>），导航栏链接可能包括 “首页”、“文章分类”、“关于我” 等。
- 主体（
<main>）部分：每篇博客文章会被包裹在<article>标签中。在文章内部，有文章标题（<h2>标签）、发布日期（<time>标签）、文章内容（<p>标签）、评论区（可能是一个<section>标签，里面包含评论表单和已有评论列表）等。例如：
<article>
<h2>我的旅行日记 - 探索神秘的古老小镇</h2>
<time datetime="2024 - 11 - 20T14:30:00">2024年11月20日14:30</time>
<p>在一个阳光明媚的日子里，我踏上了前往那个古老小镇的旅程……</p>
<section class="comments">
<h3>评论</h3>
<ul>
<li><p>网友A：这听起来太有意思了！</p></li>
<li><p>网友B：你能分享更多关于小镇美食的内容吗？</p></li>
</ul>
<form>
<label for="comment - input">发表评论：</label>
<input type="text" id="comment - input">
<button>提交评论</button>
</form>
</section>
</article>
- 侧边栏（
<aside>）部分：可以有博主的个人简介、热门文章推荐、博客标签云等内容。
- 底部（
<footer>）部分：包括版权信息、社交媒体链接等。
- 与非语义化标签的差异：
- 若采用非语义化标签，如用
<div>标签代替所有的语义化标签。在文章部分，全部使用<div>标签划分区域会使文章结构混乱。例如，文章标题、日期、内容都用<div>包裹，搜索引擎难以理解文章的逻辑结构，无法准确地提取文章标题和发布时间等重要信息来进行更好的搜索结果展示。屏幕阅读器也会遇到同样的问题，不能有效地为用户提供文章结构的线索，用户可能会感到困惑，不知道正在阅读的内容是文章的哪一部分。
