Nach dem DOCTYPE folgt in allen standardkonformen HTML-Dokumenten die HTML-Basisstruktur: Der die gesamte Seitenstruktur umschließende Tag heißt nicht ganz überraschend <html>. In der Hierarchie der Seite ist dies der oberste Tag, man spricht teilweise auch von "Knoten". Der <html>-Tag wird also am Anfang des Dokuments geöffnet und am Ende wieder geschlossen. Der hintere Tag bei paarigen, den Inhalt umschließenden Tags wird in HTML generell mit einem "Slash" ("/") nach dem Kleiner-Zeichen versehen (genauso wie in XML). Jede HTML-Seite wird also von den Tags <html> und </html> umklammert. Wenn Sie diese Tags in Komodo tippen, bemerken Sie sofort, wie uns der Editor beim Schreiben unterstützt. Bekannte Tags werden uns per Dropdown angeboten, paarige Tags automatisch geschlossen - so sollte es schnell und mir weniger Fehlern voran gehen.
<!DOCTYPE html>
<html>
</html>
Innerhalb dieses obersten Knotens folgen zwei weitere Knoten, die ebenfalls in jedem HTML-Dokument zu erwarten sind, der <head>-Bereich und der <body>-Bereich der Seite. Innerhalb des <head>-Bereichs werden unter anderem grundlegende Meta-Informationen über die Seite, z.B. für Suchmaschinen, beschrieben, externe Skripte und Stylesheets verknüpft sowie Webfonts und Icons geladen. Was innerhalb des <head>-Tags steht, wird nicht im Browser angezeigt, man spricht auch von "gerendert".
Unterhalb des <head>-Bereichs folgt der <body>-Tag. Was innerhalb dieses Knotens steht, wird im Browser ausgeben. Hier "spielt die Musik". Demnach wird mit folgendem Markup nun endlich das beliebteste Demoschnipsel aller Programmierer ausgegeben.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hallo Welt!
</body>
</html>
Wenn Sie diesen Markup per Klick im Browser öffnen, sehen Sie das übliche "Hallo Welt!". Nicht umwerfend aber immerhin ein erster Erfolg. Damit im Titel des neu geöffneten Tabs nicht der unübersichtliche Pfad zur Datei sondern etwas sinnvolles steht, fügen wir im <head> noch den Seitentitel ein, dafür ist der <title>-Tag zuständig. Außerdem sollten wir den Browser sicherheitshalber nochmals darauf den Zeichensatz UTF-8 hinweisen (manchmal reicht es nicht aus, die Datei im Editor in diesem Zeichensatz zu speichern). Dies geht mit dem <meta>-Tag und dessen Attribut "charset": <meta charset="UTF-8">.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
</head>
<body>
Hallo Welt!
</body>
</html>
Damit haben wir unser HTML-Grundgerüst erstellt und können uns nun um den Inhalt auf unserer Seite kümmern, also die Inhalte innerhalb des <body>-Knotens.