9.9 KiB
| title | localeTitle |
|---|---|
| HTML5 Semantic Elements | Elementos semânticos em HTML5 |
Elementos semânticos em HTML5
Elementos HTML semânticos descrevem claramente seu significado de forma humana e legível por máquina. Elementos como <header> , <footer> e <article> são considerados semânticos porque descrevem com precisão a finalidade do elemento e o tipo de conteúdo que está dentro deles.
Um histórico rápido
HTML foi originalmente criado como uma linguagem de marcação para descrever documentos no início da Internet. Como a internet cresceu e foi adotada por mais pessoas, suas necessidades mudaram. Onde a internet era originalmente destinada a compartilhar documentos científicos, agora as pessoas também queriam compartilhar outras coisas. Muito rapidamente, as pessoas começaram a querer tornar a web mais bonita. Como a Web não foi criada inicialmente para ser projetada, os programadores usaram hacks diferentes para definir as coisas de maneiras diferentes. Em vez de usar o <table></table> para descrever informações usando uma tabela, os programadores os usariam para posicionar outros elementos em uma página. Conforme o uso de layouts visualmente projetados progrediu, os programadores começaram a usar uma tag "não-semântica" genérica como <div> . Eles costumavam dar a esses elementos um atributo class ou id para descrever seu propósito. Por exemplo, em vez de <header> isso geralmente era escrito como <div class="header"> . Como o HTML5 ainda é relativamente novo, esse uso de elementos não semânticos ainda é muito comum nos sites atuais.
Lista de novos elementos semânticos
Os elementos semânticos adicionados no HTML5 são:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Elementos como <header> , <nav> , <section> , <article> , <aside> e <footer> atuam mais ou menos como os elementos <div> . Eles agrupam outros elementos juntos em seções da página. No entanto, quando uma tag <div> pode conter qualquer tipo de informação, é fácil identificar que tipo de informação seria usada em uma região <header> semântica.
Um exemplo de layout de elementos semânticos por w3schools
Benefícios dos elementos semânticos
Para observar os benefícios dos elementos semânticos, aqui estão duas partes do código HTML. Este primeiro bloco de código usa elementos semânticos:
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Enquanto este segundo bloco de código usa elementos não semânticos:
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
Primeiro, é muito mais fácil de ler . Esta é provavelmente a primeira coisa que você notará ao observar o primeiro bloco de código usando elementos semânticos. Este é um pequeno exemplo, mas como programador você pode ler centenas ou milhares de linhas de código. Quanto mais fácil for ler e entender esse código, mais fácil será o seu trabalho.
Tem maior acessibilidade . Você não é o único que acha os elementos semânticos mais fáceis de entender. Mecanismos de pesquisa e tecnologias assistenciais (como leitores de tela para usuários com deficiência visual) também são capazes de entender melhor o contexto e o conteúdo do seu site, o que significa uma melhor experiência para seus usuários.
No geral, os elementos semânticos também levam a um código mais consistente . Ao criar um cabeçalho usando elementos não-semânticos, diferentes programadores podem escrever isso como <div class="header"> , <div id="header"> , <div class="head"> , ou simplesmente <div> . Existem muitas maneiras de criar um elemento de cabeçalho e todas dependem da preferência pessoal do programador. Ao criar um elemento semântico padrão, fica mais fácil para todos.
Desde outubro de 2014, o HTML4 foi atualizado para o HTML5, juntamente com alguns novos elementos "semânticos". Até hoje, alguns de nós ainda podem estar confusos sobre o porquê de tantos elementos diferentes que não parecem mostrar grandes mudanças.
<section> e <article>
"Qual é a diferença?", Você pode perguntar. Ambos os elementos são usados para seccionar um conteúdo e, sim, podem definitivamente ser usados de maneira intercambiável. É uma questão de em que situação. O HTML4 ofereceu apenas um tipo de elemento de contêiner, que é <div> . Embora isso ainda seja usado em HTML5, o HTML5 nos forneceu a <section> e <article> de forma a substituir o <div> .
A <section> e <article> elementos são conceitualmente semelhantes e intercambiáveis. Para decidir qual deles você deve escolher, observe o seguinte:
- Um artigo destina-se a ser distribuído de forma independente ou reutilizável.
- Uma seção é um agrupamento temático de conteúdo.
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
</section>
<header> e <hgroup>
O <header> elemento é geralmente encontrado na parte superior de um documento, uma seção ou um artigo e geralmente contém o cabeçalho principal e algumas ferramentas de navegação e pesquisa.
<header>
<h1>Company A</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
O <hgroup> elemento deve ser usado onde você deseja um cabeçalho principal com um ou mais subtítulos.
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>
LEMBRE-SE, que o <header> elemento pode conter qualquer conteúdo, mas o <hgroup> elemento só pode conter outros cabeçalhos, ou seja, <h1> para <h6> e incluindo <hgroup> .
<aside>
O <aside> O elemento é destinado ao conteúdo que não faz parte do fluxo do texto em que aparece, embora ainda esteja relacionado de alguma forma. Isto de <aside> como uma barra lateral do seu conteúdo principal.
<aside>
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
</aside>
Antes do HTML5, nossos menus foram criados com <ul> e <li> . Agora, junto com estes, podemos separar nossos itens de menu com um <nav> , para navegação entre suas páginas. Você pode ter qualquer número de <nav> elementos em uma página, por exemplo, é comum ter uma navegação global na parte superior (no <header> ) e navegação local em uma barra lateral (em um elemento <aside> ).
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>
<footer>
Se houver um <header> deve haver um <footer> . A <footer> é geralmente encontrado na parte inferior de um documento, uma seção ou um artigo. Assim como o <header> o conteúdo é geralmente metainformation, como detalhes do autor, informações legais e / ou links para informações relacionadas. Também é válido incluir a <section> elementos dentro de um rodapé.
<footer>©Company A</footer>
<small>
O <small> elemento aparece frequentemente dentro de um <footer> ou <aside> elemento que normalmente conteria informações sobre direitos autorais ou isenções legais e outras letras miúdas. No entanto, isso não se destina a tornar o texto menor. Está apenas descrevendo seu conteúdo, não prescrevendo apresentação.
<footer><small>©Company A</small> Date</footer>
<time>
O <time> elemento permite que uma data ISO 8601 não ambígua seja anexada a uma versão legível para humanos dessa data.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
Por que se preocupar com o <time> ? Enquanto humanos podem ler o tempo que pode se desambiguar pelo contexto da maneira normal, os computadores podem ler a data ISO 8601 e ver a data, hora e fuso horário.
<figure> e <figcaption>
<figure> é para envolver o conteúdo da imagem em torno dele e <figcaption> é legendar sua imagem.
<figure>
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>
Saiba mais sobre os novos elementos HTML5:
- w3schools fornece descrições simples e claras de muitos dos elementos de notícias e como / onde eles devem ser usados.
- O MDN também fornece uma ótima referência para todos os elementos HTML e se aprofunda em cada um deles.