Meisterklasse HTML-Überschriften: Ein strukturierter Ansatz für den Web-Inhalt

Einführung

HTML Überschriften sind essentiell, wenn es darum geht, eine gut strukturierte Webseite zu erstellen. Sie bieten eine Hierarchie und helfen Lesern, sich schnell durch eine Website zu navigieren. In diesem Lab werden Sie lernen, wie Sie die verschiedenen Ebenen von HTML-Überschriften mit den Tags <h1> bis <h6> erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 90% ist. Es hat eine positive Bewertungsrate von 89% von den Lernenden erhalten.

Hinzufügen der HTML-Vorlage

Der erste Schritt besteht darin, eine HTML-Datei namens index.html zu erstellen. Sie können einen beliebigen Texteditor wie Notepad, TextEdit oder Sublime Text verwenden.

Fügen Sie die grundlegende HTML-Struktur Ihrer index.html-Datei hinzu, indem Sie <!DOCTYPE html> in der ersten Zeile und die Tags <html></html> in der zweiten und letzten Zeile eingeben.

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Hinzufügen des Kopfabschnitts

Innerhalb der <html>-Tags erstellen Sie den Kopfabschnitt mit dem <head>-Tag. Im Kopfabschnitt fügen Sie den Titel Ihrer Webseite mit dem <title>-Tag hinzu.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
</html>

Erstellen des Body-Abschnitts

Erstellen Sie den Körperabschnitt mit den Tags <body></body>. Im Körperabschnitt fügen Sie die verschiedenen Ebenen von Überschriften mit den Tags <h1> bis <h6> hinzu.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <h5>Fourth Sub-Heading</h5>
    <h6>Fifth Sub-Heading</h6>
  </body>
</html>

Vergewissern Sie sich, dass Sie "Main Heading" und die Unterüberschriften durch Ihre eigenen relevanten Titel ersetzen.

Gruppieren von Überschriften mit

Sie können mehrere Überschriften mithilfe des <hgroup>-Tags gruppieren. Im folgenden Beispiel gruppieren wir die letzten drei Überschriften mit <hgroup>.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <h2>First Sub-Heading</h2>
    <h3>Second Sub-Heading</h3>
    <h4>Third Sub-Heading</h4>
    <hgroup>
      <h4>Fourth Sub-Heading Part 1</h4>
      <h5>Fourth Sub-Heading Part 2</h5>
      <h6>Fourth Sub-Heading Part 3</h6>
    </hgroup>
  </body>
</html>

Speichern Sie Ihre index.html-Datei und öffnen Sie sie in einem Webbrowser, um die von Ihnen erstellten Überschriften zu sehen.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie HTML-Überschriften mit den Tags <h1> bis <h6> erstellen. Überschriften sind essentiell für die Erstellung einer gut strukturierten Webseite und helfen auch bei der Suchmaschinenoptimierung. Denken Sie daran, dass jede HTML-Datei nur einen <h1>-Tag für den Haupttitel der Seite enthalten sollte.