Was ist HTML 5? Was ist der Unterschied zu HTML 5?

HTML 5 erklärt - Coding Lab Steffen Lippke

Kennst Du nicht HTML5?

Dieser Beitrag basiert auf HTML 5.

Wie das funktioniert und was genau HTML 5 ist, erkläre ich Dir in diesem Beitrag.

Beginnen wir!

​Was ist HTML?

HTML steht für Hypertext Markup Language.

02 HTML mit Highlighting - HTML 5 Coding Lab Steffen Lippke
02 HTML mit Highlighting – HTML 5 Coding Lab Steffen Lippke

HTML ist eine Auszeichnungssprache und keine Programmiersprache. Sie formatieren Text, Bilder, Überschriften, Videos und Audiodateien auf einer Webseite.

Diese Dateien enthalten das Gerüst, an der sich die Webseitendarstellung orientiert.

​Grundlage – Extensible Markup Language (XML)

HTML basiert auf der Extensible Markup Language (XML).

XML nutzt die <> und </> um Objekte zu kennzeichnen. HTML spezifiziert XML und verfeinert die Document Type Definition (DTD). Die DTD schränkt die Möglichkeiten der XML ein, sodass eine einheitliche Syntax hilft, die Elemente korrekt im Browsern darzustellen.

03 Browser stellen HTML dar - HTML 5 Coding Lab Steffen Lippke
03 Browser stellen HTML dar – HTML 5 Coding Lab Steffen Lippke

​Mehr Farbe – Cascading Style Sheets (CSS)

Entwickler nutzten die Cascading Style Sheets, um systematisch die Farben und Formen in eine HTML-Datei einzubinden. CSS erlauben die Größe, Farbe, Form, Transparenz von fast jedem Objekt einzustellen.

05 CSS - HTML 5 Coding Lab Steffen Lippke
05 CSS – HTML 5 Coding Lab Steffen Lippke

Die Cascading Style Sheets sind eine Erweiterung und ein Muss für jede moderne Webseite auf HTML. Sie nutzte die Selektoren, um Element der HTML ihre Farben und Formen zu geben. CSS ermöglicht den „Maus Zeiger Nicht Klick“-Effekt (Hover) oder den Besuchter-Link-Effekt (Visted).

CSS platziert die Elemente Pixel genau auf dem Bildschirm. Die Stylesheet-Sprache ändert die Darstellung der Webseite, wenn Du statt auf Deinem Desktop (1920px Breite) auf Deinem Smartphone die Webseite besuchst (400px).

Wenn die gleiche Webseite auf Desktop wie Smartphone gut lesbar ist, nennt sich diese Webseite responsive. Dies ist nicht selbstverständlich und muss ein Entwickler durchtesten und anpassen.

Steffn Lippke

​Der Motor – JavaScript

Die HTML-Datei ist ein statisches Konstrukt.

Einmal aufgerufen ändert sich die Darstellung nicht. Wenn der Browser einen anderen Inhalt darstellen soll, dann muss der Browser eine neue HTML aufrufen / neu laden. JavaScript ermöglicht das dynamische Nachladen und ändern einer geladenen Seite.

​Syntax und Aufbau von HTML

HTML nutzt Tags zu Beschreibung. Tags kapseln Text, um sie anderes darzustellen, …

<b>Das ist ein fett geschriebener Text</b>

… oder stellen selbst ein Objekt dar wie ein Bild:

<img src=“image.png“></img>

src=“image.png“ ist ein Attribut, welches den Tag näher beschreibt. Jeder Tag Typ hat eigene und / oder geteilte Attribute. Leere Tags kannst Du auch mit der Kurzschreibweise abkürzen:

<img src=“image.png“ />

Ein HTML Dokument besteht aus einem Kopfelement mit dem Tab-Title, Script-Dateien, Beschreibungen und Metainformationen und dem sichtbaren Körper, der die Inhalte wie Texte, Bilder, Videos und Audio-Spuren enthält.

<html>
<head>
	<title>Tab-Title>
	<script src=“myscript.js“ />
	<meta name="description" content="Deine erste Webseite">
</head>

<body>
	<p>Das ist Text</p>
        <img src=“image.png“></img>
        <video width="320" height="240" controls>
                 <source src="movie.mp4" type="video/mp4">
        </video>
</body>
</html>

​Version Historie

​HTML 4 – Der alte Standard

Version 4 wurde 1997 veröffentlicht. Diese Version erlaubt viele alte Tags nicht mehr und parst diese nicht. HTML 4 ist die Grundlage für HTML 5.

HTML 4 ermöglicht alle Stile von Überschriften und Texte zu entfernen und mit Cascading Style Sheets selbst zu ersetzen.

​HTML 5 – Der neue Standard

Die 5. Version fügt neue Tags dazu. Diese mussten vorher händisch zusammengebaut werden bzw. waren uneinheitlich bei allen Webseiten

00 HTML komisch - HTML 5 Coding Lab Steffen Lippke
00 HTML komisch – HTML 5 Coding Lab Steffen Lippke
  • Neue Blocktypen ähnlich zum DIV: header, footer, main, section – diese sollten auch das beinhalten, nachdem sie benannt sind.
  • Formular Element: datalist für DropDown Listen und Progress
  • Multimedia: audio, video, source, track (Untertitel), sowie eine canvas für das Zeichen von Objekten (Games, Graphen und alle anderen Formen, svg für Vektor-basierte Bilder.
01 HTML im Browser – HTML 5 Coding Lab Steffen Lippke
  • Setzen von Querverweisen <h1 id=“games“>Games</h1> und mit dem Link meienwebseite.de/text.html#games kann die Person direkt zur Überschrift springen

​HTML 6 – Die lebende Zukunft

HTML 6 wird nie veröffentlicht. Die Version 6 ist ein lebender Standard, der von Zeit zu Zeit erweitert wird.

04 W3C als Standardiserungsbehörde - HTML 5 Coding Lab Steffen Lippke
04 W3C als Standardiserungsbehörde – HTML 5 Coding Lab Steffen Lippke
  • Kamera Integration: Früher war der Browser abgekapselt von den meisten Sensoren, Konektoren und Features unserer heutigen Geräte. HTML konnte lediglich ein Dokument darstellen. Mit HTML 6 ändert sich das. Du kannst die Kamera nutzen, um eine Videochat App zu entwickeln.
  • Single Page Apps auf HTML6 Basis: Ein W3C Geek wollte eine HTML6 App vorschlagen, die dynamische Inhalte austauschen kann, ohne JavaScript zu nutzen. Diese Idee hat sich bis heute nicht durchgesetzt (2021). Riesige JavaScript Dateien stellen bei den meisten Single Page Applications ein Ladeproblem dar. https://github.com/mozumder/HTML6
  • Neue Dialoge: Für Dialoge braucht der Entwickler JavaScript und CSS oder muss die hässlichen Browser generierten Dialoge verwenden. Jetzt geht es auch so:
<dialog>
  <form method="dialog">
    <input type="submit" value="Oh ja" />
    <input type="submit" value="Ne" />
  </form>
</dialog> 

​Vorverarbeitung und Generierung von HTML

Die meisten Webseiten im Internet sind nicht von Hand geschrieben.

Steffen Lippke

Ein Pre Prozessor übernimmt die Aufgabe. Statt eine HTML für z. B. jede News-Webseite zu schreiben, generiert eine PHP-Scriptdatei ….

  • mit HTML-Elementen (p), (h1), (h2), .. und
  • den Nachrichtentext aus einer externen Datenbank

… die HTML-Webseiten, die der Nutzer aufrufen kann.

​Statisches verändern – HTML 5 Manipulation

HTML ist ein statisches Dokument, aber bietet den Programmiersprachen eine Anwendungsschnittstelle für eine dynamische Nutzung.

  • Füge neue Elemente hinzu (z. B. das Nachladen von Links)
  • Ändere das Aussehen und die Form von Elementen (z. B. Das Neueinfärben eines Buttons)
  • Lösche Elemente (z. B. eine Todo aus einer Todoliste)

Diese Änderungen sind über JavaScript möglich. Um einzelne Objekte in der HTML zu adaptieren, spricht der Entwickler die Elemente über die Document Object Model (DOM) Anwendungsschnittstelle an (API). Die „Adressierung“ kann über verschiedene Wege funktionieren. Entweder selektiert der Entwickler.

  • über den Knotentypen p – Abschnitt, div – Boxen, input – Eingabefeld
  • über einen der Attribute <p class=“important“-→ important <input class=“test“ → test
  • über einen ID <h1 id=“meineID“ → meinID

Der Entwickler kann mit den Selektoren die HTML Seite gezielt gestalten.

​Systematische Lesen von Webseiten – Scraper

Die gleiche Anwendungsschnittstelle verwenden die lesenden Scraper zum Extrahieren von Inhalten.

Scraper sind Programme, die automatisch aus einem Berg aus HTML-Dokumenten relevante Inhalte suchen. Dazu verwenden sie die gleichen Selektoren. Scraper können z. B….

… mit einer Selektion auf h1 alle Überschrift der Webseiten extrahieren und in eine Tabelle schreiben. Suchmaschinen verwenden Scraper, um Inhalte von Webseiten zu verstehen und zu katalogisieren.

​HTML FAQ

​Ist HTML eine Programmiersprache?

Nein, HTML ist eine Auszeichnungssprache. Sie beschreibt, wie der Browser z. B. den Text darstellen soll. Programmierern kannst Du mit JavaScript oder PHP.

​Ist HTML für Anfänger einsteigerfreundlich?

Auf jeden Fall! HTML garantiert schnelle Erfolge und ist ein gefragtes Gut auf den Arbeitsmarkt (Jeder sollte es beherrschen).


Danke fürs Lesen! Erhalte weitere Tutorials in meinem kostenlosen Newsletter.
Jeden Monat teile ich mit Dir 4 neue praxisnahe Tutorials.
Trage Deine Mail zum kostenlosen Empfang des Newsletters* ein.




Quellenangabe Bilder: Icons und SVG-Grafiken im Titelbild von Microsoft PowerPoint 2019, frei verfügbar nach EULA
*) Mit dem Abonnement des Newsletters erklären Sie sich mit der Analyse des Newsletters durch individuelle Messung, Speicherung und Analyse von Öffnungsraten und der Klickraten in Profilen zu Zwecken der Gestaltung künftig besserer Newsletter einverstanden. Sie können die Einwilligung in den Empfang des Newsletters und die Messung mit Wirkung für die Zukunft widerrufen. Mehr in der Datenschutzerklärung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.


Jeden Monat teile ich mit 156.443 Mitgliedern
4 neue praxisnahe Tutorials.


Trage Deine Mail, damit Du
Deine Coding + Hacking Skills erweitern kannst!