Benutzer-Werkzeuge

Webseiten-Werkzeuge


html-5-markup-semantik

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
html-5-markup-semantik [2014/12/14 22:12]
admin [section element]
html-5-markup-semantik [2014/12/14 22:38] (aktuell)
admin
Zeile 1: Zeile 1:
 ====== HTML5 - Markup Semantik (Reminder / Cheatsheet) ====== ====== HTML5 - Markup Semantik (Reminder / Cheatsheet) ======
  
-===== section ​element ​=====+===== <section=====
 zur Gruppierung zusammengehörigender Inhalte zur Gruppierung zusammengehörigender Inhalte
  
Zeile 11: Zeile 11:
 </​section>​ </​section>​
 </​code>​ </​code>​
 +
 +===== <​header>​ =====
 +
 +  * Gruppe von Einführungs- ​
 +  * oder Navigationshilfen
 +  * kann ein paar Kopfelemente beinhalten
 +  * jedoch auch andere Elemente wie zum Beispiel ein Logo, ein Suchfeld, usw.
 +
 +
 +<code html5>
 +<​header>​
 +  hier ein Logo
 +</​header>​
 +</​code>​
 + 
 +===== <​aside>​ =====
 +repräsentiert eine Sektion einer Seite, welche aus Inhalt besteht der nur indirekt zum restlichen Inhalt gehört, also parallel zum Kontext betrachtet werden kann.
 +
 +  * glossar
 +  * seitenleiste
 +  * werbung
 +  * biographie eines autors
 +
 +<code html5>
 + <​p>​My family and I visited The Epcot center this summer.</​p>​
 +
 +<​aside>​
 +  <​h4>​Epcot Center</​h4>​
 +  <​p>​The Epcot Center is a theme park in Disney World, Florida.</​p>​
 +</​aside> ​
 +</​code>​
 +
 +===== <​footer>​ =====
 +<code html5>
 +<​section>​
 +  <​header>​
 +    <​h1>​Artikelname</​h1>​
 +  </​header>​
 +  <​p>​Lorem ipsum dolor sit <a href="">​amet.</​a></​p>​
 +  <​p>​Lorem ipsum.</​p>​
 +  <​footer>​
 +    <​p>​Mario Janschitz</​p>​
 +  </​footer>​
 +</​section>​
 +</​code>​
 +
 +===== <​article>​ =====
 +  * Es können mehrere article-Elemente in einer Section vorkommen und vice versa
 +  * Hautptunterschied: ​
 +  * article = in sich geschlossenee inhaltliche Einheit
 +  * section = container für generische Information
 +
 +Trick: Wenn der fragliche Inhalt auch als RSS-Feed-Artikel sinnvoll wäre, das article Element benutzen, da der Inhalt offensichtlich in sich geschlossen ist.
 +
 +===== Links =====
 +
 +  * [1] http://​t3n.de/​news/​semantik-html5-528492/​
 +  * [2] https://​developer.mozilla.org/​de/​docs/​Web/​HTML/​Element/​
  
html-5-markup-semantik.1418591551.txt.gz · Zuletzt geändert: 2014/12/14 22:12 von admin