Netzprogrammierer.de

HTML5 – Eine Übersicht

Was ist HTML5:

HTML5 ist eine Textbeschreibungssprache, mit  deren Hilfe Texte strukturiert werden. Während in früheren Tagen der Webentwicklung noch viele Textformatierungen über entsprechende HTML-Attribute realisiert wurden, erfolgt die Formatierung der verschiedenen HTML Elemente nun über Cascading Style Sheets (CSS). HTML zeichnet lediglich verschiedene Textarten wie Absätze und Überschriften aus. Außerdem können freie Bereiche, so genannte DIV-Container deklariert werden, um den eigentlichen Seitenaufbau darzustellen.

HTML arbeitet mit so genannten HTML-Tags. Ein Tag ist ein, mit spitzen Klammern umschlossenes Schlüsselwort, welches einen Text einschließen kann und somit auszeichnet. Dem schließendem Tag steht ein / Schrägstrich voran:

<h1>Eine Überschrift</h1>
<p>Ein Textabsatz</p>

Es gibt zwar eine große Anzahl dieser Tags, praktisch genutzt werden aber lediglich ein paar wenige von ihnen. Dies ist dem Umstand geschuldet, das die Formatierung, wie Farb- und Größenangaben, im modernen Webdesign, nicht mehr mit HTML, sondern ausschließlich mit CSS realisiert wird. HTML zeichnet lediglich die Textstruktur, wie Absätze und Überschriften aus und bindet Multimedia-Inhalte ein.

Folgende HTML-Tags sind heute noch gebräuchlich

Überschriften:
<h1></h1>, <h2></h2>, …, <h6></h6>
Textabsätze:
<p></p>
Container:
<div></div>
<span></span>
Links:
<a href=“eine_seite.html“>Ein Link</a>
Auflistungen (Unsortierte Listen):
<ul>
	<li>Eintrag 1</li>
	<li>Eintrag 2</li>
<ul>
Zeilenumbrüche:
<br>
Seitenstruktur Auszeichnung:
<article></article>
<header></header>
<footer></footer>
<nav></nav>

Neben Text können auch andere Multimedia-Inhalte in eine HTML-Seite eingebunden werden. Dies geschieht ebenfalls über spezielle HTML-Tags.

Bilder:
<img src=“mein_pfad/bild.jpg“ alt=“ein Bild“>
Videos:
<video>
	<source src="video.ogg" type="video/ogg">
	<source src="video.mp4" type="video/mp4">
<video>

Um alle Browser abzudecken müssen Videodateien im .mp4 und .ogg Format verfügbar sein!

Audio Dateien:
<audio>
	<source src="audiodatei.mp3" type="audio/mpeg">
	<source src="audiodatei.ogg" type="audio/ogg">
</audio>

Um alle Browser abzudecken müssen Audiodateien im .mp3 und .ogg Format verfügbar sein!

Bildleinwand:
<canvas width="640" height="480"></canvas>

Die HTML-Parameter width und height sollten beim canvas-Element angegeben werden, da es sonst zu Schwierigkeiten mit dem Seitenverhältnis, beim Zeichnen von Grafikdateien auf die Leinwand kommen kann. Ansonsten sollten solche Designangaben ausschließlich über CSS realisiert werden.