Skip to content

Strukturierung Tags

Magst du dich an die Aufgabe – Arten von Websites erinnern, wo die Frage war, was für Elemente kommen oft auf Websites vor?

Da waren deine Antworten wahrscheinlich so:

Logo, Navigation, Inhalt, Fussbereich.

Damit hattest du vollkommen recht. Nun ist es im HTML so, dass man für diese allgemeinen Elemente auch HTML-Tags hat, um die Website zu strukturieren und einen klaren Aufbau zu geben.

Ziel(e)

  • Ich kann ein Website-Design in verschiedene Bereiche unterteilen.

  • Ich kann den verschiedenen Bereichen einer Website ein HTML-Tag zuordnen.

Aufgabe

Wie schon gestern, geht es im ersten Schritt darum, dich mit den HTML-Tags zur Strukturierung auseinander zu setzen.

Dabei handelt es sich um folgende HTML-Tags:

  • body
  • header
  • nav
  • main
  • article
  • section
  • aside
  • footer

Recherchiere im Internet nach der Bedeutung und dem Einsatz des jeweiligen HTML-Tags und notiere dir das Ganze in deinem Projektjournal. Da diese HTML-Tags ohne die Anwendung von CSS keinen Sinn ergeben, lassen wir es momentan mit dem Ausprobieren dieser Tags.

Öffne danach eine Website deiner Wahl, z.B. die deines Arbeitgebers.

Erstelle einen vollständigen* Screenshot der Website, speichere den Screenshot ab oder drucke ihn aus. Markiere nun auf dem Screenshot (digital oder analog) die verschiedenen HTML-Tags. Je nach Website kann es sein, dass ein HTML-Tag nicht vorkommt oder auch mehrmals vorkommt.

Falls du am Schluss noch Bereiche hast, die nicht markiert sind, und kein HTML-Tag so richtig passt, dann wird dieser Bereich vom HTML-Tag div umgeben.

Informier dich im Internet über das HTML-Tag div - was ist es, warum wird es seit HTML5 nicht mehr so oft eingesetzt etc. Halte dies auch alles in deinem Projektjournal fest.

  • mit dem Browser Firefox hast du z.B. die Möglichkeit, indem du rechts von der Suchleiste auf die drei horizontalen Punkte klickst und dann auf «Bildschirmfoto aufnehmen» - «Gesamte Seite speichern». Der Vorteil gegenüber dem Windows Snipping Tool ist, dass du nicht nur der aktuelle Ausschnitt der Website, sondern die gesamte Seite speichern kannst.

div

Dies wurde vor HTML5 für die Strukturierung eingesetzt. Mit den neuen Elementen, header footer etc braucht es div nicht mehr so oft. Wenn es in einem Fall kein geeignetes Element zur Gruppierung gibt, verwendet man nach wie vor div.