AG Informatik

HTML steht für Hypertext Markup Language und stellt damit eine grundlegende Auszeichnungssprache für die formatierte Darstellung von textbasierten Inhalten in Webbrowsern dar.

Im Folgenden beschäftigen wir uns mit dem grundlegenden Aufbau einer HTML-Datei:

<!-- index.html /-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dokumententitel</title>
    </head>
    <body>
        <h1>Tabellenüberschrift</h1>
        <p>Absatz</p>
    </body>
</html>

Das Beispiel zeigt das minimal erforderliche Gerüst einer HTML-Datei. Grundsätzlich ist der Aufbau recht simpel. Schauen wir uns zunächst die erste Zeile an:

<!DOCTYPE html>

Dies teilt dem Browser oder Server lediglich mit, das es sich um den Dokumententyp html handelt. Denkbar wären hier auch noch andere Formate wie xml.

Alle weiteren Elemente einer html-Datei werden innerhalb des <html>-Tags geschrieben.

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

Hier landet der Inhalt.

</html>

Ein HTML-Tag besteht immer aus zwei Teilen, dem öffnenden und dem schließenden Teil. Allerdings gibt es auch hier Ausnahmen. Das <meta>-Tag stellt eine davon dar. Wie du gesehen hast, hat es nämlich kein schließendes Tag </meta>, sondern folgendes Schema: <meta />

Allerdings darf das /-Zeichen auch weggelassen werden, also <meta name="a" content="b">

Zwischen <html> und </html> (Innerhalb des -Tags), werden wir zwei Bereiche erstellen:

Head - Die "Meta-Ebene"
Body - Die "visuelle Ebene"

Wir schauen uns zuerst den HTML-Kopf an.

Head

<head>
    <meta charset="UTF-8" />
    <title>Titel</title>
</head>

Im HTML-Kopf stehen Angaben, die das HTML-Dokument näher beschreiben. Neben Informationen für den Browser oder Suchmaschinen werden hier etwa auch ausgelagerte sogenannte Style Sheets eingebunden. Dazu später mehr. Innerhalb des <head>-Tags im o. a. Beispiel befinden sich zwei weitere Tags, nämlich <meta></meta> und <title></title>.

Das <meta>-Tag hat das Attribut charset mit dem Wert UTF-8. Charset gibt an, mit welcher Zeichencodierung das Dokument gelesen werden soll.

Theoretisch sind unendlich viele weitere <mtea>-Tags möglich, die alle nach dem gleichen Prinzip aufgebaut sind:

<meta name="Name des Meta-Attributs" content="Attributwert des Meta-Attributs" />

Wie du siehst, hat das <mtea>-Tag normalerweise zwei Attribute, nämlich:

name gibt an, wie das aktuelle Meta-Attribut benannt sein soll
content gibt an, welchen Inhalt/Wert das aktuelle Meta-Attribut haben soll

Beispiel:

<meta name="title" content="Titel der Website" />
<meta name="description" content="Inhaltsbeschreibung der Website" />

Das <title>-Tag wird benutzt, um den Titel der HTML-Datei anzugeben. Dieser wird in der Titelleiste des Browsers angezeigt.

<title>Titel der Website</title>

Bis hierhin sieht unsere HTML-Datei folgendermaßen aus:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="title" content="Titel der Website">
        <meta name="description" content="Beschreibung der Website">
        <title>Titel der Website</title>
    </head>
</html>

Body

Innerhalb des <body>-Tags wird alles hineingeschrieben, das dann auch tatsächlich im Browser angezeigt werden soll.

<body>
    Sichtbare Inhalte der Website
</body>

Unser gesamtes Dokument sieht, wenn wir alles richtig gemacht haben, so aus:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="title" content="Titel der Website">
        <meta name="description" content="Beschreibung der Website">
        <title>Titel der Website</title>
    </head>
    <body>
        Sichtbare Inhalte der Website
    </body>
</html>

Dokumentation

HTML Grundlagen

Head

Body