HTML语义化的学习

风风836
93 阅读3分钟

介绍

HTML语义化是指使用HTML标签实现视觉效果或布局的同事清晰地表达内容的结构和含义。语义化标签使网页更容易理解和维护，对搜索引擎优化（SEO）和辅助技术（比如屏幕阅读器）大有帮助

标签语义化的作用：

1.使代码结构更清晰，能使不同的开发者快速的理解代码的结构，从而减少开发者后期维护的成本。

2.利于搜索引擎优化（SEO）：搜索引擎爬虫依赖于HTML标签来确定上下文和关键字权重，使用语义化标签可以提高网页在搜索引擎中的排名。

3.语义化标签有助于各种设备解析网页内容，例如盲人阅读器，使得残障人士也能轻松访问网页。（盲人阅读器是一种辅助技术，用于将网页上的文字转换为语音，从而帮助盲人理解网页的内容）

常用的语义化标签

<header> 通过其语义很容义便可知其用于定义网页或某个模块的头部，通常用在网站标志，主导航、搜索框等等

<nav> 标记导航区域，用于网站导航链接

<main> 定义页面主要内容区域，一个页面只能使用一次

<article> 定义外部的内容，其内容独立于其余的部分，通常用来展示文章，博客这些文本类的

<aside> 定义其所处内容之外的内容，通常用来写侧栏，链接，广告列表啥的，

<footer> 定义页脚内容，大多用数用于展示版权信息或者联系信息

<section> 定义文档中的区段，比如文档的章节

<hn> (n表示数子 1~6) 分级标题，用来写不同级别的标题

<ul> <ol> 无序列表和有序列表，用于列举某件事，或者特点等等

<figure> <figcaption> figure规定独立的流内容（图像、图表、照片、代码等 ,figcaption定义figure元素的标题,用于展示图片、图表、代码等独立内容，并为其添加标题说明

<mark> 使用黄色对部分文本进行标记，通常用于突出某字段的重要或者做搜索的高亮

tip： 以上为部分常用语义化标签，以上场景仅做建议，具体需根据具体需求来选择

语义化标签与非语义化标签的实例

语义化标签的使用
  <header>
      <h1>BBC News</h1> 
      <nav> 
          <ul> 
              <li><a href="#">Home</a></li>
              <li><a href="#">World</a></li> 
              <li><a href="#">UK</a></li>
              <li><a href="#">Science & Environment</a></li> 
          </ul> 
      </nav>
  </header> 
  <main>
  <section> 
      <h2>Headline News</h2> 
      <article> 
          <h3><a href="#">Breaking News: Important Event Happens</a></h3>
          <p>A brief description of the news event.</p> 
          <footer> 
              <p>Published on <time datetime="2023-10-01T12:00:00Z">October 1, 2023</time> by BBC News
              </p>
          </footer>
      </article> 
 </section>
 <aside> 
     <h3>Related Stories</h3>
     <ul> 
         <li><a href="#">Related Story 1</a></li>
         <li><a href="#">Related Story 2</a></li>
     </ul> 
 </aside> 
 </main>
 <footer> 
     <p>BBC News © 2023</p> 
 </footer>

此为使用语义化标签，可以看出来不用css就能做出一个层次分明的网页

_18-06-04.png

非语义标签
 <div>
    <div class="title">BBC News</div>
    <div class="newsList">
        <a href="#">Home</a>
        <a href="#">World</a>
        <a href="#">UK</a>
        <a href="#">Science & Environment</a>
    </div>
</div>
<div>
    <div>
        <div class="secondTitel">Headline News</div>
        <div>
            <div class="thirdTitle"><a href="#">Breaking News: Important Event Happens</a></div>
            <div class="content">
                <div>A brief description of the news event.</div>
                <div>
                    Published on October 1, 2023 by BBC News
                </div>
            </div>

        </div>
    </div>
    <div>
        <div class="thirdTitle">Related Stories</div>
        <div class="storyList">
            <a href="#">Related Story 1</a>
            <a href="#">Related Story 2</a>
        </div>
    </div>
</div>
<div>
    BBC News © 2023
</div>

事实上对于某个页面或许使用语义化或者非语言化标签都能实现，但一眼望去，语义化标签更能让人理解某个模块的作用，这不代表不能使用 div ，我们需要防止div的滥用

avatar
文章
阅读
粉丝