Entre em Contato

(43) 999-576-125 Formulário de Contato Skype: alanpatrickk

Dicas e técnicas de HTML5 que você precisa conhecer

Hoje eu andei dando uma pesquisada no Google pra tentar encontrar alguma postagem que eu pudesse colocar rapidinho aqui no blog (confesso, precisava criar mais um post pra ficar certinho no layout novo) e encontrei um artigo muito interessante que mostra 28 Recursos, Dicas e Técnicas de HTML5 e então resolvi trazer ele aqui pra vocês também. Como o artigo original é bem extenso, vou postar aqui apenas as dicas e técnicas de HTML5 que eu achei mais relevantes deste post em questão e ao final da minha seleção, vou deixar o link do artigo completo, caso você queira conferir. Então vamos lá:

1. Novo Doctype

A primeira dica e a mais básica é referente ao Doctype. O novo Doctype do HTML5 é bem mais simples e compacto, antigamente era necessário utilizar algo parecido com isto:

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

Agora bastar fazer assim:

<!DOCTYPE html>

2. O Elemento Figure

Digamos que precisamos colocar uma imagem com legenda numa postagem.

<img src="path/to/image" alt="Sobre a Imagem" />
<p>Imagem de Marte. </p>

Não há, infelizmente, uma maneira fácil ou semântica de associar a legenda, dentro da tag < p >, com o elemento < img > em si. O HTML5 corrige isso, introduzindo o elemento < figure >. Quando combinada com o elemento < figcaption >, nós podemos, agora, associar a legenda com sua respectiva imagem.

<figure>
    <img src="path/to/image" alt="Sobre a Imagem" />
    <figcaption>
<p>Isso é uma imagem de algo interessante. </p>
    </figcaption>
</figure>

3. Sem Mais Types Para Scripts e Links

Você, possívelmente, ainda adiciona o atributo type às suas tags link e script (eu mesmo ainda adicionava).

<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 no HTML5. Está implícito que ambas as tags referem-se a folhas de estilo e scripts, respectivamente, então podemos remover o atributo type por completo.

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

4. Placeholders

Na minha opinião esta é uma dica bem simples mas que muita gente talvez não conheça. Antes de utilizar JavaScript para criar textos indicativos (placeholder), ou ao invés de atribuir um valor inicial atraves de value, utilize o atributo placeholder para os campos de texto de seus formulários.

<input name="email" type="email" placeholder="alan.patrick@live.com" />

5. Os Header e Footer Semânticos

Já se foram os dias de:

<div id="header">
    ...
</div>
 
<div id="footer">
    ...
</div>

Divs, por natureza, não tem estrutura semântica – mesmo após atributos id serem aplicados. Agora, com o HTML5, temos acesso aos elementos < header > e < footer >. O código acima pode ser substituido pelo de logo abaixo:

<header>
    ...
</header>
 
<footer>
    ...
</footer>

É totalmente aceitável e permitido possuir vários headers e footers em seus projetos.

Tente não confundir esses elementos com os “cabeçalho” e “rodapé” do seu site. Eles referem-se, somente, ao receptáculo. Assim, faz todo sentido, posicionar, por exemplo, meta-informações na parte de baixo de um artigo de um blog, dentro de um elemento footer.

6. Atributo Autofocus

Novamente, o HTML5 acaba com a necessidade de soluções em JavaScript. Se um campo em particular deveria estar “selecionado”, ou em foco, por padrão, nós podemos utilizar, agora, o atributo autofocus.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Selecionei apenas 6 dicas aqui (confesso novamente que precisava criar este artigo rapidamente), mas se você quiser conferir TODAS AS 28 DICAS do artigo original, bastar clicar neste link. Vale a pena dar uma conferida nem que seja apenas para leitura e conhecimento!

< Até a próxima dica! Abraço. />