58 lines
3.6 KiB
Markdown
58 lines
3.6 KiB
Markdown
|
---
|
||
|
|
title: Semantic HTML Elements
|
||
|
|
localeTitle: 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
|
||
|
|
|
||
|
|
1. [Lee, Michelle. "Uma Visão Geral da Semântica HTML5." _CodePen_ . 16 de fevereiro de 2016. Acessado em: 24 de outubro de 2017](https://codepen.io/mi-lee/post/an-overview-of-html5-semantics)
|
||
|
|
2. [Bidaux, Vincent. "Elementos semânticos HTML5 e Webflow: o guia essencial." _Webflow_ . 16 de dezembro de 2016. Acessado em: 24 de outubro de 2017](https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide)
|
||
|
|
|
||
|
|
#### Mais Informações:
|
||
|
|
|
||
|
|
Para mais informações: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics
|
||
|
|
|
||
|
|
Consulte o [artigo](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) do [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) .
|