LabEx
AnmeldenKostenlos beitreten

HTML Artikelabschnitt

HTMLHTMLBeginner
Jetzt üben

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

Einführung

Semantisches HTML ist ein wichtiges Konzept in der Webentwicklung, da es Suchmaschinen und assistive Technologien hilft, den Inhalt einer Website besser zu verstehen. Eines der Elemente, mit denen man semantisches HTML erstellen kann, ist das <article>-Tag. In diesem Lab werden wir lernen, wie man das <article>-Tag verwendet und wie es dabei hilft, zugängliche Webseiten zu erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie man HTML in Visual Studio Code schreibt. 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.

Füge die HTML5-Struktur hinzu

Erstellen Sie in Ihrem bevorzugten Texteditor eine Datei namens index.html und speichern Sie die Datei.

Fügen Sie der Datei index.html die grundlegende HTML5-Struktur hinzu. Dies umfasst die <!DOCTYPE html>-Deklaration, das <html>-Element, das <head>-Element und das <body>-Element.

<!doctype html>
<html>
  <head>
    <title>Meine Webseite</title>
  </head>
  <body>
    <!-- Fügen Sie hier den Inhalt hinzu -->
  </body>
</html>

Füge ein <article>-Tag hinzu

Innerhalb des <body>-Elements fügen Sie ein <article>-Tag hinzu. Dieses Tag wird den Hauptinhalt Ihrer Webseite enthalten. Das <article>-Tag hat ein Anfangs- und ein Schließtag.

<article>
  <!-- Fügen Sie hier den Hauptinhalt hinzu -->
</article>

Füge Artikelinhalt hinzu

Innerhalb des <article>-Tags fügen Sie etwas Inhalt hinzu, der den Hauptinhalt der Webseite darstellt. Dies kann alles sein, wie ein Artikel, ein Blogbeitrag oder eine Produktbeschreibung.

<article>
  <h1>Mein fantastischer Artikel</h1>
  <p>
    Dies ist der Hauptinhalt meiner Webseite. Es ist ein wirklich fantastischer
    Artikel, den jeder lesen sollte.
  </p>
  <p>Hier sind einige Gründe warum:</p>
  <ul>
    <li>Es ist gut geschrieben.</li>
    <li>Es ist informativ.</li>
    <li>Es ist amüsant.</li>
  </ul>
</article>

Innerhalb des <article>-Tags fügen Sie ein <footer>-Tag hinzu, um zusätzliche Informationen zum Inhalt bereitzustellen.

<article>
  <h1>Mein fantastischer Artikel</h1>
  <p>
    Dies ist der Hauptinhalt meiner Webseite. Es ist ein wirklich fantastischer
    Artikel, den jeder lesen sollte.
  </p>
  <p>Hier sind einige Gründe warum:</p>
  <ul>
    <li>Es ist gut geschrieben.</li>
    <li>Es ist informativ.</li>
    <li>Es ist amüsant.</li>
  </ul>
  <footer>
    <p>
      Veröffentlicht am
      <time datetime="2022-09-15">15. September 2022</time> von
      <a href="#">John Doe</a>
    </p>
  </footer>
</article>

Speichern Sie die Datei index.html und öffnen Sie sie in einem Webbrowser, um die fertige Webseite mit Kontaktinformationen zu sehen.

Zusammenfassung

Das Verwenden des <article>-Tags ist ein einfacher Weg, semantisches HTML zu erstellen und Ihre Website zugänglicher zu machen. Indem Sie das <article>-Tag verwenden, können Sie zusätzliche Informationen zum Hauptinhalt Ihrer Webseite bereitstellen, was es Suchmaschinen und assistiven Technologien erleichtert, Ihre Website besser zu verstehen. Denken Sie daran, Ihren HTML-Code immer zu validieren, um sicherzustellen, dass er frei von Fehlern ist und allen erforderlichen Standards entspricht.

Verwandt HTML Kurse
HTML für Anfänger

HTML für Anfänger

HTML
Anfänger
Schnellstart mit HTML

Schnellstart mit HTML

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

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

HTMLCSSJavaScript
Anfänger