Semântica é o estudo dos significados de palavras e frases em linguagem.
elementos semânticos são elementos com um significado.
HTML semântica é o uso de marcação HTML para reforçar a semântica, ou significado, da informação em páginas web e aplicações web em vez de meramente para definir a sua apresentação ou olhar.
HTML semântica é processado por navegadores da web tradicionais, bem como por muitos outros agentes de usuário. CSS é usado para sugerir a sua apresentação aos usuários humanos.
Quais são elementos semânticos?
Um elemento semântica descreve claramente o seu significado tanto para o navegador e o desenvolvedor.
Exemplos de elementos não semânticos: <div> e <span> - Não diz nada sobre o seu conteúdo.
Exemplos de elementos semânticos: <form> , <table> e <img> - define claramente o seu conteúdo.
Suporte navegador
| sim | sim | sim | sim | sim |
HTML5 elementos semânticos são suportados em todos os navegadores modernos.
Além disso, você pode "teach" os navegadores mais antigos como lidar com "unknown elements" .
Leia sobre isso no suporte do navegador HTML5 .
Novos elementos semânticos em HTML5
Muitos sites contêm código HTML como: <div id="nav"> <div class="header"> <div id="footer">
para indicar a navegação, cabeçalho e rodapé.
HTML5 oferece novos elementos semânticos para definir diferentes partes de uma página web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> Elemento
O <section> elemento define uma seção em um documento.
De acordo com a documentação HTML5 do W3C: "A section is a thematic grouping of content, typically with a heading."
A home page do site poderia ser dividido em seções para introdução, conteúdo e informações de contato.
Exemplo
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section> Tente você mesmo " HTML5 <article> Elemento
O <article> elemento especifica o conteúdo independente, auto-suficiente.
Um artigo deve fazer sentido por conta própria, e que deve ser possível para lê-lo de forma independente do resto do site.
Exemplos de onde um <article> elemento pode ser usado:
- Fórum de Discussão
- post
- Artigo de jornal
Exemplo
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> Tente você mesmo " Elementos semânticos de nidificação
No padrão HTML5, o <article> elemento define um bloco completo, auto-suficiente de elementos relacionados.
O <section> elemento é definido como um bloco de elementos relacionados.
Podemos usar as definições para decidir como elementos ninho? Não nós não podemos!
Na Internet, você vai encontrar páginas HTML com <section> elementos contendo <article> elementos, e <article> elementos contendo <sections> elementos.
Você também vai encontrar páginas com <section> elementos contendo <section> elementos, e <article> elementos contendo <article> elementos.
Jornal: Os esportes articles na esportes section , ter um técnico section em cada article .
HTML5 <header> Elemento
O <header> elemento especifica um cabeçalho de um documento ou seção.
O <header> elemento deve ser usado como um recipiente para o conteúdo introdutório.
Você pode ter várias <header> elementos em um documento.
O exemplo a seguir define um cabeçalho para um artigo:
Exemplo
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> Tente você mesmo " HTML5 <footer> Elemento
O <footer> elemento especifica um rodapé de um documento ou seção.
Um <footer> elemento deve conter informações sobre o seu elemento contendo.
Um rodapé normalmente contém o autor das informações do documento, direitos de autor, links para termos de uso, informações de contato, etc.
Você pode ter várias <footer> elementos em um documento.
Exemplo
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer> Tente você mesmo " HTML5 <nav> Elemento
O <nav> elemento define um conjunto de links de navegação.
O <nav> elemento é destinado a grandes blocos de links de navegação. No entanto, nem todos os links em um documento deve estar dentro de um <nav> elemento!
Exemplo
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> Tente você mesmo " HTML5 <aside> Elemento
O <aside> elemento define algum conteúdo, além do conteúdo é colocado em (like a sidebar) .
O conteúdo de lado deve estar relacionado com o conteúdo circundante.
Exemplo
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> Tente você mesmo " HTML5 <figure> e <figcaption> Elements
Em livros e jornais, é comum ter legendas com as imagens.
O propósito de uma legenda é adicionar uma explicação visual a uma imagem.
Com HTML5, imagens e legendas podem ser agrupados em <figure> elementos:
Exemplo
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure> Tente você mesmo " O <img> elemento define a imagem, o <figcaption> elemento define a legenda.
Por Semântica HTML5 Elements?
Com HTML4, os desenvolvedores usaram seu próprio favorito nomes de atributos para os elementos da página de estilo:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
Isto tornou impossível para os motores de busca para identificar o conteúdo da página web correta.
Com elementos de HTML5 como: <header> <footer> <nav> <section> <article> , isso vai se tornar mais fácil.
De acordo com o W3C, a Web Semântica:
"Permite que os dados sejam compartilhados e reutilizados entre aplicativos, empresas e comunidades."
considerações
Nos casos em que um documento exige semântica mais precisas do que as expressas em HTML sozinho, fragmentos do documento pode ser fechado dentro de span ou div elementos com nomes de classes significativas, tais como <span class = "autor"> e <div class = "factura" >. Onde esses nomes de classe são também um identificador de fragmento dentro de um esquema ou ontologia, eles podem conectar-se a um sentido mais definido. Microformatos formalizar esta abordagem à semântica em HTML.
Uma limitação importante desta abordagem é que tal marcação baseados em elemento de inclusão deve satisfazer as condições de boa formação. Como estes documentos são amplamente estruturado em árvore, isso significa que apenas fragmentos equilibradas de uma sub-árvore pode ser marcado desta forma. Um meio de marcação-se qualquer secção arbitrária de HTML exigiria um mecanismo independente da própria estrutura de marcação, tal como XPointer.
Boa HTML semântica também melhora a acessibilidade de documentos web (ver também Directrizes Web Content Accessibility). [Carece de fontes?] Por exemplo, quando um leitor de tela ou navegador de áudio pode determinar corretamente a estrutura de um documento, ele não vai desperdiçar o usuário com deficiência visual tempo lendo as informações repetidas ou irrelevante quando foi marcado corretamente.
Elementos semânticos em HTML5
Abaixo está uma lista alfabética dos novos elementos semânticos em HTML5.
Os links ir para o nosso completo Referência HTML5 .
| etiqueta | Descrição |
|---|---|
| <article> | Define um artigo |
| <aside> | Define o conteúdo, além do conteúdo da página |
| <details> | Define detalhes adicionais que o usuário pode exibir ou ocultar |
| <figcaption> | Define uma legenda para um <figure> elemento |
| <figure> | Especifica o conteúdo auto-suficiente, como ilustrações, diagramas, fotos, listas de código, etc. |
| <footer> | Define um rodapé de um documento ou seção |
| <header> | Especifica um cabeçalho de um documento ou seção |
| <main> | Especifica o conteúdo principal de um documento |
| <mark> | Define marcada / texto realçado |
| <nav> | Define links de navegação |
| <section> | Define uma seção em um documento |
| <summary> | Define um título visível por um <details> elemento |
| <time> | Define uma data / hora |