HTML语义化的案例分析 | 青训营

HTML语言中每个元素的用途, 类型和行为都是由其语义决定的。语义化标签让人和搜索引擎更好的理解内容。HTML5 引入了很多新的语义元素, 提供了更准确的描述内容的方式。

HTML 语义化有什么意义？

首先, HTML语义化可以改进用户的浏览体验。比如读屏软件可以借助于正确的HTML标签来为盲人或视觉受限者读出网页的文本内容和组成。其次, 搜索引擎的爬虫也可以通过语义标签来理解网页的结构和内容, 而这对于SEO 是非常重要的。最后，使用语义化标签使得代码更具可读性，有利于团队开发和维护。

案例分析

假设一个常见的网页布局：顶部是导航栏，中部是文章，左边是菜单栏，右边是相关推荐，底部是版权信息。非语义的HTML标签可能这样写:

<div id="header"></div>
<div id="menu"></div>
<div id="main-content"></div>
<div id="related"></div>
<div id="footer"></div>

这样的HTML结构简单明了, 但缺乏明确的语义，而且对于以HTML语义化分析实际网站的HTML结构

HTML语义化是一种开发者约定俗成的编程思想，让人和机器更好地理解网页内容，而不仅仅是标签。例如，HTML5 提供了许多新的语义元素，如 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等。

让我们以CNN的网站为例。整个网站的主要布局非常清晰，可以看出HTML标签的语义化使用。

网站的页面结构大体上可以分为顶部导航、主要内容、侧边栏以及底部信息栏，透过HTML5的语义化标签，就可以看见它们分别用 <header>、<main>、<aside>、<footer> 来描述。

首先，<header> 标签明确地表示网页的开头，用于装载网站logo，一级导航和搜索栏等；接着，<nav> 标签则表示了网页上的主要导航区域，被用来包含所有的主要导航链接，这些不仅增加了代码的易读性，也利于搜索引擎更好地理解页面结构；然后，主要内容区则用 <main> 和 <article> 来描述，<main> 包含的是页面独特的内容部分，<article> 则是文章、博客、评论等可以独立完整的描述某个话题的区域。

其次，对于边栏 <aside>，通常放置插入内容，如轮播图、广告等，并不是主题内容。当然，无论在讲话或是做事，我们都应该能"有始有终"。例如，如果你在做一个项目，那么从开始规划，到执行，以及最终完成，这整个过程你都不能放松。中途放弃会让你荒废了已经投入的时间和精力，也可能会让期待你的完成的人失望。

在进行对话时，也是如此，如果我们在讲一个故事，或者讲解一个观点，突然中断可能会让对方感到困惑，不知道你的观点或者故事的全貌是什么。因此，为了保证有效的沟通，我们应该尽量做到有始有终，让对话能够连贯完整。