Como usar corretamente as tags/etiquetas ou marcadores que o HTML5 nos oferece.
No artigo anterior sobre HTML5 (programar com HTML5) aprendemos o básico de como iniciar corretamente um documento HTML5 e até como usar várias das tags mais importantes dessa linguagem.
Neste artigo vamos ver como usar corretamente as tags oferecidas pelo HTML5, em artigos futuros veremos como personalizar uma página web utilizando CSS, já que esta linguagem é inseparável do HTML.
Agora, já sabemos que para iniciar um documento HTML5, primeiro devemos declarar o DOCTYPE que é nada mais do que esta simples linha <!DOCTYPE html> .
Metadatas
Metadatas são aquelas tags que geralmente vemos no<head> das páginas. Estas são usadas para estabelecer o modo de comportamento do conteúdo da página, um exemplo claro seria:
<meta> geralmente contém uma descrição da página como outros dados para indexação nos buscadores, a etiqueta <link> ou <script> também são considerados como metadatas, já que estão envolvidos com a interação e apresentação da página.
Títulos
Os títulos são as etiquetas de cabeçalho como <h1>, <h2> ... <h6>, HTML5 traz uma nova tag para delimitar esses títulos:
<hgroup> , foi criada para delimitar dois títulos em diante.
Roles WAI-ARIA
Com os roles podemos melhorar a acessibilidade da página. Um exemplo de como usá-los seria:
Figure e FigureCaption
Estes elementos são utilizados para identificar imagens, um exemplo:
<figure> é onde engloba a imagem e o <figcaption> , este engloba o texto a ser exibido na imagem, vale ressaltar que o uso de <figcaption> é opcional.
Neste artigo vamos ver como usar corretamente as tags oferecidas pelo HTML5, em artigos futuros veremos como personalizar uma página web utilizando CSS, já que esta linguagem é inseparável do HTML.
 |
| W3C HTML5 |
Metadatas são aquelas tags que geralmente vemos no
<head>A tiqueta
<title>Metadatas em HTML5</title>
<meta charset='utf-8'>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
Os títulos são as etiquetas de cabeçalho como <h1>, <h2> ... <h6>, HTML5 traz uma nova tag para delimitar esses títulos:
<hgroup>Esta tag
<h1>Título principal</h1>
<h2>Subtítulo</h2>
</hgroup>
Com os roles podemos melhorar a acessibilidade da página. Um exemplo de como usá-los seria:
<header role='banner'>Poderá encontrar mais informações em WAI-ARIA 1.0 Authoring Practices.
<nav role="navigation">
<!-- ... -->
</nav>
</header>
Estes elementos são utilizados para identificar imagens, um exemplo:
<figure>Em
<img alt="..." src="image.jpg" />
<figcaption>
Texto para exibir
</figcaption>
</figure>
COMENTÁRIOS