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>

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>

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>

In diesem Absatz drin hat es
einen Zeilenumbruch.

Name

break

Tag

<br> (kein schliessendes Tag da kein Inhalt)

Typ

inline

Attribute

–

Hyperlinks

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>

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">

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>

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>

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>

3 von 4 Sternen

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. Arbeiten
2. Essen
3. Schlafen

Beispiel

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

• Schlafen
• Essen
• Arbeiten

Name

unordered-list/ordered-list/list-item

Tag

<ul>/<ol> mit einem oder mehreren <li>

Typ

block

Attribute

–