Aula 5

HTML Semântico

Tem como objetivo descrever o significado do conteúdo presente em documentos HTML, tornando-o mais claro.

Benefícios :

SEO semântico

As tags semânticas permitem que mecanismos de busca como o Google entendam melhor o conteúdo e detectem rapidamente informações importantes. Isso melhora o SEO do site e o posicionamento nos resultados de pesquisa.

Acessibilidade na Web

Melhor a acessibilidade do site. Os leitores de tela usados por deficientes visuais podem navegar na página de forma mais eficientes.

Exemplos de elementos não semânticos :

Não diz nada sobre o seu conteúdo.

Exemplo de elementos semânticos

Define claramente seu conteúdo.

HTML Semântico

 <div id="header"></div>
    <div class="section">
       <div class="article">
          <div class="figure">
              <img />
              <div class="figcaption"></div>
          </div>
       </div>
   </div>
<div id="footer"></div>

Elementos Semânticos HTML

<header></header>
    <section>
          <article>
                <figure>
                    <img />
                    <figcaption></figcaption>
                </figure>
            </article>
    </section>
<footer></footer>

Elementos Semânticos HTML

Main – Identifica o conteúdo principal da página.

Nota: O conteúdo de um elemento <main> deve ser exclusivo do documento. Documentos como: Barras laterais, links de navegação, informações de direitos autorais, logotipos de sites e formulários de pesquisa não fazem parte do <main>.

Header – tag que agrupa elementos do cabeçalho. Pode conter alguns elementos de título, mas também um logotipo, um formulário de pesquisa, um nome de autor e outros elementos.

Nav – tag que representa links de navegação, seja dentro da página atual ou para outras.

Section – Define uma sessão específica no documento. Geralmente um agrupamento por categorias. Ex: seção de produtos, seção de contacto.

Article – Utilizado para posts de fórum ou blog, artigos de vários tipos;

Nota: Um determinado documento pode conter vários artigos. Exemplo: Um blog que mostra o texto de cada artigo um após o outro enquanto o leitor rola a página, cada postagem estaria contida em um <article>.

Aside – normalmente barra lateral com questionários rápidos, publicidade ou artigos relacionados indiretamente ao conteúdo principal da página;

Footer – rodapé da página normalmente com o autor da página, copyright e links relacionados.