anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

HTML 5: o que você precisa saber para começar

A linguagem HTML ou HyperText Markup Language (Linguagem de marcação de hipertexto, em tradução livre para o português) é indispensável para a construção de páginas da web. Sua estrutura tem como principal característica as tags, comandos para inserção de algum tipo de elemento ou de suas respectivas características.

Como você deve saber, a linguagem HTML tem passado por várias transformações ao longo desses anos, recebendo aperfeiçoamentos em seus comandos e recebendo diversas nomenclaturas diferentes a cada ciclo de mudanças. Você pode observar parte dessa evolução na linha do tempo a seguir:

Gráfico HTML

O HTML5 ainda é o assunto da vez nas rodinhas de conversa de web designers e outros interessados no assunto e é tratado atualmente como a nova galinha dos ovos de ouro da web. Ok, isso é compreensível, afinal de contas depois de tanto tempo revirando o XHTML2, a W3C finalmente se uniu aos dissidentes do WHATWG para enfim continuar desenvolvendo a especificação HTML. Mas o que você precisa saber sobre HTML5 antes de tomar a decisão de aplicar este tipo de linguagem ao seu projeto?

Bom primeiramente, criar um site nunca foi tão fácil quanto com o HTML5. O código agora está mais limpo e mais legível. É perfeito para criar sites para smartphones e tablets (que, como já disse anteriormente em outro post, estão se tornando cada dia mais populares). O HTML5 já é regularmente suportado pelos navegadores mais utilizados em suas versões atuais – até mesmo o difícil e resistente a mudanças Internet Explorer – já possui algum suporte para a maioria dos comandos dessa linguagem.

Essa tal liberdade

O HTML5 permite tags escritas em caixa alta ou baixa, permite o não uso de aspas e a não obrigatoriedade de fechamento de comandos em determinadas situações. Bom, não é mesmo? Nos últimos anos, a obsessão pelo código válido e bem desenvolvido nos fez esquecer o princípio do HTML: qualquer pessoa com conhecimentos básicos deveria conseguir escrever documentos para publicá-los na web. Para quem trabalha com CSS e JavaScript e conhece suas regras, essa liberdade tem motivos de sobra para ser comemorada, afinal, qualquer trecho sem esses detalhes pode criar problemas de renderização terríveis para sua página.

Fácil, extremamente fácil

Qualquer site que você já tenha criado pode ser passado para HTML5, sem problemas. É possível fazer isso mudando a declaração do tipo de documento e validando a página somente para corrigir alguns pequenos detalhes. No entanto, o correto é verificar quais são as novas tags disponíveis para a organização de um documento e treinar muito. Aqui vale um estudo cuidadoso dos modelos de conteúdo (os chamados content models). Algo que nunca ligamos muito em um passado próximo, principalmente depois das “verdades absolutas” proclamadas pelos “experts” em SEO (Search Engine Optimization, também conhecido em português como Otimização de Sites) sobre o peso de cada elemento dentro de um documento e a relevância destes conteúdos para os mecanismos de busca.

Com o plugin atrás da orelha

Sim, HTML5 funciona no Internet Explorer, mas como você deve imaginar, vai precisar de alguns truques para não ter dores de cabeça. A Microsoft, como de praxe, demorou para “aceitar” o HTML5 e até a sua versão 8, o suporte era bem tímido. Por sorte, existe um código JavaScript que faz com que o seu site seja compatível com as versões mais antigas do IE (ou seja, abaixo do 9). Não existe o mesmo para outros navegadores, pois os mesmos geralmente avisam quando estão atualizados ou atualizam automaticamente (vide Firefox, Chrome, etc). O código, que deve ser inserido entre as tags <head> e </head> é um script externo, criado pela Google (sempre ele!) e hospedado no googlecode.com. Basta inseri-lo no seu site e pronto! Nada de configurações adicionais.

<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

O futuro do presente

Todo desenvolvedor deve aprender HTML5. Nunca sabemos qual será o nosso próximo projeto e quais serão seus requisitos básicos. E esta nova especificação não é difícil. Tenha em mente apenas que a semântica está mais presente e tem um papel mais fundamental do que nas versões anteriores. E este sempre foi o calcanhar de Aquiles do desenvolvimento para a Web. Lembre-se sempre: HTML5 é mais do que um conjunto de novas tags ou uma linguagem que permite recursos “engraçadinhos” no site. A seguir, veremos algumas dessas marcações como uma iniciação ao assunto para você que ainda tem medo de iniciar em HTML5.

Mãos na massa, ou melhor, no código!

A tag DOCTYPE

O Doctype não é uma tag de estruturação ou de criação de algum elemento, mas sim uma declaração que você vai encontrar no topo de qualquer documento HTML. Se você já trabalha com HTML e programas como o Dreamweaver, já percebeu que ela sempre aparece no início do documento. Em termos simplificados, ela serve para avisar o navegador que tipo de documento virá a seguir. Existem vários tipos de Doctypes: o HTML 4.01, XHTML 1.0, XHTML 1.1, entre outras. O Doctype do HTML5 é mais simples do que seus antecessores. São apenas 15 caracteres:

<!-- HTML5 -->
<!DOCTYPE html>

<!-- Versões Antigas -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

A tag META CHARSET

A tag “meta charset” define quais caracteres podem fazer parte de um documento HTML. É graças ao charset que, ao digitar uma palavra acentuada no seu site, ela apareça de forma correta. A palavra “além”, por exemplo, pode aparecer como “al☐m” em uma página com um meta charset incorreto – tendo que ser substituida por “al&eacute;m”. Tradicionalmente, usa-se o charset UTF-8 especialmente para sites em língua portuguesa. Veja como ficou bem mais fácil o código para a meta charset:

<!-- HTML5 -->
<meta charset="UTF-8" />

<!-- Versões Antigas -->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

A Estrutura

Antes do HTML5, as DIVs eram usadas para estruturar um site, como você deve saber. Agora, você pode voltar a usar códigos como elementos de estilização. O HTML5 inclui vários elementos estruturais que ajudam a definir as partes de um documento. Iremos destacar alguns dos principais elementos suportados pelos navegadores mais populares.

Principais comandos estruturais do HTML5:

<header>
<nav>
<section>
<article>
<aside>
<footer>

Esses comandos servem mais para agrupar elementos do que para posicionar-los. Ou seja, você pode ter mais de uma <section> em uma página, cada um tendo a sua própria <header> e <footer>. Estes elementos são como as classes do CSS – é possível usa-los mais de uma vez na página. Os nomes dos elementos são bem autoexplicativos, caso você saiba o básico de inglês. De qualquer maneira, vou explicar o significado de cada código:

<header> – Cabeçalho, onde você coloca informações importantes como o nome ou o logo do site. Não confunda com a tag <head>! São duas coisas diferentes!

<nav> – Navegação. Ou seja, o menu do seu site.

<section> – Seção. Por exemplo, uma seção para o artigo em destaque, outra para o restante dos artigos de um site, etc.

<article> – Artigo. Em um blog, por exemplo, será equivalente a um post.

<aside> – Representa o conteúdo relacionado a uma página. Geralmente usa-se como uma barra lateral, mas não é algo obrigatório.

<footer> – Rodapé que pode conter informação sobre o autor, copyright, bibliografia e outras coisas de rodapé.

Não tem muito mistério até aqui, não é? Para não haver dúvidas, veremos um exemplo de um site simples com um cabeçalho, menu, área com dois artigos, uma barra lateral e um rodapé:

<!DOCTYPE html>
<html>
	<head>
		<!-- Lembrando que a tag <head>, é onde vão as tags: 
		<meta>, <title>, <script> e <style>.
		Não vá confundir com a tag <header>! -->
		<meta charset="utf-8">
		<title>Título do Site</title>

		<!-- Se o browser for IE e, com a versão menor que 9: 
			baixa o script que reconhece as tags HTML5  -->

		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>

		<!-- cabeçalho do site -->
        <header>
            <h1>Nome do Site</h1>
        </header>

		<!-- menu -->
        <nav>
            <ul>
                <li><a href="#inicial">Inicial</a></li>
                <li><a href="#sobre">Sobre</a></li>
                <li><a href="#contato">Contato</a></li>
            </ul>
        </nav>

		<!-- área para artigos -->
        <section>
            <article>
                <h2>Título do Artigo</h2>
                <p>Restante do artigo...</p>
            </article>
            <article>
                <h2>Título de outro Artigo</h2>
                <p>Lorem Ipsum...</p>
            </article>
        </section>

		<!-- barra lateral -->
        <aside>
            <h3>Entre em contato</h3>
            <p>Entre en <a href="#contato">contato</a> conosco</p>
        </aside>

		<!-- rodapé -->
        <footer>
            <p>Todos os direitos reservados.</p>
        </footer>
	</body>
</html>

Acho que agora deu pra entender um pouco melhor, certo?

Estilizando com CSS

Para estilizar os elementos novos no CSS, basta inseri-los como elementos normais na sua folha de estilo, sem adicionar um “.” ou “#” na frente (pois estes símbolos são reservados para classes e IDs, respectivamente). Por exemplo:

			body {
				background-color: #fff;
				color: #000
			}
			nav {
				background-color: #aaa;
				width: 100%
			}
			header h1 {
				font-size: 42px
			}
			nav ul li a {
				color: #666;
				text-decoration: none
			}
			nav ul li a:hover {
				text-decoration: underline
			}

E assim por diante.

Você ainda pode usar IDs e classes nos elementos para diferenciar um do outro e facilitar na hora de aplicar os estilos:

		<article class="um-estilo"></article>
		<article class="outro-stilo"></article>

Neste caso, veja o CSS:

			article.um-estilo { ... }
			article.outro-estilo { ... }

			/* ou simplesmente */
			.um-estilo { ... }
			.outro-estilo { ... }

Concluindo

O que vimos até aqui foi uma apresentação formal do HTML5. É bom saber que a linguagem vem com outros elementos interessantes como a fácil implementação de vídeo e áudio, além de atributos novos. (Mas não são todos os navegadores que aceitam estes novos elementos, então, vá com calma). O que você aprendeu agora foi o básico da transição do HTML4 ou XHTML1 para o HTML5, além de entender mais sobre como ele funciona e como ele é muito mais limpo do que as versões anteriores. Existem centenas de outros sites que se aprofundam mais no HTML5 – basta uma rápida pesquisa no seu mecanismo de busca predileto você pode ver uma bela apresentação dos recursos ou ler um pouco mais sobre as definições. Continue estudando sobre o assunto, pois ele voltará a ser discutido neste espaço e é de suma importância para você que se interessa por web design. Bons estudos e até o próximo post!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.