新闻资讯类网站（比如新浪新闻首页部分结构示意）青训营笔记创作活动
● 语义化标签使用情况：
○ 通常会用 <header> 标签来包裹网站顶部的导航栏、logo等部分，清晰表明这是页面头部相关内容。例如 <header><nav>首页国际新闻...</nav>< img src="logo.png" alt="网站logo"></header>，这样一看就知道是头部区域的布局和导航元素所在。
○ 对于新闻文章列表部分，可能会使用 <article> 标签来包裹每一则新闻条目，里面再用 <h2> 等作为新闻标题元素（<article><h2>重磅新闻标题</h2><p>新闻简要内容描述...</p ></article>），很明确地划分出独立的内容单元，利于搜索引擎理解以及屏幕阅读器等辅助工具识别内容结构。
○ 使用 <footer> 标签放置版权信息、友情链接等页面底部相关内容，像 <footer><p>版权所有© 2024[新浪](coco://sendMessage?ext=%7B%22s%24wiki_link%22%3A%22https%3A%2F%2Fm.baike.com%2Fwikiid%2F6941268760440280328%22%7D&msg=%E6%96%B0%E6%B5%AA)新闻</p ><ul><li>合作媒体</li>...</ul></footer>，让人直观知晓这是页面底部区域。
● 非语义化标签差异（假如都用 <div> 替代上述语义化标签）：
○ 整个页面结构就全是 <div> 的层层嵌套，比如顶部原本用 <header> 的部分变成 <div class="top-part"><div class="nav">首页国际新闻...</div>< img src="logo.png" alt="网站logo"></div> ，这样单从代码上很难一眼看出哪个部分是真正的头部，对于代码维护者以及搜索引擎等来说理解页面布局和内容重点变得困难很多。
○ 新闻列表处若都用 <div> ，就会是类似 <div class="news-item"><div class="title">重磅新闻标题</div><div class="desc">新闻简要内容描述...</div></div> ，代码阅读性差，而且搜索引擎不能很好地抓取到这里面哪个是真正的文章主体、标题等关键语义信息，不利于页面在搜索结果中的呈现。
○ 底部用 <div> 代替 <footer> 同样会造成不清楚这部分到底承载什么功能的内容，像 <div class="bottom"><div class="copyright"><p>版权所有© 2024新浪新闻</p ></div><div class="links"><ul><li>合作媒体</li>...</ul></div></div>，结构混乱且不直观。
电商产品展示类网站（以淘宝商品详情页部分举例）
● 语义化标签使用情况：
○ 商品标题部分常用 <h1> 标签突出显示（<h1>时尚女士连衣裙[具体款式名称]</h1>），很明确地告诉浏览器和搜索引擎这是页面最重要的标题内容。
○ 商品图片展示区域可能会用 <figure> 标签包裹图片以及对应的图片说明（<figure>< img src="dress.jpg" alt="连衣裙正面展示图"><figcaption>连衣裙正面整体效果</figcaption></figure>），清晰划分出图片及其相关描述的结构。
○ 商品详情介绍的文本内容可以放在 <section> 标签内分段展示（<section><p>连衣裙材质为纯棉...</p ><p>尺码范围从S到XL...</p ></section>），方便组织内容以及后续样式控制和内容提取等操作。
● 非语义化标签差异（都用 <span> 等非语义化标签替换举例）：
○ 标题用 <span> 写成 <span class="title">时尚女士连衣裙[具体款式名称]</span> ，浏览器和搜索引擎无法准确知晓这是最重要的标题层级内容，在一些处理比如生成文档大纲等操作时就不能很好地识别其重要性。
○ 对于图片展示区域，若变成 <span class="img-wrapper">< img src="dress.jpg" alt="连衣裙正面展示图"><span class="img-caption">连衣裙正面整体效果</span></span> ，代码显得杂乱无章，不符合内容结构的逻辑表达，并且在屏幕阅读器等辅助工具读取时，也难以正确传达图片和其说明的关联关系。
○ 商品详情部分都用 <span> 来包裹文本如 <span>连衣裙材质为纯棉...</span><span>尺码范围从S到XL...</span> ，原本的段落性和内容关联性就被破坏了，不利于代码的后续拓展和维护，也影响页面整体的可访问性和对搜索引擎的友好程度。
总的来说，语义化标签让HTML结构清晰、易于理解和维护，对于搜索引擎优化、辅助工具适配等都有好处，而非语义化标签会让代码可读性变差、结构混乱，难以准确传达内容的逻辑和重要性等信息。
