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:
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.
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.
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.
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>
<html>
<head>
<title></title>
</head>
</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">
<html>
<head>
<title></title>
</head>
</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:
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.
