Fachbereich Informatik/Semantische HTML-Tags

Aus Wikiversity

Wechseln zu: Navigation, Suche

Dieses Projekt gehört zum Fachbereich Informatik.

Semantische HTML-Tags sind HTML-Tags, die zur Kennzeichnung von bestimmten Inhaltstypen eines HTML-Dokuments dienen.

HTML ist nicht zur Gestaltung von Webseiten, sondern zur Kennzeichnung (Markierung - engl. Markup) von Textbestandteilen erfunden. Mittels HTML bekommen Textbestandteile also eine bestimmte Bedeutung. Für das Aussehen, also für die Gestaltung der markierten Textabschnitte, ist CSS zuständig.

Inhaltsverzeichnis

[Bearbeiten] Absatzmarkierungen

Unter Absatzmarkierungen werden hier mittels HTML-Tag beschreibbare Textabschnitte verstanden, die sich aus einem oder mehreren Sätzen oder Satzbestandteilen zusammensetzen und einen bestimmten Gedanken repräsentieren.

[Bearbeiten] Überschriften

Als Überschriften bezeichnet man Absätze, welche zumeist nur aus einem einzigen Satz oder einem Satzteil bestehen und die den nachfolgenden Text kurz und treffend umreißen. Zur Kennzeichnung von mehrstufig gegliederten Überschriften dienen die HTML-Tags "h1", "h2", ..., "h6"[1]. Somit sind Hauptüberschrift und bis zu 5 Unterüberschriften realisierbar.

Innerhalb der Wikisoftware lassen sich diese Überschriften durch ein bis sechs aufeinanderfolgende Gleichheitszeichen erzeugen. Allerdings wird innerhalb eines Wiki-Artikels keine Hauptüberschrift verwendet, da diese bereits für die Artikelbezeichnung - das Artikellemma - vergeben ist.

HTML-Code Wikicode
<h1>Wortlaut der Hauptüberschrift</h1> = Wortlaut der Hauptüberschrift =
<h2>Wortlaut der 1. Unterüberschrift</h2> == Wortlaut der 1. Unterüberschrift ==
<h3>Wortlaut der 2. Unterüberschrift</h3> === Wortlaut der 2. Unterüberschrift ===
<h4>Wortlaut der 3. Unterüberschrift</h4> ==== Wortlaut der 3. Unterüberschrift ====
<h5>Wortlaut der 4. Unterüberschrift</h5> ===== Wortlaut der 4. Unterüberschrift =====
<h6>Wortlaut der 5. Unterüberschrift</h6> ====== Wortlaut der 5. Unterüberschrift ======
Wie es in der Wikisoftware aussieht
Wortlaut der Hauptüberschrift
Wortlaut der 1. Unterüberschrift
Wortlaut der 2. Unterüberschrift
Wortlaut der 3. Unterüberschrift
Wortlaut der 4. Unterüberschrift
Wortlaut der 5. Unterüberschrift

[Bearbeiten] Absätze

Textpassagen, die zwar aus mehreren Sätzen bestehen können, aber gemeinsam einen eigenen Sinnzusammenhang bilden, werden als Absatz bezeichnet und durch das "p"-Tag zusammengefasst[2]. Innerhalb der Wikisoftware lassen sich diese Absätze durch einfaches Hintereinanderschreiben von Sätzen ohne Leerzeile erzielen. Eine Leerzeile bewirkt dann das Ende des vorangegangenen und den Beginn des nächsten Absatzes.

HTML-Code Wikicode
<p>Wortlaut des 1. Absatzes</p>

<p>Wortlaut des 2. Absatzes</p>

Wortlaut des 1. Absatzes


Wortlaut des 2. Absatzes
Wie es in der Wikisoftware aussieht

Wortlaut des 1. Absatzes

Wortlaut des 2. Absatzes

[Bearbeiten] Nummerierte Listen

Aufzählungen, die durchgehend nummeriert werden, lassen sich mittels der Tags "ol"[3] und "li"[4] in HTML darstellen. Innerhalb der Wikisoftware lassen sich diese Listen durch ein am Zeilenbeginn stehendes "#" erzeugen

HTML-Code Wikicode

<ol>
<li>Erster Listeneintrag</li>
<li>Zweiter Listeneintrag</li>
<li>letzter Listeneintrag</li>
</ol>

#Erster Listeneintrag
#Zweiter Listeneintrag
#letzter Listeneintrag
Wie es in der Wikisoftware aussieht
  1. Erster Listeneintrag
  2. Zweiter Listeneintrag
  3. letzter Listeneintrag

[Bearbeiten] Aufzählungen

Aufzählungen, die nicht nummeriert werden, sondern mittels Anstrich oder anderen Kennungen aufgelistet werden, lassen sich mittels der Tags "ul"[5] und "li" in HTML darstellen. Innerhalb der Wikisoftware lassen sich diese Listen durch ein am Zeilenbeginn stehendes "*" erzeugen

HTML-Code Wikicode

<ul>
<li>Erster Listeneintrag</li>
<li>Zweiter Listeneintrag</li>
<li>letzter Listeneintrag</li>
</ul>

*Erster Listeneintrag
*Zweiter Listeneintrag
*letzter Listeneintrag
Wie es in der Wikisoftware aussieht
  • Erster Listeneintrag
  • Zweiter Listeneintrag
  • letzter Listeneintrag

[Bearbeiten] Kopf- und Fußzeilen

Textdokumente enthalten zur leichteren Erschließbarkeit und für den besseren Überblick, was sich auf einer konkreten Seite an Informationen finden lässt, vom eigentlichen Text abgerückte Kopf- oder Fußzeilen. Hierbei handelt es sich ebenfalls um Absätze, wenngleich sie meist nur aus einer Zeile bestehen. Alternativ können auch Aufzählungen als Kopf- oder Fußzeilen eingesetzt werden, die dann jedoch meist mittels CSS horizontal statt vertikal angeordnet werden.

Da es sich bei Webdokumenten jedoch nicht um Papierseiten handelt, sind Kopfzeilen im Standardfall am oberen Beginn des HTML-Dokuments und Fußzeilen am unteren Ende des HTML-Dokuments zu finden.

Zur Kennzeichnung derartiger Absätze oder Aufzählungen als Kopf- bzw. Fußzeilen, werden diese durch ein "div"-Tag[6] mit zusätzlichem "class"-Attribut zusammengefasst. Innerhalb der Wikisoftware lassen sich diese Kopf- bzw. Fußzeilen ebenfalls durch ein "div"-Tag erzeugen, wobei die unterschiedlichen Absätze durch Leerzeilen getrennt und Aufzählungen mittels vorangestelltem "*" geschrieben werden.

HTML-Code Wikicode

<div class="kennung">
<p>Erster Kopfzeilenabsatz</p>
<p>Zweiter Kopfzeilenabsatz</p>
<p>letzter Kopfzeilenabsatz</p>
</div>

<div class="kennung">
Erster Kopfzeilenabsatz

Zweiter Kopfzeilenabsatz

letzter Kopfzeilenabsatz
</div>
Wie es in der Wikisoftware aussieht

Erster Kopfzeilenabsatz

Zweiter Kopfzeilenabsatz

letzter Kopfzeilenabsatz

wobei im obigen Beispiel als "kennung" zum Beispiel "header" oder "footer" verwendet werden könnte.

[Bearbeiten] Fuß- und Endnoten

Fußnoten befinden sich am Fuß einer Seite, Endnoten am Ende eines Textes. Sie stellen Anmerkungen dar, die meist in Form von nummerierten Listen gesammelt werden, um im Text den Lesefluss nicht unnötig zu unterbrechen. Bei Webseiten, welche nicht aus Papier bestehen, handelt es sich in der Regel immer um Endnoten. Um nun eine solche Endnote per HTML zu kennzeichnen, werden diese durch ein "div"-Tag mit zusätzlichem "class"-Attribut zusammengefasst. Innerhalb der Wikisoftware lassen sich diese Endnoten als Referenzen zusammenfassen, wobei hier ein spezielles, nur in der Wikisoftware auftretendes "reference"-Tag verwendet wird. Die einzelnen Fußnoteneinträge werden in der Wikisoftware in "ref"-Tags verpackt.

HTML-Code Wikicode

<div class="kennung">
<ol>
<li>Erster Fußnoteneintrag</li>
<li>Zweiter Fußnoteneintrag</li>
<li>letzter Fußnoteneintrag</li>
</ol>
</div>

<ref>Erster Fußnoteneintrag</ref>
<ref>Zweiter Fußnoteneintrag</ref>
<ref>letzter Fußnoteneintrag</ref>

<references/>
Wie es in der Wikisoftware aussieht

[1] [2] [3]

  1. ↑ Erster Fußnoteneintrag
  2. ↑ Zweiter Fußnoteneintrag
  3. ↑ letzter Fußnoteneintrag

Im obigen Beispiel könnte als "kennung" zum Beispiel "reference" verwendet werden.

[Bearbeiten] Inhaltsverzeichnisse

Inhaltsverzeichnisse sind stichwortartige Aufzählungen oder nummerierte Listen, die mit Seitenangaben versehen, entweder am Beginn oder am Ende eines Dokuments erstellt werden.

[Bearbeiten] Navigation

Speziell in HTML-Dokumenten werden zum leichteren Auffinden bestimmter Informationen Navigationsmenüs als Hilfsmittel angeboten. Hierbei handelt es sich ebenfalls um Aufzählungen oder nummerierte Listen.

[Bearbeiten] Glossare

Bei einem Glossar handelt es sich ebenfalls um eine Liste von Wörtern oder Wendungen mit Erläuterungen zu deren Bedeutung. Sie lassen sich mittels der Tags "dl"[7], "dt"[8] und "dd"[9] in HTML darstellen. Innerhalb der Wikisoftware lassen sich diese Listen durch ein am Zeilenbeginn stehendes ";" und dem ":" erzeugen

HTML-Code Wikicode

<dl>
<dt>Erster Begriff</dt><dd>Erläuterung zum 1. Begriff</dd>
<dt>Zweiter Begriff</dt><dd>Erläuterung zum 2. Begriff</dd>
<dt>Letzter Begriff</dt><dd>Erläuterung zum letzten Begriff</dd>
</dl>

;Erster Begriff: Erläuterung zum 1. Begriff
;Zweiter Begriff: Erläuterung zum 2. Begriff
;Letzter Begriff: Erläuterung zum letzten Begriff
Wie es in der Wikisoftware aussieht
Erster Begriff
Erläuterung zum 1. Begriff
Zweiter Begriff
Erläuterung zum 2. Begriff
Letzter Begriff
Erläuterung zum letzten Begriff

[Bearbeiten] Satzteilmarkierungen

Nicht immer sind es ganze Absätze, die als ein bestimmter inhaltlicher Textkomplex markiert werden sollen. Auch einzelne Satzbestandteile können für das Erschließen der inhaltlichen Aussage markiert werden.

[Bearbeiten] Betonungen, Akzentuierung

Einzelne Satzbestandteile, welche beim (Vor-)Lesen besonders betont oder akzentuiert werden sollen, werden durch das "em"-Tag[10] markiert. Innerhalb der Wikisoftware kann dieses Tag ebenfalls verwendet werden.

Ersatzweise wird in der Wikisoftware zur bequemeren Nutzung ein doppeltes Apostroph "''" verwendet. Allerdings resultiert daraus keine Betonung, sondern eine "kursive Schreibweise". Für barrierefreies Webdesign ist daher die Verwendung des "em"-Tags zu bevorzugen.

HTML-Code Wikicode

Was willst <em>Du</em> schon wieder?
Komm bitte <em>pünktlich</em>!
Komm <em>diesmal</em> bitte pünktlich!

Was willst ''Du'' schon wieder?
Komm bitte ''pünktlich''!
Komm ''diesmal'' bitte pünktlich!
Wie es in der Wikisoftware aussieht

Was willst Du schon wieder?

Komm bitte pünktlich!

Komm diesmal bitte pünktlich!

[Bearbeiten] Hervorhebung, Überzeugung

Eine weitere Möglichkeit zur Hervorhebung bietet das "strong"-Tag[11], womit Textabschnitte markiert werden, die "überzeugend" auszusprechen, bzw. vorzulesen sind. Innerhalb der Wikisoftware kann dieses Tag ebenfalls verwendet werden.

Ersatzweise wird in der Wikisoftware zur bequemeren Nutzung ein dreifaches Apostroph "'''" verwendet. Allerdings resultiert daraus keine überzeugende Sprechweise, sondern eine "fette Schreibweise". Für barrierefreies Webdesign ist daher die Verwendung des "strong"-Tags zu bevorzugen.

HTML-Code Wikicode

Genau <strong>das</strong> habe ich Dir doch schon hundertmal gesagt!

Genau '''das''' habe ich Dir doch schon hundertmal gesagt!
Wie es in der Wikisoftware aussieht

Genau das habe ich Dir doch schon hundertmal gesagt!

[Bearbeiten] Weiterführende Hinweise

[Bearbeiten] Weblinks

<a href="#">link</a>

[Bearbeiten] E-Mail-Adresse

<a href="mailto:">email</a> <address>test</address>

[Bearbeiten] Kurzinfo

Unter Kurz- bzw. Quickinfo wird in HTML-Dokumenten eine kurze Erläuterung zu einzelnen Textbestandteilen verstanden. Diese kann dauerhaft sichtbar sein oder erst beim Überfahren des entsprechenden Textteils mit dem Mauszeiger aktiviert werden.

Prinzipiell kann jedes HTML-Tag zur Markierung von Text mit solchen zusätzlichen Informationen versehen werden, indem es das Attribut "title" mit dem Text der Kurzinfo als Wert erhält. Innerhalb der Wikisoftware gibt es hierfür keine extra Entsprechung.

HTML-Code Wikicode

<cite title="Martin Luther zum Beischlaf">In der Wochen zwier, schadet weder ihm noch ihr</cite>

Keine Entsprechung
Wie es in der Wikisoftware aussieht

In der Wochen zwier, schadet weder ihm noch ihr  (Hinweis: Die Maus bitte mal auf den vorangehenden Text zeigen lassen)

Für die besonderen Fälle eines Akronyms oder einer Abkürzung existieren die speziellen HTML-Tags "acronym"[12] und "abbr"[13]. Diese werden allerdings nicht von der Wikisoftware unterstützt: Ersatzweise können hier die Vorlagen {{acronym|...|...}} bzw. {{abbr|...|...}} eingesetzt werden.

HTML-Code Wikicode

<acronym title="Gnu's Not Unix">GNU</acronym>

{{acronym| GNU |Gnu's Not Unix}}
Wie es in der Wikisoftware aussieht

GNU  (Hinweis: Die Maus bitte mal auf den vorangehenden Text zeigen lassen)

[Bearbeiten] Zitate

[Bearbeiten] Kurzzitate

cite

[Bearbeiten] Langzitate

Text

[Bearbeiten] Weblinks

[Bearbeiten] Referenzen

  1. ↑ h - header (Überschrift)
  2. ↑ p - paragraph (Absatz)
  3. ↑ ol - ordered list (geordnete, nummerierte Liste)
  4. ↑ li - list entry (Listeneintrag)
  5. ↑ ul - unsorted list (unsortierte Liste, Aufzählung)
  6. ↑ div - division (Bereich)
  7. ↑ dl - definition list (Definitionssammlung)
  8. ↑ dt - definition term (zu definierender Begriff)
  9. ↑ dd - definition data (Definitionstext)
  10. ↑ em - emphasis (Betonung, Akzentuierung)
  11. ↑ strong - strong (überzeugend)
  12. ↑ acronym - acronym (Kurzwort)
  13. ↑ abbr - abbreviation (Abkürzung)
Von „http://de.wikiversity.org/wiki/Fachbereich_Informatik/Semantische_HTML-Tags“
Persönliche Werkzeuge