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:28]
admin [<aside>]
html-5-markup-semantik [2014/12/14 22:38] (aktuell)
admin
Zeile 13: Zeile 13:
  
 ===== <​header>​ ===== ===== <​header>​ =====
-Gruppe von Einführungen ​oder Navigationshilfen. + 
-Aus der Perspektive des Textes / Inhalts+  * 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> <code html5>
-<​section>​ +<​header>​ 
- <​header>​ +  ​hier ein Logo 
-  ​<​h1>​Überschrift</​h1>​ +</​header>​
- </​header+
- <​p>​foo bar baz</​p>​ +
- <​p>​lorem ipsum</​p>​ +
-</​section>+
 </​code>​ </​code>​
    
 ===== <​aside>​ ===== ===== <​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. 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 +  * glossar 
-werbung +  ​* ​seitenleiste 
-biographie eines autors+  ​* ​werbung 
 +  ​* ​biographie eines autors 
 <code html5> <code html5>
  <​p>​My family and I visited The Epcot center this summer.</​p>​  <​p>​My family and I visited The Epcot center this summer.</​p>​
Zeile 41: Zeile 42:
 </​aside> ​ </​aside> ​
 </​code>​ </​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.1418592525.txt.gz · Zuletzt geändert: 2014/12/14 22:28 von admin