3.6 KiB
3.6 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Semantic HTML Elements | Elementos Semaânticos em HTML |
Elementos Semaânticos em HTML
O elemento <em> marca o texto dentro dele como sendo enfatizado. 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: ajuda as tecnologias assistenciais a ler e interpretar sua página web
- capacidade de pesquisa: ajuda os computadores a entender seu conteúdo
- internacionalização: apenas 13% do mundo são falantes nativos de inglês
- interoperabilidade: ajuda outros programadores a entender a estrutura da sua página web
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 ao lado 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 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 uma<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 .