Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen

HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen

Für eine gute Lesbarkeit von Texten ist eine vernünftige Formatierung nötig. Und die geht über reine Strukturierungselemente wie Überschriften und Textabsätze hinaus. So kann man in HTML beispielsweise Zitate kennzeichnen und einzelne Passagen fett oder kursiv darstellen. Das nötige Rüstzeug dazu liefert dieses Video-Training.


Einzelne Wörter oder ganze Passagen lassen sich sehr einfach kursiv und fett auszeichnen. Zunächst zur fett zeichnenden Variante. Dafür stehen mit b und strong prinzipiell zwei HTML-Elemente zur Verfügung.
Willkommen auf <b>PSD-Tutorials.de</b>!
<br />
Willkommen auf <strong>PSD-Tutorials.de</strong>!

Ein Blick auf das Ergebnis im Browser liefert folgendes Bild:

Bilder



Offensichtlich sorgen beide Elemente also für eine identische Anzeige. Warum existieren dann aber zwei verschiedene Elemente? Tatsächlich gibt es für Webseiten noch andere Darstellungsformen als die der bekannten Standard-Browser. Denkt beispielsweise an Reader für blinde Menschen oder auch an mobile Endgeräte. Mit den HTML-Elementen, die vom W3C angeboten werden, soll die Semantik unterstützt werden. So bedeutet das b-Element nun tatsächlich nicht mehr, dass etwas fett angezeigt werden soll. Vielmehr bedeutet b einen sichtbar hervorgehobenen Text, der keine erhöhte Wichtigkeit besitzt. Dabei könnte es sich zum Beispiel um Produktnamen oder Schlüsselwörter in Dokumenten handeln.

 
Das strong-Element stand bisher für eine stärkere Betonung. em wurde hingegen für betonten, wichtigen Text (emphatisch) eingesetzt. strong ist in früheren HTML-Versionen die Steigerung von em gewesen. Beiden Elementen wird in HTML5 eine andere Bedeutung zuerkannt.

Zunächst ein Text mit normaler Betonung.
<p>
   Katzen sind niedliche Tiere.
</p>

Jetzt noch einmal derselbe Text, dieses Mal allerdings mit der Betonung auf dem ersten Wort.
<p>
   <em>Katzen</em>
   sind niedliche Tiere.
</p>

Durch den Einsatz von em wird die Betonung auf das Wort Katzen gelegt. Denkbar wäre das in einer Diskussion, bei der es darum geht, ob denn nun Hunde oder Katzen süßer sind.

Jetzt könnte man im vorliegenden Beispiel das em-Element auch auf das Wort sind anwenden.
<p>
   Katzen
   <em> sind </em>
   niedlichen Tiere.
</p>

Das könnte eine Antwort in einer Diskussion sein, bei der jemand behauptet, Katzen seien überhaupt nicht süß.

Tatsächlich werden Passagen, die mit em ausgezeichnet sind, im Browser kursiv angezeigt. Denselben optischen Effekt erreicht man durch das i-Element.

Laut HTML5-Arbeitsentwurf steht das i-Element jetzt nicht mehr für kursiv.
<p>
   Herzlich willkommen bei
   <i>PSD-Tutorials.de</i>
</p>

Vielmehr bedeutet dieses Element ab sofort, dass man darüber eine andere Stimmung vermitteln will. Interessant ist das i-Element beispielsweise für die Kennzeichnung technischer Ausdrücke oder taxonomische Bezeichnungen.

 
Das ist alles schrecklich theoretisch, ich weiß. Prinzipiell solltet ihr versuchen, euch an die HTML5-Vorgaben zu halten. Andererseits wird euch natürlich niemand den Kopf abreißen, wenn ihr strong anstelle von b verwendet.
<p>
 <em>Zeile mit em</em><br />
 <i>Zeile mit i</i><br />
 <strong>Zeile mit strong</strong><br />
 <b>Zeile mit b</b>
</p>

Im Endeffekt müssen hier die Browser-Hersteller handeln.

Bilder



Für die eigentliche Gestaltung der mit den genannten Elementen ausgestatteten Texte ist dann letztendlich ohnehin CSS verantwortlich.


 

Akronyme mit abbr

Um ein Akronym auszuzeichnen, wird auf das gleiche Element zurückgegriffen, das bislang für Abkürzungen dagewesen ist, nämlich auf abbr.
Das Deutsch-Österreichische Büro des
<abbr title="World Wide Web Consortium">W3C</abbr>
hat seit April 2009 seinen Sitz an der Fachhochschule Potsdam.

Browser, die das abbr-Element richtig interpretieren, stellen den in das abbr-Element eingeschlossenen Text unterstrichen dar.

Bilder



 
Zusätzlich sollte man abbr ein title-Attribut zuweisen. Dort notiert man üblicherweise den vollständigen Ausdruck für das Akronym. Wird vom Besucher mit dem Mauszeiger über das Akronym gefahren, ist der Ausdruck in einem Tooltipp-Fenster zu sehen.


Adressangaben mit address

Über das address-Element kann man Adressinformationen auszeichnen.
<address>
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck<br />
</address>

Browser stellen die Inhalte des address-Elements üblicherweise kursiv dar.

Bilder



 

Programmcode mit code auszeichnen

Das code-Element wird zur Auszeichnung von Programmcode verwendet. In diesem Sinn hat sich im Vergleich zu früheren HTML-Versionen nichts getan. Nach wie vor wird code für jenen Zweck genutzt.
<pre>
Das ist ein HTML-Kopfbereich:
  <code>
    &lt;html&gt;
     &lt;head&gt;
     &lt;title&gt;&lt;/title&gt;
     &lt;/head&gt;
  </code>
</pre>

Üblicherweise kombiniert man code mit dem pre-Element, um auf diese Weise die im Programmcode verwendeten Einrückungen zu erhalten.

Die HTML5-Spezifikation empfiehlt im Zusammenhang mit dem code-Element den Einsatz des class-Attributs. Diesem Attribut kann man die innerhalb des code-Elements verwendete Sprache zuweisen. Hier einige typische Beispiele, wie solche Auszeichnungen aussehen können:

language-html
language-css
language-javascript
language-php
language-pascal

Ob und wie die Browser diese Anweisungen umsetzen, ist vom W3C nicht festgelegt.
<pre>
  Das ist ein HTML-Kopfbereich:
  <code class="language-html">
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
  </code>
</pre>

Momentan hat das class-Attribut jedenfalls keine sichtbaren Auswirkungen im Browser. Allerdings können menschliche Betrachter auf diese Weise erkennen, welcher Sprache der Programmcode zugrunde liegt, wenn sie einen Blick in den Quellcode der Seite werfen.


 

Kleinschreibung mit small

Das small-Element ist ursprünglich dazu dagewesen, Text kleiner als normal anzuzeigen. In HTML5 ist small explizit für Kleingedrucktes da. Dieses Kleingedruckte könnte beispielsweise Folgendes sein:

• Copyrightinformationen
• Haftungsausschlüsse
• Lizenzbestimmungen
• AGB

Das W3C weist ausdrücklich darauf hin, dass small nicht für lange Textpassagen verwendet werden sollte.
<small>
  Copyright by PSD-Tutorials.de<br />
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck
</small>

Texte unterstreichen

Ihr könnt Wörter mittels des u-Elements unterstrichen darstellen. Hier ein Beispiel:
<p>Willkommen bei <u>PSD-Tutorials.de</u></p>

 
Das Ergebnis stellt sich im Browser folgendermaßen dar:

Bilder



Sieht man sich das Ergebnis an, ist das tatsächlich der gewünschte Effekt. Einen Haken hat die Sache allerdings. Im Internet stehen unterstrichene Texte bekanntermaßen für Hyperlinks. Wenn ihr nun einen Text oder ein Wort unterstrichen darstellt, denken die Besucher möglicherweise, dass es sich um einen Hyperlink handelt. Der Versuch, diesen anzuklicken, wird natürlich scheitern. Ihr solltet daher auf den Unterstrich verzichten.


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:04

Vielen Dank für das Video.

Portrait von BeBa
  • 20.04.2015 - 22:04

Wieder sehr informativ!

Portrait von Steve007
  • 09.11.2014 - 15:25

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Nine97
  • 13.10.2014 - 12:53

Vielen Dank für diesen Einblick

Portrait von Gill
  • 11.10.2014 - 16:56

Heyhey,
Ja vielen Dank!
Ist schön erklärt und auch die Begründungen sind easy zu verstehen. :)

Dankeschön! :)

Portrait von renate_C
  • 11.10.2014 - 12:50

Ich bedanke mich für das informative Video.

Portrait von Domingo
  • 11.10.2014 - 12:39

Vielen Dank für das Video.

Portrait von Luther_Sloan
  • 11.10.2014 - 11:16

Danke für das interessante Video.

Portrait von Kundentest
  • 11.10.2014 - 10:45

Herzlichen Dank für das Video.

Portrait von Caesarion2004
  • 11.10.2014 - 10:42

Vielen Dank für ein weiteres gutes und verständliches Grundlagen-Tutorial.

Portrait von pallasathena
  • 11.10.2014 - 10:35

danke!

Wäre es denn nicht sinnvoll, wenn ich mir jetzt gleich die Befehle für den logischen Inhalt angewöhne, damit ich auch für die Zukunft auf der sicheren Seite bin, also <strong>, <em>, ?

Portrait von der_fou
  • 06.10.2014 - 00:03

Es tut gut, das ganze nochmal zu wiederholen.
Da merk ich erst wieder, wie lange das Ganze für ich schon wieder her ist. ;-)

LG und allzeit "gut Licht"!

Portrait von Kundentest
  • 05.10.2014 - 22:13

Herzlichen Dank für das Tutorial.

Portrait von Caesarion2004
  • 05.10.2014 - 18:24

Danke für ein weiteres sehr gutes Grundlagen-Tutorial.

Portrait von BOPsWelt
  • 05.10.2014 - 15:57

Vielen Dank für den weiteren Artikel. :)

Portrait von pallasathena
  • 05.10.2014 - 15:48

Als Auffrischung immer wieder gut! Danke

Portrait von Lisa Steib
  • 05.10.2014 - 14:36

Grundlagen schön zusammengefasst!!
Danke dafür :)

x
×
×