Inhaltsverzeichnis
Einführung – Selbstschließende HTML-Elemente
Im letzten Beitrag dieser Reihe hast du bereits gelernt, was ein HTML-Element ist und wie es aufgebaut ist. In diesem Beitrag möchte ich dich nun für eine spezielle Art von HTML-Element sensibilisieren, nämlich die sogenannten selbstschließenden Tags. Bevor wir jedoch starten, möchte ich dich noch auf unsere „Programmieren lernen Komplettlösung“ aufmerksam machen, die du auf unserer Lernplattform „Programmieren minus“ kostenlos testen kannst. Mit einem Premium-Zugang erhältst du Zugriff auf alle unsere Kurse, die insgesamt über 1.000 Beiträge umfassen. Dort lernst du unter anderem, wie du komplette Webprojekte, wie beispielsweise diese Lieferantendienst-Webanwendung, von Grund auf selbst programmieren kannst. Wenn Fragen auftauchen sollten, steht dir ein deutschsprachiges Community-Forum zur Verfügung. Wenn du also strukturiert das Programmieren lernen möchtest, schau unbedingt mal bei Premium vorbei. Den Link findest du in der Beitragbeschreibung.
Was sind selbstschließende HTML-Elemente?
Im letzten Beitrag hast du bereits gelernt, dass ein HTML-Element immer ein öffnendes und ein schließendes Tag besitzt. Es gibt jedoch auch Ausnahmen, und zwar die sogenannten selbstschließenden Tags. Der Name deutet bereits auf die Besonderheit dieser Elemente hin: Sie bestehen nur aus einem einzigen Tag. Das mag zunächst komisch und verwirrend klingen, aber ich zeige dir direkt ein Beispiel für ein selbstschließendes Tag, damit du schnell verstehst, wieso es diese Sonderform gibt.
Die Verwendung des br-Elements in HTML: Erzwingen von Zeilenumbrüchen für bessere Formatierung
Nehmen wir für das Beispiel einfach mal das sogenannte br-Element. Mit Hilfe von diesem Element kann man einen Zeilenumbruch erzwingen. Wieso ist das notwendig? Wenn wir einen Blick in die HTML-Datei werfen, die wir über die letzten Beiträge hinweg aufgebaut haben, siehst du, dass wir zwei Zeilenumbrüche getätigt haben. Einmal haben wir einen Zeilenumbruch vor dem Wort „YouTube“ gemacht, und dann haben wir nach dem Wort „YouTube“ ebenfalls einen Zeilenumbruch gemacht, damit das Wort „Kurs“ in einer extra Zeile steht.
Die Bedeutung des br-Elements für die Darstellung von Zeilenumbrüchen in HTML-Dateien im Browser
Wenn wir uns diese HTML-Datei jedoch im Browser ansehen, stellen wir fest, dass diese Zeilenumbrüche nicht beachtet werden. Alles steht in einer Zeile. Wenn wir aber möchten, dass die Zeilenumbrüche auch im Browser dargestellt werden, müssen wir das sogenannte br-Element einbauen. Hier ist eine Beispielanwendung:
<h1>Beispiel für einen Zeilenumbruch:</h1>
<p>Dies ist ein Absatz.</p>
<br>
<p>Dieser Absatz steht in einer neuen Zeile.</p>Die Bedeutung selbstschließender Tags in HTML und ihr Einfluss auf Zeilenumbrüche
Wenn wir diese HTML-Datei im Browser öffnen und anzeigen lassen, sehen wir, dass an der Stelle, wo wir das br-Element verwendet haben, ein Zeilenumbruch erfolgt. Das grundlegende Prinzip der selbstschließenden Tags wird hier deutlich. Ein Öffnendes- und Schließendes-Tag, die einen bestimmten Inhalt umschließen machen bei selbstschließenden Tags keinen Sinn. Denn der Inhalt eines Zeilenumbruchs besteht nicht aus Text oder anderen Elementen, sondern es gibt keinen Inhalt. Wir möchten einfach an genau dieser Stelle einen Zeilenumbruch erzeugen, und dafür benötigen wir kein Tag, das einen bestimmten Inhalt umschließt. Aus diesem Grund gibt es die selbstschließenden Tags, die nur aus einem einzigen Tag bestehen.
Wenn wir möchten, dass der Zeilenumbruch auch in der zweiten Zeile im Browser angezeigt wird, müssen wir an dieser Stelle ein weiteres br-Element einfügen. Hier ist der aktualisierte HTML-Code:
<h1>Beispiel für einen Zeilenumbruch:</h1>
<p>Dies ist ein Absatz.</p>
<br>
<p>Dieser Absatz steht in einer neuen Zeile.</p>
<br>
<p>Dieser Absatz steht in der nächsten Zeile.</p>Wenn wir die HTML-Datei im Browser aktualisieren, sehen wir, dass der zweite Zeilenumbruch ebenfalls dargestellt wird.
Alternative Schreibweise für selbstschließende Tags: Der Fall des br-Elements
Zum Ende dieses Beitrags möchte ich dich darauf hinweisen, dass es bei den selbstschließenden Tags manchmal auch eine andere Schreibweise gibt als die, die ich dir gerade gezeigt habe. Im Falle des br-Elements sieht die alternative Schreibweise folgendermaßen aus: Nach dem Elementnamen setzen wir ein Leerzeichen und dann einen Schrägstrich (/).
<br />Alternative Schreibweise: Der Schrägstrich als Kennzeichnung für selbstschließende HTML-Tags – Selbstschließende HTML-Elemente
Diese Schreibweise ist genauso gültig wie die vorherige Schreibweise ohne den Schrägstrich. Der Schrägstrich am Ende soll anzeigen, dass das Tag sowohl das Öffnen als auch das Schließen des Elements darstellt. Bei normalen HTML-Elementen verwenden wir nur das Öffnungstag ohne Schrägstrich, und am Ende des Schließungstags steht der Schrägstrich. Mit dem Schrägstrich am Ende signalisieren wir also, dass es sich um ein selbstschließendes Tag handelt. Es handelt sich hierbei lediglich um eine alternative Schreibweise, die ebenfalls gültig ist.
Fazit – Selbstschließende HTML-Elemente
Das war ein kurzer Einblick in selbstschließende HTML-Elemente. Im nächsten Beitrag werden wir uns mit dem wichtigen HTML-Grundgerüst weiter befassen. Wenn du den Kanal noch nicht abonniert hast, empfehle ich dir, dies jetzt zu tun, damit du keine weiteren Beiträge von uns verpasst. Ansonsten wünsche ich dir einen wunderschönen Tag, und wir sehen uns im nächsten Beitrag wieder. Bis dahin, ciao!
