08/10/2022

Verwenden von HTML & ID und Class

HTML ID ve CSS Farkı

Was ist bei der Verwendung von ID und Class of HTML-Tags bei der Gestaltung einer Webseite zu beachten?

ID

Auf den Tag mit der ID kann mit dem Feature “href” zugegriffen werden, um in den Bereich zu gelangen, in dem sich die ID in einem anderen Teil der Seite befindet.

<!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 eines bestimmten ID Tags sollte in einer HTML Seite verwendet werden. Dieselbe ID-Variable kann auf verschiedenen Seiten wiederholt werden.

Wenn ein bestimmtes HTML-Tag mit Javascript ausgelöst werden soll, ist die Verwendung von ID genauer. (Das HTML-Tag kann auch mit dem Class-Tag ausgelöst werden, ID ist bevorzugter.)

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

Class sollte verwendet werden, wenn mehreren HTML-Tags die gleichen CSS-Eigenschaften zugewiesen werden sollen.

Unterschiede bei der Verwendung von HTML-Class und IDs

Eine class kann in mehr als einem HTML-Tag auf einer Webseite verwendet werden, aber die ID kann nur in einem HTML-Tag verwendet werden.

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

Bei der Verwendung von internem und externem CSS wird “.” am Anfang der CSS-Variablen, die der Class beim Definieren des CSS übergeben wird. Zeichen verwendet wird, wird das Zeichen “#” in der ID verwendet.

<!DOCTYPE html>
<html>
<head>
<style>
#id {
color: blue;
}
.class {
color: brown;
}
</style>
<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>
</head>
</html>

Verweise:

https://www.w3schools.com/