This article is currently in the process of being translated into Spanish (~28% done).

HTML Basics:

Id's & Classes

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.


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.

You could use the id-element to e.g. define columns in your webpage and the HTML markup would look like this:

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

I said that id-elements would have to be unique and this means you cannot have two with the same value in you markup – the following example would not render correctly in the browser:

<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 are used to assign some general properties to your element. This means, that you can have several elements in your document with the same class-name. You do this, because you want them to behave and look the same way. Normally this is used for e.g. links or images – when you want a lot of elements to look the same. Below is an example where we assign different classes to the entire blog-entry and to a specific part of the blog-entry.

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

You can use this in combination with Cascading Style Sheets (CSS). CSS tells the browser how to display a HTML-element, this means that all formatting is (or should be) removed from the HTML-document and stored in a separate file – also referred to as the style sheet. I will not go further into CSS in this tutorial, but it is important that you know there is a thing called style sheets and the design of your webpage is defined in these documents.

What you have learned

  • Id’s and classes are attributes
  • Id’s are unique to the specific element
  • Classes can be used across several elements
  • They are normally used in combination with CSS
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!