Wer sich zum ersten mal mit HTML beschäftigt oder es von grund auf lernen möchte, dem lege ich ans Herz zunächst meinen Beitrag „HTML-Grundgerüst“ durchzulesen, da dieser Beitrag auf diesem auf baut.
Früher war es üblich, seine Webseite mit Hilfe von DIV-Tag und IDs bzw. Klassen aufzuteilen und zu formatieren. So hat man z.B. Tag wie folgende erstellt <div id=“header“></div> in HTML5 wurden nun einige TAGs hinzugefügt, die solche DIV-Tags ersetzten bzw. abkürzen.
| Tag | Beschreibung |
|---|---|
| < aside >< /aside > | Sidebar |
| < header>< /header> | Soll für den Kopf-Bereich genutzt werden und beinhaltet meister Logo, Headerbild, Titel und Navigation der Seite |
| < main>< /main> | Umschließt den Hauptinhalt der Seite |
| < nav>< /nav> | Beinhaltet die Navigations-Elemente |
| < section >< /section > | Ein Abschnitt innerhalb eines Dokuments, es kann mehrere Abschnitte in dem Dokument geben, kann alternativ zu DIV-Tags genutzt werden um das HTML zu Strukturieren. |
| < article >< /article > | In sich geschlossener Artikel auf einer Seite, mit eigener H1 Ãœberschrift (dadurch wäre mehrere H1-Tags auf einer Seite möglich), Header, Footer … |
|  < footer >< /footer > |  Umschließt den Footer-Bereich einer Seite und enthält oftmals, aber nicht zwingend Kontakt, Impressum, Copyright und evtl. die Sitemap eines Dokuments. |
Im Internet Explorer werden neue HTML5 Tags nicht erkannt, diese werden als gewöhnliche Container behandelt (z.B. DIV) Ausnahme ist der Internet Explorer 9 dieser benötigt für die Elemente noch das CSS-Attribut „display:block;“
Daraus ergibt sich folgende als Beispiel durch HTML5 ergänzende Struktur:
<!doctype html> <html> <head> <title>Grundstruktur in HTML</title> <meta charset="utf-8"> </head> <body> <header> <img src="logo.gif" alt="logo"> <h1>Überschrift</h1> </header> <footer> <a href="kontakt.html">Kontakt</a> <p>© 2015 mywebcode.de</p> </footer> </body> </html> |
