HTML语义标签-DEV365 开发者社区

介绍

程序员开始使用像div这样的常见的“非语义”标签，他们经常将类或id属性分配以定义其函数。例如，这通常是写为div class =“ section”>。

的写作。

作为程序员，并非一直都需要使用DIV标签，请使用语义HTML标签来改善网站的结构和可用性。

在本文中，我将告诉您如何使您的网站在下面的语义标签上脱颖而出。

让我们开始！

什么是语义HTML标签？

语义HTML是通过正确描述网页的各个部分和结构来使HTML更容易理解的语法。它提高了在线页面的信息性和适应性，帮助浏览器和搜索引擎更好地理解内容。

语义HTML标签有助于您的代码结构和组织，以确保每个人都在同一页面上。

在语义HTML出现之前，开发人员使用Divs来构建事物。但是截至今天，语义HTML标签对于搜索引擎，用户，开发人员以及有障碍的引擎很有意义。

什么是Divs？

在HTML中，DIV标签用于为内容，图形，标题，页脚和导航栏等内容创建部分。 DIV标签具有开放式

和关闭标签，并且需要关闭标签。 DIV元素是Web开发中最有用的，因为它允许我们在网页上划分材料并为不同类型的信息或功能创建特定部分。

<div> Hello there </div>

为什么Sematic HTML很重要？

以下是您可能想在下一个项目中尝试的流行语义HTML标签的列表，并说明每个项目对您的网站都很重要。

<Header> 由于它提供了有关标题和标题的详细信息相关材料，HTML“标头”元素用于建立页面或部分的标题。

它通常包含网站的徽标，导航和页面
标题。这是网站顶部的部分。

请注意，您可以更改标题以满足您的要求。

以下是语法

<header>

    <nav>
       <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#games">Games</a></li>
            <li><a href="#tournament">Tournament</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
      </nav>

     <h1>This is my navigation part of my current website</h1>
      </header>

此元素表示您提供的HTML代码的一部分导航链接，在网站中，您正在工作在。

这些例子包括菜单，内容表和
索引。 NAV标签通常包括它。

以下是语法。

<header>

    <nav>
       <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#games">Games</a></li>
            <li><a href="#tournament">Tournament</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
      </nav>

     <h1>This is my navigation part of my current website</h1>
      </header>

HTML文章标签用于代表文章。这是一个 HTML5中的新分段元素。例如，你可以使用它们来组织博客文章，杂志，产品卡，论坛帖子，杂志或报纸文章，用户提取评论或交互式小部件或小工具。

给定文件可能包含许多文章；例如，在
上显示每篇文章的内容的博客
卷轴，每个帖子都包含在一个元素中，
也许内部有一个或多个部分。

以下是语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <article>
        <h1>The shattered dream </h1>

        <article>
            <h3>Introduction</h3>
           <p>Names of the people mentioned in this story 
            are not the real names.</p>
         </article>

         <article>
            <h3>Chapter One</h3>
            <p> Its a good time to start again.</p>
           </article>

    </article>
</body>
</html>

使用主
表示文档的主要材料标签。它包括与
特别相关的信息主要主题。

主标签代表
身体的主要内容文档。该领域由直接的内容组成
与文档的中心主题相关或扩展应用程序的中心功能。

在主标签下，冗余内容（例如侧栏），导航
应避免链接和搜索表格。此外，那里
每个文档只能是一个主要要素。

如何在HTML文档中使用主标签
如下;

<html>
 <head>
 </head>
 <body>
  <main>

    <h1> Gifts </h1>
    <p> Gifts are presented during birthdays. </p>

    <article>
      <h2> Birthdays </h2>
      <p> Most birthdays are celebrated at the beach</p>
    </article>

    <article>
      <h2> Beach </h2>
      <p>The beach is situated at every part of the water.</p>
    </article>

  </main>
 </body>
</html>

章节，标题，页脚和其他部分都是定义的
使用节标签，将信息分为部分
和使用章节标签的小节。

当文件需要两个标头，两个页脚或任何其他标题时
部分，使用部分标签，以及
的通用块相关元素是通过截面标签组织的。

章节标签的关键好处是它是语义元素，
这意味着浏览器和开发人员都可以理解
它的含义。

 <html>

    <body>

        <h1>The Inspirational Books</h1>

        <section>
            <h2>Introduction</h2>
            <p>The Book is a combination of motivations.</p>
        </section>


        <section>
           <h2>Chapter one:</h2>
           <p>The is a book that makes you think big</p>
        </section>

    </body>

</html>

旁边标签用于描述网络的主要对象
页面以类似于荧光笔的更简洁的方式。

它本质上标识了与
相关的内容网页的主要内容，但不构成
主要页面的主要目标。旁边的标签主要带有
作者信息和链接，创建引号的侧边栏，
评论或大喊。

此标签有助于页面设计并提高
的清晰度 HTML文档。它使我们能够快速区分
主要文字和下属材料。 div和
除此之外，需要CSS进行定制设计。

应该注意的是，旁边的标签在HTML5中是新的。这个标签
不会在浏览器中渲染任何异常的东西，为此，
您必须使用CSS对其进行样式。

请参阅下面的语法：

     <!DOCTYPE html>
  <html>

  <head>

  </head>

  <body>
      <div style="display: flex;">
          <main>
              Music is the art of arranging sound to create some 
              combination of sweet melody
            <ul>
              <li>Blues</li>
              <li>Hiphop</li>
              <li>Highlife</li>
              <li>RnB</li>
            </ul>
          </main>

          <aside style="margin:40px;padding:20px;border-left:4px 
          solid 
           lightblue;">
            <i>For good beats and music<br />
            subscribe on our channel<br />
            Aesthete Music.</i>
          </aside>
         </div>
  </body>

  </html>

以下是输出：

在html中，图标签用于包括独立的
插图，图表，图片或代码等信息
文档中的列表。

它连接到主流，但可以在任何
中使用文档的位置和图形流向文档，
因此，将其删除不应破坏文档的流程。

此标签在html5中首次亮相，其中大部分包含两个标签
下面列出：

img src：此标签用于将图像源添加到
文档。
figcaption：此标签用于将标题设置为图像。

html中的figurecaption也称为

标签
用于将字幕设置为文档中的图元素，此
标签是html5中的新型。

检查下面的语法。

<!DOCTYPE html>

    <html>
        <body>
             <h1>Types of flowers</h1>
             <p> We have different types of flowers</p>
           <figure>
             <img src="https://cdn.britannica.com/45/5645-050- 
               B9EC0205/head-
                 treasure-flower-disk-flowers-inflorescence- 
                  ray.jpg"
                  alt="flower" style="width:50%">
               <figcaption>This is a Sunflower</figcaption>
             </figure>
        </body>
    </html>

输出：

在HTML中，使用页脚标签来指定
的页脚 HTML文档。此标签通常包含作者
信息，版权信息，联系信息，
站点地图，返回链接和相关文档。

在身体标签中，使用页脚标签。以下示例
说明HTML元素中的页脚标签：

<!DOCTYPE html>

            <html>
                <body>
                   <h1>Types of flowers</h1>
                   <p> We have different types of flowers</p>
                   <figure>
                   <img src="https://cdn.britannica.com/45/5645- 
                   050-B9EC0205/head-treasure-flower-disk-flowers- 
                     inflorescence-ray.jpg"
                   alt="flower" style="width:50%">
                   <figcaption>This is a Sunflower</figcaption>
                     </figure>
                     <style>
                        footer {
                          text-align: center;
                          padding: 3px;
                          background-color: green;
                          color: white;
                          width: 650px;
                        }
                        </style>
                        <footer>
                            <p>© 2023 by Sunflower</p>
                          </footer>
                </body>
            </html>

结论：

使用语义HTML对于生产可访问，结构良好且易于维护的网站至关重要。消费者和开发人员都从中受益，因为它确保了准确的内容解释，搜索引擎可见性和长期适应性。通过遵守语义标记的最佳实践，您可以帮助创建更具包容性和用户友好的网络体验。

现在您已经了解了HTML语义标签，使用它们并查看您的代码看起来更加最新，可读和可观。

随时在我的社交帐户上向我发送任何帮助。

Twitter

olaideoluwatobiloba1@gmail.com