HTML Tags

Eine kurze Vorstellung der wichtigsten HTML-Tags.

Text formatieren

Zeilenumbruch

Ein Zeilenumbruch im HTML-Code hat keine Auswirkung. Nur die Tags beeinflussen die Darstellung der Webseite. Du musst den Tag <br> verwenden, um einen Zeilenumbruch auf der Webseite zu erzwingen – dies ist aber nur selten sinnvoll, da der Browser einen automatischen Zeilenumbruch durchführt, um den Text im vorhandenen Platz optimal darzustellen.

Blockbildend vs. Inline

Wir unterscheiden zwischen HTML-Tags die Blöcke definieren, und solchen die das nicht tun, genannt “inline” Tags. Blockbildende Tags beanspruchen immer einen rechteckigen Bereich bei der Ausgabe, inline Tags tun das nicht.

Ich bin ein blockbildender Tag, nämlich ein Paragraph p. I am a block level element - p for paragraph. Ich bin ein blockbildender Tag, nämlich ein Paragraph p. I am a block level element - p for paragraph. Und ein em in der Mitte. And some inline content right here. Ich bin ein blockbildender Tag, nämlich ein Paragraph p. I am a block level element - p for paragraph.

In diesem Beispiel siehst du einen Absatz (blockbildender p-Tag, grau eingefärbt), der einen em-Tag (inline-Tag, rot eingefärbt) enthält. Der inline-Tag wird je nach Platzbedarf umgebrochen und kann sich über mehrere Zeilen verteilen. Der blockbildende Tag bleibt dagegen immer ein Rechteck.

Blockbildende Tags für Text

Absatz - Tag p

Der Inhalt eines Absatzes (Paragraph) p wird je nach Schriftgröße und vorhandenem Platz neu umgebrochen. Der Zeilenumbruch ist also nicht Aufgabe des Autors, der Autorin, sondern des Webbrowsers.

<p>Text text text, text text. Text
text text, text text. Text text
text, text text. Text und text text,
text text. </p>

Überschriften - Tags h1, h2, …

Überschriften werden für die Strukturierung des Textes verwendet, mehr als 3 Ebenen braucht man selten:

<h1>Teil 1</h1>
<h2>Kapitel A</h2>
<h3>Kapitel A.1</h3>

Will man einen Titel und einen Untertitel dazu angeben, verwendet man hgroup, um sie zusammenzufassen:

<hgroup>
  <h1>Web Programmierung und Datenbanken</h1>
  <p>HTML, CSS, JavaScript, PHP und Datenbanken — Lehrbuch und Folien aus einer Quelle</p>
</hgroup>

Der nav Tag dient zur Auszeichnung von Navigations-Menüs. Achtung: dieser Tag hat erst mal keine sichtbare Wirkung.

<nav>
   <a href="index.html">Home</a>
   ....
</nav>

Struktur

Auch die folgenden Tags haben keine sichtbare Wirkung, sondern dienen erst mal nur zu Strukturierung des Dokuments.

<header> .... </header>
<footer> .... </footer>
<section> .... </section>
<article> .... </article>
<aside> .... </aside>

Zitat

Für umfangreiche Zitate gibt es einen blockbildenden Tag:

<blockquote>Alle meine Entchen<br>
schwimmen auf dem See</blockquote>

Nicht-Blockbildende Tags für Text

Diese musst du innerhalb eines Blocks verwenden. Diese Formate werden unterschieden in logische und physische Elemente. Logische Elemente beschreiben die Bedeutung des Textes und überlassen die konkrete Darstellung dem Browser; physische Elemente schreiben dagegen die konkrete Darstellung direkt vor.

Logische Tags

Die logischen Tags geben die genaue Darstellung nicht vor.

Eine <strong>sehr wichtige</strong> Sache (stark betont, fett?)
und eine <em>interessante</em> Sache.     (betont, kursiv?)
Der Preis ist <del>10 €</del> <ins>8 €</ins>. (gelöscht / eingefügt)

Physische Tags

Physische Tags geben die genaue Darstellung vor und werden nicht mehr verwendet.

Eine <b>fette</b> Sache                      (VERALTET!)
Eine <i>schräge</i> Sache                    (VERALTET!)
<font face="Arial">Text</font>               (VERALTET!)
<font color="red">rot</font>                 (VERALTET!)

Bilder einbinden

Bilder werden in separaten Dateien gespeichert, in der HTML-Datei erfolgt nur ein Verweis auf die Datei des Bildes. Als Attribut src im img-Tag kannst du eine absolute oder relative URL angeben:

<img src="https://wiki.ct.fh-salzburg.ac.at/fav/fhs_ct_wiki.svg" alt="FHS Logo">
<img src="neu.svg" alt="neues FHS Logo">

Alt Text

Für Blinde, Suchmaschinen, Browser die keine Bilder darstellen können, u.s.w. gibt man für jedes Bild einen Alternativtext (Attribut alt) an. Die beide Screenshots zeigen die Darstellung des Alternativtexts, wenn die Bilder nicht geladen werden können:

Wetterbericht einmal mit Bildern und einmal ohne Bilder (nur ALT-Texte)

<img src="10prozent.svg" alt="jetzt 10% verbilligt!">
    (mit Ersatztext, weil das Bild wichtige Information enthält)
<img src="zierleiste.svg" alt="">
    (ohne Ersatztext, weil das Bild zur Dekoration dient)

Links

Als Attribut href des Links kannst du eine absolute oder relative URL angeben:

Link zu Webseite (absolute URL)
    <a href="https://www.bbc.co.uk/">BBC</a>
Link zu Webseite im selben Ordner (relative URL)
    <a href="seite2.htm">mehr</a>
Link zu E-Mail Adresse
    <a href="mailto:aa@bb.cc">Mail</a>
Bild als Link
    <a href="seite2.htm"><img src="mehr.svg" alt="zur Seite 2"></a>

Listen

Listen werden mit zwei verschachtelten Tags gebaut: der li-Tag für den einzelnen Listen-Punkt, und der ol- oder ul-Tag für die gesamte Liste.

    <ul>
        <li>punkti</li>
        <li>punkti</li>
    </ul>

    <ol>
      <li>eins</li>
      <li>zwei</li>
      <li>drei</li>
    </ol>

Tabellen

Um eine Tabelle zu erzeugen, musst du die Tags table, tr (Table Row = Tabellenzeile) und td (Table Data) richtig ineinander verschachteln.

<table  style="border-collapse:collapse;">
  <tr>
    <td>Freitag</td>
    <td>Samstag</td>
    <td>Sonntag</td>
  </tr>
  <tr>
    <td>lernen</td>
    <td>lernen</td>
    <td>lange schlafen</td>
  </tr>
</table>

Rahmen

Der Rahmen der Tabelle ist normalerweise unsichtbar, mit einer Zeile CSS wird er hier auf sichtbar geschalten.

<style>td {  border:2px #ddd solid; padding: 5px; }</style>

für Layout?

HTML-Tabellen wurden früher in Webseiten für das Layout der Seite verwendet, diese Tabellenlayouts sind noch auf älteren Webseiten zu finden. Dazu noch ein Literaturhinweis:

http://shouldiusetablesforlayout.com/

Moderne Webseiten werden mit CSS-Layouts gestaltet. Heute verwendet man Tabellen wirklich nur noch zur Darstellung von Tabellen.

Interaktion

Details und Zusammenfassung

Diese beiden Tags müssen in Kombination verwendet werden. Der Inhalt im details Tag ist nicht sofort lesbar, sondern nur die summary. Erst mit Anklicken werden die details sichtbar:

System Requirements

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Mehrere Details können über einen gleichen Namen verbunden werden:

<details name="faq">

Modales Dialogfenster

Ein modales Dialogfenster blockiert die Interaktion mit der restlichen Seite. Hier wird es mit einem Button geöffnet. Erst wenn es wieder geschlossen ist - mit dem Button oder mit der “Escape”-Taste - kann man wieder mit der Seite interagieren.

<button command="show-modal" commandfor="wichtiges-fenster">modales Fenster öffnen</button>
<dialog id="wichtiges-fenster">
  <p>Ich bin eine wichtige Meldung</p>
  <button commandfor="wichtiges-fenster" command="close">Schließen</button>
</dialog>

Ein popover mit Wert "auto" kann leicht mit der “Escape”-Taste wieder entfernt werden. Es wird ausserdem geschlossen, wenn du irgendwo ausserhalb des popovers klickst (englisch: “light dismiss”).

Ich bin nicht wichtig

<button popovertarget="pop-pop" popovertargetaction="toggle">popup bitte!</button>
<p popover="auto" id="pop-pop">Ich bin nicht wichtig</p>

Gesamt-Struktur einer Webseite

Eine HTML Seite hat ein Grundgerüst aus DOCTYPE, html, head und body.

Mit dem lang-Attribut wird die Sprache des Textes bekanntgegeben. Dieses Attribut kann man auch auf anderen Tags verwenden, wenn z.B. ein Zitat auf Englisch in einer Seite vorkommt.

<!DOCTYPE HTML>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Eine Webseite</title>
</head>
<body>
    Hier die Tags, die du schon kennst
</body>
</html>

Achtung: es kann nur einen head und einen body geben, keine Wiederholungen!

Kommentar

Die Scheibweise für das Kommentar fängt an wie ein Tag, geht dann aber anders weiter:

Text, sichtbar auf der Seite. <!-- Kommentar --> Mehr Text.

Siehe Auch

Characters, Symbols and the Unicode Miracle YouTube Video von Computerphile
UTF-8 in der deutschen Wikipedia
HTML Living Standard