Quando começar a usar o HTML5? Ontem!!!
Por cautela, muitas vezes demoramos a começar a usar o HTML5. Esperamos que a maioria dos navegadores se adequassem para evitar gastar muito tempo com “recursos” para fazer o site funcionar na maioria dos navegadores. Bom, essa fase já passou. Se você ainda está receoso, perca o medo e se lance, pois o HTML5 veio para ficar e para facilitar.
O que eu preciso saber para começar a usar o HTML5?
Para quem já conhece o HTML, tableless e XHTML vai ser muito fácil. Vou mostrar as duas formas. Comparando o novo com o que se usa comumente.
1- HTML5 - Começando pelo começo.
2- Conhecendo os novos elementos do HTML5
3- Conhecendo os elementos retirados do HTML5
4- Conhecendo os atributos retirados do HTML5
5- Conhecendo os atributos inseridos do HTML5
1- HTML5 - Começando pelo começo.
Vamos criar o nosso primeiro arquivo HTML5.
Exemplo:
<!DOCTYPE html >
<head>
<meta charset="utf-8">
<title>Meu primeiro HTML5</title>
</head>
<body>
<p>Alô mundo!</p>
</body>
</html>
As diferenças começam no head.
Vamos por partes:
1.1)
<!DOCTYPE html >
Eu não disse q o html5 veio para facilitar?! Sim, é só isso mesmo.
Para quem estava acostumado com:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
ou
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Facilitou, não?!
1.2)
<meta charset="utf-8">
Ainda pode ser usado como antes:
<meta equiv="Content-Type" content="text/html; charset=utf-8">
Mas é melhor usar a forma nova.
Observe que também pode ser usado em maiúsculas e com aspas. As sintaxes abaixo são igualmente válidas:
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta charset="utf-8">
<meta charset="Utf-8">
“o HTMl não é XML”
- O HTML não é “case sensitive”, logo não faz diferença se as letras aparecerem maiúsculas ou minúsculas . O XML é “case sensitive”. No XML <meta charset="UTF-8"> é diferente de <meta charset="utf-8">.
1.3) Outro detalhe, sobre “o HTMl não é XML” é que no HTML não é necessário a barra ao final de elementos vazios.
Ex.:
Use: <br> ao invés de <br />
Use: <hr> ao invés de <hr />
Use: <img src="ex.jpg" alt="exemplo" /> ao invés de <img src="ex.jpg" alt="exemplo" />
Logo, também são sintaxes igualmente válidas:
<meta charset="utf-8">
<meta charset="utf-8">
Se você está acostumado a colocar barra no fim, como nos exemplos acima, não se preocupe. Vai funcionar mesmo com a barra, mas procure ir se acostumando a não coloca-la.
1.4) Use o atributo LANG
<!DOCTYPE html >
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Meu primeiro HTML5</title>
</head>
Lembre-se que você não só pode como deve usar atributo LANG em outras tags para indicar a mudança no idioma do texto. Por exemplo:
<!DOCTYPE html >
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>O amor é lindo!</title>
</head>
<body>
<h1>Eu estou apaixonada!!!! rs</h1>
<span lang="es">Yo te amo</span>
<p lang="fr">Je t'aime</p>
<em lang="it">Io ti amo</em>
<p lang="de">Ich liebe dich</p>
<strong lang="en">I love you.</strong>
<p>Resumindo... O amor é lindo!</p>
</body>
</html>
Amanhã continuamos... É uma série.rs