{"id":2974,"date":"2014-01-13T08:47:14","date_gmt":"2014-01-13T07:47:14","guid":{"rendered":"http:\/\/blog.till.de\/?p=2974"},"modified":"2016-06-09T12:32:50","modified_gmt":"2016-06-09T10:32:50","slug":"html5-semantische-tags","status":"publish","type":"post","link":"https:\/\/blog.till.de\/webdesign\/html5-semantische-tags\/","title":{"rendered":"HTML5 \u2013 semantische Tags"},"content":{"rendered":"

Was sind denn semantische Tags?
\n<\/strong>
\nAllgemein gesagt sind semantische Tags Kennzeichnungen, welche bestimmte Inhaltstypen markieren.
\nIn HTML5 gibt es die semantischen Tags :
\n-article: Hiermit werden Bereiche markiert, welche komplett allein stehen k\u00f6nnen. Mit diesem Tag wird den Suchmaschinen gesagt, wo der Inhalt des Dokuments anf\u00e4ngt.
\n-aside: \u201eam Rande\u201c. Eine gute Beschreibung daf\u00fcr, weil damit die Inhalte gef\u00fcllt werden, welche nicht im Hauptbereich der Seite zu sehen sind.
\n-footer: Hiermit wird die Fu\u00dfzeile markiert
\n-header: Hier werden, wie auch in HTML, die typischen Kopf- Elemente hineingeschrieben.
\n-hgroup: Damit wird der Bereich einer \u00dcberschrift von einem section- Element markiert.
\n-main: Hiermit wird der Hauptbereich der Seite markiert. In HTML wird dieser mit einem div, welches die ID \u201amain\u2018 hat, markiert.
\n-nav: Damit wird der Bereich der Navigation markiert.
\n-section: Damit wird ein Bereich f\u00fcr den Inhalt markiert. Sections haben eigentlich immer eine \u00dcberschrift (hgroup). Sie k\u00f6nnen auch wie div\u2019s benutzt werden, sind aber nicht f\u00fcr komplizierte JavaScript- Funktionen gedacht.<\/p>\n

Und warum sollte ich jetzt diese HTML5 Tags benutzen?
\n<\/strong>
\nZum einem wird der Quelltext der Seite etwas \u00fcbersichtlicher, denn damit wird dem hier:<\/p>\n

<head>
\nHead-Tags
\n<\/head>
\n<body>
\n<div id=\u201cmain\u201c>
\n<div id=\u201dnav\u201d>
\nSeitennavigation
\n<\/div>
\n<div id =\u201ccontent\u201c>
\nDer Seiteninhalt
\n<\/div>
\n<div id=\u201dleft\u201d>
\nLinke Spalte
\n<\/div>
\n<div id=\u201cfooter\u201c>
\nFu\u00dfzeile
\n<\/div>
\n<\/div>
\n<\/body><\/p>\n

das hier:
\n<head>
\nHead-Tags
\n<\/head>
\n<body>
\n<main>
\n<nav>
\nSeitennavigation
\n<\/nav>
\n<section>
\nDer Seiteninhalt
\n<\/section>
\n<aside>
\nLinke Spalte
\n<\/aside>
\n<footer>
\nFu\u00dfzeile
\n<\/footer>
\n<\/main>
\n<\/body><\/p>\n

Ein zweiter wichtiger Punkt ist, dass die Suchmaschinen Seiten, welche diese Tags haben, besser durchsuchen k\u00f6nnen. Aus der ersten Struktur liest die Suchmaschine, dass dort ein div ist, wo nocheinmal vier verschachtelte divs enthalten sind. Aus der zweiten Struktur erkennt es, dass dort der Main-Bereicht ist, wo die Navigation, ein Inhaltsbereich und eine linke Spalte , gefolgt von dem footer sind.<\/p>\n

Was spricht gegen die Verwendung von semantischen Tags?<\/strong><\/p>\n

Ein gro\u00dfer Punkt gegen semantische Tags ist, dass nicht alle Browser diese unterst\u00fctzen. Der Internetexplorer von Mircosoft zum Beispiel hat bis zur Version 7 HTML5 nicht unterst\u00fctzt. Das kann nachtr\u00e4glich \u00fcber den \u201cmodernizr\u201d hinzugef\u00fcgt werden.
\nDie meisten Browser erstellen dann ein normales div. Wenn man die Formatierungen \u00fcber CSS auf das Tag (z.B. <main>) legt, verschwinden diese. Hier muss man dann wieder eine Klasse oder ID vergeben (z.B.<main ID=\u201dmain\u201d>).<\/p>\n

Der modanizr<\/strong><\/p>\n

Der modernizr ist eine offene JavaScript-Bibliothek, welche \u00fcberpr\u00fcft ob der Browser HTML5 und CSS3 kompatibelel ist. Wenn er es nicht ist, werden die HTML5 Tags und die CSS3 Formatierungen umgewandelt, damit sie trotzdem richtig angezeigt werden k\u00f6nnen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Was sind denn semantische Tags? Allgemein gesagt sind semantische Tags Kennzeichnungen, welche bestimmte Inhaltstypen markieren. In HTML5 gibt es die semantischen Tags : -article: Hiermit werden Bereiche markiert, welche komplett allein stehen k\u00f6nnen. Mit diesem Tag wird den Suchmaschinen gesagt, wo der Inhalt des Dokuments anf\u00e4ngt. -aside: \u201eam Rande\u201c. Eine gute Beschreibung daf\u00fcr, weil damit… Mehr lesen »HTML5 \u2013 semantische Tags<\/span><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false,"_ti_tpc_template_sync":false,"_ti_tpc_template_id":"","footnotes":""},"categories":[77],"tags":[],"class_list":["post-2974","post","type-post","status-publish","format-standard","hentry","category-webdesign"],"_links":{"self":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/2974"}],"collection":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/comments?post=2974"}],"version-history":[{"count":0,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/2974\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/media?parent=2974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/categories?post=2974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/tags?post=2974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}