Une balise seule n'a généralement que peu d'utilité. C'est pourquoi on leur ajoute souvent un ou plusieurs attributs.

<balise attribut="valeur; valeur" attribut="valeur">Contenu</balise>

Les attributs se placent toujours dans la balise ouvrante. Certain peuvent prendre plusieurs valeurs qu'il faut alors séparer par des «points virgule» ;

Certains sont spécifiques à une balise et ne peuvent être utilisé autrement :

<a href="URL" target="_blank">Contenu</a>

href="URL" permet de définir l'adresse de destination via la balise <a>
target="valeur" est un attribut facultatif de <a> qui définit la "destination":
• Par défaut, le lien s'ouvre dans l'onglet courant
• target="_blank" ouvre le lien dans une nouvelle fenêtre.

<img src="URL"/>

src="URL" définit la source de l'image

<balise style="propriété : valeur; propriété : valeur;">Contenu</balise>

Cet attribut permet de définir le "style" d'un élément, c'est à dire son apparence, tel que le fond, les bordures, la couleur de texte... Faites toutefois attention au type de balise (block ou inline) auquel vous voulez appliquer un style, certaines propriétés (telle la taille ou les marges) sont incompatible avec les élément inline.

Si vous connaissez le CSS, une grande majorité des propriété s'écrivent exactement de la même façon en HTML. Cependant certaines (notamment des propriétés CSS3 comme filter ou transition) ne peuvent pas être utiliser en HTML

id="nom" permet de défnir un élément unique de la page. Ils est très souvent utilisé comme attribut de <div>

<balise id="nom">Contenu</balise>

Utiliser un id permet de récupérer un élément dans le CSS pour définir son style sans passer par l'attribut style HTML. Il vous suffit d'indiquer dans votre CSS :

#nom {
      propriété : valeur;
}

Le «dièse» devant le nom indique qu'il s'agit d'un ID

Il est également très utile d'utiliser des ID en JavaScript. Pour récupéré un élément définit par son ID on utilise la fonction :

getElementById(nom)

Si vous voulez nommer plusieurs éléments de la même façon, utilisez class="nom"

<balise class="nom">Contenu</balise>

Concrètement, class à la même utilité que id, ces deux attribut nous permettent de nommer des éléments pour les récupérer via CSS ou JS par exemple. La seule différence est que id désigne un élément unique, et class se rapporte à un groupe d'éléments identiques.

Pour récupérer une class en CSS, il suffit de placer un point . devant le nom

.nom {
      propriété : valeur;
}

En JavaScript on peut utiliser cette fonction :

getElementsByClassName('nom')

Cependant, n'oubliez pas que vous récupérer ainsi tous les éléments de ce nom, il faut donc effectuer un autre traitement pour pouvoir réellement récupérer ce qu'il vous intéresse.

Les balises