TOC

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

Noções básicas de HTML:

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.

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

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

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!