Id's & Classes

Agora que começamos a dividir semanticamente o nosso conteúdo, é hora de introduzir ainda um outro conjunto de atributos/valores. Até agora, nós não trabalhamos com a visualização de sua página, mas mais tarde você poderá querer mudar o visual de sua Web page, e este é o lugar onde os atributos do tipo "Id" e das classes serão estabelecidos.

Id

Este atributo associa um nome (id) ao seu elemento. O nome deverá se único e não poderá ser usado em nenhum outro identificador de elemento em seu documento. O "id" geralmente é uma abreviação do identificador, então, você deverá usar o atributo "id" quando você desejar associar este elemento ao conjunto de regras descritos no identificador.

Você poderia usar o id para, por exemplo, definir colunas na sua página e o HTML ficaria assim:

<div id="right-column">Content of the right column</div>
<div id="left-column"> Content of the left column </div>

Eu disse que o id teria que ser único e isso significa que você não pode ter dois elementos com o mesmo valor de id no seu código - o seguinte exemplo não iria renderizar corretamente no navegador:

<div id="menu">This would be your menu</div>
<div id="blog-entry">Your first blog-entry</div>
<div id="blog-entry">Your second blog-entry</div>

Classes

Classes são utilizadas para atribuir algumas propriedades para o seu elemento. Isso significa que você pode ter vários elementos no seu documento com o mesmo nome de classe. Você faz isso quando quer que os elementos tenham o mesmo comportamento e aparência. Normalmente isso é usado para, por exemplo, links e imagens - quando você quer que muitos elementos tenham a mesma aparência. Abaixo está um exemplo onde nós atribuímos uma classe para todo o post do blog e uma diferente para uma parte específica do post.

<div class="blog-entry">
	<p> Just Another Day<br />
	Written by Christina<br />
	On January 11th </p>
	<p class="content">This is my second blog entry, and I just wanted to check in on you </p>
</div>
<div class="blog-entry">
	<p> My First Blog Entry<br />
	Written by Christina<br />
	On January 10th </p>
	<p class="content">I’m so happy to write my first blog entry – yay!</p>
<div>

Você pode usar isso combinado com Folhas de Estilo em Cascata (CSS). CSS informa ao navegador como mostrar um elemento HTML, isso significa que toda a formatação é (ou deveria ser) removida do documento HTML e guardada em um arquivo separado - também conhecido como folha de estilo. Eu não vou me aprofundar em CSS neste tutorial, mas é importante que você saiba que as folhas de estilo existem e que o design da sua página é definida nesses arquivos.

O que você aprendeu

• Ids e classes são atributos
• Ids são únicos para um elemento específico
• Classes podem ser usadas em vários elementos
• Eles geralmente usados em conjunto com CSS