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:29]
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>​
    
Zeile 43: 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.1418592567.txt.gz · Zuletzt geändert: 2014/12/14 22:29 von admin