In HTML5 sind einige Spezial-Tags hinzugekommen, um den Inhalt einer HTML-Seite grundsätzlich einzuteilen. Die Struktur, die damit gemacht wird, ist auf allen Seiten eines Projekts meistens gleich oder zumindest ähnlich.
Im Codepen wird vorausgesetzt, dass du dich bereits mit Farb-Codes auskennst. Falls du nicht dem "Leitfaden zum Lernen" folgst, schaust am besten schnell in die Rubrik "CSS-Farben" hinein.
Zusätzlich gibt es einen "Universal"-Tag für Bereiche: <div>
. Dieser wird dir hier erklärt: division
Auch in dieser Rubrik gibt es ein Quiz: Quiz "Seiten-Bereiche".
Im erweiterten Gerüst sind die wichtigsten Seiten-Bereiche bereits im Template (= Kopiervorlage) eingetragen. Hier findest du einen Screenshot des Templates:
Es gibt noch mehr Tags, die gedacht sind, Inhalt logisch zu markieren:
<section>
<article>
<aside>
Da jedoch niemandem wirklich klar ist, was bei diesen der Unterschied bzw. der Zweck sein soll, verzichtet der Web Astronaut auf weitere Erwähnung.