Programador iniciante - troque as DIVs por isso

Olá, Saraiva aqui!

Se você está iniciando no mundo da programação ou já é experiente, sabe que nos estágios iniciais de aprendizado de sua carreira de desenvolvimento, é fácil ser pego usando divs pra quase tudo, quando se trata do uso das tags HTML.

Não há nada funcionalmente errado em escrever HTML usando apenas DIVs. O principal problema com o uso pesado de tags <div> é que elas não têm significado semântico.

Escrever HTML semântico dá significado de marcação para navegadores da Web e leitores de tela. Além disso podem ajudar com SEO, facilitando a depuração de código e muito mais.

Existem outros elementos que você usa em vez de divs? Deixe-me saber nos comentários lá do canal da Belmitec no YouTUbe!

Que tal usar essas 7 alternativas de elementos html em seus códigos?

Vamos às tags:

Elemento MAIN

<main role="main">

    <h1>Olá</h1>

   <p>Obrigado por não usar outra DIV novamente!</p>

</main>

Elemento SECTION

    <main role="main">

        <section>
            <h1>Olá</h1>
            <p>Obrigado por não usar outra DIV novamente!</p>
        </section>

        <section>
            <h1>História da tag div</h1>
            <p>A tag div foi criada em 1995</p>
            <small>A tag span também</small>
        </section>
        

    </main>​

Elemento ASIDE

<main role="main">

    <section id="intro">
        <h1>Olá</h1>
        <p>Obrigado por não usar outra DIV!</p>
    </section>

    <section id="historia">
        <h1>História da tag div</h1>
        <p>A tag div foi criada em 1995</p>
        <small>A tag span também</small>
    </section>
    
    <aside id="uso">
        <p>Fácil uso de CSS</p>
        <p>Semântica clara</p>
        <p>Uso exclusivo</p>
    </aside>

</main>​

Elemento ARTICLE

   <article class="blog">
        <header>
            <h2>Porque quase não uso mais div´s</h2>
            <p>por Belmitec SD</p>
        </header>

        <p>Existem tantas outras tags para usar que são tops, experimente!</p>

    </article>​

Elemento BLOCKQUOTE

    <blockquote>
        "o uso de elementos mais apropriados em vez do elemento div leva a uma melhor 
         acessibilidade para os leitores"
    </blockquote>​

Elemento NAVIGATION

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#intro">Intro</a></li>
        <li><a href="#historia">História</a></li>
    </ul>
</nav>​

Elemento FOOTER

<footer>
    <p>Usando outras tags html, Inc. 2022. All Rights Reserved</p>
</footer>​