Dicas de HTML 5

Linguagem de Marcação HTML 5

Inserindo estilo na tag body:

Inserindo estilo na tag p:

<p style="font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#ff0000">Parágrafo com estilo</p>

Inserindo áudio em html5:

Nota: Foi especificado mp3 e webm, pois alguns navegadores podem não executar o primeiro formato. Webm é considerado padrão para áudio, por ser suportado por todos navegadores

Inserindo vídeo em html5:

Inserindo formulário em html5:

<form>
Nome: <input type="text" required placeholder="Informe seu nome" autofocus="autofocus">
Idade: <input type="number" required min="18" max="120">
Url: <input type="url" required>
E-mail: <input type="email" required>
Data de nascimento: <<input type="date" required>
Busca: <input type="search" required>
<input type="submit" value="Cadastrar">
</form>
autofocus: o foco (cursor) é inserido na caixa especificada placeholder: É inserido um texto de ajuda. Quando o usuário digitar alguma informação, o mesmo é apagado.
required: É obrigatório o preenchimento do campo. Quando clica no botão de envio dos dados é apresentada mensagem de erro.
text: Atributo que permite a entrada de qualquer dado, seja alfabético, numérico, ou símbolos como: (!@#$%, etc.).
number: Atributo que permite somente a entrada de valores numérico. Os atributos min e max, estabelecem os valores mínimo e máximo.
url: Atributo para ser utilizado em endereços de páginas. Ele faz a validação da url.
email: Atributo para ser utilizado em e-mail. Ele faz a validação do e-mail.
date: Atributo para ser utilizado em data. É apresentado um calendário. O tipo de calendário, depende do navegador.
search: Atributo para realização de busca na página.

Inserindo formulário em html5 expressões regulares:

<form>
Nome: <input type="text" required placeholder="Informe seu nome" autofocus>
Idade: <input type="number" required min="18" max="120">
Url: <input type="url" required>
E-mail: <input type="email" required>
Data de nascimento: <input type="date" required>
Busca: <input type="search" required>
Cor: <input type="color" required>
Placa de carro: <input type="text" pattern="[A-Za-z]{3}-[0-9] {4}" maxlength="8" required>
<input type="submit" value="Cadastrar">
</form>

pattern: Atributo que permite estabelecer através de expressões regulares, a validação dos dados do campo. No exemplo acima: permite 3 letras maiúsculas, 3 letras minúsculas, 4 números de O a 9, mais o traço. Maxlength: tamanho de 8.

Algumas tags Implementadas no HTML5

<article>
<aside>
<nav>
<header>
<footer>
<section>
<main>
<video>
<audio>
<canvas>
<svg>
<details>
<summary>
Entre outras...

Estas tags semânticas ajudam a estruturar o conteúdo de forma mais clara e significativa.