Im Folgenden wollen wir die für uns wichtigsten HTML-Elemente etwas genauer anschauen:

# Überschriften

Diese markieren eine Überschrift. Insgesamt gibt es 6 heading-Element um Kapitel, Unterkapitel, Unterunterkapitel, usw. zu kennzeichnen.

Beispiel

<h1>Eine Überschrift</h1>
1

Eine Überschrift

Name
heading
Tag
<h1> (<h2>, <h3>, <h4>, <h5> und <h6>)
Typ
block
Attribute

# Absätze

Beispiel

<p>Dieser Text wird in einem Absatz dargestellt</p>
<p>Hier beginnt ein weiterer Absatz. Normalerweise werden Absätze durch eine Leerzeile getrennt.</p>
1
2

Dieser Text wird in einem Absatz dargestellt

Hier beginnt ein weiterer Absatz. Normalerweise werden Absätze durch eine Leerzeile getrennt.

Name
paragraph
Tag
<p>
Typ
block
Attribute

# Zeilenumbruch

Beispiel

<p>In diesem Absatz drin hat es<br>einen Zeilenumbruch.</p>
1

In diesem Absatz drin hat es
einen Zeilenumbruch.

Name
break
Tag
<br> (kein schliessendes Tag da kein Inhalt)
Typ
inline
Attribute

Mit dem anchor-Element kann ein Inhalt (Text oder ein Bild) mit einem Hyperlink versehen werden. Klickt man den Inhalt an, so wird die entsprechende URL geöffnet.

Beispiel

Hier ist <a href="http://www.gymkirchenfeld.ch">ein Link</a>
1
Hier ist ein Link
Name
anchor
Tag
<a>
Typ
inline
Attribute
href – URL welche bei Klick geöffnet werden soll.

# Bild

Um ein Bild auf einer Webseite anzuzeigen, fügen wir ein img-Element ein. Dieses dient als Platzhalter für das Bild. Das Bild wird dann vom Browser in einem weiteren Request von der als Attribut angegebenen URL geladen.

Beispiel

<img src="star-rating.png" alt="3 von 4 Sternen">
1
Name
image
Tag
<img>
Typ
inline-block
Attribute
src – URL von welcher das Bild geladen werden soll
alt – Alternativer Text für Browser welche keine Bilder darstellen können
width – Breite des Bildes in Pixel (optional)
height – Höhe des Bildes in Pixel (optional)

# Text hervorheben

Die zwei wichtigsten Tags einzelne Buchstaben oder Wörter im Text hervorzuheben sind diese fett oder kursiv darzustellen

Beispiel

<p>Ich bin <strong>fett</strong> und ich <em>kursiv</em></p>
1

Ich bin fett und ich kursiv

Name
strong/emphasize
Tag
<strong>/<em>
Typ
inline
Attribute

# Bereiche

Mit dem div-Tag kann ein Bereich (division) erstellt werden. So lassen sich beliebige Element zusammenfassen. Das div-Tag wird vor allem verwendet um Elemente zu gestalten und zu positionieren (mehr dazu im Kapitel «CSS»).

Beispiel

<style>
   .mit-rahmen {
      border: 2px solid green;
      text-align: center;
   }
</style>

<div class="mit-rahmen">
   <img src="star-rating.png" alt="3 von 4 Sternen">
   <p>3 von 4 Sternen</p>
</div>
1
2
3
4
5
6
7
8
9
10
11

3 von 4 Sternen

HTML5 bringt semantische Varianten des div-Elements. Deren Namen sprechen für sich: article, section, header, footer, nav und aside. Wenn man nur ein Element des Typs einsetzt, kann man sich das class-Attribut sparen:

Beispiel

<style>
   aside {
      border: 6px dotted salmon;
      text-align: center;
      width: 300px;
   }
</style>

<aside>
   <img src="star-rating.png" alt="3 von 4 Sternen">
   <p>3 von 4 Sternen</p>
</aside>
1
2
3
4
5
6
7
8
9
10
11
12
Name
division (article, section, header, footer, nav, aside)
Tag
<div> (article, section, header, footer, nav und aside)
Typ
block
Attribute
class – Name, selbstgewählt (keine Leerzeichen). Kann verwendet werden um alle Element mit derselben Klasse per CSS zu gestalten. (optional)

# Liste

Um eine Aufzählung zu machen kann man entweder eine nicht-geordnete Liste (Aufzählungspunkte) oder eine geordnete Liste (Zahlen) einfügen. Beide Listen beinhalten für jedes Listen-Element ein li-Tag. Im Listen-Element drin können Text, Links, Bilder und weitere Elemente vorkommen.

Beispiel

<ol>
   <li>Arbeiten</li>
   <li>Essen</li>
   <li>Schlafen</li>
</ol>
1
2
3
4
5
  1. Arbeiten
  2. Essen
  3. Schlafen

Beispiel

<ul>
   <li>Schlafen</li>
   <li>Essen</li>
   <li>Arbeiten</li>
</ul>

1
2
3
4
5
6
  • Schlafen
  • Essen
  • Arbeiten
Name
unordered-list/ordered-list/list-item
Tag
<ul>/<ol> mit einem oder mehreren <li>
Typ
block
Attribute
Letzte Änderung: 10.3.2020, 17:57:13