====== Textauszeichnung ======

Innerhalb einer Textpassage lassen sich besonders wichtige Informationen hervorheben – zum Beispiel durch Zentrieren, Einrücken, unterschiedliche Schriftgrößen und -farben oder Schriftschnitte in kursiv und bold. Während eine Textverarbeitung wie z. B. Word nur Wert auf das Aussehen legt, können Sie den Text von Webseiten nach seiner inhaltlichen Bedeutung auszeichnen, da Webseiten nicht nur am Bildschirm, sondern auch von Screenreadern gelesen und von Suchmaschinen ausgewertet werden.

**Beachte**: Bei den Elementen zur Textauszeichnung handelt es sich um sogenannte Inline-Elemente. Deshalb bleibt beispielsweise eine Zuweisung von Länge oder Breite zunächst einmal wirkungslos.

===== Schreib- und Gestaltungsregeln =====

Es ist empfehlenswert, Texten eine moderne Seitenstruktur mit den neuen HTML5-Elementen wie article, aside und footer zu geben. Verwende diese Elemente und auch eigenschaftslose div-Elemente nur sparsam.

Jeder Textblock sollte seine eigene Überschrift haben. Durch die Verwendung der verschiedenen Überschriftenebenen können Sie dem Text eine auch für Screenreader und Suchmaschinen interpretierbare Struktur geben.

Abweichend von Textdokumenten haben sich im Webdesign einige Grundsätze herausgebildet.

Während DIN A4-Seiten oft im Blocksatz gestaltet sind, entstehen dadurch gerade auf kleineren Viewports zu große Lücken zwischen längeren Wörtern.

**Empfehlung**: Verwende im Webdesign Flattersatz und verzichte auf //text-align: justify;//.

===== Hervorhebungen =====

=== span ===

Das span-Element (engl span für überspannen) ist ein Element, das Text und andere Inline-Elemente enthalten kann, selbst aber keine semantische Bedeutung hat und nichts bewirkt. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

**HTML-Code**
<code html>
<h1>Auch <span>grüne</span> Weihnachtsbäume werden <span>braun</span>.</h1>
</code>

**Browseransicht**

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-082624.png?400}}

=== fett <b> oder kursiv <i> ===

**b** (für bold engl. für fett) zeichnet einen Teil eines Fließtextes aus, der sich vom übrigen Text abheben soll, keine besondere Bedeutung hat und üblicherweise in Fettschrift dargestellt wird. Das trifft etwa auf Schlüsselwörter oder Produktnamen zu.

//i// (von italic, kursiv) zeichnet einen Teil eines Fließtextes aus, der sich vom übrigen Text abheben soll, keine besondere Bedeutung hat und üblicherweise kursiv dargestellt wird. Das trifft etwa auf Fachbegriffe, Namen oder Textpassagen, die in einem anderen sprachlichen Zusammenhang stehen, zu.

**HTML-Code**
<code html>
<p>Sie können sich auf der Kundenseite 
  <b>http://example.org/kunden</b> 
  einloggen und Ihre persönlichen Daten einsehen.
</p>
<p>
  Ihre Login-Daten lauten:<br>
  Name: <b>rumpel.stilz</b><br>
  Passwort: <b>q39a30qPPZ</b>
</p>
</code>

**Browseransicht**

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-082858.png?500}}


  * <em> - um eine andere Betonung auszudrücken,
  * <strong> - um eine starke Wichtigkeit auszudrücken oder
  * <mark> - um Textabschnitte hervorzuheben.
  * <dfn> - um eine Definition eines Begriffes auszuzeichnen.


=== hoch- <sup> und tiefgestellt <sub> ===

Man kann ein Textzeichen etwas oberhalb (hochgestellt) oder unterhalb (tiefgestellt) der normalen Basislinie des Typs festlegen:

H<sub>2</sub>O findet sich überall auf der Erde - alleine die Ozeane umfassen 1.332.000.000 km<sup>3</sup> (1.332 × 1018 m<sup>3</sup>) Wasser. Der jährliche CO<sub>2</sub>-Ausstoß wird nicht in Millionen m<sup>3</sup> , sondern in Millionen Tonnen gemessen.

Hier gibt es mehrere Möglichkeiten der Umsetzung:

Für die meisten Exponentionalzahlen gibt es passende Unicodezeichen.
Die HTML-Elemente //sub// und //sup// können beliebigen Text hoch- bzw. tiefstellen. Dies wird in der Regel auch von Screenreadern vorgelesen.
Mit MathML kann man auch komplexere Terme von der Grundlinie verschieben.

Eine Tiefstellung mit sub verschiebt einen Teil des Textes vertikal (Browserdefault: //sub { vertical-align: sub }//), sodass seine Zeilenbox aus der des übrigen Textes herausragt.

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-083453.png}}

=== gelöscht <del> und eingefügt <ins> ===

Gerade in immer wieder aktualisierten Web-Dokumenten ist es vorteilhaft, Änderungen (edits) am Dokument sichtbar zu machen.

//del// kennzeichnet einen Teil eines Textes als nicht länger gültig, deleted Text, gelöschter Text.
//ins// kennzeichnet einen Teil eines Textes als eingefügt, inserted Text, eingefügter Text.

Es geht dabei weniger um richtig oder falsch als vielmehr darum, Änderungen nachvollziehbar zu dokumentieren. Wichtig ist das etwa für Gesetzestexte, die sich im Verlauf des Gesetzgebungsverfahrens ändern.

**HTML-Code**
<code html>
 <p>Hänsel und <del>Bärbel</del><ins>Gretel</ins> verliefen sich im Wald.</p>
 
    <del datetime="2013-03-25" cite="https://de.wikipedia.org/wiki/Sonnensystem/">
      <p>In unserem Sonnensystem gibt es 9 Planeten.</p>
    </del>
</code>

**Browseransicht**

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-083658.png?300}}

=== Keyboard-Eingabe <kbd> ===

Das Element //kbd// zeichnet einen Teil eines Fließtextes als Benutzereingabe, etwa über die Tastatur, aus. kbd steht dabei für keyboard, eng. Tastatur.

Es wird in den browsereigenen Einstellungen meist nur in einer monospace-Schriftart dargestellt. Im CSS unseres Wikis werden Textauszeichnungen mit //kbd// mit einem typischen Tastatur-Look versehen:

**HTML-Code**
<code html>
<h1>Tastenkombinationen mit kbd sichtbar machen</h1>
<h2>Tastaturen, Mäuse und Touchgeräte</h2>
<p>Webseiten im <a href="https://wiki.selfhtml.org/wiki/JavaScript/Fullscreen">Fullscreen</a>-Modus
	können mit <kbd>ESC</kbd> wieder in die klassische Ansicht zurückgesetzt werden,
	nur nicht auf Touch-Geräten, da es dort keine Tasten gibt. Auch der Klammergriff
	( <kbd>strg</kbd> + <kbd>alt</kbd> + <kbd>entf</kbd> ) ist auf Touchgeräten nicht
	möglich. </p>

</code>

**CSS-Code**
<code css>
kbd {
	background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
	border: thin solid #aaa;
	border-radius: 2px;
	box-shadow: 1px 2px 2px #ddd;
	font-family: inherit;
	font-size: 0.9em;
	padding: 0 0.5em;
}
</code>


**Browser-Ansicht**

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-083940.png?500}}


=== Adresse <address> ===

Ein //address//-Element enthält Informationen, wie der Autor oder inhaltlich Verantwortliche einer Seite oder eines Abschnittes zu erreichen ist. Dies muss nicht zwangsläufig eine E-Mail- oder Postadresse sein, sondern kann auch einfach nur ein Link zu einer weiteren Seite mit Kontaktinformationen sein.

**HTML-Code**
<code html>
       <address>
         Autor: <a href="../autoren/mustermann.html">Max Mustermann</a>
       </address>
</code>

Telefonnummern müssen kein Text sein. Wenn man sie als Link auszeichnet, können Benutzer auf mobilen Geräten mit einem Klick den Wählvorgang einleiten.

**HTML-Code**
<code html>
<address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>
     </dl>
</address>
</code>

Früher war es üblich Links auf eine E-Mail-Adresse mit mailto einzuleiten. Bei einem Klick auf den Link wird dann das Standard-Mailprogramm des Nutzers geöffnet.

**HTML-Code**
<code html>
<p>
  Kontaktieren Sie uns per <a href="mailto:kontakt@example.com">Mail an kontakt@example.com</a> 
  oder mit nachfolgendem Formular:
</p>
</code>

Eine Alternative wäre ein Kontaktformular.

Fertiges Beispiel:

**HTML-Code**
<code html>
<h2>Kontakt</h2>
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>

      <dt>Fax</dt>
      <dd>089 0000 0001</dd>

      <dt>Öffnungszeiten</dt>
      <dd><span>Mo–Fr:</span> <span>7:00–21:00 Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00–15:00 Uhr</span></dd>

      <dt>E-Mail Adresse</dt>
      <dd><a href="mailto:kontakt@example.com">kontakt@example.com</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>

      <dt>Rücksendungen an</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>
    </dl>
  </address>
</code>

**CSS-Code**
<code css>
dl.grid {
	display: grid;
	grid-template-columns: 1fr 100%;
}

dd {
	margin: 0;
	padding-left: 1em;
}

dl.grid dd {
	margin-bottom: 1em;
}

a[href^="tel"] {
	white-space: nowrap;
}
</code>

**Browser-Ansicht**

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240424-084534.png?400}}