Kleine CodeCrowd von programmieren lernen

Basis HTML5 Vorlage/Template

Ich habe uns eine Vorlage für ein HTML-Dokument erstellt, welches die neuen, semantischen HTML5-Elemente nutzt.
Im Style-Tage im Head-Bereich habe ich etwas CSS geschrieben, welches du natürlich mit deinen Styles ersetzen kannst.

Im Video zu dem Artikel erkläre ich das Dokument Schritt für Schritt. Du wirst sehen, das schöne ist, dass die meisten Tags eigentlich selbsterklärend sind und im Namen ihre semantische Bedeutung transportieren.

Du kannst diese Vorlage gerne für deine Projekte nutzen. Kopiere es dazu einfach aus dem Code unten oder nutze den Link zum Quellcode in der Infobox

Das HTML Grundgerüst

Ich werde in diesem Tutorial nicht weiter auf das HTML-Grundgerüst eingehen, da ich vermute, dass du das Video und den Artikel zu diesem Thema bereits kennst. Falls nicht ist hier der Link zum HTML-Grundgerüst Tutorial

CSS

Falls du CSS kannst, kannst du das CSS das ich hier geschrieben habe deinen Wünschen entsprechend anpassen. Andernfalls freu dich schon auf die CSS-Tutorials die ich aktuell (Stand Anfang 2019) produziere.

Das HTML5 main Tag

Das <main> umschließt den gesamten Bereich einer Website.

Alles weitere folgt hier zwischen.

Das HTML5 header Tag

Das <header> Tag repräsentiert einen einführenden, wichtigen Startbereich der Website. Er enthält beispielsweise das Logo, ein Suchfeld, den Titel der Website, die wichtigste Überschrift, die Navigation oder ähnliche Elemente. Auf der code-crowd-Website kann dieser Bereich als Header verstanden werden.

Das <header> Tag kann also für einen Startbereich auf einer Website stehen. So wie in diesem Beispiel:

Title der Website

logo

Aber auch die einzelnen Bereiche (nach HTML5 Semantik <article> oder <section>) einer Website können einen <header> Tag enthalten. Hier werden dann bestenfalls die einzelnen Überschriften <h1> bis <h6> umschlossen. So wie in diesem Beispiel:

Eine Überschrift

Ein Untertitle über eine Zeile

Der eigentliche Inhalt/Article der unter der Überschrift steht.

Das HTML5 nav Tag

Das <nav> Tag beinhaltet logischerweise Navigation-Inhalte, wie ein Menü, ein Inhaltsverzeichnis oder Link-Listen.




Das HTML5 section Tag

Das <section> Tag steht für einen Hauptbereich oder Abschnitt der Website, der semantisch nicht anders beschrieben werden kann, also z.B. kein <article> ist. Eine Karte, Suchergebnisse oder andere ähnliche Inhalte werden von einer Section umschlossen. Du kannst auch allgemein größere Bereiche einer Website mit einem <section> Tag umschließen, so wie ich es in dem unteren Beispiel getan habe.

Section header

Section article

section footer

Das HTML5 article Tag

Das <article> Tag ist ein wichtiger, eigentständiger Inhaltsteil einer Website. Oft ein Teil der sich so oder so ähnlich wiederholt. Wie beispielsweise ein Blog-Artikel, ein Inhaltsbereich einer Unterseite oder ein Abschnitt auf der Startseite.

HTML5-Basis-Template als Vorlage

Hier kommt der eigentliche Inhalt rein. HTML5 ist super!

Kommentare

Das HTML5 footer Tag

Das <footer> Tag referenziert den Fußbereich einer Website oder eines Website-Abschnitts.

© 2019 CodeCrowd

Das HTML5 aside Tag

Das <aside> Tag umschließt einen Seitenbereich einer Website oder eines Website-Abschnitts, wie Beispielweise eine Sidebar hier im Programmieren-lernen-Blog.

Basis HTML5 Vorlage/Template

Hier nun die gesamte Vorlage für dein HTML5 Basis Template als Vorlage.


<!DOCTYPE html>
<html lang="de">
<head>
    
    
    
    
    Was ist neu in HTML5
    
</head>
<body>
header
section
section header
section article
section footer
footer
</body> </html>

Im Browser sieht das blanke Template so aus:

HTML5 Elemente Basis Template

Ja, und das war auch schon alles, was du zu den „neuen“, semantischen HTML5-Tags wissen musst. Ziemlich selbsterklärend und logisch oder?

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.

Kommentare