HTML5-Grundgerüst für 3-Spalten-Layout

Im ersten Schritt für unser 3-Spalten-Layout benötigen wird die HTML-Seite und alle Inhalte. Dazu verwenden wir natürlich das aktuelle HTML5 als Grundgerüst.

Wie bisher auch, nutzen wir das HTML5-Grundgerüst für unser neues Layout.

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Titel der Einzelseite</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">

    <link href="design.css" rel="stylesheet">
</head>

<body>

</body>
</html>

Wichtig für Suchmaschinen und Bookmarks

Was im HTML-Code fehlt, ist der Titel der Seite und die Beschreibung. Dazu gibt es den HTML-TAG <title> und für die Beschreibung den TAG <meta name="description". In den Titel kommt z.B.: „Fennek und seine Umwelt – Beispielseite HTML5“. Die Beschreibung (description) sollte auch noch mit maximal 160 Zeichen eingetragen werden.

Beides wird in Suchmaschinen verwendet um in den Suchergebnissen Informationen über die Seite zu bringen. Der <title>-TAG wird bei Suchmaschinen dann als Link zur Seite verwendet. Daher ist dieser extrem wichtig.

Bild: Weiterverwendung von TITEL und DESCRIPTION in Suchmaschinen

Die <meta name="author" und <meta name="keywords" kann man sich schenken (oder eintragen, wenn man Spaß daran hat). Ich werde diese 2 im Folgenden weglassen, damit der HTML-Bereich übersichtlicher bleibt.

Unser bisheriger HTML-Bereich sieht also wie folgt aus:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Fennek und seine Umwelt – Beispielseite HTML5</title>
    <meta name="description" 
          content="160 Zeichen zum Beschreiben des Inhalts">
    <link href="design.css" rel="stylesheet">
</head>

<body>

</body>
</html>

Alte Browser-Versionen fit für HTML5 machen

Um für alte Browser (primär für die alten Versionen des Internet-Explorers) die neuen HTML5-Elemente nutzbar zu machen, müssen diese im HEAD-Bereich der HTML-Datei „angemeldet“ werden. Dies geschieht über JavaScript und die Anweisungen document.createElement(...)

Unser Grundgerüst wird mit diesen nur für alte Browser wichtigen Anweisungen ergänzt. Allerdings setzen wir eine Bedingung („condition“) ein, so dass dieser Bereich nur für den Internet-Explorer aktiviert wird:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Fennek und seine Umwelt – Beispielseite HTML5</title>
    <meta name="description" 
          content="160 Zeichen zum Beschreiben des Inhalts">
    <link href="design.css" rel="stylesheet">
    
    <!--[if IE]>
    <script>
    document.createElement("header");
    document.createElement("footer");
    </script>    
    <![endif]-->
    
</head>

<body>

</body>
</html>

Bei dieser Art darf man natürlich kein einziges auf der Website verwendetes neues HTML5-Element vergessen - neben <header> und <footer> gibt es ja noch einiges mehr. Damit man nichts vergisst, bietet sich die nächste Methode an!

Eine andere Möglichkeit ist der Einsatz eines vorgefertigten Skripts – im folgendem Beispiel html5shiv. Dieses externe JavaScript macht nichts anderes, als das oben gezeigte Beispiel mit „createElement“ – allerdings für alle HTML5-Elemente. Sprich, man vergisst nicht versehentlich ein Element und wundert sich dann, dass die Webseite nicht wie gewünscht funktioniert.

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Fennek und seine Umwelt – Beispielseite HTML5</title>
    <meta name="description" 
          content="160 Zeichen zum Beschreiben des Inhalts">
    <link href="style.css" rel="stylesheet">

<!--[if IE]>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
></script>
<![endif]-->
</head>

<body>

</body>
</html>

Das ist unsere erste Vorbereitung für unser 3-Spalten-Layout-Beispiel.

3-Spalten-Layout mit CSS erstellen Inhalte übernehmen & strukturieren