Mit HTML Dialoge, Interviews oder Gespräche auszeichnen

Samstag, 31 Januar 2009 18:24 MET

Thema:: Webgestaltung
Stichworte:: HTML, HTML5

: Mit HTML Dialoge, Interviews oder Gespräche auszeichnen [hyperkontext | Weblog]

Im Entwurf zu HTML5 gibt es das neue Element dialog, welches quasi eine klassische Definitionsliste ist.

Der Entwurf zu HTML5 zeigt damit auch den semantischen Weg für die derzeit aktuelle Version 4. Etwas verwirrt bin ich über die Sichtweise, dass mit cite nur Werke, Bücher und andere Quellen markiert werden, nicht aber Personen.

In den folgenden Beispielen wurde das zukünftige – für HTML5 vorgesehene – Tag-Paar <dialog></dialog> bloß mit <dl class="dialog"></dl> ausgetauscht.

Ausgangslage zu meinen Beispielen

Als ich den Entwurf zu HTML5 (HyperText Markup Language in Version 5) vor kurzem konzentrierter durchstöberte, fiel mir das neue Element dialog auf, welches quasi eine klassische Definitionsliste ist und die übrigen Elemente dieser Gattung statt mit dem üblichen dl mit dialog einschließt.

Beispiel für HTML5:

<dialog>
 <dt>Max Mustermann</dt>
 <dd>
  <p>[Text]</p>
  <p>[noch mehr Text]</p>
 </dd>
<dt>Maria Musterfrau</dt>
 <dd>
  <p>[Text]</p>
 </dd>
</dialog>

Ich beginne mit diesem Beitrag keinesfalls eine erneute Diskussion, ob eine Definitionsliste zur Auszeichnung eines Gespräches bedeutungsvoll ist. Vielmehr gehe ich davon aus, dass die jahrelange Diskussion, ob die Definitionsliste in HTML4 für die Auszeichnung von Dialogen oder Interviews semantisch korrekt verwendet werden kann, ein Ende finden sollte.

Weiters kombiniere ich, dass wir in derzeitigen Versionen die normale Definitionsliste für die Auszeichnung von längeren Gesprächen oder Transkripten durchaus verwenden sollten, wie Jon Tan in seinem Beitrag Preparing for HTML5 with Semantic Class Names zeigt:

<dl class="dialog">
 <dt>Speaker 1</dt>  
  <dd>So I said to him, I said…</dd>    
 <dt>Speaker 2</dt>  
  <dd>You never. You did? Oh my…</dd>    
</dl>

Das für HTML5 vorgesehene Tag-Paar <dialog></dialog> könnten wir also in HTML4 / XHTML1 mit der Krücke <dl class="dialog"></dl> analog verwenden.

Was in der kommenden Version als semantisch korrekt definiert wird, kann ja in HTML4 durchaus schon berücksichtigt werden.

`<cite>` in neuem Licht?

Einen weiteren interessanten Punkt finde ich im Entwurf zu HTML5, der mein bisheriges Verständnis des Elements cite überdenken lässt: Text-level semantics - The <cite> Element.

Dort wird eindrücklich darauf hingewiesen, dass cite nicht für Personen, sondern nur für Werke, Bücher, Textstellen und so weiter verwendet wird. Wenn wir also jemanden zitieren, dann wird nur der Name des Werkes aus dem diese Stelle stammt mit cite markiert, nicht aber der Name einer zitierten Person.

Das bedeutet, dass viele Lehrbeispiele aus der Vergangenheit – wie aus dem Buch Transcending CSS (Seite 85) oder aus einem Artikel auf SitePoint (How should you mark up dialog?) – zumindest in HTML5 semantisch nicht korrekt wären; Dort werden Gespräche mit dem Namen der Person, eingeschlossen in cite und anschließendem blockquote ausgezeichnet. Auch ich habe das großteils bis jetzt so gehandhabt.

Dialoge mit Definitionslisten auszeichnen

An Hand dieser Ausgangslage versuche ich nun einige praktische Szenarien und die sich daraus ergebenden Möglichkeiten auszuloten und zur Diskussion zu stellen, wie wir Dialoge, Gespräche und Interviews auch in HTML4 auszeichnen können.

Zusammengefasst orientiere ich mich an dieser Basis:

In der W3C Empfehlung zu HTML4 zur Definitionsliste wird mit einem Beispiel auf die Möglichkeit hingewiesen, damit Gespräche auszeichnen zu können.
Im Entwurf zu HTML5 findet sich das Element <dialog>, das die selben untergeordneten Elemente und Vorgangsweisen wie das Element <dl> hat. Damit gibt es in HTML5 eine explizite Auszeichnung für Dialoge und Interviews, analog zur existierenden Definitionsliste.

Weiters wird in diesem Dokument auch darauf hingewiesen, dass in einem Dialog keine Auszeichnungen mit cite, q und blockquote notwendig sind, außer innerhalb dieses Dialoges wird jemand zitiert.

In den folgenden Beispielen wurde das zukünftige – für HTML5 vorgesehene – Tag-Paar <dialog></dialog> bloß mit <dl class="dialog"></dl> ausgetauscht.

Gespräch von zwei oder mehr Personen

Die einfachste Variante, die hier ein Gespräch von drei beteiligten Personen auszeichnet.

<dl class="dialog">
<dt>Person-1</dt>
 <dd>
  <p>Text</p>     
 </dd>     
<dt>Person-2</dt>     
 <dd>       
  <p>Text </p>     
 </dd>     
<dt>Person-1</dt>     
 <dd>       
  <p>Text </p>     
 </dd>     
<dt>Person-3</dt>     
 <dd>       
  <p>Text </p>     
 </dd>   
</dl>

Interview mit zwei Personen

Ein Interviewer und zwei Personen, die abwechselnd oder hintereinander antworten.

Hier beginnt jeweils der Listenpunkt einer geordneten Liste mit der Hauptfrage des Interviewers, aus denen sich ein Gespräch ergibt. Mit CSS lässt sich diese Tatsache für den visuellen Kontext natürlich dementsprechend hervorheben.

Weiters könnte jeder Listenpunkt zum Beispiel mit Information zum Hintergrund der Frage beginnen.

<ol> 
 <li>
 <dl class="dialog">
  <dt>Interviewer</dt>
   <dd>
    <p>1. Hauptfrage</p>
   </dd>
  <dt>Person-1</dt>
   <dd>
    <p>Antwort</p>
   </dd>
  <dt>Interviewer</dt>
   <dd>
    <p>Nachfrage</p>
   </dd>
  <dt>Person-1</dt>
   <dd>
    <p>Antwort</p>
    <p>zur Nachfrage</p>
   </dd>
  <dt>Person-2</dt>
   <dd>
    <p>Antwort</p>
   </dd>
 </dl>
 </li>
 
 <li>
 <dl class="dialog">
  <dt>Interviewer</dt>
   <dd>
    <p>2. Hauptfrage</p>
   </dd>
  <dt>Person-1</dt>
   <dd>
    <p>Antwort</p>
   </dd>
  <dt>Person-2</dt>
   <dd>
    <p>Antwort</p>
   </dd>
 </dl>
 </li>
</ol>

Langes Interview

Langes Interview, das mit Überschriften in mehrere Teile zerlegt und strukturiert wird.

Unter jeder Überschrift könnte eine Zusammenfassung mit einer zitierten Schlüsselaussage der befragten Person folgen und mit Hilfe von CSS als Eye-Catcher für den visuellen Kontext gestaltet werden.

Natürlich lässt sich diese Variante auch mit einer geordneten Liste verbinden, wie im vorigen Beispiel gezeigt.

<h2>Thema 1</h2>
<p>Zusammenfassung</p>
<dl class="dialog">
 <dt>Interviewer</dt>
  <dd>
   <p>Frage</p>
  </dd>
 <dt>Befragte Person</dt>
  <dd>
   <p>Antwort</p>
  </dd>
 <dt>Interviewer</dt>
  <dd>
   <p>Frage</p>
  </dd>
 <dt>Befragte Person</dt>
  <dd>
   <p>Antwort</p>
  </dd>
</dl>
<h3>Unterthema zu 1</h3>
<dl class="dialog">
 <dt>Interviewer</dt>
  <dd>
   <p>Frage</p>
  </dd>
 <dt>Befragte Person</dt>
  <dd>
   <p>Antwort</p>
  </dd>
</dl>

<h2>Thema 2 </h2>
<p>Zusammenfassung</p>
<dl class="dialog">
<!--und so weiter -->
</dl>

Fazit

Der Entwurf zu HTML5 zeigt auch den semantischen Weg für die derzeit aktuelle Version 4. Ich gehe davon aus, dass sich die Leute auch dabei etwas gedacht haben und sehe meine Aufgabe darin, diese Vorgaben zu interpretieren. Grundsatzdiskussionen, wie Dialoge auszuzeichnen sind, scheinen für mich damit beendet zu sein.
Ich halte diese Art der Auszeichnung für sinnvoll und nachvollziehbar und werde sie bei Bedarf wie oben gezeigt auch in HTML4 / XHTML1 vermehrt einsetzen.
Etwas verwirrt bin ich über die Sichtweise, dass mit cite nur Werke, Bücher und andere Quellen markiert werden, nicht aber Personen; wobei Pro und Contra für mich nachvollziehbar sind. Dieses Detail ist interessant und für mich noch weiter auszuloten beziehungsweise zu diskutieren.

Abschnitt 1 von 1

Quellenverzeichnis

Verweise zum Thema

Es gibt viele Beiträge – vor allem aus den Jahren 2004 und 2007 –, welche die semantische Korrektheit in HTML4 / XHTML1 von Definitionslisten für Interviews und Dialoge diskutieren. Ich habe hier exemplarisch zwei mit gegensätzlicher Meinung ausgesucht und die Definition des W3C (World Wide Web Consortium), das bereits auch in HTML4 explizit ein Beispiel anführt, die Definitionsliste für die Auszeichnung eines Gespräches zu verwenden.

W3C Recommendation - 10.3 Definition lists: the DL, DT, and DD elements
Using HTML Lists Properly - Anything goes [Mike Cherim]
Markup Musings #1: How should you mark up dialog? [Alex Walker on SitePoint] – dem Autor gefällt die Auszeichnung eines Dialoges mit einer Definitionsliste überhaupt nicht (Mai 2007).

Externe Verweise dieses Artikels wurden zuletzt am 31. Januar 2009 auf Relevanz geprüft.

Datum:: veröffentlicht am 31 Januar 2009, 18:24 MET.
Artikel:: Mit HTML Dialoge, Interviews oder Gespräche auszeichnen [hyperkontext | Weblog]
Kurz-URL:: http://hyperkontext.at/s/186
Thema:: Webgestaltung
Stichworte:: HTML, HTML5

Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Rezension: Das große Little Boxes-Buch von Peter Müller vom 25. Dezember 2011
August 2011 im Kontext vom 30. September 2011
Juli 2011 im Kontext vom 3. September 2011
HTML5-Element menu: Nicht für Website-Navigation gedacht vom 29. Juli 2011
Juni 2011 im Kontext vom 13. Juli 2011

hyperkontext

Mit HTML Dialoge, Interviews oder Gespräche auszeichnen

Ausgangslage zu meinen Beispielen

`<cite>` in neuem Licht?

Dialoge mit Definitionslisten auszeichnen

Gespräch von zwei oder mehr Personen

Interview mit zwei Personen

Langes Interview

Fazit

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

Navigation Weblog

Themen

Archiv

Weitere Links

Verfolgen

Neue Beiträge

Buchtipp

Einstellungen

hyperkontext

Mit HTML Dialoge, Interviews oder Gespräche auszeichnen

Ausgangslage zu meinen Beispielen

<cite> in neuem Licht?

Dialoge mit Definitionslisten auszeichnen

Gespräch von zwei oder mehr Personen

Interview mit zwei Personen

Langes Interview

Fazit

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

Navigation Weblog

Themen

Archiv

Weitere Links

Verfolgen

Neue Beiträge

Buchtipp

Einstellungen

`<cite>` in neuem Licht?