Depois de algum tempo sem fazer, resolvi lançar mais uma série de posts sobre o que você já deveria saber sobre o HTML5. Hoje iremos ver a primeira parte da nossa série!
A indústria se move rapidamente! Se você não tiver cuidado, você vai ficar para trás. Então, se você está se sentindo um pouco sobrecarregado com as próximas mudanças / atualizações do HTML5, use isso como uma fonte das coisas que você deve saber.
1. Novo Doctype
Ainda usando aquele maldito e impossível de memorizar XHTML doctype?
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Se sim, porquê? Troque para a nova doctype HTML5.
<!DOCTYPE html>
Na verdade, você sabia que sinceramente falando não é realmente necessário para HTML5? No entanto, ele é usado para navegadores atuais e antigos que requerem um doctype especifico Assim, sem preocupação, sinta-se livre para jogar a precaução ao vento, e abraçar o novo doctype HTML5.
2. O Elemento Figura
Considere o seguinte mark-up para uma imagem:
<img src=”path/to/image” alt=”About image” />
<p>Image of Mars. </p>
Infelizmente, não há nenhuma maneira fácil de associar a legenda com a imagem, e até então fazíamos isto através de uma tag de parágrafo. O HTML5 retifica isso, com a introdução do elemento <figure>. Quando combinado com o elemento <figcaption>, podemos inserir legendas facilmente.
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. <small> Redefinido
Não muito tempo atrás, o elemento <small> era utilizado para criar subtítulos que estão relacionadas com o logotipo ou alguma imagem. No entanto, agora, isso seria uma utilização incorreta. O elemento foi redefinido, mais apropriadamente, para se referir a uma letra pequena. Imagine uma declaração de direitos autorais no rodapé do seu site; de acordo com a nova definição HTML5 deste elemento; o <small> seria o wrapper correto para esta informação.
O pequeno elemento agora se refere a “letras pequenas”
4. Esqueça Types para scripts e links
Você possivelmente já adicionou ou ainda adiciona o atributo de “type” para suas tags de estilo ou scripts, não é?
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
Isso não é mais necessário. Está implícito que ambas as marcas se referem a folhas de estilo e scripts, respectivamente. Como tal, podemos remover o atributo type todos juntos.
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
5. Aspas duplas ou não
Essa pra mim é uma das mudanças na qual vai ser difícil alterar. Lembre-se, HTML5 não é XHTML. Você não tem que envolver seus atributos entre aspas, se você não quiser. Você não tem que fechar seus elementos. Com isso dito, não há nada de errado com isso, se isso faz você se sentir mais confortável. Eu ainda prefiro aspas, por mania ou vício, talvez.
<p class=myClass id=someId> Start the reactor.
6. Faça o seu conteúdo editável
Os novos navegadores têm um novo atributo elegante que pode ser aplicado a elementos, chamados contenteditable. Como o nome indica, este permite ao usuário editar algum do texto contido no elemento, incluindo seus filhos. Há uma variedade de usos para algo como isso, incluindo uma lista de tarefas simples, que também tira proveito de armazenamento local.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable=”true”>
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
7. Input de e-mail
Se aplicarmos um tipo de “email” para formar inputs, podemos instruir o navegador para permitir que apenas strings que estejam em conformidade com uma estrutura de e-mail válido. Em navegadores mais antigos que não entendem este tipo “email”, eles simplesmente irão interpretar como uma caixa de texto regular.
<input id=”email” name=”email” type=”email” />
8. Placeholders
Antes, tínhamos de utilizar um pouco de JavaScript para criar espaços reservados para caixas de texto. Agora a utilização de placeholders, fica muito mais simples e intuitiva, basta adicionar o atributo placeholder.
<input name=”email” type=”email” placeholder=”[email protected]” />
9. Local Storage
Graças ao armazenamento local (não oficialmente HTML5, mas já bastante utilizado), podemos fazer navegadores mais novos armazenar informações, mesmo depois que o navegador é fechado ou é atualizado.
Eu já fiz um post aqui no blog exclusivamente para isto e você pode ler na integra aqui.
Por hoje é só! Vamos continuar com outras partes do artigo ao longo do tempo, prometo que não vai demorar muito.
Um grande abraço!
