Id's y Clases

Ahora que hemos empezado a dividir nuestro contenido semánticamente, ya es tiempo de introducir otro conjunto de atributos o valores. Hasta ahora, no hemos trabajado en el aspecto de tu pagina, pero mas adelante tu querrás poder cambiarlo y aquí es donde los atributos de Clase e Id vienen muy bien.

Id

Este atributo asigna un nombre a tu elemento. El nombre debe ser único y no puede ser usado en cualquier otro lugar de tu documento. Id es una abreviatura de identificador (Identifier en ingles) - Entonces utilizaras el atributo Id cuando quieras poder identificar este elemento en específico.

Tú puedes usar el elemento Id para, por ejemplo, definir columnas en tu página web y el marcado HTML se vería de la siguiente manera:

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

He dicho que los elementos-id tienen que ser únicos y esto significa que no puedes tener dos con el mismo valor en tu marcado – el siguiente ejemplo no funcionaría correctamente en el 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>

Clases

Las clases son usadas para asignar algunas propiedades generales a tu elemento. Esto significa que puedes tener varios elementos en tu documento con la misma clase. Esto hará que actúen y luzcan de la misma forma. Normalmente se utiliza por ejemplo para links o imágenes – cuando quieres que un montón de elementos se vean iguales. Debajo hay un ejemplo donde asignamos diferentes clases a toda la entrada del blog y a una parte específica de este.

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

Puedes usar esto en combinación con las hojas de estilo en cascada (CSS).CSS le dice al navegador como mostrar un elemento-HTML, esto significa que todos el formato está (o debería esta) eliminado del documento HTML y guardado en un archivo separado, al cual nos referimos como "Hoja de Estilo". No me adentraré mas en CSS en este tutorial, pero es importante que sepas que hay algo llamado hojas de estilo y que el diseño de tu página web se define en estos documentos.

Lo que has aprendido:

• Los IDs y las clases son atributos
• Los IDs son únicos y se refieren a un elemento específico
• Las clases pueden ser usadas para varios elementos
• They are normally used in combination with CSS