html mit Adi Prinz

Block- und Inline-Elemente

HTML-Elemente können hinsichtlich ihres grundlegenden Darstellungsverhaltens in Block- und Inline-Elemente unterschieden werden.

Block-Elemente

Block-Elemente beginnen normalerweise in einer neuen Zeile und nehmen die verfügbare Breite ein.

<h2>Eine Überschrift</h2>

<p>Das ist ein Absatz.</p>

Typische Block-Elemente sind:

• <h1> bis <h6>
• <p>
• <div>
• <section>
• <article>
• <ul> und <ol>

Inline-Elemente

Inline-Elemente erzeugen normalerweise keinen Zeilenumbruch. Sie befinden sich innerhalb eines Textes und beanspruchen nur den benötigten Platz.

<p>
  Das ist ein <strong>wichtiger</strong> Hinweis.
</p>

Typische Inline-Elemente sind:

• <strong>
• <em>
• <mark>
• <span>
• <a>
• <code>

Physische Textauszeichnungen

Einige HTML-Elemente verändern hauptsächlich die optische Darstellung eines Textes. Sie geben jedoch nur wenig oder keine Information über seine Bedeutung.

<p>
  Dieses Wort wird <b>fett</b> dargestellt.
</p>

<p>
  Dieses Wort wird <i>kursiv</i> dargestellt.
</p>

• <b> lenkt die Aufmerksamkeit auf Text, ohne ihm eine besondere Wichtigkeit zu geben.
• <i> kennzeichnet beispielsweise einen Fachbegriff, einen fremdsprachigen Ausdruck oder einen Gedanken.

Sollen Texte lediglich aus gestalterischen Gründen fett oder kursiv erscheinen, sollte dafür CSS verwendet werden.

.hervorgehoben {
  font-weight: bold;
  font-style: italic;
}

Logische Textauszeichnungen

Logische beziehungsweise semantische Textauszeichnungen beschreiben die Bedeutung eines Textabschnitts. Der Browser stellt sie häufig auch optisch hervorgehoben dar.

Wichtiger Text

<p>
  Bitte beachten Sie den <strong>Anmeldeschluss</strong>.
</p>

<strong> kennzeichnet einen inhaltlich wichtigen Text. Browser stellen ihn normalerweise fett dar.

Betonter Text

<p>
  Diese Aufgabe muss <em>heute</em> erledigt werden.
</p>

<em> kennzeichnet eine sprachliche Betonung. Browser stellen den Text normalerweise kursiv dar.

Weitere Textauszeichnungen

Markierter Text

<p>
  Der Prüfungstermin ist am <mark>15. Oktober</mark>.
</p>

<mark> kennzeichnet eine Textstelle, die im aktuellen Zusammenhang besonders hervorgehoben werden soll.

Hoch- und tiefgestellter Text

<p>10<sup>2</sup> = 100</p>
<p>H<sub>2</sub>O</p>

• <sup> erzeugt hochgestellten Text.
• <sub> erzeugt tiefgestellten Text.

Gelöschter und eingefügter Text

<p>
  Preis: <del>49 Euro</del> <ins>39 Euro</ins>
</p>

• <del> kennzeichnet entfernten oder gelöschten Text.
• <ins> kennzeichnet nachträglich eingefügten Text.

Unrichtiger oder nicht mehr aktueller Text

<p>
  <s>Die Veranstaltung beginnt um 18 Uhr.</s>
  Neuer Beginn: 19 Uhr.
</p>

<s> kennzeichnet einen Text, der nicht mehr richtig oder aktuell ist. Für dokumentierte Änderungen sind dagegen <del> und <ins> vorgesehen.

Kurzbeschreibung der Text-Elemente

Veraltete Text-Elemente

Ältere HTML-Versionen enthielten Elemente, die ausschließlich für die Gestaltung verwendet wurden. Diese Elemente sind heute veraltet und dürfen in modernen HTML-Dokumenten nicht mehr verwendet werden.

HTML sollte die Struktur und Bedeutung des Inhalts beschreiben. Für die Darstellung ist CSS zuständig.

Container-Elemente

Semantische Strukturierung

Semantische HTML-Elemente beschreiben nicht nur einen Bereich, sondern auch dessen Bedeutung. Ein Browser, eine Suchmaschine oder ein Screenreader kann dadurch leichter erkennen, welche Aufgabe ein Bereich innerhalb der Webseite besitzt.

Das Element <div> ist dagegen ein allgemeiner Container ohne eigene inhaltliche Bedeutung.

<div class="header">...</div>
<div class="navigation">...</div>
<div class="content">...</div>
<div class="footer">...</div>

Mit semantischen Elementen wird die Aufgabe der einzelnen Bereiche bereits im HTML-Code deutlich:

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Eine semantische Struktur verbessert die Verständlichkeit des Quellcodes und unterstützt die Barrierefreiheit.

Beispiel einer Seitenstruktur

Eine einfache Webseite kann mit semantischen Container-Elementen folgendermaßen aufgebaut werden:

<body>
  <header>
    <h1>EDV mit Adi Prinz</h1>

    <nav>
      <a href="index.php">Startseite</a>
      <a href="html.php">HTML</a>
      <a href="css.php">CSS</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>HTML lernen</h2>

      <article>
        <h3>Das HTML-Grundgerüst</h3>
        <p>Hier steht der Inhalt des Artikels.</p>
      </article>
    </section>

    <aside>
      <h2>Weitere Informationen</h2>
      <p>Hier stehen ergänzende Hinweise.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; EDV mit Adi Prinz</p>
  </footer>
</body>

Das Beispiel zeigt die logischen Hauptbereiche einer Webseite. Die konkrete Anordnung, Größe, Farbe und Gestaltung dieser Bereiche wird anschließend mit CSS festgelegt.

Das Div-Element

Das Element <div> ist ein allgemeiner Container. Es besitzt keine eigene semantische Bedeutung und wird verwendet, wenn kein passenderes semantisches Element vorhanden ist.

<div class="produktkarte">
  <h3>Produktname</h3>
  <p>Beschreibung des Produkts</p>
</div>

Über eine Klasse oder ID kann der Container mit CSS gestaltet oder mit JavaScript angesprochen werden.

Überschriften

HTML stellt sechs Überschriftenebenen bereit. Sie reichen von <h1> bis <h6>.

<h1>Überschrift der Webseite</h1>
<h2>Hauptthema</h2>
<h3>Unterthema</h3>
<h4>Weitere Unterteilung</h4>
<h5>Untergeordnete Überschrift</h5>
<h6>Kleinste Überschriftenebene</h6>

Die Überschriftenebenen beschreiben die inhaltliche Hierarchie. Sie sollten deshalb in einer nachvollziehbaren Reihenfolge verwendet werden.

<h1>HTML lernen</h1>

<h2>HTML-Grundlagen</h2>
<h3>Das HTML-Grundgerüst</h3>
<h3>HTML-Elemente</h3>

<h2>Texte in HTML</h2>
<h3>Überschriften</h3>
<h3>Absätze</h3>

Die Hauptüberschrift

Die Hauptüberschrift wird mit <h1> ausgezeichnet. Sie beschreibt das zentrale Thema der Seite.

<h1>HTML-Grundlagen</h1>

Für eine übersichtliche Seitenstruktur empfiehlt sich normalerweise eine eindeutige Hauptüberschrift. Weitere Themen werden anschließend mit <h2> bis <h6> gegliedert.

Der sichtbare Inhalt einer <h1>-Überschrift und der Seitentitel im <title>-Element können ähnlich sein, erfüllen aber unterschiedliche Aufgaben:

• <title> bezeichnet das gesamte HTML-Dokument und erscheint unter anderem im Browser-Tab.
• <h1> ist die sichtbare Hauptüberschrift im Inhalt der Webseite.

Absätze

Ein Textabsatz wird mit dem Element <p> ausgezeichnet. Jeder Absatz sollte einen inhaltlich zusammengehörenden Gedanken enthalten.

<p>
  HTML beschreibt die Struktur und Bedeutung einer Webseite.
</p>

<p>
  CSS übernimmt die Gestaltung und das Layout.
</p>

Browser stellen Absätze normalerweise untereinander dar und fügen zwischen ihnen einen Abstand ein. Wie groß dieser Abstand ist, wird mit CSS festgelegt.

p {
  margin-block: 1rem;
  line-height: 1.6;
}

Mehrere Leerzeichen und einfache Zeilenumbrüche im HTML-Quellcode werden bei normalem Text in der Regel zu einem einzigen Leerzeichen zusammengefasst.

<p>
  Zwischen diesen       Wörtern stehen
  im Quellcode mehrere Leerzeichen und ein Zeilenumbruch.
</p>

Im Browser erscheint der Text trotzdem als fortlaufender Absatz.

Der Zeilenumbruch

Mit dem Element <br> wird innerhalb eines Textes ein erzwungener Zeilenumbruch eingefügt.

<p>
  EDV mit Adi Prinz<br>
  Musterstraße 10<br>
  1010 Wien
</p>

Das Element eignet sich beispielsweise für Adressen, Gedichte oder Liedtexte, bei denen die Zeilenaufteilung inhaltlich erforderlich ist.

Thematischer Wechsel

Das Element <hr> kennzeichnet einen thematischen Wechsel innerhalb eines Abschnitts.

<p>Der erste Teil behandelt die Grundlagen von HTML.</p>

<hr>

<p>Im nächsten Teil beschäftigen wir uns mit CSS.</p>

Browser stellen das Element üblicherweise als waagrechte Linie dar. Seine eigentliche Bedeutung ist jedoch der Wechsel zwischen zwei Themen oder Gedankenabschnitten.

Die Darstellung kann mit CSS angepasst werden:

hr {
  border: 0;
  border-top: 2px solid #666;
  margin-block: 2rem;
}

Vorformatierter Text

Das Element <pre> stellt Text so dar, wie er im HTML-Quellcode eingegeben wurde. Leerzeichen und Zeilenumbrüche bleiben dabei erhalten.

<pre>
Name:     Adi Prinz
Thema:    HTML
Status:   in Bearbeitung
</pre>

Vorformatierter Text wird vom Browser normalerweise in einer Schriftart mit gleicher Zeichenbreite dargestellt.

Für mehrzeiligen Quellcode werden <pre> und <code> häufig miteinander kombiniert:

<pre><code>&lt;h1&gt;HTML lernen&lt;/h1&gt;
&lt;p&gt;Das ist ein Absatz.&lt;/p&gt;</code></pre>

Die Zeichen < und > müssen dabei als < und > geschrieben werden, damit der Browser sie als sichtbaren Quellcode und nicht als HTML-Tags interpretiert.