[HTML/CSS] [Tutorial] Html 4.01 Vs Html 5

Hallo und Herzlich willkommen.

Ich möchte euch heute zeigen, was HTML 5 so in der Praxis neues bringt, was es an Fortschritt bringt.
Natürlich möchte ich nicht alle Tags im einzelnen Vorstellen, sondern eher die Unterschiede der vorrangegangenen Version zu der Version 5 durch ein Beispiel-Layout direkt vergleichen.

Das Layout hier wird selbst mein erstes mit HTML 5 sein.
Also bitte ich um Nachsicht sollte ich Fehler machen.

Fangen wir an.

Die Doctype-Deklaration

Als allererstes sollten wir wie gewohnt den Doctype deklarieren.

In HTML 4.01 sähe das ganze so aus:

php:
1:	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Eine kleine erklärung:
Ich persöhnlich benutzte immer die "strict" Variante, um Fehlern in der Semantik und fehlerhaften, bzw. nicht mehr anerkannten Methoden direkt vorzubeugen, und gar nicht erst in Versuchung zu geraten. Eine weitere Erklärung findet sich hier: Link W3C

IN HTML 5 sähe das ganze so aus:

php:
1:	<!DOCTYPE HTML>

Wieso? wirst du dich fragen.
Nun, eigentlich ist der Doctype tag gar kein HTML-Tag, sondern nur eine Instruktion für den Browser. Normalerweise führt der Doctype-Tag den Browser zu einer DTD - Document Type Definition. Also einer Anweisung, welche dem Browser erzählt, worum es hier überhaupt geht.
Da für HTML 5 kein neuer Parser gebraucht wird, und die Parser an die HTML-version 4.01 angepasst sein sollten, erwartet dieser also die Doctype-Definition. Um unnötigen Problemen aus dem Weg zu gehen, wird dieser Tag eben Leer gebraucht. Für mehr Informationen: Link W3C

Der Anfang des HTML Dokuments

Der HTML Tag hat nur geringe unterschiede zu der Vorgängerversion.
Nachzulesen unter: Link W3C

Der Code entspricht also beiden Versionen:

php:
1: 2:	<html lang="de"> </html>

Das Lang attribut gibt die verwendete Sprache des Dokuments an.
In unserem Fall "de" für Deutsch.
Den Schluss-tag habe ich direkt mitrangehängt, damit nachher nichts vergessen wird Wink

Referenz: W3C

Der Head

Der Kopfbereich unseres Dokuments.
Er enthält alle relevanten Daten, die der Browser oder auch Suchmaschinen zu Indexierung benötigen.
Ich werde im nachhinein auf die einzelnen tags eingehen.

HTML 4.01:

php:

1:
2:
3:
4:
5:
6:
7:

<head>
    <title>Revolution Webdesign</title>
    <meta name="description" content="Revolution Webdesign on GFX_Sector.de"> 
    <meta name="keywords" content="RevoWeb, Revolution, Webdesign, Germany">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

HTML 5:

php:

1:
2:
3:
4:
5:
6:
7:

<head>
    <meta charset="UTF-8">
    <title>Revolution Webdesign</title>
    <meta name="description" content="Revolution Webdesign on GFX_Sector.de">
    <meta name="keywords" content="RevoWeb, Revolution, Webdesign, Germany">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

Der Kopfbereich wird wie gewohnt durch den head tag eingeleitet.
Darauf folgend der charset tag. Dieser gibt den Verwendeten Zeichensatz an. Um fehler in der Darstellung zu vermeiden nutze ich ausschliesslich UTF-8. In HTML 5 muss dieser als erster Tag im Head tag vorhanden sein.
Gefolgt von dem title tag, der den Dokument-titel angibt.

Die Metatags geben in der selben Reihenfolge folgende Informationen an:

Zuerst der description tag. Die Beschreibung unserer Website.
Gefolgt von dem keywords tag, der die Schlagworte für Suchmaschienen definiert.

Zu guter letzt verweist der link tag auf den zugehörigen stylesheet.

Der Body

Nun kommt endlich der Inhalt fröhlich

Eingeleitet durch den body tag.
(Für beide Versionen Gleich)

php:
1: 2:	<body> </body>

Der Inhalt

Nun wollen wir dem Körper mal etwas zu Essen.....aehm ich meinte Inhalt geben.

Zum Layout:
Ich möchte ein 2-Spalten Layout nutzen, sprich links der Content, Rechts eine Sidebar.
Die Navigation befindet sich im header, also im oberen Teil des Layouts.

Zuerst der Grundaufbau unseres Layouts:

HTML 4.01:

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

<div id="header">
    <h1>Revolution Webdesign</h1>
    <ul id="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul><!-- Navigation Ende -->
</div><!-- Header Ende -->

<div id="main">
    <div id="content">
        <h2>Inhalt</h2>
    </div><!-- content ende -->

    <div id="sidebar">
        <ul id="recposts">
            <li>Letzte Posts</li>
            <li>Letzte posts</li>
        </ul><!-- letzte posts ende -->
    </div><!-- sidebar ende -->
</div><!-- main ende -->

HTML 5:

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

<header>
    <h1>Revolution Webdesign</h1>
    <nav>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </nav>
</header>

<div id="main">
    <div id="content">
        <h2>Inhalt</h2>
    </div><!-- content ende -->

    <div id="sidebar">
        <section>
            <ul id="recposts">
                <li>Letzte Posts</li>
                <li>Letzte posts</li>
            </ul><!-- letzte posts ende -->
        </section>
    </div><!-- sidebar ende -->
</div><!-- main ende -->

Um unnötiges div-chaos zu vermeiden wurden in HTML 5 bestimmte sektionen als eigene tags eingeführt.
Fördert Semantik sowie Zugänglichkeit & Barrierefreiheit.

Wenn man die beiden Markups mit einander vergleicht, fallen die entsprechenden Tags sofort auf.

Anstatt " <div id="header> " zu verwenden reicht ein simpler header tag.
Genauso zu verfahren gilt für die Navigation.
Der nav tag kann übrigens für alle Navigationen gebraucht werden, so auch für folgende:

« Vorherige | Nächste »

Der section tag leitet einen Bereich, bzw. eine Sektion ein.
Also ein alternativer div tag. - Sozusagen.
Aber bitte nicht als solcher zu gebrauchen.
Eher um einen bestimmten Bereich wie in dem oben stehendem Layout verwendetem Last Posts.

Vergleichen wir die Kompletten Layouts im einzelnen:

HTML 4.01

HTML 5

Für das HTML 5 Dokument gibt es leider noch keine Sticker xP

Folgende Probleme beim validieren:

Der Validator erkennt die neue Form des meta tags für den Zeichensatz (charset) wohl noch nciht an, jund findet deshalb auch keinen.
Uns soll es nicht stören, da es ja immerhin in der offiziellen Referenz referenziert wird.

Zu erwähnen wäre noch folgendes.
Größen der einzelnen Dateien:

HTML 4.01: 1050 Bytes
HTML 5 : 880 Bytes

Bei Größeren Projekten, die Traffic zahlen, wird dies sicher relevant sein.

Epilog

Natürlich gibt es noch einige tags mehr in der Version 5.
Aufzeigen wollte ich sie jedoch nicht, da mir so langsam die Zeichen ausgehen und ich das Tutorial nicht unnötig in die Länge ziehen will.

Wer dafür Interesse hat, kann sich in der offiziellen Referenz umsehen, oder einschlägige Suchmaschienen nutzen.

Ich bitte euch, dieses Tutorial nicht als Maßstab anzusehen oder zu verwenden.
Wie ihr bin auch ich nur ein Mensch und mache Fehler oder irre mich.
Zudem kommt noch, das es relativ spät ist.

Also bitte ich um nachsicht.

lg

Rechtschreibfehl0r sind allesamt beabsichtigt, und sollen zur allgemeinen erheiterung beitragen

BTW: noch 19 Zeichen fröhlich

Thanks for this thread by the author

Until now 1 user has thanked