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

研君
115 阅读4分钟

什么是语义化

语义化， 指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。

实际网站分析

标题：HTML语义化在个人博客网站中的实践

摘要：本篇笔记将分享在个人博客网站开发过程中如何应用HTML语义化的实践经验，包括页面结构、文章列表、评论区等元素的优化。通过语义化的HTML标签使用，提高可读性、搜索引擎友好性和用户体验。

1. 页面结构

个人博客网站通常由头部、导航、内容、侧边栏和底部组成。我们可以采用以下HTML标签来构建页面结构：

image.png

1693320613706.png 这是YouTube Official Blog中的一篇blog，所见页是该blog的<head>，我们继续往下看。

image.png 在这里我们可以看到这是 <main>。所以你的页面上只会有一个主标签，因为它是页面上最主要的内容。

下图是该blog的<footer>。 image.png

我们可以将上述案例简化成以下HTML标签来构建页面结构：

<header>
  <h1>个人博客</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">文章</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>最新文章</h2>
    <article>
      <h3>文章标题</h3>
      <p>文章摘要...</p>
      <a href="#">阅读更多</a>
    </article>
    <!-- 更多文章 -->
  </section>

  <aside>
    <h2>侧边栏</h2>
    <ul>
      <li><a href="#">分类1</a></li>
      <li><a href="#">分类2</a></li>
      <li><a href="#">分类3</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>版权信息 © 2023</p>
</footer>

在上述案例以及这个例子中，我们使用了语义化的标签来构建页面的结构。例如使用header、nav、main、section、article和footer标签分别表示页面的头部、导航、主要内容、文章区块和底部。同时，使用适当级别的标题标签（如h1、h2、h3）来为不同部分的标题赋予不同的重要性。

2.语义化标签介绍

<header>

  • 定义文章的介绍信息：标题，logo，slogan；包括目录部分，搜索框，一个nav或者任何相关的logo；
  • 一个页面中<header>的个数没有限制，可以为每个内容块添加一个header；

<nav>

  • 定义文章导航栏，链接等;
  • nav一般和u、li配合做导航栏；

<main>

  • 定义文章的主要内容
  • main标签在一份文档中是唯一的，其后代元素常常包括<article>；

<article>

  • 定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；

<section>

  • 与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；

<aside>

  • 侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；

<footer>

  • 页脚，通常包含作者、版权信息或者相关链接等；

3. 文章列表

博客网站的核心是文章内容，因此我们需要优化文章列表的展示。以下是本次案例网站的例子：

image.png 这些<section>在网页上所有模块都是彼此关联的，它们彼此都与这个标题息息相关。
我们可以将上述案例简化成以下:

<section>
  <h2>最新文章</h2>
  <ul>
    <li>
      <article>
        <h3>文章标题</h3>
        <p>文章摘要...</p>
        <a href="#">阅读更多</a>
      </article>
    </li>
    <!-- 更多文章 -->
  </ul>
</section>

在上述案例和这个例子中，我们使用section标签来表示最新文章的区块，使用ul和li标签来创建文章列表。每篇文章都被包含在article标签内，其中包括了标题、摘要和阅读更多的链接。

4.非语义化HTML结构

image.png

这里有很多 div，因为我们需要使用 div 为了去调整页面风格。

image.png 非语义化HTML结构使用了大量的<div>元素，但并未明确表示它们的作用。

5.结论

通过以上实践经验，我们可以看到HTML语义化的应用对于个人博客网站的开发非常重要。
它不仅使得代码更加清晰易读，也提升了搜索引擎友好性，同时改善了用户体验。
因此，在开发过程中，我们应该充分利用语义化的HTML标签来构建页面结构、文章列表和评论区等元素。

avatar
文章
阅读
粉丝