Home / HTML5 / 7 Common Tags used instead of div tag in HTML
4 minutes read
178 Views
div tag alternatives

HTML’s most often used tag is div. In the market for a section on your site dedicated to content? Make a div with your hair! Adding a sidebar to your website? It’s time to be creative! Is there a three-column design? Use divs all over the place!

Writing HTML in this manner has no drawbacks, at least not in terms of functionality. Your markup will always be rendered by browsers and shown to the end users.

The primary problem with excessive usage of the <div> element is that it is devoid of any semantic significance. A semantic element explains what it means to the developer as well as the browser.

Examples of non-semantic elements: <div> and <span> , these components don’t tell you anything about the material they contain.

Semantic elements include <form>, <table>, and <article> — These components clearly describe the content of the document.

In addition to helping with SEO and code debugging, writing semantic HTML provides your markup meaning to web browsers and screen readers.

As an alternative to using the <div> element, we may utilize some more semantic tags like the following.

1- The Section Element

The <section> tag identifies a document section. On a single page, sections can have their own headers and footers as well as using multiple section elements.

Introduction, content, and contact information sections are all common on a website.

  <section class="intro-section">
    <h1> Lorem, ipsum. </h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat hic blanditiis excepturi eius voluptate!
    </p>
  </section>

  <section class="about-section">
    <h1> Lorem, ipsum dolor. </h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto, vero! Perferendis quo totam possimus culpa distinctio
      fugiat dolorum omnis atque!
    </p>
  </section>

2- The Main Element

The element indicatesby the <main> tag primary material of a document. The information within the <main> element should always be unique to the page. Including sidebars, navigation links, copyright information, logos, and search boxes are all examples of material that should not be duplicated throughout a page.

Use it only once on each page.

  <main role="main">
    <h1>Lorem, ipsum dolor.</h1>
    <p> Lorem ipsum dolor sit amet consectetur. </p>
  </main>

3- The Aside Element

The <aside> tag specifies some material apart from the text it is put in. separate material should be tangentially linked to the surrounding stuff.

Asides are usually used as sidebars.

  <aside>
    <h4> Lorem ipsum dolor sit. </h4>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio sequi tempore amet perspiciatis similique quidem omnis error
      aliquam.
    </p>
  </aside>

4- The Article Element

The <article> element is used for sections of information that may stand on their own (self-contained content).

Potential sources for the <article> element are below:

  • Forum post
  • Blog post
  • News story
  <article>
    <h2> Apple </h2>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus nostrum animi nihil necessitatibus.
    </p>
  </article>

  <article>
    <h2> Mango </h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero blanditiis praesentium ex vero omnis corrupti harum.
    </p>
  </article>

  <article>
    <h2> Orange </h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi nostrum obcaecati vitae itaque optio magni, laboriosam
      consequatur odio?
    </p>
  </article>

5- The Blockquote Element

The <blockquote> element shows the content being cited from an external source (a person, a document, a newspaper, etc.).

  <blockquote cite="http://www.worldwildlife.org/who/index.html">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, vero facere! Nesciunt, dolor nemo! Non temporibus
    suscipit sequi repudiandae harum!
  </blockquote>

6- The Nav Element

<nav> elements, as their name implies, are used to designate a document’s navigation links section.

Only large blocks of navigation links should use the nav element.

  <nav>
    <a href="/html/">HTML</a>
    <a href="/css/">CSS</a>
    <a href="/js/">JavaScript</a>
    <a href="/python/">PHP</a>
  </nav>

7- The Footer Element

In documents and sections, the <footer > tag specifies the location of the document’s footer. Contact and copyright information, a brief “about” section, social media logos and links are common in all website footer elements.

One document may contain a slew of <footer> elements.

  <footer>
    <p>Author: Fatima Rai<br>
      <a href="mailto:aliasgr216@gmail.com"> aliasgr216@gmail.com </a>
    </p>
  </footer>

also, read  What are CSS Variables? and How to Use Them?


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *