2019-08-28 — Webdesign

HTML5-Tags Übersicht - Semantik, Content + PDF Download

HTML5-Tags Übersicht - Semantik, Content und PDF Download

DOWNLOAD PDF (1.089 KB)

HTML5 ist zum heutigen Zeitpunkt ein alter Hut, dennoch finde ich es wichtig trotzdem die wichtigsten HTML5 Tags zusammenzufassen. Ich decke hier fast alle Tags ab, außer einige wenige, die nur in sehr speziellen Fällen angewendet werden und ich keine Verwendung für diese habe. Zusätzlich fidnest du auch alle Tags in der PDF zum downloaden. Die meisten der Tags wirst Du auch hier auf meiner Webseite finden, wenn Du den Quellcode analysierst. Viel Spaß mit der HTML5-Tags Übersicht!

Semantische Tags

Mit HTML5 kam eine neue Art der Schreibweise von Quellcode hinzu: semantisches HTML. Semantik ist griechisch für "bezeichnen". Mit semantischen HTML kann ich bestimmte Bereiche meiner Webseite besser kennzeichnen. Möchte ich zum Beispiel den Header meiner Webseite in HTML schreiben, dann haben wir das üblicherweise mit einem normalem div-Tag gelöst. Mit der semantischen Schreibweise nutze ich allerdings statt einem einfachen div-Tag das neue header-Tag. ein Beispiel:

Statt <div id="header">...</div> schreiben wir <header>...</header>

Das header-Tag funktioniert genauso wie ein normales div-Tag, mit der einen Ausnahme, dass im Quellcode nun genau verankert ist, dass es sich um den Header-Bereich handelt. Das nützt vor allem den Suchmaschinen, da diese nun mit höchster Warscheinlichkeit wissen, dass dieser bestimme Bereich auch der Header der Webseite ist. Der Header, der Footer, die Navigation und viele mehr, verstecken sich nicht mehr hinter einfachen div-Tags und können gekennzeichnet werden.

Übersicht von semantischen Tags
Tag Beschreibung
<nav> Zur Auszeichnung der (Haupt-)Navigation.
<nav>
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/blog/">Tutorials & Blog</a></li>
<li><a href="/kontakt/">Kontakt</a></li>
</ul>
</nav>
<header> Zur Auszeichnung der Kopfzeile.
<header>
<img src=“katze.jpg“ alt=“Bild von Katze“>
<h1>Tolle Webseite über Katzen</h1>
</header>
<main> Zur Auszeichnung der Hauptinhalte.
<aside> Zur Auszeichnung von Zusatzinhalten oder Nebeninhalte, die in zum Hauptinhalt gehören.
<section> Zur Auszeichnung von Sektionen bzw. von zusammenhängenden Inhalten.
<article> Zur Auszeichnung von redaktionellen Inhalten wie z.B. News oder Blogartikel.
<figure> Zur Auszeichnung von Bildern, die zum Inhalt passen. Sinnvoll in der Kombination des Tags <figcaption>.
<figure>
<img src="bild-zum-Inhalt.png" alt="Das Bild untermalt den Inhalt" >
</figure>
<figcaption> Die Bildunterschrift zum Figure-Tag.
<figure>
<img src="bild-zum-Inhalt.png" alt="Das Bild untermalt den Inhalt" >
<figcaption>Bildunterschrift</figcaption>
</figure>
<footer> Zur Auszeichnung der Fußzeile.
<mark> Markiert einen Text wie mit einem Textmarker. Somit werden Textstellen hervorgehoben.

Außerdem habe ich Dir einmal ein HTML Grundgerüst und einen Blogartikel mit passenden semantischen Tags aufgebaut. Dadurch kannst Du Dir genauer die Syntax anschauen.

<!-- HTML Grundgerüst -->
	<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<header>
			<img src="logo.png" alt="">
			<nav>
				<ul>
					<li><a href="/">Startseite</a></li>
					<li><a href="/blog/">Blog</a></li>
					<li><a href="/kontakt/">Kontakt</a></li>
				</ul>
			</nav>
		</header>
		<main>
			<section><!-- Zum Beispiel Inhalte über was Du tust --></section>
			<section><!-- Zum BeispielInhalte über Deine Leistungen--></section>
			<article><!-- Zum Beispiel Dein letzter Blogpost --></article>
		</main>
		<aside><!-- Zum Beispiel weiterführende Links--></aside>
		<footer>
			<!--- Hier Footerinformationen -->
		</footer>
	</body>
	</html>
	<!-- Blogbeitrag -->
	<article>
		<h1>Mein Leben mit meiner Katze</h1>
		<p>Text tum Beitrag</p>
		<figure>
			<img src="leben-mit-katze.jpg" alt="Mein Leben mit einer Katze">
			<figcaption>Hier sieht man wie ich mit meiner Katze das Leben genieße.</figcaption>
		</figure>
</article>

Content Tags

Neben den semantischen Tags, wurde es auch vereinfacht bestimmte Elemente in die Webseite einzufügen, wie z. B. Videos oder Audio Dateien. Das spart das Einbinden von externen Playern und vereinfacht unser Leben als Webentwickler enorm.

Übersicht von content Tags
Tag Beschreibung
<video> Das Video Tag bindet ein Video Deiner Wahl ein.
<video controls="controls" src="video.mp4">
Dein Browser unterstützt keine HTML5 Videos.
</video>
<audio> Das Audio Tag bindet ein Audiodatei Deiner Wahl ein.
<audio controls="controls" src="audio.mp3">
Dein Browser unterstützt kein HTML5 Audio.
</audio>
<picture> Das Audio Tag bindet eine reihe alternativer Bilder ein, je nach unterstützen Format oder Displaygröße.
<picture>
<source srcset="katze.svg" type="image/svg+xml">
<img src="katze.png" alt="Katze">
</picture>

Fazit:

Das ist die Übersicht aller wichtigen HTML5 Elemente. Alle weiteren findest Du in meiner PDF. Ich hoffe ich konnte Dir damit weiterhelfen und konnte eine Grundbasis zum Verständnis der neuen HTML5-Tags schaffen. Fehlt Dir was, oder ist Dir ein Fehler aufgefallen? Dann melde Dich doch einfach bei mir!

Autorenbild Andreas Lautenschlager

Von Andreas Lautenschlager

Webentwickler / Online Marketing Berater

Ich bin online Marketer und spezialisiert auf das Frontend und die Psychologie einer Webseite, sowie deren Technik. Ich liebe meinen Job, weil der online Bereich ständig im Wandel ist und unbegrenzte Möglichkeiten gestattet.