freeCodeCamp

3.6 KiB

Raw Blame History

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

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 .

3.6 KiB Raw Blame History