HTML5-Elemente: header, nav, footer uvm. // Der Weg zur eigenen Webseite! - Guide. #4

domii.net (48)in #deutsch • 6 years ago (edited)

Heute befassen wir uns mit neuen HTML5-Elementen: header, nav, section, article, aside und footer. Wofür sind diese gut und warum sind sie so wichtig sind für eine moderne Webseite? -Diese und noch mehr Fragen werden heute behandelt.

Was wir bisher gelernt haben: Wir kennen und verstehen das HTML-Grundgerüst. Wie wir Texte in einer Webseite formatieren und strukturieren ist mittlerweile auch kein Problem mehr. Seit dem letzten Post gestern können wir auch DIV- und SPAN-Elemente in HTML einsetzen.

Heute zeige ich euch weitere HTML-TAGs die ähnlich wie DIV-Elemente arbeiten. Diese Elemente umhüllen andere Elemente (beispielsweise Texte oder Bilder).

Los gehts!

START

Nützliche Hilfe zum Einteilen der Webseite

Die folgenden TAG's gibt es erst seit HTML5. Also stark veraltete Browser unterstützen diese noch nicht. Da dies jedoch die Zukunft ist und wir moderne Webseiten gestalten wollen gehe ich näher auf diese ein.

Wie anfangs schon erwähnt umhüllen diese TAGs nur bestehende Elemente wie Texte oder Grafiken. Sie erleichtern uns die Arbeit aber wesentlich.

Um die Bilder zu vergrößern und die volle Auflösung zu sehen, einfach draufklicken.

Bereiche über HTML5 besser einteilen

Wie du an den beiden oberen Grafiken erkennen kannst sieht man von den HTML-Elemente header, nav, section, article, aside und footer nichts.

Sie sind sozusagen nur "Hilfselemente" für das Layout. Im nächsten Post geht dann um CSS und dort können wir diese Elemente sehr gut gebrauchen.

Bereich für Kopf

header-TAG

(aber nicht verwechseln mit < head >-Bereich ganz am Anfang des HTML-Dokuments)

Dieser Bereich sollte immer ganz oben sein. Hier kann ein Logo oder der Name deiner Webseite hinkommen. Viele Webseiten binden schon hier Links zu ihren Social-Media-Accounts ein.

Bereich für Navigation (=Steuerung)

nav-TAG

Der Name sagt schon alles. Der Grundgedanke für eine Navigation ist einfach: Man schreibt eine ungeordnete Liste (also ul-TAG) und füllt diese mit Listenelementen (li-TAG).

Jedes einzelne Listenelement bekommt noch einen LINK. (z.B.: der Menüpunkt (Listenpunkt) "über mich" soll zur Datei ueber-mich.html gehen und so weiter )

Im nächsten Schritt "umhüllen" wir diese Liste mit dem nav-TAG. Das "styling" zur Navigation kommt in einem weiteren Punkt, da dies wiederum ein sehr umfangreiches Thema ist.

^{Dies ist ein Beispiel, wie man die Navigation später mit CSS stylen können.}

Gruppiert Elemente

section-TAG

Wir können damit einige Elemente gruppieren. Ich beispielsweise habe alle Artikel und den aside-TAG in diesem section-TAG zusammengefasst. Dies hat den Vorteil, dass wir später alle Inhalte in diesem TAG dieselben Eigenschaften geben können.

Mit CSS können wir dann die Hintergrundfarbe von allen Elementen in diesem TAG einheitlich festlegen. -Dies gilt auch für die Schrift (Größe, Schriftart, ...).

Bereich für Inhalt

article-TAG

Den article-TAG nutzt man wie der Name schon sagt für Artikel. Im oberen Beispiel habe ich zwei Artikel auf einer Seite geschrieben, so ähnlich wie eine Blog-Übersicht.

Wenn sich die Seite jedoch nur um einen Artikel/ein Thema dreht, dann ist der article-TAG nicht zwingend notwendig. Zur besseren Aufgliederung der Inhalte würde ich ihn trotzdem verwenden (oder ein DIV-Feld).

^{Ein Beispiel für den article-TAG und aside-TAG.}

Bereich für Zusatzinformationen zum Inhalt

aside-TAG

Übersetzt bedeutet aside "beiseite". Damit definieren wir eine Seitenleiste, die etwas schmäler neben dem wirklichen Inhalt zu sehen ist.

Hier können wir Zusatzinformationen hinschreiben, die vielleicht auf jeder Unterseite unserer Webseite auch zu sehen sein sollen. Beispielsweise Neuigkeiten oder Links zu weiteren Seiten.

Der Browser liest die HTML-Datei wie wir Menschen von oben nach unten, deswegen ist unsere Seitenleiste noch unter und nicht neben dem Inhalt zu sehen. Damit dieser Bereich neben unseren Inhalt steht benötigen wir noch eine style-Datei.

Bereich für Fuß

footer-TAG

Dies ist der unterste Bereich der Webseite. Ähnlich wie die Fußzeile einer Word-Datei.

Wenn wir das Design selbst erstellt haben können wir hier ein © festlegen. Beispielsweise
© by Domii.net.

Natürlich kann man den Footer (Fußbereich) noch umfangreicher gestalten. Im Bild unterhalb hab ein Beispiel von meinem alten Blog:

Kommentieren, Auskommentieren

^{Ich hoffe, dass dir Kommentare klar sind. Sie sind nicht zwingend notwendig, jedoch können sie zur Verständnishilfe/Gedächtnisstützen zusätzlich verwendet werden.

Auf der normalen Webseite sieht man die Kommentare natürlich nicht!}

Im nächsten Teil geht es endlich um CSS. Also wie man diese TAGs und Elemente schöner gestalten kann.

Wenn du nichts verpassen willst folge mir einfach!

Mehr Wissen!

Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas interessantes für dich dabei:

HTML: DIV und SPAN-Elemente - Internet-Basics #8
HTML-TAG: Texte strukturieren und formatieren. - Internet-Basics #7
Der Weg zur eigenen Webseite! - Guide. Alles von Beginn an. - Internet-Basics #6
Warum gibt es Domains? - Internet-Basics #5

^{Kurze Schlussworte: Ich würde mich riesig über Feedback in einen Kommentar freuen.
Im nächsten Teil der Serie ist es endlich soweit. Wir beschäftigen uns endlich mit CSS. Was das ist und wie wir unsere erster Webseite damit schöner gestalten können.}

DANKE!

#html #internet #tutorial #bildung