Olá pessoal, pokemaobr aqui novamente, hoje vamos falar um pouco sobre um tema que já deveríamos estar falando a bastante tempo, porém, sempre temos que relembrar as pessoas que isso existe, ainda mais quando estamos pensando em uma internet mais inclusiva e diversa. Vamos falar sobre HTML semântico.

Primeiramente, o ideal é a gente tentar entender o que seria semântica. De acordo com o dicionário, em um sistema linguístico é o componente do sentido das palavras e da interpretação das sentenças e dos enunciados. Ou seja, basicamente semântica é sobre dar sentido às coisas.

Navegue pelo índice

    O que é HTML Semântico?

    Logo o HTML semântico é aquele cujo as tags tenham sentido. Provavelmente você conhece uma estrutura de um código HTML, começamos com <!DOCTYPE html> para o navegador entender que estamos lidando com um código HTML 5, temos a tag <html>, um cabeçalho <head>, dentro do cabeçalho, temos, por exemplo, um título <title>, depois temos um corpo <body> e por fim a tag de fechamento </html>. O que é algo parecido com isso.

    <!DOCTYPE html>
<html>
<head>
    <title>Exemplo de código html</title>
    <meta charset=”utf-8”/>
</head>
<body>
    <h1>Um texto grande</h1>
</body>
</html>

    E caso você queira colocar um comentário no seu código é só colocá-lo entre as tags <!– Comentário Aqui.–>

    Como as tags deveriam ser usadas

    Até aí tudo bem. Conseguimos entender perfeitamente o que cada tag significa. E, na teoria, podemos falar que isso aí está, digamos que: semântico.

    Lembrando que cada tag também possui alguns atributos como:

    • nome (name)
    • identificador (id)
    • alt (texto alternativo)
    • classe (class), etc.

    Em geral, grande parte das tags HTML sempre tiveram seus significados bem entendíveis, ou perto disso. Se pensarmos em questão de tags de elementos, como:

    • <img> para imagem,
    • <table> para tabelas,
    • <p> para parágrafos, etc.

    Nem sempre foi tão fácil

    Mas, quando pensávamos em blocos de conteúdo, antes do HTML 5, isso era algo muito difícil de lidar. Primeiramente era muito complicado estilizar o HTML. Os conteúdos sobre desenvolvimento web, incluindo de CSS (cascade style sheets/folhas de estilo em cascata), que basicamente é a linguagem de estilo para aplicar no HTML, eram bem escassos.

    As pessoas desenvolvedoras faziam as coisas de qualquer jeito e não tinham a mínima preocupação em deixar seus sites mais acessíveis para as pessoas.

    Com isso, era muito difícil entender como estruturar o conteúdo através das tags. A gente usava basicamente <table> para organizar visualmente grande parte das coisas, era horrível. Tanto que quando usávamos essa tag surgiu um movimento chamado tableless, que sugeria não utilizar table para organizar dados, já que a proposta inicial da tag é organizar dados tabulares e não ser parte da estilização de um site.

    DIV HELL, já ouviu essa?

    Só que juntamente com esse movimento, trocamos o <table> por <div> (tag que utilizamos para especificar um container genérico de conteúdo). Basicamente tudo era <div>.

    Se fossemos criar um rodapé, utilizávamos <div>, se fossemos criar um menu, utilizávamos <div>, se fossemos criar um bloco para login, também utilizávamos <div> e o que mudava era o id ou era a class que estava atribuída na tag. Que geralmente a gente nem se preocupava em dar algum sentido dentro do id ou da class.

    Era bem preocupante a situação, ainda mais quando a gente pensa em leitores de tela para pessoas cegas ou com limitações de visão. A organização de conteúdo já era complexa na tela, imagina no código (sempre é bom lembrar que quando escrevemos código, não devemos escrever para nós, mas sim para qualquer pessoa desenvolvedora que possa ler aquele código em algum momento). Era tanta <div> para fechar que chamávamos esse tipo de situação de DIV HELL.

    tag div

    Basicamente não se sabia o fluxo do conteúdo. As divs eram estilizadas algumas vezes fora de ordem. E ficava horrível para definir qualquer tipo de sentido para o código (que é a proposta da semântica). Por esses e outros problemas, muita coisa na estrutura de tags foi modificada no HTML 5.

    Como usar as tags no HTML Semântico?

    Agora, ao invés de tudo ser <div>, foram introduzidos muitas tags semânticas para dar sentido à organização de conteúdo dentro de uma página HTML. Tags como: <article>, <aside>, <footer>, <header>, <nav>, <section>, <summary>, entre outras foram incluídas na linguagem para dar o contexto semântico à organização e substituir de um jeito ou de outro a <div> genérica. Para saber mais sobre as tags HTML como um todo a mdn web docs de HTML ajuda bastante.

    Além disso, algumas tags que não faziam mais sentido semanticamente falando se tornaram obsoletas, como por exemplo a tag <center>, que particularmente eu amava, já que centralizava tudo e eu não curto muito escrever CSS para centralizar coisas kkk. Mas no contexto semântico, se temos tags como <footer> (rodapé), <header> (cabeçalho), <section> (sessão), não teria sentido uma tag <center> (centro) que na verdade centraliza elementos e não define o local centro. Vale lembrar que o HTML é uma linguagem de marcação e para “estilizar o HTML” utilizamos o CSS.

    Hora de praticar!

    Bem, agora temos ferramentas e tags muito boas para trabalhar dando sentido aos elementos HTML, um leitor de tela ao se deparar com uma tag <nav>, por exemplo, entende que ali teremos um menu de navegação, ao se deparar com um <footer> se trata de um rodapé.

    Com isso, o desenvolvimento fica muito mais fluído e fica mais fácil entender o que cada bloco de conteúdo representa no seu código HTML. E melhorando a vida de todas as pessoas envolvidas

    Além das tags semânticas, temos alguns atributos das tags que ajudam a dar sentido para algumas coisas no HTML. O atributo alt  propõe um texto alternativo em uma tag de imagem <img>, por exemplo, dá sentido a uma imagem que por qualquer motivo não possa ser visualizada.

    Hoje em dia é muito importante para nós devs nos preocuparmos com a semântica no desenvolvimento. Muitas pessoas querem acessar nossos conteúdos e essa preocupação ajuda demais. Bem como facilita quando outras pessoas devs vão mexer no nosso código. Organização e sentido faz uma diferença enorme.

    Bem, desejo que você tenha curtido o conteúdo e aprendido um pouco mais sobre a história do HTML e como deixar seu código HTML e conteúdo do seu site com mais sentido.

    Um grande abraço e até a próxima.

    Quer ter maior performance nos seus projetos web? Conheça o VPS Locaweb!

    CLIQUE AQUI!
    Categorias: Código aberto