HTML语义化的案例分析：分析一些实际网站的HTML结构，对比非语义化标签的差异；| 青训营

是小春呀
57 阅读3分钟

HTML的语义化是指使用恰当的HTML标签来表达页面内容的含义，下面前者使用了非语义化的HTML标签，后者使用了语义化的HTML标签。

非语义化的HTML

<div id="header">
    <div id="logo">我的网站</div>
    <div id="nav">
        <div class="item">首页</div>
        <div class="item">关于我们</div>
        <div class="item">联系我们</div>
    </div>
</div>
<div id="content">
    <div id="article">
        <div class="title">文章标题</div>
        <div class="body">文章内容...</div>
    </div>
</div>
<div id="footer">版权信息</div>

感觉这串代码是不是很low，所有的标签都是<div>标签，这种标签没有任何语义。虽然通过id和class可以理解每个元素的功能，但是当别人来看这个代码的时候，理解问题就是一个大问题了。也不是说看不懂，明显标志太差了，看起来难以让人理解。

语义化的HTML

<header>
    <h1>我的网站</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</main>
<footer>版权信息</footer>

这串代码看起来就舒服了许多，很容易让别人看出来我们在做些什么，使用了HTML5的语义化标签，如<header>、<nav>、<main>、<article>和<footer>，以及其他语义化标签，如<h1>、<h2>和<p>。更易于理解。

em...找一个实际网站来康康：就维基百科吧。

维基百科是一个大型的在线百科全书，采用了语义化的HTML标记来组织页面结构和内容。

下面是维基百科首页的一部分HTML代码片段（我简化了很多）：

<header id="mw-head" class="vector-menu vector-menu-portal portal">
    <div class="vector-menu-content">
        <div id="p-logo" class="vector-menu-heading">
            <a href="/wiki/Main_Page" title="Visit the main page"></a>
        </div>
        <ul id="p-navigation" class="vector-menu-content-list">
            <li id="n-mainpage-description" class="vector-menu-content-list-item">
                <a href="/wiki/Main_Page" title="Visit the main page">Main page</a>
            </li>
            <li id="n-contents" class="vector-menu-content-list-item">
                <a href="/wiki/Portal:Contents" title="Guides to browsing Wikipedia">Contents</a>
            </li>
            <!-- More navigation links -->
        </ul>
    </div>
</header>
<main id="content" class="mw-body" role="main">
    <div id="bodyContent" class="mw-body-content">
        <div id="siteNotice" class="mw-body-content"></div>
        <h1 id="firstHeading" class="firstHeading" lang="en">Main Page</h1>
        <div id="mw-content-text" class="mw-content-ltr">
            <!-- Page content -->
        </div>
    </div>
</main>
<footer id="footer" class="mw-footer" role="contentinfo">
    <!-- Footer content -->
</footer>

在这个例子中，维基百科使用了一系列语义化的HTML标签，如<header>、<main>、<footer>、<h1>、<ul>、<li>等。这些标签的使用明确地表示了它们所包含内容的含义和作用。

  • <header>标签用于表示页面的头部，其中包含了网站的标志和导航菜单。
  • <main>标签表示页面的主要内容区域，其中包含了页面的正文内容。
  • <footer>标签表示页面的底部，包含了版权信息等内容。
  • <h1>标签用于表示页面的主标题。
  • <ul>和<li>标签用于创建有序或无序列表，这里用于表示导航菜单。

相比之下，如果维基百科使用非语义化的标签，可能会类似于以下代码片段：

<div id="header">
    <div id="logo"><a href="/wiki/Main_Page" title="Visit the main page"></a></div>
    <div id="nav">
        <div class="item"><a href="/wiki/Main_Page" title="Visit the main page">Main page</a></div>
        <div class="item"><a href="/wiki/Portal:Contents" title="Guides to browsing Wikipedia">Contents</a></div>
        <!-- More navigation links -->
    </div>
</div>
<div id="content">
    <div id="bodyContent">
        <div id="siteNotice"></div>
        <div class="title">Main Page</div>
        <div id="mw-content-text">
            <!-- Page content -->
        </div>
    </div>
</div>
<div id="footer">
    <!-- Footer content -->
</div>

在这个非语义化的例子中，大量的<div>标签用于表示各个元素，而没有明确的语义。这样的代码会使得页面结构和内容的理解变得困难，对于搜索引擎和使用辅助技术的人来说也是如此。

通过对比这两个例子，我们可以清楚地看到语义化HTML的优势。语义化的HTML标签使得代码更易于理解和维护，同时提供了更好的可访问性和可读性。这有助于搜索引擎正确地解读页面内容，并能够为使用辅助技术的用户提供更好的访问体验。

维基百科作为一个大型的在线百科全书，通过使用语义化的HTML标签，能够更好地组织和呈现其丰富的内容。这是一个很好的例子，展示了语义化HTML在实际网站中的应用和好处。

所以说语义化在HTML代码中是十分重要的，如果失去了语义化，代码阅读对于我们团队合作时将会时一个较大的瓶颈。代码之间的交流会出现问题，同时使开发效率极大降低。

avatar
文章
阅读
粉丝