HTML Einstieg und Grundlagen

HTML Einstieg in Webseiten mit HTML: HTML Tags, head und body, Überschriften, Bilder und Tabellen Zeigt öffnendes und schließendes HTML-p-Tag

HTML-Tags sind Anweisungen in spitzen Klammern, auch HTML - Markup genannt. Sie legen eine Struktur über Text und Bilder der Webseite und versorgen die Browser mit Informationen über den Aufbau der Seite.

HTML ist Klartext – reiner Text – und beschreibt, wie der Browser Text und Bilder darstellen soll: als einfacher Textabsatz, Überschrift, Auflistung, als Link oder 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 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, wenn die Seite in einem Browser geöffnet wird. 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 oder Behälter für Informationen und strukturieren den Inhalt. Meist besteht die Beschriftung nur wenige Buchstaben und Abkürzungen für englische Begriffe.

<p>Absatz Paragraph</p>
<h1>Überschrift Header<h1>
<a href="http://wikipedia.de">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«.
                           +--- HTML-Attribut
                           |   +--- Wert in Hochkommas
                           |   |
<p>ein Text mit einem <a href="…">Link</a></p>
 |                     |                |  |
 |                     |                |  +--- schließendes
 |                     |                |       HTML-Tag mit 
 |                     |                |       Schrägstrich
 |                     |                |
 |                     |                +--- schließendes Tag
 |                     +--- öffnendes Tag
 +--- öffnendes HTML-Tag

head und body

Eine HTML-Seite besteht aus dem Seitenkopf (head) und dem eigentlichen Inhalt (body). Im head-Tag liegen Informationen über die Webseite. 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-Tag im head der Webseite ist die einzige Ausnahme. Sein Inhalt wird in der Titelleiste des Browserfensters angezeigt. Was im title-Tag steht, taucht in der Browserleiste auf, wird in den Bookmarks gespeichert und als Überschrift in den Suchergebnissen angezeigt. Das title-Tag 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>-Tag 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 die Zeilenumbrüche in diesem einfachen HTML-Template und zeigen einen Textbrei. Der Text braucht HTML-Tags, um in Form zu kommen.

HTML ohne Tags für die Struktur

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 mit HTML-Tags für die Struktur

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.

Text strukturieren

Zeilenbrüche im HTML-Markup werden ignoriert, sondern bestimmte HTML-Tags (auch als Block-Tag bezeichnet) bringen einen Zeilenumbruch mit.

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>
table
erzeugt eine Tabelle mit tr- und td-Tags (HTML table – Tabellen)
<tr>-Tags innerhalb des <table>-Tags stellen die Zeilen der Tabelle dar. Innerhalb der tr-Tags liegen td- oder th-Tags 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>

Tags ohne Zeilenumbruch

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

a
Link oder »Anker«, wird automatisch unterstrichen (HTML a Link, Ankertag, Hyperlink)
<a href="http://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-Tag)
<code>Computer-Code</code>

Übersicht: Liste der HTML-Tags 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">
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-Tags verschachteln

Innerhalb eines p-Tags dürfen weitere Tags liegen: Verschachteln ist erlaubt. Im Beispiel liegt das a-Tag zwischen dem öffnenden und schließenden p-Tag.

<p>HTML für die Struktur, <a href="https://www.mediaevent.de/css/">CSS</a> für das Aussehen</p>

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

Das Verschachteln von HTML-Tags hat seine Grenzen. Welche Tags in einem Element erlaubt sind, ist für jedes Element festgelegt. In einem p-Tag darf z.B. kein div-Tag sitzen und keine Tabelle mit dem table-Tag. Welche Tags innerhalb eines anderen Tags benutzt werden können, muss also für jedes HTML-Tag geprüft werden.

Es gibt auch HTML-Tags, die kein Ende-Tag haben (im Standard als »void« 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-Tags: 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 haben in der Vergangenheit »bedingte Kommentare oder conditional comments« ausgeübt: Sie filterten CSS-Regeln für alte Internet Explorer wie IE8 und IE9. Ihre Tage sind gezählt, denn ab IE10 hört Internet Explorer nicht mehr auf Conditional Comments.

p p öffnendes Tag schließendes Tag Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu. 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. HTML mit Tags für die Struktur www.webseite.deLorem ipsumLorem ipsum dolor sit amet, consectetuer adipiscing elit.Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu.Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id,faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Seddictum mauris euismod mauris. html head body titlemetanavdivformulsectionsectionh1pDas DOM verbindetNodes zu einer Baumstruktur Der DOM-Baum