Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by rohil pinto
rohil pinto
1,167 Points

About the Main tags

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

2 Answers

Marcus Mayorga
Marcus Mayorga
11,311 Points
Marcus Mayorga
Marcus Mayorga
11,311 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.

Johnny Garces
PLUS
Johnny Garces
Courses Plus Student 8,551 Points
Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

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!