DEV Community

Cover image for Some Unknown Tags Coming With Html 5 (1) - 2022
Musa Yazlık
Musa Yazlık

Posted on

Some Unknown Tags Coming With Html 5 (1) - 2022

Source: Musa Yazlık

Hello everyone. In this blog post series, we will be talking about some little known and used tags that come with html 5. Let's start learning.

Nowadays, in general terms, html 5 is supported by many browsers as a publication. But for some reason some developers still continue to use deprecated tags that should not be used in html, and I will be publishing related content soon, but that is not our topic now. I will be informing you about some html tags that come with the new version of html but are not used. Let's get started.

Why should I use these Html 5 tags?

SEO compatibility, one of the most important issues that many developers overlook when coding an html theme, will be the best answer to this question. While search engines such as Google index the content, they index the content by taking these tags into account. The theme you coded may be visually very good, but if you code without paying attention to seo compatibility, you will waste your labor. Therefore, you should use html tags carefully.

Header Html 5 Tag

Yes, you can say that I definitely use the header tag in every project, but in many html themes I have examined, these eyes have seen that it is used using class or id in the div or section tag instead of the header tag. If you want to make a seo-friendly coding with the html 5 tag, you should use the header tag for the header area, which is one of the 3 main parts that make up a website.

<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>

Enter fullscreen mode Exit fullscreen mode

Nav Html 5 Tag

I see this tag in many html themes that use the bootstrap library. The general purpose of this tag is to show that the code written between these tags is used to make a menu. So if you want to make a menu, you need to use the nav html tag as the main container tag.

<!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>
Enter fullscreen mode Exit fullscreen mode

Article Html 5 Tag

The Article tag is a tag used to mark independent and self-contained content. Its main purpose is to cover the content of the article written. If you want search engines like google to perceive a content you have written as a content, that is, an article, you should definitely use this tag. I saw that this tag is not used much in most html themes. It may have been overlooked. 😁

<!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>
Enter fullscreen mode Exit fullscreen mode

Output Html 5 Tag

The general purpose of this tag is to show the output. For example, when we prepare a structure for an addition operation, I saw that div or span tags are usually used for the area where we show the sum of two numbers after clicking the add button. But you didn't know that there is a tag in html even for this. It is the output tag. Let's stop using span and div for outputs from now on. I was using span or div tag in general. While writing this blog post, I learned it with you. 😀

<!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>
Enter fullscreen mode Exit fullscreen mode

Aside Html 5 Tag

When you enter many websites, there is an area to the left or right of the main content, this is what we call the sidebar area. There is a tag in the html in this. The room is the aside tag. The aside tag indicates that the structure in which the content is located is side content.

Image description

We have come to the end of this blog post. But this will be a series so don't forget to stay tuned. With this series, you will learn many html tags that you do not know. See you in the next content of the series. Take care of yourself... 😁 😁

Source: Musa Yazlık

Top comments (0)