HTML 5（1）-2022带有一些未知标签-DEV365 开发者社区

大家好。在此博客文章系列中，我们将讨论html 5随附的一些鲜为人知和使用的标签。让我们开始学习。

如今，总的来说，HTML 5受到许多浏览器作为出版物的支持。但是由于某些原因，一些开发人员仍在继续使用HTML中不应使用的折旧标签，我将尽快发布相关内容，但这不是我们的主题。我将通知您有关HTML新版本但未使用的一些HTML标签。让我们开始。

为什么要使用这些HTML 5标签？

SEO兼容性是许多开发人员在编码HTML主题时忽略的最重要问题之一，将是该问题的最佳答案。当诸如Google之类的搜索引擎索引内容时，它们通过考虑这些标签来索引内容。您编码的主题在视觉上可能非常好，但是如果您不关注SEO兼容性而编码，则会浪费您的劳动。因此，您应该仔细使用HTML标签。

标题html 5标签

是的，您可以说我绝对在每个项目中使用标头标签，但是在我检查过的许多HTML主题中，这些眼睛已经看到它在DIV或DIV或部分标签中使用的类或ID而不是标题使用标签。如果您想使用HTML 5标签进行SEO友好的编码，则应使用标题区域的标题标签，这是组成网站的3个主要部分之一。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Musa Yazlık Header Tag Example</title>
  </head>
  <body>
    <header>
      <h1>Most Important Title</h1>
      <h3>Less important headline</h3>
      <p>We can also write something here</p>
    </header>
  </body>
</html>

NAV HTML 5标签

我在使用Bootstrap库的许多HTML主题中看到了此标签。此标签的一般目的是证明这些标签之间写的代码用于制作菜单。因此，如果您想制作菜单，则需要将NAV HTML标签用作主要容器标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Musa Yazlık Nav Tag Example</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

文章html 5标签

文章标签是用于标记独立和独立内容的标签。其主要目的是涵盖文章的内容。如果您希望像Google这样的搜索引擎来感知您所写的内容，即文章，则绝对应该使用此标签。我看到此标签在大多数HTML主题中都没有使用太多。它可能被忽略了。 ð

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Musa Yazlık Article Tag Example</title>
  </head>
  <body>
    <article>
      <p>Paragraph 1</p>
      <img src="image.jpg" />
      <p>Paragraph 2</p>
    </article>
  </body>
</html>

输出HTML 5标签

此标签的通用目的是显示输出。例如，当我们为加法操作准备结构时，我看到DIV或SPAN标签通常用于单击“添加”按钮后显示两个数字的区域。但是您不知道HTML中有一个标签。它是输出标签。从现在开始，让我们停止使用SPAN和DIV进行输出。我通常使用跨度或div标签。在撰写此博客文章时，我与您了解了。 ð

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Musa Yazlık Addition Process</title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <input
            type="number"
            value="0"
            placeholder="First Issue"
            id="number1"
            onchange="collect()"
          />
        </td>
        <td>
          <input
            type="number"
            value="0"
            placeholder="Second Issue"
            id="number2"
            onchange="collect()"
          />
        </td>
        <td><output id="total"></output></td>
      </tr>
    </table>

    <script type="text/javascript">
      let number1 = 0,
        number2 = 0,
        total= 0;
      function collect() {
        sayi1 = parseFloat(document.getElementById("number1").value);
        sayi2 = parseFloat(document.getElementById("number2").value);
        toplam = number1 + number2;
        document.getElementById("total").innerHTML = total;
      }
    </script>
  </body>
</html>

旁边html 5标签

当您进入许多网站时，主内容的左侧或右侧有一个区域，这就是我们所说的侧边栏区域。 HTML中有一个标签。房间是旁边的标签。旁边标签表示内容所在的结构是侧面内容。

我们已经进入了此博客文章的结尾。但这将是一个系列，所以不要忘记继续关注。有了这个系列，您将学习许多您不知道的HTML标签。在该系列的下一个内容中见。照顾好自己...ðð

来源：Musa Yazlık