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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70769{{"HTML-Überschriften verschiedener Ebenen"}} html/head_elems -.-> lab-70769{{"HTML-Überschriften verschiedener Ebenen"}} html/text_head -.-> lab-70769{{"HTML-Überschriften verschiedener Ebenen"}} html/doc_flow -.-> lab-70769{{"HTML-Überschriften verschiedener Ebenen"}} html/inter_elems -.-> lab-70769{{"HTML-Überschriften verschiedener Ebenen"}} end

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 Körperabschnitts

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 `<hgroup>`

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.

HTML-Überschriften verschiedener Ebenen