top of page

7 Alternatives to the <div> HTML Tag



“The div element has no special meaning at all…Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.” Ok, so what are these “more appropriate elements” that the W3C mentions? When HTML5 was released in 2014, it introduced some new section and grouping elements that web developers could use to enhance the semantic meaning of their markup.

Let’s explore a few of the more semantic alternatives to the <div> tag.

1. The Main Element

The main element indicates to browsers and screen readers which portion of your markup contains the main section of content on a given page. This can help with keyboard command access, zooming on mobile browsers, and more. It should be used only once per page.

<main role="main">

<h1>Skateboards</h1>
<p> The Skateboard is the way cool kids get around </p>

</main>


2. The Section Element

The section element is used to group content by theme and represents a section of a document or application. Sections can have their own header and footer elements, and there can be multiple section elements used on a single page.

<main role="main">

<section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The Skateboard is the way cool kids get around</p>
</section>

<section id="skateboards-history">
    <h1>History of skateboards</h1>
    <p>skateboarding was born in the late 1940s or 1950s</p>
</section>

</main>


3. The Aside Element

aside elements are mainly used to represent part of a page containing related content to a given section. Asides are typically used as sidebars.



<main role="main">
<section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The Skateboard is the way cool kids get around</p>
</section>

<section id="skateboards-history">
    <h1>History of skateboards</h1>
    <p>skateboarding was born in the late 1940s or 1950s</p>
</section>

    <aside id-"timeline">
        <p>1940s: lorem ipsum</p>
        <p>1950s: lorem ipsum</p>
        <p>1960s: lorem ipsum</p>
    <aside>

</section>

</main>


4. The Article Element

The article element can be used for portions of content that could stand on their own. Blog posts, newspaper articles, and user comments are some possible use cases the the article element.


<main role="main">
<section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The Skateboard is the way cool kids get around</p>
</section>

<section id="skateboards-history">
    <h1>History of skateboards</h1>
    <p>skateboarding was born in the late 1940s or 1950s</p>
</section>

    <aside id-"timeline">
        <p>1940s: lorem ipsum</p>
        <p>1950s: lorem ipsum</p>
        <p>1960s: lorem ipsum</p>
    <aside>

</section>

<article class="blog-post">
    <header>
        <h2> I love Skateboarding</h2>
        <p>Tony Hawk</p>
    </header>
    <p>Skateboarding is the best! I love doing gnarly tricks</p>
</article>

</main>

5. The Blockquote Element

The blockquote element represents content that is being quoted from an external source (a person, document, newspaper, case study, etc.). It is often accompanied by the cite element to attribute the quote to its source.


<main role="main">
<section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The Skateboard is the way cool kids get around</p>
</section>

<section id="skateboards-history">
    <h1>History of skateboards</h1>
    <p>skateboarding was born in the late 1940s or 1950s</p>
</section>

    <aside id-"timeline">
        <p>1940s: lorem ipsum</p>
        <p>1950s: lorem ipsum</p>
        <p>1960s: lorem ipsum</p>
    <aside>

</section>

<article class="blog-post">
    <header>
        <h2> I love Skateboarding</h2>
        <p>Tony Hawk</p>
    </header>
    <p>Skateboarding is the best! I love doing gnarly tricks</p>
</article>

<blockquote>
    "Skateboarding is my life. Everything else is secondary."
</blockquote>
<cite>-Dude Ripper</cite>

</main>

6. The Nav Element

As the name implies, nav elements represent the navigation section of a document. The nav element should include the primary navigation links for a give page, application, etc.


<nav id ="main-navigation">
    <ul>
        <li><a href="#skateboards-intro">Introduction to 
        Skateboards</a></li>
        <li><a href="#skateboards-history">History of 
        Skateboards </a></li>
    </ul>
</nav>

<main role="main">
<section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The Skateboard is the way cool kids get around</p>
</section>

<section id="skateboards-history">
    <h1>History of skateboards</h1>
    <p>skateboarding was born in the late 1940s or 1950s</p>
</section>

    <aside id-"timeline">
        <p>1940s: lorem ipsum</p>
        <p>1950s: lorem ipsum</p>
        <p>1960s: lorem ipsum</p>
    <aside>

</section>

<article class="blog-post">
    <header>
        <h2> I love Skateboarding</h2>
        <p>Tony Hawk</p>
    </header>
    <p>Skateboarding is the best! I love doing gnarly tricks</p>
</article>

<blockquote>
    "Skateboarding is my life. Everything else is secondary."
</blockquote>
<cite>-Dude Ripper</cite>

</main>

7. The Footer Element

The footer element represents the “footer” section of a document or section. In many websites, the footer element will contain contact and copyright information, a brief “about” blurb, social media logos and links, etc.

<nav id ="main-navigation">
    <ul>
        <li><a href="#skateboards-intro">Introduction to 
        Skateboards</a></li>
        <li><a href="#skateboards-history">History of 
        Skateboards </a></li>
    </ul>
</nav>

<main role="main">
<section id="skateboards-intro">
    <h1>Skateboards</h1>
    <p>The Skateboard is the way cool kids get around</p>
</section>

<section id="skateboards-history">
    <h1>History of skateboards</h1>
    <p>skateboarding was born in the late 1940s or 1950s</p>
</section>

    <aside id-"timeline">
        <p>1940s: lorem ipsum</p>
        <p>1950s: lorem ipsum</p>
        <p>1960s: lorem ipsum</p>
    <aside>

</section>

<article class="blog-post">
    <header>
        <h2> I love Skateboarding</h2>
        <p>Tony Hawk</p>
    </header>
    <p>Skateboarding is the best! I love doing gnarly tricks</p>
</article>

<blockquote>
    "Skateboarding is my life. Everything else is secondary."
</blockquote>
<cite>-Dude Ripper</cite>

</main>

<footer>
    <p>Skateboards, Inc. 2019. All rights reserved</p>
    <a href="https://twitter.com/TheTechPlatform">Twitter 
    Profile</a>
    <a href="https://www.facebook.com/thetechplatform">Facebook 
    Profile </a>
</footer>

Source: Medium - Zac Heisey


The Tech Platform

0 comments

Comments


bottom of page