HTML Introduction to HTML and CSS HTML: The Structural Foundation of Web Pages and Applications The Basic Structure of a Web Page

About the Main tags

So Tags like "<main></main> are divs basically? right? or they consist other features ..

2 Answers

Marcus Mayorga
Marcus Mayorga
5,863 Points

Correct. They are like divs. They just give semantic meaning behind them as to identify the structure better. Just keeps things clean and concise.

Main tags also include "landmark" features to allow for assistive technologies to "jump to main-content." So if a user clicked on the "jump to main content" link, then they'd be able to quickly navigate to the main content below.

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
    <h1>Surfing Tips for Beginners</h1>
    <article>
      <h2>Choosing the board</h2>
      <section>
        <h3>Know your budget</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem omnis et culpa! Inventore repudiandae natus iusto corrupti obcaecati nulla velit voluptatibus voluptate, quod, impedit architecto expedita nobis eius in ut.</p>
        <h3>Know your experience level</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet quas aut reiciendis, ipsa molestias excepturi laboriosam voluptas possimus? Eum optio assumenda doloremque labore esse, deleniti eveniet beatae quaerat nam rem.
          </>
        </p>
        <h3>Know your size</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, porro ullam sunt iusto officia culpa? Nulla accusamus asperiores unde hic similique culpa. Delectus qui quam animi! Vitae laudantium pariatur aperiam?</p>
      </section>

    </article>
    <article>
      <h2>Finding the perfect wave</h2>
      <section>
        <h3>It's all about timing</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque esse corrupti deleniti dolores aliquam ad. Deserunt sapiente ipsam adipisci fuga incidunt nostrum reiciendis totam vero. Aliquam accusamus quasi modi mollitia.</p>
        <h3>It's all about mounting</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea fugiat quo reiciendis recusandae exercitationem sapiente. Minus iure expedita maiores error in repellat odit consequatur aut sunt, sint, similique officia suscipit?</p>
        <h3>It's all about stability</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum distinctio numquam aperiam aliquam, impedit ea eligendi. Beatae, nulla numquam! Delectus itaque sed aperiam iure temporibus id tempora, accusamus laboriosam deserunt?</p>
      </section>

    </article>
  </main>
</body>

There are differences between main elements and div elements. Main elements are strictly informative (i.e. semantic), whereas div elements are meant to provide structure in the document. Divs can contain repeated elements such as navbars, sidebars, forms, footers, etc where as Main elements cannot. That's about the biggest difference I can see between main and div elements.

happy coding!