HTML5 – Estrutura do documento

julho 14, 2015

Hoje, em nosso segundo post sobre HTML5, venho mostrar-lhes, leitores do Multart, um pouco sobre Motores de Renderização. Milhares de desenvolvedores acreditam que os motores de renderização são focados apenas ao CSS, porém, esse pensamento precisa mudar. Afinal, no HTML5, também existe compatibilidades com os motores de renderização. Atualmente o WebKit, utilizado peloGoogle Chrome e Safari, é o motor mais compatível com os padrões HTML5. Contudo, outros dois browsers vem se aprimorando a cada atualização, é o caso do Opera e Firefox, ambos já possuem uma grande compatibilidade com a linguagem de marcação. Uma rápida observação, ainda sobre compatibilidade, devemos ficar ligamos quanto a compatibilidade do IE7 e IE8, ambos possuem quase nenhuma compatibilidade com o HTML5. Infelizmente.

I've seen the future. It's in my browser.

Avançando para os códigos, vamos compreender uma técnica básica de detecção que nos permite verificar o suporte de grande parte das características do HTML5 e CSS3. Para efetuar essa detectação, utilizaremos uma biblioteca Javascript chamada Modernizr, a mesma executa automaticamente, quando é adicionada ao documento. Por exemplo, caso queira verificar se o browser aceita o recurso de Geolocalização, basta adicionar o código abaixo no corpo de seu documento:

if (Modernizr.geolocation) {
  // Aceita a feature
} else {
  // Não aceita a feature testada.
}

Caso o browser suportar a feature citada, no caso Geolocalização, o mesmo retornará true. Avançando um pouco mais, vamos conhecer a estrutura básica de um documento, cuja a mesma possui algumas modificações, veja:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    
</body>
</html>

A primeira mudança significante, que podemos ver no código acima, é a do doctype do documento, o mesmo passa a ser escrito como:

1	`<!DOCTYPE html>`

Ao invés do antigo metódo:

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

Porém, devemos lembrar que o DOCTYPE não é um tag do HTML, e sim uma instrução ao browser sobre qual versão de código a marcação foi escrita. Outra mudança que também chama nossa atenção é a do charset, pois, antigamente, escrevíamos o charset da seguinte forma:

1	`<meta` `http-equiv="Content-Type"` `content="text/html;charset=UTF-8">`

Mas, com a vinda do HTML, podemos escrevê-lo de uma vez, sem errar:

1	`<meta` `charset="UTF-8">`

A última mudança, em nosso simples código exemplo lá em cima, é a extinção do type nas chamadas de arquivos, como <link> para CSS e <script>, para claro, scripts. No antigo HTML4, precisávamos dizer ao navegador qual era o tipo de arquivo que estávamos utilizando, como, por exemplo, para CSS:

1	`<link` `type="text/css"` `rel="stylesheet"` `href="estilos.css">`

Ou, para Javascript:

1	`<script` `type="text/javascript"` `src="script.js"></script>`

Mas, com a vinda do HTML5, não precisamos mais disso. Agora podemos fazer nossos códigos com mais facilidade e produtividade, como tudo deve ser. Até o próximo artigo! ;)

Pesquisar este blog

Central Blogs

HTML5 – Estrutura do documento

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Relatório da PF Revela: Campanha de Desinformação Sobre Urnas Eletrônicas Iniciou em 2019

Bolo de Trigo Simples

Como se apaixonar pela sua vida