HTML-Tags schreiben

Die wichtigsten Grundlagen zum Thema »Tags in HTML« – hier die Timestamps:

• 0:00 Intro
• 1:10 HTML-, CSS-, JavaScript-, PHP-Dateien enthalten »nur« Text, keine Textformatierungen
• 3:50 Beispiel h1-Tag: öffnendes und schließendes Tag
• 5:50 Beispiel p-Tag
• 6:10 Tags verschachteln am Beispiel des body-Tags
• 7:30 Leere Tags am Beispiel des hr-Tags
• 7:50 Das br-Tag für Zeilenumbrüche
• 8:30 Hinweis zur Reihenfolge von öffnenden und schließenden Tags
• 10:25 Outro

Hier die wichtigsten Infos in Stichworten und Codebeispielen:

»Normale« Tags

• »normale« Tags werden mit einem öffnenden und einem schließenden Tag geschrieben: Zwischen dem öffnenden und dem schließenden Tag steht der eigentliche Inhalt.
• Beim schließenden Tag wird das öffnende Tag wiederholt, vor der Tagbezeichnung wird ein Schrägstrich gesetzt. Ein Tag oder Element besteht also in der Regel aus drei Teilen: dem öffnenden Tag, dem Inhalt und dem schließenden Tag:

<!-- HTML -->
<h1>Ich bin die Überschrift einer Webseite</h1>
<p>Ich bin ein Absatz.</p>

Leere Tags

• Diese Art von Tags kommt viel seltener zum Einsatz, ist deshalb aber nicht unwichtig. Zu den wichtigen leeren Tags gehören
  • img – Bild (engl. image)
  • hr – horizontale Linie (engl. horizontal ruler)
  • br – Umbruch (engl. break)

<!-- HTML -->
<img src="abc.png" />
<hr />
<br />

Verschachtelte Tags

• Tags stehen häufig innerhalb eines anderen Tags. Sie sind also ineinander verschachtelt.
• HINWEIS: Bei der Verschachtelung ist darauf zu achten, dass die Tags in derselben Reihenfolge geschlossen werden, wie sie geöffnet wurden.

Hier drei leicht unterschiedliche Codebeispiele

<!-- HTML -->
<!-- Korrekt: -->
<main>
<h1>Ich bin die Überschrift einer Webseite</h1>
<p>Ich bin ein Absatz.</p>
</main>

Im nächsten Code ist ein Fehler:

<!-- HTML -->
<!-- Fehlerhaft: -->
<main>
<h1>Ich bin die Überschrift einer Webseite</h1>
<p>Ich bin ein Absatz.</main>
</p>

Saubere Einrückungen wie im nächsten Beispiel machen deutlich, dass die h1- und p-Tags Kind-Elemente (direkte »Nachkommen«) des main-Tags sind. Solche Formatierungen sind extrem hilfreich, daher gehört in VSCode eine Extension wie Prettier, die ich auch im vorigen Blogbeitrag »Vscode für HTML / CSS einrichten« erkläre, quasi zur Standardinstallation.

<!-- HTML -->
<!-- Korrekter Code mit Einrückungen: -->
<main>
  <h1>Ich bin die Überschrift einer Webseite</h1>
  <p>Ich bin ein Absatz.</p>
</main>

Diese Infos zu HTML-Tags zum Gratisdownload:

html-tags.pdf.zip (138 Downloads )