HTML-Referenz

HTML-Grundstruktur

Die Grundstruktur einer HTML-Datei sieht so aus:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Titel der Webseite</title>
  </head>
  <body>
    Inhalt der Webseite
  </body>
</html>

Wichtige HTML-Elemente

Start-Tag	Beschreibung	Typ
`<a>`	Hyperlink	Inline
`<abbr>`	Abkürzung	Inline
`<aside>`	Seitlicher Bereich	Block
`<b>`	bedeutungstragende Worte, üblicherweise fett	Inline
`<body>`	Inhalt der Webseite	Block
`<br>`	Zeilenumbruch	inline
`<cite>`	Titel von Büchern, Filmen usw.	Inline
`<div>`	Allgemeiner Bereich (division)	Block
`<em>`	betont, emphatisch (gefühlsmässig) betont	Inline
`<footer>`	Fussbereich der Webseite	Block
`<h1>`	grösste Überschrift (heading)	Block
`<h2>`	zweitgrösste Überschrift (heading)	Block
`<h3>`	drittgrösste Überschrift (heading)	Block
`<h4>`	drittkleinste Überschrift (heading)	Block
`<h5>`	zweitkleinste Überschrift (heading)	Block
`<h6>`	kleinste Überschrift (heading)	Block
`<head>`	Meta-Angaben zur Webseite	–
`<header>`	Kopfbereich der Webseite	Block
`<i>`	spezielle Worte, z.B. Fachausdrücke, Eigennamen, anderssprachige Phrasen, üblicherweise kursiv	Inline
`<img>`	Bild (image)	Inline
`<main>`	Hauptbereich der Webseite	Block
`<nav>`	Navigationsbereich, z.B. für Menüs	Block
`<p>`	Absatz (paragraph)	Block
`<q>`	ein Zitat (quote)	Inline
`<title>`	Titel der Webseite	–

<a> (Hyperlink)

Das <a>-Element stellt den Inhalt als Hyperlink dar. Als Inhalt kann eine beliebige Kombination von Inline-Elementen verwendet werden (z.B. Text oder ein Bild). Das Ziel des Hyperlinks wird mit dem href-Attribut angegeben. Wir zusätzlich das Attribut name auf den Wert _blank gesetzt, so wird das Ziel des Links in einem neuen Fenster bzw. Tab geöffnet.

Attribut	Bedeutung
`href`	Zieladresse des Hyperlinks
`target`	`_blank` für neues Fenster/Tab

<a href="http://www.gymkirchenfeld.ch">Gymnasium Kirchenfeld</a>

Link, der in einem neuen Tab geöffnet wird:

<a href="http://www.gymkirchenfeld.ch" target="_blank">Gymnasium Kirchenfeld</a>

<abbr> (Abkürzung)

Das <abbr>-Element markiert eine Abkürzung. Der Inhalt des Elements ist die Abkürzung, der ausgeschriebene Begriff wird mit dem name-Attribut angegeben.

Attribut	Bedeutung
`title`	Ausgeschriebener Begriff

<abbr title="Hypertext Markup Language">HTML</abbr>

<img> (Bild)

Mit dem <img>-Element wird ein Bild eingefügt. Das Element hat keinen Inhalt, die Adresse der Bilddatei wird mit dem src-Attribut angegeben. Ausserdem muss mit dem alt-Attribut ein textuelle Beschreibung des Bildes angegeben werden.

Attribut	Bedeutung
`src`	Adresse der Bilddatei
`alt`	textuelle Beschreibung des Bilds

<img src="tim-berners-lee.jpg" alt="Bild von Tim Berners-Lee">