Você sabe o que é HTML semântico ou já ao menos ouviu falar nessa prática de programação? Pois saiba que, se você estuda desenvolvimento web, esse é um conceito fundamental para conhecer e aplicar no seu cotidiano de trabalho.
O HTML (HyperText Markup Language) é a mais famosa e utilizada linguagem de marcação para desenvolvimento web. Segundo a W3Techs, essa linguagem responde por 95,5% de todos os sites que contam com código de marcação na internet.
Serve para dar estrutura ao site e organizar os conteúdos na interface da página, como cabeçalho, fotos, texto e muito mais. Em uma analogia simples, um documento com código em HTML é como se fosse a planta de um apartamento, enquanto o apartamento representa a página na web.
Geralmente, utiliza-se essa linguagem em parceria com o CSS (Cascade Style Sheet), linguagem de estilo que serve para incrementar visualmente e estilizar uma página desenvolvida em código HTML.
Cada uma dessas linguagens tem papel crucial para dar credibilidade, atratividade e um aspecto profissional aos sites na internet. Por isso, todos os desenvolvedores web precisam conhecê-las a fundo para criar páginas realmente diferenciadas.
Daí, entramos no mundo do HTML semântico, que é um conjunto de boas práticas para categorizar os componentes ou tags de um código de modo que facilite a leitura de quem quer entendê-lo.
Nesse conteúdo, vamos te explicar como funciona o HTML semântico, qual sua importância e quais são as principais tags para facilitar a leitura e criação de sites na internet.
Confira o conteúdo até o fim para entender melhor!
Antes, confira esse vídeo do canal do YouTube da GoDaddy e aprenda tudo que você precisa saber sobre HTML:
O que é HTML semântico?
O HTML semântico nada mais é que um conjunto de boas práticas para organizar o código em um documento HTML de forma organizada e clara para quem quiser acessá-lo.
Para quem não sabe, “semântico” é um termo, segundo o dicionário Houaiss, que se relaciona com o sentido das unidades linguísticas. Portanto, no contexto do HTML, leva em consideração a explicação do que cada bloco ou linha de código significa.
O intuito, afinal, é deixar as linhas e diferentes etapas do código com informações precisas sobre o significado de cada uma.
Dessa forma, quem ler o documento conseguirá entender quais partes da interface da página do site estão sendo codificadas.
O código HTML possui diversas tags ou componentes “coringas”, como o <div>, por exemplo. Ela significa divisão, pois é utilizada para separar blocos de linguagem HTML que representam porções diferentes do site.
Entretanto, se o programador optar por utilizar o <div> para discriminar todas as partes do site, quem lê o documento não vai entender quando se trata do cabeçalho, do menu, do rodapé, etc.
Isso tanto dificultava para os leitores em termos de acessibilidade, como também prejudica o ranqueamento de SEO (Search Engine Optimization) da página do site.
Para quem não sabe, SEO é um conjunto de regras e pré-requisitos que o Google e outros motores de busca levam em consideração para ranquear páginas de sites na primeira página.
E, por isso, contar com um HTML semântico e acessível é realmente fundamental também para o marketing digital das marcas na internet.
Confira no vídeo abaixo mais sobre como criar uma estratégia de SEO e o que levar em consideração na hora de desenvolver seus conteúdos:
Como funciona o HTML semântico?
Na prática, o HTML semântico funciona com a inserção de tags ou componentes semânticos durante toda a estrutura de um documento em HTML.
A ideia é substituir as tags mais genéricas e “coringas” por termos mais significativos e que orientem tanto os mecanismos de busca (Google, Yahoo e Bing) a reconhecer o conteúdo da página, como também outros desenvolvedores a se inspirarem em estruturas de código.
Por exemplo, em vez de componentes genéricos, o desenvolvedor web passa a dividir os blocos de código que representam cada elemento estrutural com termos mais evidentes, como <header>, que significa “título”, <li>, para dividir o conteúdo em linhas, <footer>, para os elementos no rodapé e por aí vai.
Veja um código de HTML semântico na prática:
<html>
<head>
<title>Exemplo de HTML Semântico</title>
</head>
<body>
<header>
<h1>Título da Página</h1>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Sobre Nós</h2>
<p>Descrição da nossa empresa.</p>
</section>
<article>
<h2>Artigo 1</h2>
<p>Conteúdo do primeiro artigo.</p>
</article>
<article>
<h2>Artigo 2</h2>
<p>Conteúdo do segundo artigo.</p>
</article>
</main>
<footer>
<p>© 2024 Exemplo de HTML Semântico</p>
</footer>
</body>
</html>
Quando vemos o bloco de código separado pelo componente de HTML semântico <header>, sabemos que ali está codificado o cabeçalho e título do site. Já quando lemos <article>, sabemos que ali está discriminado o botão para acessar um artigo. No <footer>, temos o rodapé e por aí vai.
Enfim, toda a estrutura do site está visível e nítida tanto para os leitores quanto para os buscadores.
Quais são os principais componentes de HTML semântico?
Entendido o que é HTML semântico? Pois vamos falar agora das principais tags e componentes utilizados para organizar e explicar o que significa cada um dos blocos de código que transcrevem a estrutura do site.
No documento HTML, a tag tem papel crucial, pois é o elemento que separa e dá significado às estruturas do documento.
Sempre é escrita entre colchetes "<" e ">", além de também contar com uma barra no início de um dos colchetes que marca o fim do grupo de código, por exemplo: </p>, que representa o fim de bloco de texto em parágrafo.
Confira abaixo oito dos principais elementos de HTML semântico e seus respectivos significados!
<header>
A <header> é um elemento indispensável em praticamente todas as páginas de um site. Afinal, é a tag que descreve informações essenciais sobre o conteúdo da página, como:
- título do site, caso seja a página inicial, ou título do conteúdo da página, caso esteja em outros diretórios do site;
- logotipo da marca;
- slogan;
- menu de navegação com as seções do site para facilitar a navegação do usuário.
Além disso, o <header> também pode servir para marcar o início de seções específicas de um conteúdo em uma página. Blog posts, como este que você está lendo, por exemplo, são separados por subtítulos H1, H2, H3, etc., que também compõem a tag <header>.
<p>
A tag <p> é uma das mais fáceis e de memorizar e também das mais utilizadas quando falamos de HTML semântico.
Significa parágrafo de texto, então se aplica sempre que há um bloco de texto com um parágrafo em alguma parte da interface do site.
Por exemplo, em um blog post como esse, a tag <p> está presente em todos os parágrafos de texto localizados abaixo do título.
Esse componente é fundamental para organizar o conteúdo e torná-lo mais escaneável e legível para os usuários.
<article>
Essa tag é utilizada para destacar pequenos botões para conteúdos independentes na página de um site. Por exemplo, quando você entra na página inicial de um blog ou portal de notícias, tem várias janelinhas de conteúdo para direcionar o usuário para o artigo do blog ou da notícia.
Cada um dos posts abaixo, por exemplo, é demarcado pela tag <article>:
Novamente, essa tag é fundamental para organizar o conteúdo na página inicial do site e ainda permite destacar outras páginas importantes e estratégicas para a navegação do usuário.
<aside>
A tag <aside> é utilizada para destacar conteúdos que devem ser mostrados, mas que são secundários em relação ao conteúdo principal do site.
Quando esse componente é introduzido, o código colocado entre seus colchetes posiciona esse conteúdo geralmente na parte lateral das páginas web e é destacado em blocos.
No caso de blogs, essa tag é utilizada para destacar os artigos relacionados ao post que você está lendo.
No caso de SEO, a tag <aside> é importante para associar conteúdos secundários do próprio blog e assim aumentar a autoridade da marca sobre o tema abordado.
<figure>
O <figure>, por sua vez, é uma opção de HTML semântico para assinalar a introdução de uma imagem, um infográfico ou qualquer elemento gráfico estático na página web.
Em boa parte dos casos, esse componente é acompanhado de outra tag cujo objetivo é associar uma legenda a essa imagem. Trata-se da tag <figcaption>.
Todo desenvolvedor web tem que conhecer esses componentes, uma vez que os elementos visuais são fundamentais para dar dinâmica à interface da página, quebrar um pouco o peso da leitura e também para complementar o conhecimento do texto.
Mais do que meramente ilustrativa, a imagem deve fornecer um upgrade à informação transmitida nos parágrafos.
<footer>
O <footer>, como já mencionamos, é a tag que destaca o conteúdo textual e gráfico do rodapé de uma página na internet.
Esse elemento traz informações importantes, como endereço de contato da empresa (e-mail, telefone e até endereço residencial), ícones com links para redes sociais, direitos autorais da marca e por aí vai.
Em muitos casos, o <footer> conta com uma estilização CSS especial para separá-lo do resto do conteúdo principal da página.
No caso da GoDaddy, por exemplo, o rodapé fica em preto, enquanto o resto do conteúdo da página está em branco. Isso torna a navegação do usuário mais intuitiva, pois ele percebe o conteúdo mais organizado pelo HTML semântico.
Veja o exemplo da GoDaddy:
<nav>
Por fim, vamos falar da tag <nav>, que reúne o grupo de códigos que representam o menu de navegação de um site na internet.
Essa seção é crucial, pois reúne todas as seções do site (ou categoria de produtos, no caso de e-commerces) com seus respectivos links para que o usuário consiga navegar de forma simples e eficaz.
Geralmente fica junto ao cabeçalho da página, mas muitos sites preferem postar o menu na parte lateral esquerda.
Por que utilizar o elemento semântico no HTML?
O HTML semântico é fundamental para todos os desenvolvedores web criarem sites de acordo com os padrões de SEO para marketing digital, assim como também ajudar seus pares a ler o código com mais facilidade.
Assim, a estrutura do código pode ser facilmente usabilidade e reproduzida em outras ocasiões.
Entretanto, caso você não seja desenvolvedor web e busque outras soluções mais acessíveis para criar um site profissional do zero, nós temos a ferramenta perfeita.
O GoDaddy Studio oferece todos os recursos que você precisa tanto para criar páginas de site, como também banners para blogs, peças gráficas para redes sociais e muito mais.
Conta com uma biblioteca de templates completa e 100% customizável para que você desenvolva conteúdos e páginas com a identidade visual do seu negócio e transmita credibilidade.
Saiba mais detalhes sobre o funcionamento do GoDaddy Studio com esse vídeo sensacional do canal da GoDaddy no YouTube:
Gostou do nosso conteúdo e entendeu como funciona o HTML semântico? Para mais dicas sobre criação de site e empreendedorismo digital, acompanhe todas as novidades do blog da GoDaddy! Até a próxima!
