HTML Semântico

Página 1

HTML Semântico

Com o HTML semântico é possível dar significado à página através de elementos específicos que dão contexto código que virá dentro das tags.

Por que usar?

Acessibilidade: faz a webpage ficar acessível para dispositivos mobile e para pessoas com deficiência, isso porque os navegadores são capazes de interpretar melhor o código;

SEO: melhora o SEO, Search Engine Optimization , do website, consequentemente aumentando o número de visitas no site. Com um SEO melhor ferramentas de busca são capazes de identificar o conteúdo do site e relevância do conteúdo apropriadamente;

Facilidade de entendimento: usar o HTML semântico também facilita para outros programadores que virão trabalhar no código a entenderem o próprio código.

Header

Container com links navegáveis ou conteúdo introdutório

Nav

Bloco de links navegáveis.

Main

Encapsula o conteúdo dominante da página.

Footer

Contém informações como: contato, termos de uso, referência para páginas do site, mapa do site.

Página 2

Section

Define elementos com mesmo tema.

Article

Contém conteúdo que faz sentido por si só.

Aside

É usada para marcar informação adicional que realça outro elemento mas não é necessária para o entendimento do texto principal. Alguns usos principais: bibliografias, notas de rodapé, comentários, etc.

Figure

Elemento utilizado para encapsular mídia como imagens, ilustrações, diagramas, etc.

Figcaption

Descrição da mídia na tag FIgure.

Audio

Usado para embutir áudio. Não é obrigatório, mas é fortemente recomendado usar type para descrever o tipo de arquivo, para facilitar para o navegador reconhecer se o arquivo é suportado. Os Attributes permitem fazer diversas coisas com o audio, como por exemplo usando o controls que coloca os controles como play e pause para o audio.

Página 3

Video

Permite adicionar videos à página. Assim como audio, a tag video também pode receber atributos como controls, autoplay e loop.

Embed

Pode embutir qualquer mídia como vídeos, áudios, gifs, etc. É uma tag de fechamento automático, diferente da Video. Está deprecated.