HTML Rubriques
Utilisation de l’ID HTML et de la classe
Que faut-il prendre en compte lors de l’utilisation des balises ID et Classe des balises HTML lors de la conception d’une page Web ?
ID
La balise avec l’ID est accessible avec la fonctionnalité “href” afin d’aller dans la zone où se trouve l’ID dans une autre partie de la page.
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="#click">Buton</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<!-- . . . -->
<!-- . . . -->
<!-- . . . -->
<!-- . . . -->
<!-- . . . -->
<!-- . . . -->
<p id="click">Dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>1 d’une balise d’identification spécifique doit être utilisée dans une page HTML. La même variable ID peut être répétée sur différentes pages.
Si une balise HTML spécifique doit être déclenchée avec Javascript, l’utilisation de l’ID est plus précise. (La balise HTML peut également être déclenchée avec la balise Class, l’ID est préférable.)
<!DOCTYPE html>
<html>
<head></head>
<body> <button onclick="onclickFunction()">Test</button>
<p id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<script>
function onclickFunction() {
document.getElementById("text").style.color = "red";
}
</script>
</body>
</html>Class
La classe doit être utilisée si plusieurs balises HTML reçoivent les mêmes propriétés CSS.
Différences d’utilisation des classes HTML et des ID
Une classe peut être utilisée dans plusieurs balises HTML d’une page Web, mais l’ID ne peut être utilisé que dans une seule balise HTML.
<!DOCTYPE html>
<html>
<head></head>
<body>
<section id="section1" class="section">
</section>
<section id="section2" class="section">
</section>
<section id="section3" class="section">
</section>
</body>
</html>Dans l’utilisation du CSS interne et externe, “.” au début de la variable CSS donnée à la classe lors de la définition du CSS. caractère est utilisé, le caractère “#” est utilisé dans ID.
<!DOCTYPE html>
<html>
<head>
<style>
#id {
color: blue;
}
.class {
color: brown;
}
</style>
</head>
<body>
<p id="id">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="class">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>Source:
