O HTML é uma linguagem de marcação que tem como objetivo fornecer uma estrutura organizada e fluida para uma página. Ao trabalhar juntamente com o Javascript o HTML5 permite a entrega de um conteúdo altamente interativo que desperta o interesse dos usuários.
O objetivo de estruturar um documento HTML é para informar ao navegador como o conteúdo deve ser exibido. Sem uma estrutura declarativa na página, o navegador não detecta nenhuma estrutura, colocando a página de acordo com as regras estabelecidas pelo seu motor de renderização.
Ao usar a marcação HTML5, estamos instruindo o navegador a considerar sua semântica na página. Futuramente, as novas versões dos navegadores irão incorporar cada vez mais os padrãoes HTML5 em seus mecanismos de renderização.
A prova da certificação testará as capacidades de usar a marcação semântica HTML5 para criar páginas Web, bem como a capacidade de otimizar as páginas para uso por leitores de tela. Também será abordado o efeito que a marcação semântica terá na otimização para mecanismos de busca.
- Elementos e atributos HTML
- Marcação semântica do HTML5
- Criar uma estrutura de página HTML
- Otimização para buscadores
- Otimização para leitores de tela
Os elementos html são compostos por tags de abertura e fechamento. Em alguns casos temos tags que não necessitam de fechamento como <br> e <img>. Tendo em vista que no primeiro caso só é feito uma quebra de linha e no segundo só é inserido uma imagem.
Um atributo é a combinação de nome e um valor(name="value"). Vários atributos podem ser adicionadas a uma tag de abertura.
Alguns atributos são booleanos, o que quer dizer que basta termos o atributo presente que a opção será setada. exemplos:
- checked
- selected
- disabled
- disabled
- readonly
Forma minimizada de definir um atributo booleano:
<input type="checkbox" name="fruit" value="Apple" checked>Pode-se definir o atributo booleano usando uma string em branco ou repetindo o nome como valor:
<input type="checkbox" name="fruit" value="Apple" checked=''>Essa última forma parece redundante, mas é a forma mais utilizada:
<input type="checkbox" name="fruit" value="Apple" checked='checked'>Os atributos globais podem ser atribuidos em qualquer elemento html, mesmo podendo ser atribuídos em qualquer elemento os atributos globais pode não ter efeito em certos elementos.
| Atributo | Descrição |
|---|---|
| accesskey | Possibilita a criação de um atalho para pular ou dar foco em um elemento. |
| class | Especifica um ou mais nomes de classes para um elemnto |
| contenteditable | Atributo enumerado que indica se o elemento deve ser editado pelo usuário. |
| data-* | Define atributos personalidados |
| dir | Indica a direção do texto do elemento. Podendo usar os valores ltr para esquerda, rtl para direita e auto onde o agente do usuário definirá a posição |
| draggable | Indica se o elemento pode ser arrastado |
| id | Define um indicador exclusivo e único para o elemento |
| itemprop | Adiciona uma propriedade a um item |
| itemref | propriedades que não são descendentes do elemento com o atributo itemscope pode ser associado com o item usando este atributo. |
| itemscope | Funciona em conjunto com o itemtype para especificar que o HTML contido em um bloco pertece a determinado item. |
| itemtype | Define a URL do vocabulário que será usado para definir os itemprops na estrutura de dados. |
| spellcheck | Define se um elemento será verificado quanto a erros de ortografia. |
| style | Define o estilo que será aplicado ao elemento. |
| tabindex | Indica se o elemento pode ter foco de entrada e se deve participar da navegação sequencial do teclado. |
| title | Define se o texto de um elemento e de seus filhos deve ser trazuzidos quando a página for localizada. |
O HTML5 deriva diretamente do HTML4.1 e não do XHTML, na verdade não é uma nova versão do HTML e sim um conjunto de padrões que vão sendo incorporados incrementalmente. A especificação do HTML5 define os elementos semânticos para criação e estruturação de uma página. A tabela 1-1 lista os elementos semânticos do HTML5.
| Elemento HTML5 | Descrição |
|---|---|
| <article> | Define uma área independente na página |
| <aside> | Define uma área de conteúdo menor, fora do fluxo da página |
| <figcaption> | Define a legenda de uma figura |
| <figure> | Define o conteúdo que contém uma figura |
| <footer> | Define a parte inferior de uma seção ou página |
| <header> | Define a parte superior de uma seção ou página |
| <hgroup> | Define um grupo de cabeçalhos (H1 - H6) |
| <mark> | Define um texto que será destacado |
| <nav> | Define a navegação para outras páginas no site |
| <progress> | Define o progresso de uma tarefa |
| <section> | Define o conteúdo distinto de um documento |
O navegador é capaz de renderizar qualquer arquivo de texto simples, mas para fornecer uma estrutura ao documento é preciso que o arquivo contenha os elementos básicos do HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
O exemplo acima demonstra uma estrutura básica HTML. Podemos ver que não há muita diferência em relação a versões anteriores, com exceção do <!Doctype html> e da tag <meta>. A maior mudança no HTML5 foi na semântica.
O Doctype ou Document Type Definition tem como função informar ao navegador qual a especificação do código usado pelo documento. O Doctype deve ser declarado no início do documento.
a tag <html> dá inicio a estrutura do HTML e define o idioma principal do documento através do atributo lang.
Os metadados são um conjunto de informações da página e do seu conteúdo. São definidos usando a tag <meta>. Essas informações são de uso do navegador e ficam transparentes para o usuário. Todos o Metadados são declarados na tag <head>
O elemento <header> serve para definir um cabeçalho para uma página ou seção e pode conter vários elementos como menu de navegação, logo, titulos e campo de busca:
<body>
<header>
<h1>Título para o cabeçalho da página</h1>
</header>
</body>O elemento <header> não fica limitado somente ao inicio da página, ele prover uma forma semântica de declarar um cabeçalho para qualquer área de uma página Web.
<body>
<header>
<h1>Título para o cabeçalho da página</h1>
</header>
<article>
<header>
<h1>Título para o artigo</h1>
</header>
</article>
</body>O elemento <footer> representa o redapé de um documento ou de uma seção e pode conter blocos de navegação, informações de copyright, autor e links relacionados.
<footer>
<p>Escrito por: Thiago Reis</p>
<p>Contato: <a href="mailto:thiagoreis128@gmail.com">
thiagoreis128@gmail.com</a>.</p>
</footer>O uso do elemento <nav> em um documento HTML fornece aos usuários uma navegação através dos principais elementos de um aplicação ou documento Web. Esses elementos de navegação são representados normalmente como uma lista de links na parte superior da página. Tem casos que esses elementos de navegação são disponibilizados na parte lateral da página.
Normalmente a lista de links na parte é conhecida como o menu principal do site ou aplicação web, ficando no cabeçalho(não sendo obrigatório). No exemplo podemos ver a criação de um menu de navegação:
<body>
<header>
<h1>Título para o cabeçalho da página</h1>
<nav>
<a href='home.html'>Home</a>
<a href='blog.html'>Blog</a>
<a href='about.html'>About</a>
</nav>
</header>
</body>O elemento <hgroup> era bastante utilizado no <header> mas foi removido da especificação do HTML5 pelo W3C. Apesar de já te sido removido vale uma explicação de como era o seu uso:
<body>
<article>
<header>
<hgroup>
<h1>Exemplo de artigo</h1>
<!-- Outros níveis de cabeçalho -->
</hgroup>
</header>
<p>Algum informação sobre o artigo</p>
</article>
</body>O elemento <article> representa uma parte independente de uma página. O <article> pode ser usado na implementação de um post de um forum, artigos de jornal ou revista, post em blogs, comentários e qualquer outro tipo de conteúdo independente.
Cada artigo é independente. É possível criar artigos aninhados, no entanto cada artigo filho deve ser uma extensão direta e relacionada ao artigo pai.
Agora que o básico sobre o elemento <article> foi explicado podemos organizar a estrutura do nosso HTML:
<body>
<article>
<header>
<hgroup>
<h1>Um Primeiro artigo</h1>
</hgroup>
</header>
<section>
<h1>Primeira section</h1>
<aside>
Conteúdo da section
</aside>
</section>
<section>
<h1>Outra section</h1>
</section>
</article>
<article>
<h1>Não utilizando o elemento \
<hgroup> que foi depreciado. </h1>
<p>Um paragrafo dentro do artigo</p>
</article>
<footer>
<p>Escrito por: Thiago Reis</p>
<p>Contato:
<a href="mailto:thiagoreis128@gmail.com">
thiagoreis128@gmail.com</a>.</p>
</footer>
</body>Para um melhor entendimento e aprofundamento de cada elemento recomendo a utilização da referencia do W3School como material complementar. Faça uma leitura do conteúdo e depois veja uma exemplo dinânico que pode ser alterado e executado.
O elemento <section> faz a separação de uma página em seções. Não é o objetivo do elemento <article> dividir a página em partes menores, para isso utilizando o elemento <section> que define várias seções dentro de um artigo. Cada artigo pode conter 0 ou mais elementos <\section> para definir diferentes seções de conteúdo. Segue um exemplo da utilização de vários elementos <section> dentro de um <article>:
<article>
<section>
<h1>Primeira seção</h1>
<aside>
Conteúdo da section
</aside>
</section>
<section>
<h1>Outra seção</h1>
</section>
<section>
<h1>Última seção</h1>
</section>
</article>Define qualquer conteúdo que não esteja no fluxo ou conteúdo principal da página. Por exemplo, uma barra lateral, uma nota, alerta ou anúncio. O elemento <aside> não é posicionado automaticamente em nenhum lado específico da página. Serve apenas como uma maneira de definir semanticamente uma seção de texto ou gráficos.
<body>
<article>
<header>
<h1>Exemplo de uso do elemento \<aside></h1>
</header>
<section>
<h1>Section 1</h1>
<aside>Conteúdo do aside</aside>
</section>
</article>Como visto no exemplo ao ser executado no navegador, o elemento <aside> não é tratado de forma especial em comparação aos outros elementos.
Os elementos <figcapiton> e <figure>, novos no Html5, define os elementos semânticos necessários para incluir gráficos e figuras em uma página. Essas figuras e gráficos fornecem uma representação visual de informações no conteúdo e referencias através do texto.
<body>
<article>
<figure>
<img src="teste.jpg" >
<figcaption>Aqui vai a legenda da imagem</figcaption>
</figure>
</article>
</body>O elemento <progress> representa o progresso de uma tarefa ou objetivo. Os dois tipos de progresso são determinado e indeterminado. O tipo determinado é usado quando se sabe com antecedência a quantidade de trabalho a ser executado, quando se sabe o valor inicial e o valor final como por exemplo o download de arquivo para o qual se sabe o tamanho exato. Nesse caso a marcação HTML é a seguinte:
<p>Meta de usuários - 1000:</p>
<span>0</span>
<progress value="750" max="1000"></progress>
<span>1000</span>
Esse código irá gerar o seguinte resultado:
Meta de usuários - 1000:
0 1000Como mostrado no exemplo, o elemento \ possui dois atributos que é preciso saber ao fazer sua declaração: "value" e "max". O atributo value define o valor atual ou a posição do elemento \ em um determinado momento. Já o atributo "max" informa ao navegador qual o valor máximo perminito para o elemento. O navegador usa esses dois atributos para definir quanto do elemento deve ser colorido para indicar o progresso.