Meisterung des HTML5 Aside-Tags

Einführung

In diesem Schritt-für-Schritt-Labor lernst du, wie du das <aside>-Tag von HTML verwendest. Dieses Tag wird verwendet, um Inhalte anzuzeigen, die mit dem Hauptinhalt zusammenhängen, aber nicht essentiell für ihn sind.

Hinweis: Du kannst im index.html programmieren und lernen, wie du HTML in Visual Studio Code schreibst. Klicke bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend kannst du 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/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70703{{"HTML Inhalt - Aside"}} html/head_elems -.-> lab-70703{{"HTML Inhalt - Aside"}} html/text_head -.-> lab-70703{{"HTML Inhalt - Aside"}} html/para_br -.-> lab-70703{{"HTML Inhalt - Aside"}} html/lists_desc -.-> lab-70703{{"HTML Inhalt - Aside"}} html/layout -.-> lab-70703{{"HTML Inhalt - Aside"}} html/doc_flow -.-> lab-70703{{"HTML Inhalt - Aside"}} html/inter_elems -.-> lab-70703{{"HTML Inhalt - Aside"}} end

Einrichten der HTML-Seite

Öffne deinen Code-Editor und erstelle eine neue Datei namens index.html, und füge dann die folgende grundlegende HTML-Struktur hinzu:

<!doctype html>
<html>
  <head>
    <title>HTML Aside Tag Tutorial</title>
  </head>
  <body></body>
</html>

Erstellen des Hauptinhalts

Innerhalb des <body>-Tags erstellen wir jetzt etwas Hauptinhalt. Füge folgenden Code hinzu:

<h1>Willkommen auf meinem Blog!</h1>
<p>
  In diesem Artikel werden wir die Vorteile der Verwendung von HTML5 erkunden.
  HTML5 ist eine Markup-Sprache, die zur Strukturierung und Präsentation von
  Inhalten im World Wide Web verwendet wird.
</p>

Hinzufügen des zusätzlichen Inhalts

Nun fügen wir ein <aside>-Tag hinzu, das einige zusätzliche Informationen zum Hauptinhalt enthalten wird. Füge diesen Code unter dem Absatz in Schritt 2 hinzu:

<aside>
  <h2>Über diesen Artikel</h2>
  <p>
    Dieser Artikel wurde von John Doe verfasst, einem Webdesigner, der seit über
    8 Jahren in der Branche tätig ist. Er ist leidenschaftlich für die
    Webentwicklung und liebt es, sein Wissen mit anderen zu teilen.
  </p>
</aside>

Durch Hinzufügen des obigen Codes haben wir ein <aside>-Tag erstellt, das einige Informationen über den Artikel enthält. Diese Informationen sind mit dem Hauptinhalt zusammenhängend, aber nicht essentiell für ihn.

Gestalten des `<aside>`-Tags

Füge nun folgenden CSS hinzu, um dem <aside>-Tag ein wenig Stil zu verleihen:

<style>
  aside {
    width: 300px;
    margin-left: 30px;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
  }
</style>

Durch Hinzufügen dieses CSS haben wir dem <aside>-Tag ein wenig Stil verliehen. Die Breite ist auf 300px festgelegt, der Abstand auf 30px, und es hat einen hellgrauen Hintergrund mit einem Rahmen.

Hinzufügen von zusätzlichem Inhalt zum Artikel

Fügen wir noch etwas mehr Inhalt zum Artikel hinzu, damit wir besser visualisieren können, wie <aside>-Tags verwendet werden. Füge folgenden Code unter dem <aside>-Tag hinzu:

<p>
  HTML5 ist eine wichtige Aktualisierung der HTML-Sprache. Es bietet neue
  Funktionen und Funktionalitäten, was es Entwicklern einfacher macht, Webseiten
  und Anwendungen zu erstellen. Einige der neuen Funktionen in HTML5 sind:
</p>
<ul>
  <li>Neue semantische Tags wie header, footer, article und section</li>
  <li>
    Verbesserte Unterstützung für Multimedia mit den Video- und Audio-Tags
  </li>
  <li>Bessere Zugänglichkeit mit den nav- und main-Tags</li>
</ul>

Durch Hinzufügen des obigen Codes haben wir zusätzlichen Inhalt zum Hauptartikel hinzugefügt. Es enthält eine Aufzählung mit einigen Informationen über HTML5.

Zusammenfassung

In diesem schrittweisen Lab haben wir gelernt, wie man das HTML <aside>-Tag verwendet, um zusätzlichen Inhalt hinzuzufügen, der mit dem Hauptinhalt einer Webseite zusammenhängt. Wir haben auch gelernt, wie man dem Tag mit CSS etwas Stil verleiht. Das Verwenden des <aside>-Tags hilft Suchmaschinen und Webbrowsern zu verstehen, welchen Inhalt essentiell und welchen nicht essentiell ist.

HTML Inhalt - Aside