HTML

Hinweis: Dieser Artikel ist eine persönliche Sammlung zu Infos rund um HTML. Sie hat weder den Anspruch auf Vollständigkeit, noch auf vollständige Richtigkeit. Trotzdem wirst du hier vielleicht wertvolle Infos oder Links mitnehmen können.

Allgemeines

Begriffe rund um HTML

Container = HTML-Tags die sich öffnen und schließen, also immer in zweifacher Form auftreten -
Beispiel: <head> ... </head>
Leere Elemente = Tags, die einfach vorkommen (im Englischen "self-closing element"). Sie werden mit einem Forward Slash / abgeschlossen.
Beispiele:
- Meta-Tags im head der Seite: <meta ...>
- Bilder: <img src="" alt="" .../> ("alt" steht für "alternate")
- Zeilenumbruch <br />
- horizontale Linie <hr /> ("horizontal row")
- Input-Feld <input .../>
In HTML werden grundsätzlich zwei Arten von Tags unterschieden: Block-Elemente und Inline-Elemente. Die Unterschiede zwischen diesen Elementtypen werden hier sehr gut beschrieben.

Semantische Elemente: Seit HTML5 gibt es semantische Elemente (Elemente mit einer gewissen Bedeutung), die man zur Seitenstrukturierung einsetzen kann. Dazu zählen zum Beispiel:

<header>: Für den Header der Seite
<nav>: Für die Navigation. Wird zum Beispiel typischerweise innerhalb von <header></header> eingesetzt.
<section>: Ist eindeutiger als
s zu nutzen um Sektionen auf der Seite festzulegen.
<main>: Der einmalige Content der Seite. Hier sollten keine wiederkehrenden Elemente wie der Header oder der Footer drin sein.
<article>: Wird typischerweise innerhalb von <main> verwendet.
<aside>: Typischerweise nach </main> definiert um zum Beispiel eine Sidebar oder Ads einzuschließen.
<figure>: Kann zum Beispiel Bilder oder Diagramme enthalten.
<video src="URL_des_Videos" controls />: Um Videos einzubinden (Alternative zu iframes).
<footer>: Der Footer der Seite.

Den richtigen Aufbau und die Abfolge der semantischen Elemente siehst du zum Beispiel in dieser HTML-Lektion auf Scrimba.

Attribute und Werte

Ein HTML-Tag kann Attribute und Werte haben. Beispielsweise hat der Code <input size="30" /> das Attribut "size", dem der Wert "30" zugewiesen wird. Attribute werden auch als "Eigenschaften" bezeichnet.

Regeln für Attribute und Werte:

Die Zuweisung eines Wertes an ein Attribut erfolgt immer mit Gleichheitszeichen.
Werte sollten immer in Anführungszeichen geschrieben werden (wegen der besseren Kompatibilität mit den Standards).
Ein Wert darf kein Leerzeichen beinhalten (sonst wird es vom Browser nicht verstanden).

Bestimmte Tags

Für Fettschrift wird das Tag <strong> empfohlen, da es im Gegensatz zu <b> zum Beispiel auch von Audio-Programmen, die Websites vorlesen, verstanden wird.
Aus den gleichen Gründen ist für Kursivschrift das Tag <em> dem Standard-Tag <i> vorzuziehen.
Um Text zu markieren, nutze einfach <mark>.
Um Text hochzustellen kann das <sup>-Tag genutzt werden.
Beispiel: E = m*c<sup>2</sup> wird zu E = m*c²

Schriften

Schriftarten

Typische Sätze von Schriftarten:

sans-serif-Schriften: font-family: Verdana, Geneva, Arial, sans-serif;
serif-Schriften: font-family: Georgia, 'Times New Roman', Times, serif;

Die Schriftart kann Folgendermaßen per CSS geändert werden. Beispiel:
<span style="font-family: 'Times New Roman', Times, serif">kleiner Beispieltext in Times New Roman</span>

Wissenswertes:

Wenn der Name eine Schriftart mehr als ein Wort hat muss er in Anführungszeichen gesetzt werden.

Weblinks:

google.com/webfonts - Die Google Webfonts
Dienste, die Schriftarten identifizieren helfen
Die besten Google Web Fonts

Schriftgröße

Du solltest die Überschrift-Tags <h1> bis <h6> nie dazu verwenden um Schrift größer oder kleiner zu machen. Die Überschrift-Tags sollten nur verwendet werden um festzulegen, welche Texte der Webseite am wichtigsten sind.

Die endgültigen Schriftgrößen sind immer von den Browser-Einstellungen deiner Besucher abhängig. Deshalb ist es empfehlenswert mit relativen Schriftgrößen zu arbeiten. Diese kann man zum Beispiel folgendermaßen angeben:

in %
in "em" (1 em steht dabei für 100 %)
mit den Bezeichnern xx-large, x-large, large, medium (entspricht 100 %), small, x-small, xx-small

100 % oder 1 em oder medium bedeutet, dass die Schrift in der Größe erscheint, die der Besucher in seinem Browser als Standard eingestellt hat.
Die Bezeichner xx-large bis xx-small haben gegenüber der Angabe in % oder em den Vorteil, dass der Browser die Schriftart nie zu klein werden lässt. Auch eine Schrift mit xx-small bleibt noch in jedem Browser leserlich. Dagegen kann eine Angabe wie 0.7 em (also 70 % der Standardgröße) auf manchen Systemen schon unleserlich werden.

Absolute Schriftgrößen mit Angaben in Pixeln sollten nie für Websites verwendet werden. Die Schriftgrößen wären dann nämlich abhängig von der Bildschirmgröße und diese kann heutzutage sehr variieren (LCD-Monitore vs. mobile Geräte). Absolute Schriftgrößen machen bloß in Print-Medien Sinn.

Weblinks:

Allgemeine Formatierung

Farben

Die Farbangaben in HTML bestehen aus sechs hexadezimalen Ziffern.
Die ersten beiden Ziffern bestimmen den Rotwert, die nächsten beiden den Grünwert und die letzten beiden den Blauwert der Schriftfarbe.

Das Standard-Rot trägt folgerichtig die Komination #ff0000, Grün ist #00ff00 und Blau hat den Hex-Wert #0000ff. Natürlich können die RGB-Farben miteinander kombiniert werden. So ergibt zum Beispiel #ff00ff die Farbe Magenta (Rot und Blau zusammen).

Für Rot, Grün und Blau stehen jeweils 8 bit, d.h. jeweils 256 verschiedene Farbtöne zur Verfügung. Insgesamt stehen dem Webdesigner damit 3 x 8 = 24 bit Farbtiefe zur Verfügung. Das ergibt exakt 256³ = 16,777,216 verschiedene Farbkombinationen. Sie reichen von reinem Weiß (#ffffff) zu reinem schwarz (#000000).

Zur Farbgebung dient das "style"-Attribut. Bereiche, die man farbig gestalten will, werden in Tags eingeschlossen, zum Beispiel in span-Tags für Zeichenfolgen im Fließtext oder p-Tags für ganze Absätze.
Beispiele:

HTML-Code	Ergebnis
`<span style="color:#006400;"> grüner Text </span>`	grüner Text
`<p style="color:darkgreen;"> grüner Absatz </p>`	grüner Absatz
`<span style="background-color:#FFFF00;"> Markierter Text </span>`	Markierter Text

Weitere Facts zur HTML-Farbnotation:

Es spielt keine Rolle ob man die hexadezimalen Ziffern a,b,c,d,e,f groß oder klein schreibt.
Wenn eine Farbangabe nur aus 3 Hex-Ziffern besteht, so verdoppelt der Browser die Ziffern jeweils.
Beispiel: der verkürzte Farbcode #06f steht für #0066ff

Weblinks:

w3schools.com - Info zu den HTML-Farben
de.selfhtml.org - Farbauswähler-Tool von SELFHTML
webkatapult.de - Farbwähler von Webkatapult.de

Ausrichtung und Positionierung von Elementen

Ausführliche Beschreibung der Positionierungs-Möglichkeiten mit HTML auf SELFHTML: de.selfhtml.org/css/eigenschaften/positionierung.htm

Einige Infos zur Ausrichtung und Positionierung von Elementen in Kürze:

Das div-Element ("division") wird weiterhin zum HTML-Standard gehören, das Attribut align ist jedoch als deprecated eingestuft und soll künftig entfallen. Statt dessen sollte man mit Stylesheets arbeiten.
Um Elemente horziontal auszurichten dient der Wert "text-align" im style-Attribut.
Mit <div style="text-align:center;">zentriert</div> richtet man beispielsweise Elemente (Text, Bilder, etc.) horizontal aus.
Ein nützlicher Wert innerhalb des style-Attributs ist "float". Damit kann man für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen. Weitere Infos zu "float": de.selfhtml.org/css/eigenschaften/positionierung.htm#float
Das Attribut "padding" verändert die Größe von div-Containern.

div vs. span

Die beiden HTML-Elemente div und span sind selber relativ eigenschaftslos und werden deshalb für CSS eingesetzt.

Unterschied zwischen div und span:

Das div-Element erzwingt ohne weitere Angabe eine neue Zeile im Textfluss.
Das span-Element erzeugt keinen neuen Absatz und kann deshalb innerhalb eines Textes verwendet werden.

Weitere Infos:

Das div-Element eignet sich vor allem dafür, mehrere Elemente zu gruppieren und diese gemeinsam zu formatieren. Mit dem span-Element lassen sich kleinere Teilbereiche definieren, die mit CSS gestaltet werden können.
Innerhalb eines span-Elementes kann kein div-Element vorkommen.

Textformatierung

Entities

Als Entities bezeichnet man innerhalb HTML-Code, der Sonderzeichen darstellt.

Die folgende Tabelle zeigt einige der gebräuchlichsten HTML-Entities:

Entity	Sonderzeichen
`Ä`	Ä
`ä`	ä
`Ö`	Ö
`ö`	ö
`Ü`	Ü
`ü`	ü
`&`	& (ampersand)
`>`	> (greather than)
`<`	< (lower than)
`"`	" (quotation marks)
`ß`	ß (scharfes s)
` `	(geschütztes) Leerzeichen
`€`	€ (Eurozeichen)

Grundsätzlich kann mit Hilfe von Entities jedes Unicode-Zeichen dargestellt werden.
Dazu stellt man der Zahl des gewünschten Zeichens einfach den Code &# an und fügt anschließend noch ein Semikolon an.

Der geschützte Bindestrich hat beispielsweise die Zahl 8209 (dezimal) bzw. 2011 (hexadezimal).
Daraus ergibt sich also das Entity ‑ bzw. ‑.

Weblinks:

unicode.e-workers.de/entities.php - Übersicht aller verfügbaren Entities
centricle.com/tools/html-entities - Online-Tool zum Encoden / Decoden von Entities

Leerzeichen

Wenn im HTML-Quelltext mehrere Leerzeichen hintereinander vorkommen, so werden diese zu einem Leerzeichen reduziert.
Zur expliziten Darstellung eines Leerzeichens gibt es die Entity  . Es wird auch als "geschütztes Leerzeichen" bezeichnet und kann verwendet werden um Zeilenumbrüche zwischen zwei Wörtern (zum Beispiel einen Firmennamen) zu verhindern.

Zeilenumbrüche

In Abhängigkeit der Fenstergröße werden Zeilenumbrüche des Textes vom Browsers selbsttätig vorgenommen.
Die Zeilenumbrüche, die im HTML-Editor vorgenommen wurden, werden dabei nicht beachtet.
Für einen expliziten Zeilenumbruch kann das Tag <br /> genutzt werden.
Mit dem Container <p>...</p> kann ein neuer Absatz begonnen werden.

Sonstiges

Bilder

Sollte der Browser das Bild nicht darstellen können (zum Beispiel weil die Bild-URL fehlerhaft ist), so wird der Wert des Attributs "alt" ausgegeben.
Wenn ein Bild gleichzeitig als Link eingesetzt wird, sollte man darauf achten, das Attribut "border" auf 0 zu setzen. Andernfalls erscheint ein nicht so schöner Rahmen um das Bild.
Mit Hilfe von Image Maps kann man einzelne Bereiche eines Bildes mit (unterschiedlichen) Hyperlinks verbinden. Man nennt die verlinkten Stellen eines Bildes auch Hotspots.

Formulare

Formularen dienen vor allem dazu, Anwenderdaten an den Server zu übermitteln. Dort werden die Daten von einem Serverprogramm, das zum Beispiel in PHP oder Perl geschrieben sein kann, ausgewertet.

Formulare können auf Anwender-Seite auch zur dynamischen Seitensteuerung mit Hilfe von JavaScript genutzt werden.

Hier ein Beispiel-Code für ein Formular:

<form action="/Aktion_auf_Server.php">
	<legend>Überschrift</legend>
	<input type="text" name="Vor_und_Nachname" placeholder="Vorname und Nachname">
	<input type="text" name="E_Mail" placeholder="E-Mail-Adresse">
	<textarea name="Nachricht" placeholder="Deine Nachricht"></textarea>
	<input type="submit" value="Absenden">
</form>

Links

Der Ankertext (englisch Anchor Text) ist der Text mit dem ein Link auf einer Webseite angezeigt wird.
Beispiel: <a href="http://example.com/">Ankertext</a>
Werte für das Attribut "target" innerhalb des <a>-Tags:
- _top = gesamtes aktuelles Fenster (alle evtl. vorhandenen Frames werden überschrieben)
- _blank = öffnet Link in neuem Tab/Fenster
Code um eine anklickbare Telefonnummer zu erzeugen (funktioniert zum Beispiel auf Smartphones): <a href="tel:+49123456789">+49 (0)123 456 789</a>
Wichtig ist am Anfang ein + und die Ländervorwahl einzufügen. Die 0 der Ortsvorwahl muss weggelassen werden.
Wie man Download-Links erzeugt
Seit HTML5 ist es erlaubt, dass das a-Tag ganze Sektionen einschließt, solange diese keine interaktiven Elemente enthalten.^[1] Somit ist es auch erlaubt, dass ein a-Tag ein div umschließt.

Tabellen

Wichtig:
Man sollte Tabellen ausschließlich für Daten verwenden, nicht für Layouts. Für Layouts sollte man lieber mit div-Containern arbeiten. Wenn man Tabellen fürs Layouten benutzt, kann dies zu Problemen führen wenn die Webseite per CSS geändert wird. Dies ist zum Beispiel dann der Fall, wenn eine Website auf einem mobilen Geräten angezeigt wird.
Es ist möglich Tabelleneinträge über mehrere Spalten und/oder Zeilen auszustrecken. Dazu werden innerhalb des <th> ("table header") oder <td>-Containers ("table data") die Attribute colspan="s" bzw. rowspan="z" verwendet. Einträge erstrecken sich damit über s Spalten bzw. z Zeilen. Für die "eingesparten" Zellen dürfen dann in der Tabellendefinition keine Einträge angegeben werden.
Mit den 3 Containern <thead>, <tbody> und <tfoot> kannst du deine Tabelle leichter stylen.
Mit <colgroup> (zum Beispiel innerhalb von <tbody>) kannst du deine Spalten leicht stylen. Beispiel:

<colgroup>
    <col style="background-color: blueviolet;">
</colgroup>

Tabellenzellen können kein CSS-Attribut margin haben, padding ist jedoch erlaubt.
Ausrichtung von Tabellen-Zellen
Wenn man Tabellen mit Rahmen verwendet, können Zellen, die keinen Inhalt besitzen, mit einem expliziten Leerzeichen   versehen werden.

Listen

In HTML kann man unnummerierte Listen (Container <ul>...</ul> für "unordered list") und nummerierte Listen (Container <ol>...</ol> für "ordered list") erstellen. Die einzelnen Listeneinträge werden mit dem Container <li>...</li> (für "listed item") gekennzeichnet.