dicas de html 5

Dicas sobre HTML5 e CSS3

Ultimamente conversando com alguns amigos vejo a insatisfação que eles tem de querer ter um efeito, ou uma forma dentro do seu site, mas são impedidos pelas limitações da tecnologia. Com isso vem a grande pergunta, vamos dar suporte a quais browser?

Partindo desse ponto, podemos saber em que passo caminhar para a implementação de novas tecnologias como o HTML5 e o CSS3.

Neste post darei inicio a uma explicação sobre HTML5, CSS3, colocando links sobre dúvidas e soluções encontrados durante do desenvolvimento client.

Novo Doctype

O doctype atual que utilizamos no xhtml é quase impossível de ser decorado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Agora como novo Doctype do html5 voce vai ter isso na ponta da lingua:

<!DOCTYPE html>

Ainda mais sabendo que o doctype para o html5 não é nessessário, apenas é boa prática utilizar porque para navegadores antigos pelo menos haverá a marcação da tag válida.

Tag de imagem

Considerando o mark-up para imagem abaixo:

<img src="path/to/image" alt="About image" />

<p>Image of Mars. </p>

Não é fácil de uma forma semantica, associar a legenda a uma imagem sem utilizar uma tag de paragrafo ou span. Já no HTML5 isso se resolve de maneira muito mais simples e semantico.

<figure>
  <img src="path/to/image" alt="About image" />
  <figcaption>
    <p>This is an image of something interesting. </p>
  </figcaption>
</figure>

Mas agora com a redefinição dessa lógica voce poderá utilizar a tag <figure>, e quando combinado com a tag <figcaption>, faz com que semanticamente os dois elementos tenham relação.

Não é preciso mais utilizar a tag `Type` no style nem no script

Acredito que até hoje em dia voce define o atributo Type nas chamadas de style e de script,

<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 atualmente, pois já é implicito que é um tipo de folha de estilo ou um texto javascript respectivamente, sendo assim podemos utilizar essas tags sem o atributo type sem nenhum problema.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

Citar ou não Citar ?

eis a questão! Lembrando de que HTML5 não é XHTML, não é a necessidades de criar seus atributos com valores em aspas, isso fica a cargo do desenvolvedor. Se voce acha isso visualmente bom então fique a vontade para continuar, mas se acha excesso de código, é hora para deixar de lado.

Deixe seus conteúdos editáveis

<!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>

Os novos navegadores têm um novo atributo chamado nifty, que podem ser aplicados aos elementos, chamados contenteditable. Como o próprio nome diz, permite ao usuário editar qualquer do texto dentro dessa tag, incluindo os seus filhos. Existe uma variedade grande para o uso dessa funcionalidade, como por exemplo uma aplicação de To-Do, que tira proveito de armazenamento local.

<ul contenteditable=true>

fonte:kanjim yakamoto