LabEx
AnmeldenKostenlos beitreten

Semantische HTML-Tags in der Webentwicklung

CSSCSSBeginner
Jetzt üben

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden die Teilnehmer die grundlegenden Konzepte von semantischen HTML-Tags und deren entscheidende Rolle in der modernen Webentwicklung erkunden. Mit einem praktischen Ansatz werden die Lernenden traditionelle HTML-Strukturen in sinnvolle, zugängliche und SEO-freundliche Webseitenlayouts umwandeln, indem sie semantische Elemente wie <header>, <nav>, <main>, <article>, <section>, <aside> und <footer> verwenden.

Das Lab bietet eine Schritt-für-Schritt-Anleitung, um zu verstehen, wie semantisches HTML die Lesbarkeit des Codes verbessert, die Zugänglichkeit von Websites für Screenreader erhöht und strukturierteres und sinnvolleres Webinhalt erstellt. Indem die Teilnehmer schrittweise ein komplettes semantisches HTML-Seitenlayout erstellen, werden sie praktische Fähigkeiten in der Implementierung von semantischen Tags erwerben, die den Zweck und die Struktur von Webseitenelementen klar beschreiben.

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 93% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Entdecken Sie das Konzept von semantischem HTML

In diesem Schritt lernen Sie, was semantisches HTML ist und warum es in der Webentwicklung wichtig ist. Semantisches HTML verwendet Tags, die die Bedeutung des Inhalts klar beschreiben, wodurch Webseiten zugänglicher, lesbarer und SEO-freundlicher werden.

Traditionelle HTML-Tags wie <div> und <span> geben keine Informationen über den Inhalt, den sie enthalten. Im Gegensatz dazu beschreiben semantische HTML-Tags den Zweck und die Struktur des Inhalts.

Erstellen wir eine einfache HTML-Datei, um die Konzepte von semantischem HTML zu veranschaulichen. Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens semantic-example.html im Verzeichnis ~/project.

touch ~/project/semantic-example.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Semantic HTML Example</title>
  </head>
  <body>
    <div>Website Header</div>
    <div>Navigation Menu</div>
    <div>Main Content</div>
    <div>Sidebar</div>
    <div>Footer</div>
  </body>
</html>

Jetzt lassen Sie uns dieses Beispiel mit semantischen HTML-Tags umgestalten:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Semantic HTML Example</title>
  </head>
  <body>
    <header>Website Header</header>
    <nav>Navigation Menu</nav>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </body>
</html>

Wichtige semantische HTML-Tags sind:

  • <header>: Repräsentiert ein einleitendes Element
  • <nav>: Definiert Navigationslinks
  • <main>: Gibt den Hauptinhalt des Dokuments an
  • <article>: Repräsentiert einen unabhängigen, eigenständigen Inhaltsabschnitt
  • <section>: Definiert einen Abschnitt in einem Dokument
  • <aside>: Enthält Inhalte, die nur indirekt mit dem Hauptinhalt zusammenhängen
  • <footer>: Repräsentiert den Footer eines Dokuments

Vorteile von semantischem HTML:

  1. Verbesserte Zugänglichkeit für Screenreader
  2. Bessere SEO-Optimierung
  3. Sinnvollerer und lesbarerer Code
  4. Einfacheres Styling und Wartung

Wenn Sie die HTML-Datei in einem Browser vorschauen, werden keine sichtbaren Änderungen auftreten, aber die zugrunde liegende Struktur wird beschreibender und sinnvoller sein.

Anmerkungen: Erfahren Sie mehr über Wie man HTML-Dateien in der WebIDE vorschaut.

Implementierung von semantischen <header>- und <nav>-Tags

In diesem Schritt lernen Sie, wie Sie die semantischen <header>- und <nav>-Tags verwenden, um einen sinnvollen und strukturierten Website-Header und ein Navigationsmenü zu erstellen. Diese Tags helfen, die semantische Struktur Ihres HTML-Dokuments zu verbessern.

Öffnen Sie die WebIDE und ändern Sie die Datei semantic-example.html im Verzeichnis ~/project, um die Header- und Navigations-Tags zu implementieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Semantic Website</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

Lassen Sie uns die verwendeten semantischen Tags analysieren:

  1. <header>-Tag:

    • Repräsentiert den einleitenden Inhalt einer Seite
    • Kann Überschriften, Logos, Navigation enthalten
    • Wird verwendet, um den obersten Inhalt einer Seite oder eines Abschnitts zu gruppieren

  2. <nav>-Tag:

    • Definiert einen Abschnitt mit Navigationslinks
    • Enthält typischerweise Menüs, Inhaltsverzeichnisse
    • Verbessert die Zugänglichkeit und die SEO

  3. <ul>- und <li>-Tags:

    • Erstellen eine ungeordnete Liste von Navigationspunkten
    • Die <a>-Tags darin erstellen anklickbare Links

Wichtige Punkte, die Sie sich merken sollten:

  • <header> kann mehrere Elemente enthalten
  • <nav> ist speziell für Hauptnavigationsblöcke vorgesehen
  • Verwenden Sie sinnvolle Linktexte für eine bessere Zugänglichkeit

Beispielausgabe, wenn die Seite in einem Browser angezeigt wird:

Semantischer Header und Navigationsbeispiel

Erstellen von semantischen <article>- und <section>-Strukturen

In diesem Schritt lernen Sie, wie Sie die semantischen <article>- und <section>-Tags verwenden, um in Ihrem HTML-Dokument sinnvolleren und strukturierteren Inhalt zu erstellen. Diese Tags helfen, verschiedene Teile Ihrer Webseite zu organisieren und deren Zweck zu beschreiben.

Öffnen Sie die Datei semantic-example.html im Verzeichnis ~/project und aktualisieren Sie sie mit folgendem Code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Semantic HTML Article and Section Example</title>
  </head>
  <body>
    <header>
      <h1>My Blog</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#blog">Blog</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Learning Web Development</h2>
        <section>
          <h3>HTML Basics</h3>
          <p>
            HTML is the foundation of web development. It provides structure to
            web content.
          </p>
        </section>

        <section>
          <h3>Semantic HTML</h3>
          <p>
            Semantic HTML uses tags that describe the meaning of the content,
            making web pages more accessible and meaningful.
          </p>
        </section>
      </article>
    </main>
  </body>
</html>

Lassen Sie uns die semantischen Tags analysieren:

  1. <article>-Tag:

    • Repräsentiert eine eigenständige Zusammenstellung
    • Kann unabhängig verteilt oder wiederverwendet werden
    • Wird typischerweise für Blogbeiträge, Nachrichtenartikel, Forenbeiträge verwendet

  2. <section>-Tag:

    • Definiert eine thematische Gruppierung von Inhalten
    • Enthält normalerweise eine Überschrift
    • Hilft, den Inhalt in logische Teile zu unterteilen

  3. <main>-Tag:

    • Gibt den Hauptinhalt des Dokuments an
    • Sollte im Dokument eindeutig sein
    • Enthält das zentrale Thema oder die primäre Funktionalität

Beispielausgabe, wenn die Seite in einem Browser angezeigt wird:

Browseransicht des semantischen HTML-Beispiels

Wichtige Punkte, die Sie sich merken sollten:

  • <article> ist für eigenständigen Inhalt vorgesehen
  • <section> gruppiert verwandten Inhalt
  • Jeder Abschnitt hat normalerweise eine Überschrift
  • Verwenden Sie diese Tags, um die Dokumentstruktur und Lesbarkeit zu verbessern

Hinzufügen von semantischen <aside>- und <footer>-Elementen

In diesem Schritt lernen Sie, wie Sie die semantischen <aside>- und <footer>-Tags verwenden, um die Struktur und Bedeutung Ihrer Webseite zu verbessern. Diese Tags helfen, ergänzenden Inhalt zu organisieren und zusätzliche Informationen über die Seite bereitzustellen.

Öffnen Sie die Datei semantic-example.html im Verzeichnis ~/project und aktualisieren Sie sie mit folgendem Code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Semantic HTML Aside and Footer Example</title>
  </head>
  <body>
    <header>
      <h1>My Web Development Blog</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#blog">Blog</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Learning Web Development</h2>
        <section>
          <h3>HTML Basics</h3>
          <p>
            HTML is the foundation of web development. It provides structure to
            web content.
          </p>
        </section>

        <aside>
          <h3>Related Resources</h3>
          <ul>
            <li><a href="#">HTML Tutorial</a></li>
            <li><a href="#">CSS Guide</a></li>
            <li><a href="#">JavaScript Basics</a></li>
          </ul>
        </aside>
      </article>
    </main>

    <footer>
      <p>&copy; 2023 Web Development Blog</p>
      <p>Contact: [email protected]</p>
    </footer>
  </body>
</html>

Lassen Sie uns die neuen semantischen Tags untersuchen:

  1. <aside>-Tag:

    • Repräsentiert Inhalte, die nur indirekt mit dem Hauptinhalt zusammenhängen
    • Wird oft für Sidebars, Zitate oder zusätzliche Informationen verwendet
    • Hilft, ergänzenden Inhalt vom Hauptartikel zu trennen

  2. <footer>-Tag:

    • Repräsentiert den Footer eines Dokuments oder Abschnitts
    • Enthält typischerweise Urheberrechtsinformationen, Kontaktangaben oder verwandte Links
    • Kann mehrmals in einem Dokument vorkommen

Beispielausgabe, wenn die Seite in einem Browser angezeigt wird:

Browseransicht des semantischen HTML-Beispiels

Wichtige Punkte, die Sie sich merken sollten:

  • <aside> enthält Inhalte, die zwar mit dem Hauptinhalt verbunden, aber nicht zentral für ihn sind
  • <footer> liefert zusätzliche Informationen über das Dokument oder den Abschnitt
  • Diese Tags verbessern die semantische Struktur Ihres HTML-Codes

Erstellen eines vollständigen Layouts für eine semantische HTML-Seite

In diesem Schritt kombinieren Sie alle semantischen HTML-Tags, die Sie gelernt haben, um eine vollständige, gut strukturierte Webseite zu erstellen. Wir werden ein umfassendes Layout erstellen, das die Stärke von semantischem HTML zeigt.

Erstellen Sie eine neue Datei namens semantic-website.html im Verzeichnis ~/project mit folgendem Code:

touch ~/project/semantic-website.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Web Development Learning Hub</title>
  </head>
  <body>
    <header>
      <h1>Web Development Learning Hub</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#tutorials">Tutorials</a></li>
          <li><a href="#resources">Resources</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Getting Started with Web Development</h2>

        <section>
          <h3>HTML Fundamentals</h3>
          <p>
            Learn the basics of HTML and how to create structured web pages
            using semantic tags.
          </p>
        </section>

        <section>
          <h3>CSS Styling</h3>
          <p>
            Explore how to style your HTML documents and create visually
            appealing websites.
          </p>
        </section>

        <aside>
          <h3>Recommended Learning Path</h3>
          <ul>
            <li>HTML Basics</li>
            <li>CSS Styling</li>
            <li>JavaScript Fundamentals</li>
            <li>Responsive Web Design</li>
          </ul>
        </aside>
      </article>

      <article>
        <h2>Latest Tutorials</h2>
        <section>
          <h3>Semantic HTML Deep Dive</h3>
          <p>
            Understand the importance of semantic tags in modern web
            development.
          </p>
        </section>
      </article>
    </main>

    <footer>
      <p>&copy; 2023 Web Development Learning Hub</p>
      <nav>
        <ul>
          <li><a href="#privacy">Privacy Policy</a></li>
          <li><a href="#terms">Terms of Service</a></li>
        </ul>
      </nav>
      <p>Contact: [email protected]</p>
    </footer>
  </body>
</html>

Lassen Sie uns die semantische Struktur überprüfen:

  1. <header>: Enthält den Seitentitel und die Hauptnavigation
  2. <nav>: Bietet Navigationslinks an zwei Stellen
  3. <main>: Umfasst den primären Inhalt der Seite
  4. <article>: Repräsentiert unabhängigen, eigenständigen Inhalt
  5. <section>: Teilt den Inhalt in thematische Gruppen auf
  6. <aside>: Zeigt ergänzende Informationen an
  7. <footer>: Liefert zusätzliche Informationen und Links zur Seite

Beispielausgabe, wenn die Seite in einem Browser angezeigt wird:

Beispiel für ein Layout einer semantischen HTML-Seite

Wichtige Erkenntnisse:

  • Semantisches HTML verbessert die Dokumentstruktur
  • Jeder Tag hat eine bestimmte Bedeutung und einen bestimmten Zweck
  • Semantische Tags machen Ihren Code lesbarer und zugänglicher

Zusammenfassung

In diesem Lab (Praktikum) erkunden die Teilnehmer die grundlegenden Konzepte von semantischem HTML und dessen Bedeutung in der Webentwicklung. Indem sie von traditionellen, nicht beschreibenden <div>-Tags zu sinnvollen semantischen Elementen wie <header>, <nav>, <main>, <article>, <section>, <aside> und <footer> übergehen, gewinnen die Lernenden Einblicke in die Erstellung von Webseiten, die zugänglicher, lesbarer und SEO-freundlicher sind.

Das Lab führt die Teilnehmer durch die praktische Implementierung von semantischem HTML und zeigt, wie diese speziellen Tags dem Webinhalt einen klaren strukturellen Kontext geben. Indem Entwickler die Prinzipien von semantischem HTML verstehen und anwenden, können sie die Zugänglichkeit von Websites für Screenreader verbessern, die Suchmaschinenoptimierung (SEO) steigern und wartbarere und sinnvollere Code-Strukturen erstellen.

Verwandt CSS Kurse
Schnellstart mit CSS

Schnellstart mit CSS

CSS
Anfänger
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger
Erstellen eines Whack-a-Mole-Webspiels

Erstellen eines Whack-a-Mole-Webspiels

HTMLCSSJavaScript
Anfänger