3.6 KiB
3.6 KiB
title | localeTitle |
---|---|
Semantic HTML Elements | Elementos HTML semântico |
Elementos HTML semântico
O elemento <em>
marca o texto como sendo enfatizado acima do texto ao redor dele. Normalmente, o navegador processa isso em itálico , mas você pode adicionar outros estilos usando CSS.
Elementos HTML semânticos fornecem significado a navegadores, desenvolvedores e usuários de um site. Em contraste com elementos como <div>
ou <span>
, elementos semânticos como <header>
e <footer>
explicam mais claramente o propósito de cada seção de um website.
Por que usar elementos semânticos?
Os desenvolvedores usam elementos semânticos para aprimorar o seguinte:
- acessibilidade: ajude as tecnologias assistenciais a ler e interpretar sua página da web
- capacidade de pesquisa: ajude os computadores a entender seu conteúdo
- internacionalização: apenas 13% do mundo são falantes nativos de inglês
- interoperabilidade: ajudar outros programadores a entender a estrutura da sua página web 1
Elementos semânticos úteis
<header>
define um cabeçalho para o documento ou uma seção<footer>
define um rodapé para o documento ou uma seção<nav>
define links de navegação no documento<main>
define o conteúdo principal de um documento<section>
define uma seção no documento - a especificação define isso como "um agrupamento temático de conteúdo, normalmente com um cabeçalho", para que você possa considerá-lo como um capítulo<article>
define um artigo no documento<aside>
define conteúdo além do conteúdo da página<address>
define as informações de contato do autor / proprietário de um documento ou artigo<figure>
define o conteúdo auto-suficiente, como ilustrações, diagramas, fotos, blocos de código, etc. 2
Elementos semânticos menos conhecidos
<bdi>
define uma seção de texto que pode ser formatada em uma direção diferente de outro texto (por exemplo, uma citação em hebraico ou árabe em um outro artigo em inglês)<details>
define detalhes adicionais que as pessoas podem ver ou ocultar (como uma dica de ferramenta)<dialog>
define uma caixa de diálogo ou janela<figcaption>
define a legenda para um<figure>
<mark>
define o texto marcado ou realçado<menuitem>
define um item de comando / menu que o usuário pode selecionar em um menu pop-up<meter>
define uma medida escalar dentro de um intervalo conhecido (um medidor)<progress>
define o progresso de uma tarefa<rp>
define o que mostrar em navegadores que não suportam anotações em ruby<rt>
define uma explicação / pronúncia de caracteres (para tipografia do leste asiático)<ruby>
define uma anotação rubi (para tipografia do leste asiático)<summary>
define um título visível para um elemento<details>
<time>
define uma data / hora<wbr>
define uma possível quebra de linha 2
Fontes
- Lee, Michelle. "Uma Visão Geral da Semântica HTML5." CodePen . 16 de fevereiro de 2016. Acessado em: 24 de outubro de 2017
- Bidaux, Vincent. "Elementos semânticos HTML5 e Webflow: o guia essencial." Webflow . 16 de dezembro de 2016. Acessado em: 24 de outubro de 2017
Mais Informações:
Para mais informações: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics
Consulte o artigo do MDN Web Docs .