Estrutura básica do HTML5

No HTML5 há muitas alterações

A estrutura básica do HTML5 continua sendo a mesma das versões anteriores da linguagem, há apenas uma excessão na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:

Arquivo: index.html
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="estilo.css" />
   <title>Html5</title>
</head>
<body>

</body>
</html>

O Doctype

O Doctype deve ser a primeira linha de código do documento antes da tag HTML.

<!DOCTYPE html!>

O elemento HTML

<html lang="pt-br">

O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.
Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

Conteúdo Editável

Propósito:
O atributo contenteditable especifica se o conteúdo de um elemento é editável ou não.
Código:
<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
Exemplo:

This is a paragraph. It is editable. Try to change this text.

Tags

HTML <abbr> Tag

Propósito:

Cria uma definição de uma sigla:
Exemplo:
WHO: World Health Organization

Código:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
Exemplo:

The WHO was founded in 1948.

HTML <address> Tag

Propósito:
Representa informações de contato para o documento.
Código:
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Exemplo:
Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

HTML <bdo> Tag

Propósito:
A tag <bdo> é usado para substituir a direção do texto atual.
Atributos:
dir="lrt" => Não inverte os caracteres.
dir="rtl" => Inverte os caracteres.
Código:
<p>This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>
Exemplo:

This paragraph will go left-to-right.

This paragraph will go right-to-left.

HTML <em> <strong> <dfn> <code> <samp> <kbd> <var> Tags

Propósito:
<em> exibe o texto como enfatizado
<strong> Define texto importante
<dfn> Define um termo de definição
<code> Define um código de computador
<samp> Define a saída de amostra a partir de um programa de computador
<kbd> Define a entrada de teclado
<var> Define uma variável
Código:
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
Exemplo:
Emphasized text
Strong text
Definition term
A piece of computer code
Sample output from a computer program
Keyboard input
Variable

HTML <datalist> Tag

Propósito:
Especifica uma lista de opções pré-definidas para um elemento <input>.
Código:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
Exemplo:

HTML <del> Tag

Propósito:
A tag <del> define o texto que foi excluído de um documento.
Código:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
Exemplo:

My favorite color is blue red!

HTML <fieldset> e <legend> Tag

Propósito:
A tag <fieldset> junto com <legend> cria um layout em torno do formulário.
Código:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
Exemplo:
Personalia: Name:
Email:
Date of birth:

HTML <figcaption> e <figure> Tag

Propósito:
A tag <figcaption> define uma legenda para um elemento <figure>.
Código:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
Exemplo:
The Pulpit Rock
Fig.1 - A view of the pulpit rock in Norway.

HTML <mark> Tag

Propósito:
A tag <mark> marca o texto de amarelo
Código:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Exemplo:

Do not forget to buy milk today.

HTML <noscript> Tag

Propósito:
O <noscript> marca é usada para fornecer um conteúdo alternativo para usuários que tenham deficiência scripts em seu browser ou ter um navegador que não suporta Javascript.
Código:
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
Exemplo:

HTML <optgroup> Tag

Propósito:
O <optgroup> é usado para opções do grupo de relacionados em uma lista drop-down.
Código:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Exemplo:

HTML <output> Tag

Propósito:
A tag <output> representa o resultado de um cálculo (com a realização de um script).
Código:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="a" value="50">
+<input type="number" name="b" value="50">
=<output name="x">100</output>
</form>
Exemplo:
+ =100

HTML <progress> Tag

Propósito:
A tag <progress> insere uma barra de progressão.
Código:

Downloading progress:
<progress value="22" max="100"></progress>
Exemplo:
Downloading progress:

HTML <q> Tag

Propósito:
A tag <q> insere aspas em torno da cotação.
Código:
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
Exemplo:

WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.

Campos Input

Input type: color

Propósito:
Escolhe uma cor de um seletor de cores.
Código:
<form action="demo_form.asp">
Select your favorite color: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
Exemplo:
Select your favorite color:

Input type: date

Propósito:
Definir uma data.
Código:
<form action="demo_form.asp">
Birthday: <input type="date" name="bday">
<input type="submit">
</form>
Exemplo:
Birthday:

Input type: datetime

Propósito:
Definir uma data e hora de controle (com fuso horário):
Código:
<form action="demo_form.asp">
Birthday (date and time): <input type="datetime" name="bdaytime">
<input type="submit">
</form>
Exemplo:
Birthday (date and time):

Input type: datetime-local

Propósito:
Definir um controle de data e hora (sem fuso horário).
Código:
<form action="demo_form.asp">
Birthday (date and time): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>
Exemplo:
Birthday (date and time):

Input type: email

Propósito:
Defina um campo de um endereço de e-mail (será validada automaticamente quando submetido).
Código:
<form action="demo_form.asp">
E-mail: <input type="email" name="usremail"><br>
<input type="submit">
</form>
Exemplo:
E-mail:

Input type: image

Propósito:
Define uma imagem como um botão de envio.
Código:
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Exemplo:
First name:
Last name:

Input type: month

Propósito:
Definir um mês e um ano de controle (sem fuso horário).
Código:
<form action="demo_form.asp">
Birthday (month and year): <input type="month" name="bdaymonth">
<input type="submit">
</form>
Exemplo:
Birthday (month and year):

Input type: number

Propósito:
Define um campo numérico para digitar um número (Você também pode definir restrições sobre o que os números são aceitas).
Parâmetros:

Usar os seguintes atributos para especificar restrições:

  • max - especifica o valor máximo permitido
  • min - Especifica o valor mínimo permitido
  • step - especifica os intervalos de número legais
  • value - Especifica o valor padrão
Código:
<form action="demo_form.asp">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
Exemplo:
Quantity (between 1 and 5):

Input type: range

Propósito:
Define um controle para entrar em um número cujo valor exato não é importante (como um controle deslizante). Você também pode definir restrições sobre o que os números são aceitos.
Parâmetros:

Usar os seguintes atributos para especificar restrições:

  • max - especifica o valor máximo permitido
  • min - Especifica o valor mínimo permitido
  • step - especifica os intervalos de número legal
  • value - Especifica o valor padrão
Código:
<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
Exemplo:
Points:

Input type: time

Propósito:
Definir um controle de entrada de um tempo (não fuso horário).
Código:
<form action="demo_form.asp">
Select a time: <input type="time" name="usr_time">
<input type="submit">
</form>
Exemplo:
Select a time:

Input type: url

Propósito:
Definir um campo para digitar uma URL.
Código:
<form action="demo_form.asp">
Add your homepage: <input type="url" name="homepage"><br>
<input type="submit">
</form>
Exemplo:
Add your homepage:

Input type: week

Propósito:
Define um controle de semana e ano (sem nenuma zona de tempo).
Código:
<form action="demo_form.asp">
Select a week: <input type="week" name="year_week">
<input type="submit">
</form>
Exemplo:
Select a week:

Input type: search

Propósito:
Define um campo de busca (como uma pesquisa no site, ou busca no Google).
Código:
<form action="demo_form.asp">
Search Google: <input type="search" name="googlesearch"><br>
<input type="submit">
</form>
Exemplo:
Search Google: