HTML - Aufbau und Struktur

Leon A. -

Grundlegende HTML-Dokumentstruktur

Jedes HTML-Dokument folgt einer grundlegenden Struktur, die mehrere wichtige Elemente umfasst. Das Verständnis dieser Struktur ist notwendig, um gut strukturierte und gültige HTML-Seiten zu erstellen.

Das erste Element in einem HTML-Dokument ist die <!DOCTYPE>-Deklaration. Diese Deklaration informiert den Webbrowser über die verwendete HTML-Version. Für HTML5, den aktuellen Standard, lautet die Deklaration einfach <!DOCTYPE html>. Sie sollte ganz am Anfang des Dokuments stehen, vor allen anderen Elementen.

Das nächste Element ist das <html>-Element, das den gesamten Inhalt der Seite umschließt. Es wird als Wurzelelement eines HTML-Dokuments bezeichnet. Alle anderen Elemente sollten innerhalb der <html>-Tags verschachtelt sein.

Innerhalb des <html>-Elements gibt es zwei Hauptabschnitte: den <head> und den <body>.

Das <head>-Element enthält Metadaten über das HTML-Dokument, wie den Seitentitel, die Zeichenkodierung und Links zu externen CSS- und JavaScript-Dateien. Diese Informationen sind auf der Webseite selbst nicht sichtbar, werden aber von Browsern und Suchmaschinen verwendet. Wichtige Elemente innerhalb des <head> sind <title>, <meta>, <link> und <script>.

Das <body>-Element enthält den sichtbaren Inhalt der Webseite, wie Überschriften, Absätze, Bilder, Listen und Tabellen. Der gesamte Inhalt, den Benutzer sehen und mit dem sie interagieren, sollte innerhalb der <body>-Tags platziert werden.

Beispiel: Basic HTML Document Structure

<!DOCTYPE html>
<html>
<head>
    <title>Meine Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Webseite!</h1>
    <p>Dies ist ein Textabsatz.</p>
</body>
</html>

HTML-Tags

HTML-Tags sind die Bausteine von Webseiten und ermöglichen die Strukturierung und Formatierung von Inhalten. Tags definieren Elemente wie Überschriften, Absätze, Listen und Links. Die richtige Verwendung von Tags ist wichtig, um gut strukturiertes und semantisches HTML zu erstellen.

Die meisten HTML-Tags haben einen öffnenden und einen schließenden Tag, die den zu definierenden Inhalt umschließen. Öffnende Tags beginnen mit <, gefolgt vom Tag-Namen und >. Schließende Tags sind ähnlich, enthalten aber ein / vor dem Tag-Namen. Ein Absatz wird beispielsweise mit dem <p>-Tag definiert, wie hier: <p>Dies ist ein Absatz.</p>.

Einige HTML-Tags, bekannt als selbstschließende oder leere Tags, benötigen keinen schließenden Tag. Diese Tags repräsentieren Elemente, die keinen Inhalt innerhalb haben. Beispiele für selbstschließende Tags sind <br> für Zeilenumbrüche, <img> für Bilder und <meta> für Metadaten. In HTML5 ist es optional, das schließende / für selbstschließende Tags einzufügen, sodass sowohl <br> als auch <br /> gültig sind.

Bei der Verwendung mehrerer Tags zur Definition der Struktur Ihres Inhalts sollten Sie diese korrekt verschachteln. Das bedeutet, dass die Tags in umgekehrter Reihenfolge geschlossen werden, in der sie geöffnet wurden. Wenn Sie beispielsweise einen <strong>-Tag innerhalb eines <p>-Tags haben, schließen Sie den <strong>-Tag vor dem <p>-Tag:

Beispiel: Dies ist ein Absatz mit verschachtelten Tags

<p>Dies ist ein <strong>Absatz</strong> mit verschachtelten Tags.</p>

Falsch verschachtelte Tags können zu unerwarteten Ergebnissen führen und Ihr HTML ungültig machen. Stellen Sie immer sicher, dass Ihre Tags korrekt verschachtelt und geschlossen sind, um ein gut strukturiertes Dokument zu erhalten.

HTML-Elemente

Ein HTML-Element ist ein Teil eines HTML-Dokuments, das aus einem öffnenden Tag, Inhalt und einem schließenden Tag besteht. Elemente strukturieren und geben dem Inhalt einer Webseite Bedeutung. Der öffnende Tag zeigt den Beginn eines Elements an, während der schließende Tag dessen Ende markiert. Der Inhalt zwischen diesen Tags kann Text, andere HTML-Elemente oder beides sein.

HTML-Elemente können auch Attribute haben. Attribute liefern zusätzliche Informationen über das Element und werden innerhalb des öffnenden Tags platziert. Sie haben einen Namen und einen Wert, getrennt durch ein Gleichheitszeichen (=). Der Attributname zeigt die Eigenschaft an, die gesetzt wird, während der Attributwert den Wert für diese Eigenschaft angibt. Das <a>-Element zum Beispiel, das einen Hyperlink erstellt, verwendet das href-Attribut, um das Ziel des Links anzugeben:

Beispiel: Anchor element with href attribute

<a href="https://www.example.com">Visit Example.com</a>

Häufig verwendete Attribute sind class und id, die für die Gestaltung und das Ansprechen von Elementen mit CSS und JavaScript verwendet werden. Das class-Attribut ermöglicht es, Elemente basierend auf gemeinsamen Merkmalen zu gruppieren, während das id-Attribut eine eindeutige Kennung für ein bestimmtes Element innerhalb des Dokuments vergibt.

Einige HTML-Elemente, bekannt als leere Elemente oder Void-Elemente, haben keinen schließenden Tag und können keinen Inhalt enthalten. Diese Elemente sind selbstschließend und werden verwendet, um Inhalte in die Seite einzufügen oder einzubetten. Beispiele für leere Elemente sind:

Element Beschreibung
<br> Fügt einen Zeilenumbruch ein
<hr> Erzeugt eine horizontale Linie oder thematische Trennung
<img> Bettet ein Bild in die Seite ein
<input> Erstellt ein Eingabefeld für Benutzerinteraktionen
<meta> Stellt Metadaten über das HTML-Dokument bereit

Bei der Verwendung von leeren Elementen ist zu beachten, dass sie keinen schließenden Tag haben. In HTML5 ist der schließende Schrägstrich (/) für leere Elemente optional, so dass sowohl <br> als auch <br /> gültig sind.

Groß- und Kleinschreibung

In HTML sind Tag- und Attributnamen nicht case-sensitive. Das bedeutet, dass unabhängig davon, ob Sie Groß- oder Kleinbuchstaben verwenden, der Webbrowser die Tags und Attribute auf die gleiche Weise versteht. Beispielsweise werden <div>, <DIV> und <Div> vom Browser alle als das gleiche <div>-Tag behandelt.

Dennoch ist es eine gängige Konvention, für alle Tag- und Attributnamen in HTML Kleinbuchstaben zu verwenden. Diese Praxis verbessert die Lesbarkeit und Konsistenz des Codes und erleichtert es Entwicklern, den Code zu verstehen und zu pflegen. Die Verwendung von Kleinbuchstaben entspricht auch der HTML5-Spezifikation, die Kleinbuchstaben für Tags und Attribute empfiehlt.

Beispiel für Tag-Schreibweisen

<!-- Gültig, aber nicht empfohlen -->
<DIV class="content">
    <P>Dies ist ein Absatz.</P>
</DIV>

<!-- Empfohlen -->
<div class="content">
    <p>Dies ist ein Absatz.</p>
</div>

Beim Schreiben von Attributnamen innerhalb von Tags gilt dieselbe Konvention. Attributnamen in Kleinbuchstaben werden aus Gründen der Konsistenz und Lesbarkeit bevorzugt. Wenn Sie beispielsweise das class-Attribut verwenden, schreiben Sie es als class="example" anstatt CLASS="example".

Beispiel für Attribut-Schreibweisen

<!-- Gültig, aber nicht empfohlen -->
<a HREF="https://www.example.com">Besuchen Sie Example.com</a>

<!-- Empfohlen -->
<a href="https://www.example.com">Besuchen Sie Example.com</a>

Während HTML nicht case-sensitive ist, ist es wichtig zu beachten, dass andere verwandte Technologien wie CSS und JavaScript case-sensitive sind. Achten Sie beim Referenzieren von HTML-Elementen in CSS oder JavaScript darauf, die richtige Schreibweise für Selektoren, Eigenschaften und Variablen zu verwenden.

Die Einhaltung der Kleinschreibungskonvention für HTML-Tags und -Attribute trägt dazu bei, die Konsistenz zu wahren, die Lesbarkeit zu verbessern und Ihren Code besser mit Webstandards in Einklang zu bringen.

Leerzeichen und Einrückung

In HTML werden Leerzeichen zwischen Elementen, wie Leerzeichen, Tabulatoren und Zeilenumbrüche, von Webbrowsern bei der Darstellung der Seite größtenteils ignoriert. Dieses Verhalten ist als Leerzeichenreduzierung bekannt. Mehrere Leerzeichen, Tabulatoren oder Zeilenumbrüche werden als einzelnes Leerzeichen behandelt, und der Browser passt das Layout der Elemente automatisch basierend auf dem verfügbaren Platz und den angewendeten CSS-Stilen an.

Beispiel: Mehrere Leerzeichen reduziert

<!-- Mehrere Leerzeichen werden zu einem einzelnen Leerzeichen reduziert -->
<p>Dies    ist    ein    Absatz.</p>

Obwohl der Browser Leerzeichen reduziert, ist es dennoch wichtig, in Ihrem HTML-Code eine angemessene Einrückung und Abstandsgestaltung für die Lesbarkeit und Wartbarkeit zu verwenden. Gut organisierter Code ist leichter zu lesen, zu verstehen und zu debuggen, besonders wenn Sie an größeren Projekten arbeiten oder mit anderen Entwicklern zusammenarbeiten.

Um die Lesbarkeit des Codes zu verbessern, befolgen Sie diese bewährten Praktiken für die Einrückung:

Bewährte Praktik Beschreibung
Konsistente Einrückung verwenden Verwenden Sie entweder Leerzeichen oder Tabulatoren für die Einrückung, halten Sie sich aber an eine Methode, um im gesamten HTML-Dokument konsistent zu bleiben.
Verschachtelte Elemente einrücken Rücken Sie verschachtelte Elemente ein, um ihre Hierarchie und Beziehung zu übergeordneten Elementen zu zeigen. Jede Verschachtelungsebene sollte um einen einheitlichen Betrag eingerückt werden, zum Beispiel um 2 oder 4 Leerzeichen.
Leerzeilen verwenden Verwenden Sie Leerzeilen, um verschiedene Abschnitte Ihres Codes zu trennen, wie zum Beispiel zwischen verschiedenen Elementen oder Gruppen von verwandten Elementen. Dies erleichtert die visuelle Identifizierung der Struktur Ihres Dokuments.
Lange Zeilen umbrechen Wenn Sie mit langen Codezeilen arbeiten, sollten Sie diese für eine bessere Lesbarkeit in mehrere Zeilen aufteilen. Wenn ein Element beispielsweise viele Attribute hat, können Sie jedes Attribut in eine neue Zeile setzen und zur Übersichtlichkeit einrücken.

Einrückungsbeispiel

<div>
  <h1>Hauptüberschrift</h1>
  <p>Dies ist ein Absatz.</p>
  <ul>
    <li>Listenpunkt 1</li>
    <li>Listenpunkt 2</li>
  </ul>
</div>

Beispiel: Lange Zeilen umbrechen

<img src="bild.jpg"
     alt="Beispielbild"
     class="responsive-bild"
     width="500"
     height="300">

Denken Sie daran, dass eine korrekte Einrückung und Abstandsgestaltung zwar keinen Einfluss darauf haben, wie der Browser die Seite darstellt, sie aber für die Lesbarkeit und Wartbarkeit Ihres Codes wichtig sind. Es ist eine gute Angewohnheit, die Sie früh entwickeln sollten, da sie Ihnen hilft, saubereren und besser organisierten Code zu schreiben, besonders wenn Ihre Projekte komplexer werden.

Kommentare in HTML

Kommentare in HTML fügen Notizen, Erklärungen oder Erinnerungen im Code hinzu, ohne den auf der Webseite angezeigten Inhalt zu beeinflussen. Sie helfen dabei, Ihren Code zu dokumentieren und machen ihn leichter verständlich und wartbar, besonders wenn Sie mit anderen Entwicklern zusammenarbeiten oder nach einiger Zeit zu einem Projekt zurückkehren.

HTML unterstützt zwei Arten von Kommentaren: einzeilige Kommentare und mehrzeilige Kommentare.

Einzeilige Kommentare beginnen mit <!-- und enden mit -->. Sie werden für kurze Notizen oder Erklärungen verwendet, die in eine Zeile passen. Webbrowser ignorieren den Inhalt zwischen den öffnenden und schließenden Kommentar-Tags.

Beispiel für einzeiligen Kommentar

<!-- Dies ist ein einzeiliger Kommentar -->
<p>Dies ist ein Absatz.</p>

Mehrzeilige Kommentare beginnen ebenfalls mit <!-- und enden mit -->, können sich aber über mehrere Zeilen erstrecken. Sie sind nützlich für längere Erklärungen, das vorübergehende Entfernen von Codeabschnitten oder das Hinzufügen detaillierter Dokumentation.

Beispiel für mehrzeiligen Kommentar

<!--
  Dies ist ein mehrzeiliger Kommentar.
  Er kann sich über mehrere Zeilen erstrecken.
  Verwenden Sie ihn für längere Erklärungen oder um Code vorübergehend zu entfernen.
-->
<div>
  <h1>Überschrift</h1>
  <p>Dies ist ein Absatz.</p>
</div>

Bei der Verwendung von Kommentaren in Ihrem HTML-Code sollten Sie diese bewährten Praktiken beachten:

Bewährte Praktik Beschreibung
Kommentare sparsam verwenden Obwohl Kommentare hilfreich sein können, können zu viele Kommentare Ihren Code unübersichtlich machen und schwerer lesbar machen. Verwenden Sie Kommentare nur, wenn es notwendig ist, um komplexe oder nicht offensichtliche Teile Ihres Codes zu erklären.
Kommentare knapp halten Kommentare sollten kurz und prägnant sein. Vermeiden Sie lange Erklärungen oder die Wiederholung von Informationen, die bereits aus dem Code selbst klar sind.
Kommentare bei Codeänderungen aktualisieren Wenn Sie Änderungen an Ihrem Code vornehmen, stellen Sie sicher, dass alle zugehörigen Kommentare aktualisiert werden, um diese Änderungen widerzuspiegeln. Veraltete Kommentare können irreführend sein und Verwirrung stiften.
Unnötige Kommentare vor dem Deployment entfernen Bevor Sie Ihren Code in einer Produktionsumgebung bereitstellen, entfernen Sie alle nicht mehr benötigten Kommentare, wie z.B. solche, die für das Debugging oder vorübergehende Codeentfernung verwendet wurden. Dies hilft, Ihren endgültigen Code sauber und optimiert zu halten.

Beispiele für Inline-Kommentare

<!-- TODO: Formularvalidierungsskript hinzufügen -->
<form>
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Absenden</button>
</form>

<!--
<div class="deprecated-section">
  <p>Dieser Abschnitt wird nicht mehr verwendet und wird in einem zukünftigen Update entfernt.</p>
</div>
-->

Häufige Syntaxfehler

Beim Schreiben von HTML können Ihnen Syntaxfehler unterlaufen, besonders als Anfänger. Diese Fehler können zu unerwarteten Ergebnissen führen oder dazu, dass Ihre Webseite nicht korrekt angezeigt wird. Hier sind einige häufige Syntaxfehler, auf die Sie achten sollten:

Fehler Beschreibung
Vergessen von schließenden Tags Die meisten HTML-Elemente benötigen sowohl ein öffnendes als auch ein schließendes Tag. Wenn das schließende Tag fehlt, kann der Browser die Struktur Ihres Dokuments falsch lesen.
Falsch verschachtelte Tags HTML-Elemente sollten so verschachtelt sein, dass die inneren Elemente geschlossen werden, bevor die äußeren Elemente geschlossen werden. Falsch verschachtelte Tags können dazu führen, dass der Browser die Struktur Ihres Dokuments falsch liest.
Nicht übereinstimmende öffnende und schließende Tags Der Tag-Name im schließenden Tag muss mit dem Tag-Namen im öffnenden Tag übereinstimmen. Nicht übereinstimmende Tags können dazu führen, dass der Browser die Struktur Ihres Dokuments falsch liest, was zu nicht richtig geschlossenen Elementen führt.
Falsche Verwendung von Anführungszeichen in Attributen Attributwerte sollten immer in Anführungszeichen stehen, entweder einfache (') oder doppelte ("). Wenn keine Anführungszeichen verwendet werden oder diese nicht übereinstimmen, kann der Browser den Attributwert falsch lesen.

Beispiele:

Beispiel: Vergessen von schließenden Tags

<!-- Falsch -->
<p>Dies ist ein Absatz.

<!-- Richtig -->
<p>Dies ist ein Absatz.</p>

Beispiel: Falsch verschachtelte Tags

<!-- Falsch -->
<p><strong>Dies ist ein Absatz.</p></strong>

<!-- Richtig -->
<p><strong>Dies ist ein Absatz.</strong></p>

Beispiel: Nicht übereinstimmende öffnende und schließende Tags

<!-- Falsch -->
<p>Dies ist ein Absatz.</div>

<!-- Richtig -->
<p>Dies ist ein Absatz.</p>

Beispiel: Falsche Verwendung von Anführungszeichen in Attributen

<!-- Falsch -->
<img src=bild.jpg alt=Beispielbild>

<!-- Richtig -->
<img src="bild.jpg" alt="Beispielbild">

Um diese häufigen Syntaxfehler zu vermeiden, befolgen Sie bewährte Praktiken wie:

  • Fügen Sie immer schließende Tags für Elemente hinzu, die sie benötigen
  • Verschachteln Sie Elemente ordnungsgemäß und schließen Sie sie in umgekehrter Reihenfolge, in der sie geöffnet wurden
  • Überprüfen Sie, ob die Namen der öffnenden und schließenden Tags genau übereinstimmen
  • Verwenden Sie konsequent Anführungszeichen um Attributwerte und stellen Sie sicher, dass sie korrekt zueinander passen

HTML-Entitäten

HTML-Entitäten sind spezielle Codes, die verwendet werden, um Zeichen darzustellen, die in HTML eine bestimmte Bedeutung haben oder nicht einfach mit einer Standardtastatur eingegeben werden können. Diese Entitäten stellen sicher, dass der Browser die Zeichen korrekt interpretiert und sie wie beabsichtigt auf der Webseite anzeigt.

Entitäten sind nützlich, wenn man mit reservierten Zeichen in HTML arbeitet, wie <, >, &, " und '. Diese Zeichen definieren die Struktur und Syntax von HTML-Elementen, daher kann ihre direkte Verwendung im Inhalt zu Parsing-Fehlern oder unerwartetem Verhalten führen. Um diese Zeichen in Ihren Text einzufügen, müssen Sie ihre HTML-Entitäten verwenden.

Hier sind einige gängige HTML-Entitäten für reservierte Zeichen:

Zeichen Entitätsname Entitätsnummer
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
" &quot; &#34;
' &apos; &#39;

Um eine HTML-Entität zu verwenden, können Sie ihren Entitätsnamen oder ihre Entitätsnummer verwenden. Entitätsnamen beginnen mit einem kaufmännischen Und (&) und enden mit einem Semikolon (;), während Entitätsnummern mit einem kaufmännischen Und und einer Raute (#) beginnen und mit einem Semikolon enden.

Beispiel: Verwendung von Entitätsnamen

<!-- Verwendung von Entitätsnamen -->
<p>Dies ist ein &lt;p&gt; Element.</p>
<p>Um ein kaufmännisches Und anzuzeigen, verwenden Sie &amp;amp;.</p>

Beispiel: Verwendung von Entitätsnummern

<!-- Verwendung von Entitätsnummern -->
<p>Dies ist ein &#60;p&#62; Element.</p>
<p>Um ein kaufmännisches Und anzuzeigen, verwenden Sie &#38;amp;.</p>

HTML-Entitäten sind nicht auf reservierte Zeichen beschränkt. Sie können auch Sonderzeichen darstellen, wie Symbole, Buchstaben mit Akzenten und Emojis, die möglicherweise nicht auf allen Tastaturen verfügbar oder schwer zu tippen sind. Einige gängige Sonderzeichen-Entitäten sind:

Zeichen Entitätsname Entitätsnummer
© &copy; &#169;
® &reg; &#174;
™ &trade; &#8482;
€ &euro; &#8364;
£ &pound; &#163;
¿ &iquest; &#191;
ñ &ntilde; &#241;

Beispiel: Sonderzeichen-Entitäten

<p>Copyright &copy; 2021 Beispielunternehmen.</p>
<p>Der Preis beträgt &euro;9,99.</p>
<p>Das spanische Wort für "Jahr" ist "a&ntilde;o".</p>

Die Verwendung von HTML-Entitäten bei Bedarf hilft sicherzustellen, dass Ihr Inhalt genau und konsistent über verschiedene Browser und Geräte hinweg angezeigt wird. Es verhindert auch Parsing-Fehler und macht Ihren Code lesbarer und besser wartbar.