Einführung in HTML-Elemente

In dieser Lektion werden wir die verschiedenen HTML-Tags, ihren Zweck und ihre effektive Verwendung in Ihren Webanwendungen untersuchen. Wir werden einige der am häufigsten verwendeten HTML-Tags und ihre entsprechenden Attribute besprechen.

Das Absatz-Tag

Der Absatz ist wahrscheinlich das am häufigsten verwendete HTML-Element, das durch

definiert wird. Es handelt sich um ein Element auf Blockebene, was bedeutet, dass jeder Absatz in einer neuen Zeile beginnt.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

Ohne das

Element ignoriert Ihr Browser automatisch die zusätzlichen Leerzeichen und stellt den Text in einer einzigen Zeile dar.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

Code-Demo besuchen ↗

Sie müssen das
Element, wenn Sie einen Zeilenumbruch innerhalb eines einzelnen Absatzelements wünschen. Dies ist eines dieser HTML-Elemente, für die kein schließendes Tag erforderlich ist.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

Code-Demo besuchen ↗

Die Überschriften-Tags

Wenn Sie einen Artikel schreiben, ist es sinnvoll, Überschriften zwischen den Absätzen einzufügen, um den Artikel übersichtlicher zu gestalten. Ein HTML-Dokument funktioniert auf die gleiche Weise. HTML bietet sechs verschiedene Überschriftenebenen von

zu

.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Code-Demo besuchen ↗

In den meisten Fällen ist

bis

sollte beim Erstellen von Webseiten ausreichen. Generell empfehlen wir, keine zu kleinen Überschriften zu verwenden, z. B.

und

, da diese die Struktur Ihrer Webseite unnötig komplex machen würden.

ist die oberste Überschrift und spielt auf der Webseite eine besondere Rolle. Es sollte nur ein

vorhanden sein. Element in jedem HTML-Dokument, und es sollte die gesamte Seite zusammenfassen.

Formatierungselemente

Manchmal möchten Sie möglicherweise bestimmte Wörter und Absätze hervorheben, indem Sie ihnen unterschiedliche Formate zuweisen, z. B. indem Sie sie fett, kursiv oder unterstrichen darstellen. HTML bietet Formatierungselemente, die dabei helfen können, diesen Effekt zu erzielen.

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

Code-Demo besuchen ↗

• Das und Elemente haben den gleichen Effekt. Beide lassen den beigefügten Text fett erscheinen.

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

Obwohl sie das gleiche Aussehen haben, wie in der CodePen-Demo gezeigt, dienen sie unterschiedlichen Zwecken für Browser und Suchmaschinen.

macht den Text nur fett, ohne ihm eine besondere Bedeutung hinzuzufügen, während weist darauf hin, dass die beigefügten Texte von erheblicher Bedeutung sind.

• Das und Elemente sind ähnlich. Beide wandeln den Text in Kursivschrift um. gibt keine besondere Bedeutung an, während Definiert einen hervorgehobenen Text, der in Kursivschrift angezeigt wird.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

• Das Element definiert hervorgehobene/markierte Texte.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

• Das Element definiert kleinen Text.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

• Das Das Element weist auf gelöschten Text hin, der durch Durchstreichen des eingeschlossenen Textes angezeigt wird. Andererseits ist das Das Element wird verwendet, um eingefügten Text anzuzeigen, der als unterstrichener Text angezeigt wird.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

• Das _{und ^{Elemente definieren den tiefgestellten bzw. den hochgestellten Index.}}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

So fügen Sie Stile zu HTML-Elementen hinzu

Manchmal reichen die Standarddarstellungen dieser Formatierungselemente nicht aus, um ihre beabsichtigte Bedeutung auszudrücken.

Zum Beispiel ist das Das Element kennzeichnet gelöschte Texte durchgestrichen, was leicht verständlich ist. Die Das Element verwendet Unterstreichungen zur Darstellung von Einfügungen, was sehr verwirrend sein kann.

Um das Standard-Erscheinungsbild dieser Elemente zu verbessern, können Sie ein Stilattribut wie dieses verwenden:

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

Standardmäßig wird der Link unterstrichen und blau angezeigt. Wenn Sie darauf klicken, werden Sie zu dem durch das href-Attribut angegebenen Ziel weitergeleitet.

Erstellen Sie zur Demonstration eine Datei „Einführung in HTML-Elemente.html“ in Ihrem Arbeitsverzeichnis.

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

Und dann fügen Sie einen Link in Ihre index.html-Datei ein, der auf das Ziel verweist.

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

Sie werden zum Dokument „Einführung in HTML-Elemente.html“ weitergeleitet, wenn Sie auf den Link klicken.

Sie können auch einen Link Zurück in der Datei „Einführung in HTML-Elemente.html“ hinzufügen, um zur index.html zurückzukehren.

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

Diese miteinander verbundenen Verbindungen bilden das Internet, das wir heute sehen.

Standardmäßig wird das verknüpfte Ziel im selben Fenster geöffnet. Sie können dieses Verhalten ändern, indem Sie ein Zielattribut festlegen. Beispielsweise öffnet target="_blank" das Ziel in einem neuen Tab.

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

Code-Demo besuchen ↗

Eine weitere Sache, die Ihnen vielleicht aufgefallen ist, ist, dass der Link zunächst blau angezeigt wird. Sobald Sie darauf klicken, wird es rot. Danach wird der Link lila, was darauf hinweist, dass der Link bereits einmal besucht wurde.

Dieses Verhalten hängt mit einem Konzept namens Pseudoklasse zusammen, das es Ihnen ermöglicht, verschiedene Stile für ein Element unter verschiedenen Bedingungen zu definieren. Wir werden dieses Thema noch einmal aufgreifen, wenn wir mehr über CSS sprechen.

Listen

Code-Demo besuchen ↗

Es gibt drei verschiedene Arten von Listen in HTML: geordnete, ungeordnete und Beschreibungslisten.

Geordnete Listen werden mit dem

definiert. Element, und jedes einzelne Listenelement wird mit
1. erstellt.
   

     <p>This is the first paragraph.</p>
     <p>This is the second paragraph, which starts on a new line.</p>
   
   

   Ungeordnete Listen werden mit dem

   definiert. Element.
   

   <!-- prettier-ignore -->
   
     This is the first paragraph.
     This is the second paragraph, which starts on a new line.
   
   

   Beschreibungslisten sind etwas komplexer, da sie aus einer Liste von Artikeln und einer Beschreibung für jeden Artikel bestehen. Die Beschreibungsliste wird mit dem Befehl

   definiert. Element, jedes Listenelement wird mit

   definiert und jede Beschreibungsanweisung wird mit

   definiert.
   

     <p>
       This is the first paragraph.<br>
       This is the second paragraph, which starts on a new line.
     </p>
   
   

   Layoutelemente

   Bisher haben wir nur Elemente besprochen, die zur Anzeige von Inhalten verwendet werden, wie Texte, Listen und Bilder. Tatsächlich gibt es in HTML eine andere Kategorie von Elementen, die für die Organisation dieser Elemente zuständig ist.

   Sie dienen nicht der Anzeige einer bestimmten Art von Inhalten, sondern fungieren als Container für andere Elemente. In Kombination mit CSS können sie verschiedene Layouts für die Webseite erstellen. Einige der häufig verwendeten Layoutelemente sind in der folgenden Liste aufgeführt.

   • : Definiert einen Kopfzeilenabschnitt für das Dokument, der sich normalerweise oben auf der Webseite befindet.
   • : Definiert eine Navigationsleiste. Bei den meisten Webseiten befindet es sich oben in der Kopfzeile, einige Entwickler platzieren es jedoch am Rand der Seite.
   • : Definiert einen Abschnitt für das Dokument.
   • : Definiert einen unabhängigen Abschnitt auf der Webseite.
   • : Inhalte außerhalb des Hauptinhalts, z. B. eine Seitenleiste.
   • : Ein Fußzeilenbereich unten auf der Webseite.
   • : Erstellt eine Registerkarte, die der Benutzer öffnen und schließen kann.
   • : Erstellt eine Überschrift für die
     Element. Es sollte im Feld

     platziert werden. Element.

   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h4>Heading 4</h4>
   <h5>Heading 5</h5>
   <h6>Heading 6</h6>
   

   Code-Demo besuchen ↗

   • : Und natürlich das wichtigste Layoutelement,

     , das für Division steht. Es handelt sich um ein generisches Element, das einen Block auf der Webseite erstellt und keinem besonderen Zweck dient.

     Dies ist das am häufigsten verwendete Layoutelement, da bei realen Webseiten die meisten Abschnitte und Blöcke keinem der oben genannten semantischen Elemente entsprechen. Aus diesem Grund verwenden viele Entwickler gerne

     zum Erstellen von Seitenlayouts.
     

       <p>This is the first paragraph.</p>
       <p>This is the second paragraph, which starts on a new line.</p>
     
     

     

     Beachten Sie, dass das

     Das Element beginnt immer in einer neuen Zeile und nimmt so viel horizontalen Platz wie möglich ein. Andererseits ist das Das Element beginnt nicht in einer neuen Zeile und nimmt nur so viel Platz wie nötig ein.

     Das ist tatsächlich der Unterschied zwischen den Blockelementen und Inline-Elementen.

     Die meisten der bisher erwähnten Elemente sind Blockelemente, wie zum Beispiel

     ,

     ,

     zu

     ,

   • usw. Ohne die Definition zusätzlicher Stile nehmen sie automatisch so viel horizontalen Platz wie möglich ein.

     Das element ist ein Beispiel für ein Inline-Element. Zusammen mit anderen Elementen nimmt es nur so viel Platz wie nötig ein. Und die Attribute width und height haben keine Auswirkungen darauf.

     Es gibt viele andere Elemente, sowohl Block- als auch Inline-Elemente, die in HTML verfügbar sind. Es ist unmöglich, sie alle in einer Lektion zu besprechen, aber hier finden Sie eine Referenz aller HTML-Elemente von W3Schools, falls Sie interessiert sind.

     Weitere Lektüre

     • So verwenden Sie CSS-Selektoren
     • Was ist der semantische HTML-Code?
     • So zentrieren Sie ein Div in CSS