Einstieg: HTML Tags – Aufbau von Webseiten

HTML-Einstieg: Seiten ändern

HTML ist Klartext – reiner Text – und beschreibt, wie der Browser Text und Bilder darstellen soll: als einfachen Textabsatz, Überschrift, Auflistung, als Link oder als Adresse eines Bildes.

Die meisten Einsteiger lernen HTML nicht von Grund auf, sondern sitzen vor einer Webseite, die sie verändern wollen. »Learning by doing« ist ein klassischer Anlauf, der auch für Einsteiger bei Computer-Herstellern und großen Softwarehäusern nicht außergewöhnlich ist: Man bekommt ein Programm vorgesetzt und soll kleine Korrekturen und Verbesserungen durchführen. Wer Glück hat, und sein erstes Programm von einem guten Programmierer oder die erste Webseite von einem erfahrenen Webdesigner erbt, lernt auch gleich gute Programmierpraktiken.

Anders als ein C-Programmierer sehen wir den Effekt jeder Änderung direkt beim Öffnen der Seite in einem Browser. Wenn etwas schief läuft, hilft ein Anlauf beim Validator (https://validator.w3.org) beim Aufspüren des Fehlers.

HTML-Tags

Tags mit einem Anfang und einem Ende sind Container bilden ein HTML-Element. Sie sind Behälter für Informationen und strukturieren den Inhalt. Meist besteht die Beschriftung nur aus wenigen Buchstaben und ist eine Abkürzung für einen englischen Begriff.

<p>Absatz Paragraph</p>
<h1>Überschrift Header<h1>
<a href="https://wikipedia.de">Anker o. Link zu Wikipedia</a>

Die meisten HTML-Tags treten paarweise auf:

Ein öffnendes Tag <p> sagt dem Browser: »Hier beginnt ein Absatz«, <strong> »Ab hier wird's fett«.
Ein schließendes </p>-Tag mit einem Schrägstrich nach der spitzen Klammer sagt: »Hier endet der Absatz« und </strong> »Schluss mit fettem Text«.
Ein öffnendes und schließendes HTML-Tag mitsamt seinem Inhalt wird als HTML-Element bezeichnet.

               HTML-Element
┌────────────────────┴──────────────────────┐
│                        HTML-Element       │
│                     ┌────────┴────────┐   │ 
▼                     ▼                 ▼   ▼  
<p>Ein Text mit einem <a href="…">Link</a></p>
▲                     ▲                  ▲  ▲
│                     │                  │  │
│                     └── öffnendes Tag  │  │
│                     schließendes Tag ──┘  │
│                                           │
└── öffnendes Tag         schließendes Tag ─┘

head und body

Eine HTML-Seite besteht aus dem Seitenkopf (head) und dem eigentlichen Inhalt (body). Im head-Element liegen Informationen über die Webseite für die Browser, Screenreader und Suchmaschinen. Was zwischen <head> und </head> steht, wird vom Browser nicht auf der Webseite angezeigt.

<html>
   <head>
      <title>Meine Webseite</title>
   </head>
   <body>

   </body>
</html>

Das title-Element im head der Webseite ist die einzige Ausnahme. Sein Inhalt wird in der Titelleiste des Browserfensters angezeigt. Was im title-Element steht, taucht in der Browserleiste auf, wird in den Bookmarks gespeichert und als Überschrift in den Suchergebnissen angezeigt. Das title-Element ist das Mutterschiff aller Überschriften und die Google Search Console meckert, wenn der Titel der Seite fehlt.

Webseiten-Struktur

Der Besucher der Webseite sieht nur, was zwischen dem öffnenden und dem schließenden <body>-Tags steht.

HTML-Template ohne Tags für die Struktur

<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
  Lorem ipsum 
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  …
  Sed dictum mauris euismod mauris.
</body>
</html>

Die Browser ignorieren Zeilenumbrüche, Leerzeichen und Tabs (Tabulator-Sprung) in diesem einfachen HTML-Template und zeigen einen Textbrei. Der Text braucht HTML-Tags, um in Form zu kommen.

Webseite Darstellung / Anzeige ohne HTML-Tags — Darstellung der Webseite ohne HTML-Tags

Was zwischen <h1> und </h1> gesetzt wird, erzeugt einen Zeilenumbruch und wird zu einer großen fetten Überschrift, was zwischen <p> und </p> steht, wird zum Textabsatz mit Zeilenumbruch. Nicht nur der Leser, sondern auch die Suchmaschinen gehen davon aus, dass prägnante Überschriften etwas über den Inhalt der Seite aussagen.

…
<body>
   <h1>Lorem ipsum </h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
   <p>Mauris ante neque, vehicula quis, convallis sit amet, 
      vestibulum ornare, arcu. </p>
   <p>Donec at lorem et elit congue dictum. Cras sapien ligula, 
      rutrum quis, posuere id, faucibus id, risus. Maecenas sed est 
      volutpat arcu adipiscing tempus. Sed dictum mauris euismod 
      mauris.</p> 
</body>

Webseite Darstellung / Anzeige mit HTML-Tags — Darstellung der Webseite mit HTML-Tags

Den Text innerhalb von HTML-Tags wie p oder h1 brechen die Browser automatisch um, wenn er zu breit für das Browserfenster wird. Es gibt zwar spezielle Tags für einen Zeilenumbruch, aber eine Webseite erscheint auf dem Handy, dem Tablett und dem 30"-Monitor, so dass wir niemals voraussagen können, wie breit der Text im Browser des Besuchers laufen wird.

Inhalt strukturieren

Zeilenbrüche im HTML-Markup werden ignoriert. Stattdessen erzeugen bestimmte HTML-Elemente (auch als »Block-Elemente« bezeichnet) einen Zeilenumbruch.

h1, h2, … h6: erzeugt abgestufte Überschriften (HTML h1, h2, h3 … Überschrift – Header); <h1>Überschrift 1</h1> <h2>Überschrift 2</h2>
p: erzeugt einen Textabsatz mit einem Zeilenumbruch (p – Textabsatz); <p>Ein Textabsatz …</p>
ul, ol: erzeugen ungeordnete bzw. geordnete (nummerierte) Listen (ul, ol, li • HTML Aufzählungen)
Ungeordnete Listen werden mit einem führenden Listenpunkt dargestellt, geordnete Listen mit einem Index. In beiden Listen wird jedes Listenelement in li-Tags eingeschlossen.; <ol> <li>HTML strukturiert den Inhalt </li> </ol>
div: Das div-Tag fasst mehrere Elemente zu Gruppen zusammen und bildet Strukturen für das Layout mit CSS.; <div class="sidebar"> <nav> </nav> </div>
table: erzeugt eine Tabelle mit tr- und td-Tags (HTML table – Tabellen)
<tr>-Tags innerhalb des <table>-Elements stellen die Zeilen der Tabelle dar. Innerhalb der tr-Tags liegen td- oder th-Elemente für Tabellenzellen.; <table> <tr> <td>Zeile 1 Spalte 1</td> <td>Zeile 1 Spalte 2</td> </tr> <tr> <td>Zeile 2 Spalte 1</td> <td>Zeile 2 Spalte 2</td> </tr> </table>

HTML macht kein Design und mag langweilig erscheinen. HTML strukturiert Text und Bilder und HTML-Elemente werden nicht wegen ihrer Darstellung im Browser benutzt, sondern die HTML-Elemente ordnen dem Inhalt eine Bedeutung zu.

HTML-Elemente ohne Zeilenumbruch

Links im Text, kursiver oder fetter Text wird durch Elemente markiert, die nicht zu einem Zeilenumbruch führen (auch als inline-Elemente bezeichnet).

a: Link oder »Anker«, wird automatisch unterstrichen (HTML a Link, Ankertag, Hyperlink); <a href="https://www.lipsum.com">Lorem ipsum</a>
i, em: kursive – schräggestellte – Schrift (em, strong, b, i kursiv / fett); <em>ganz schön schräg</em>
b, strong: fette Schrift (em, strong, b, i kursiv / fett); <strong>richtig fett</strong>
code: Darstellung als Computer-Code (HTML code-Element); <code>Computer-Code</code>

Übersicht: Liste der HTML-Elemente mit Kurzbeschreibung

Bilder in HTML

Bilder, Video und Audio – »Medien« werden über den Pfad zu ihrem Ordner und ihren Dateinamen in die Webseite gelinkt.

img: Bilder auf Webseiten anzeigen (img – Bilder in HTML-Seiten); <img src="img/aquarell.jpg" width="720" height="480" alt="Aquarell">
picture: ein Behälter mit verschiedenen (Bildquellen je nach Größe und Ausrichtung des Browserfensters); <picture> <source media="(min-width: 1440px)" srcset="pic-920.jpg 1x, pic-1840.jpg 2x"> <source media="(min-width: 680px) and (orientation:portrait)" srcset="pic-960-quad.jpg"> </picture>
video: Video in Webseiten einbetten (); <video controls height="360" width="640"> <source src="countdown.mp4" type="video/mp4" /> <source src="countdown.ogg" type="video/ogg" /> Dieser Browser unterstützt HTML5 Video nicht </video>

HTML-Elemente verschachteln

Innerhalb eines p-Elements dürfen weitere Tags liegen: Verschachteln ist erlaubt. Im Beispiel liegt das a-Tag zwischen dem öffnenden und schließenden p-Tag. Allerdings darf innerhalb eines p-Elements kein weiteres p-Element sitzen.

<p>HTML für die Struktur, 
   <a href="/css/">CSS</a> fürs Aussehen</p>

Gegen die Farben, die ein a-Element im Browser mitbringt, kann HTML nichts unternehmen. Dafür muss CSS herangezogen werden.

Das Verschachteln von HTML-Elementen hat seine Grenzen. Welche Elemente in einem Element erlaubt sind, ist für jedes Element festgelegt. In einem p-Tag darf z.B. weder ein div-Element sitzen noch eine Tabelle mit dem table-Tag. In einem div-Element hingegen darf so ziemlich alles stecken: table, picture oder figure und weitere div-Elemente. Welche Tags innerhalb eines HTML-Elements benutzt werden können, muss für jedes HTML-Tag geprüft werden.

Dabei verzeihen die Browser viele Fehler und korrigieren still und leise. Trotzdem dürfen HTML-Fehler nicht auf die leichte Schulter genommen werden, denn Fehler im HTML-Code führen zu Nägelkauen und Ohnmachtsgefühl, sobald CSS und Javascript zum Zug kommen.

Es gibt auch HTML-Tags, die kein Ende-Tag haben (im Standard als »void« oder »empty« bezeichnet).

<img src="bild.png" width="100" height="100" alt="">
<br>

Beispiele für »leere« Tags ohne Ende-Tag sind img, br, link, meta und input.

HTML-Tags dürfen zwar verschachtelt werden, aber das Ende eines HTML-Tags darf ein anderes öffnendes Tag nicht kreuzen:

<p>Hier ist der <a href="eineSeite.html">Link</p></a>

Einrücken und Ausrücken

Am Anfang dieser Seite ist der Begriff gute Programmierpraxis gefallen. Das Einrücken und Ausrücken der verschachtelten HTML-Tags gehört dazu: Nicht einfach ein guter HTML-Stil, sondern ein besserer Überblick über die verschachtelte Struktur ist der Bonus.

▶<section title="Bilder auf Webseiten">…</section>

▶<section title="HTML-Tags verschachteln">…</section>

▶<footer>…</footer>

Viele Code-Editoren wie BBEdit und Brackets klappen verschachtelte Elemente ein, das hilft bei der Fehlersuche, wenn sich das HTML-Gerüst mal wieder den CSS-Regeln nicht beugen will.

Kommentare in HTML

HTML-Kommentare sind besondere HTML-Elemente: Was zwischen dem öffnenden und dem schließenden Kommentar-Tag steht, wird vom Browser nicht auf der Seite angezeigt, erzeugt keinen Zeilenumbruch und nimmt keinen Raum an. HTML-Kommentare werden zur Dokumentation des Quelltexts, aber auch für besondere Anweisungen eingesetzt.

<!-- Kommentar im HTML-Quelltext -->

HTML-Kommentare helfen z.B., Anfang und Ende eines HTML-div-Tags im Quelltext besser zu erkennen.

<div class="main">
…
</div><!-- Ende Block main -->

Eine besondere Funktion übten bedingte Kommentare oder »Conditional Comments« aus: Sie filterten CSS-Regeln für alte Internet Explorer wie IE8 und IE9. Sie werden schon lange nicht mehr gebraucht. Ab IE10 hörte Microsoft IE nicht mehr auf Conditional Comments. Und da auch IE11 heute keine Rolle mehr spielt, stellt eine CSS @supports-Regel die Weichen für Stile, die u.U. nicht von allen Browsern unterstützt werden.

<!--[if IE ]>
  <link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->