odiamo: Listen zur kompletten Seitenstrukturierung ?

Hallo zusammen!

Als Debütant hier bitte ich um eure Meinung bei einer Frage, derer ich eifach nicht Herr werde. Im Groben handelt es sich um semantischen 'korrekten' Code und - wie so oft - der Abwägung zwischen der Semantik, Zweckmäßigkeit, Einfachheit und den Vorgaben. Kurz und knapp :

Einsatz von Listen zur Strukturierung ganzer Seiteninhalte (nicht nur Menüs)?

In einem aktuellen Projekt ist mir - Aufgrund des Gestaltungsspielraumes - vorgegeben, den Inhalt der Seite 2 bis 3-fach zu verschachteln. Über dessen Sinn möchte ich hier jedoch nicht diskutieren, nehmen wir es mal als gegeben.

An einem Beispiel mit einfachen DIV-Tags müsste das etwa so aussehen :

  
<div>  
 <div>  
  <h1>Inhalt Abschnitt 1</h1>  
  <div>  
   <h2>Inhalt Abschnitt 1.1</h2>  
   <p>..</p>  
  </div>  
  <div>  
   <h2>Inhalt Abschnitt 1.2</h2>  
   <p>..</p>  
  </div>  
 </div>  
</div>  
<div>  
 <div>  
  <h1>Inhalt Abschnitt 2</h1>  
  <div>  
   <h2>Inhalt Abschnitt 2.1</h2>  
   <p>..</p>  
  </div>  
 </div>  
</div>  

Gibts schon eine blacklist für DIV-Spammer? So komm ich mir dabei vor! Die wirklichen Inhalte habe ich mit <p>..</p> nur andeuten wollen. In Realität sollen die Abschnitte selbstverständlich nicht nur Absätze fassen.

Hier mal eine Beispiel mit einer ungeordneten Liste :

  
<ul>  
 <li>  
  <h1>Inhalt Abschnitt 1</h1>  
  <ul>  
   <li>  
    <h2>Inhalt Abschnitt 1.1</h2>  
    <p>..</p>  
   </li>  
   <li>  
    <h2>Inhalt Abschnitt 1.2</h2>  
    <p>..</p>  
   </li>  
  </ul>  
 </li>  
 <li>  
  <h1>Inhalt Abschnitt 2</h1>  
  <ul>  
   <li>  
    <h2>Inhalt Abschnitt 2.1</h2>  
    <p>..</p>  
   </li>  
  </ul>  
 </li>  
</ul>  

Die Art einfach verschachtelte Liste erfüllt die Vorgabe, ist besser lesbar und ergibt semantische sogar einen Sinn der Strukturierung. Ich habe die ungeordnete Liste nur als Beispiel gewählt. Mit der Art Umsetzung fühle ich mich also schon eher Verbunden. Einzig die Liste mit so viel Inhalt auszustopfen kommt mir wie eine Zweckvergewaltigung vor. Was meint Ihr?

Vielen Dank!

MfG
 odiamo

  1. Als Debütant hier bitte ich um eure Meinung bei einer Frage, derer ich eifach nicht Herr werde. Im Groben handelt es sich um semantischen 'korrekten' Code und - wie so oft - der Abwägung zwischen der Semantik, Zweckmäßigkeit, Einfachheit und den Vorgaben. Kurz und knapp :

    Einsatz von Listen zur Strukturierung ganzer Seiteninhalte (nicht nur Menüs)?

    In einem aktuellen Projekt ist mir - Aufgrund des Gestaltungsspielraumes - vorgegeben, den Inhalt der Seite 2 bis 3-fach zu verschachteln. Über dessen Sinn möchte ich hier jedoch nicht diskutieren, nehmen wir es mal als gegeben.

    Gibts schon eine blacklist für DIV-Spammer? So komm ich mir dabei vor! Die wirklichen Inhalte habe ich mit <p>..</p> nur andeuten wollen. In Realität sollen die Abschnitte selbstverständlich nicht nur Absätze fassen.

    Ein div gruppiert Elemente. Vernünftige Klassennamen verleihen Semantik, die in HTML 4 noch fehlt.

    Hier mal eine Beispiel mit einer ungeordneten Liste :
    Die Art einfach verschachtelte Liste erfüllt die Vorgabe, ist besser lesbar und ergibt semantische sogar einen Sinn der Strukturierung. Ich habe die ungeordnete Liste nur als Beispiel gewählt. Mit der Art Umsetzung fühle ich mich also schon eher Verbunden. Einzig die Liste mit so viel Inhalt auszustopfen kommt mir wie eine Zweckvergewaltigung vor. Was meint Ihr?

    Deine Liste ist nicht besser lesbar, vor allem nicht im Quälcode.
    Endlose Verschachtelungen bringen dem Coder keine Übersicht.
    Klassennamen tun es.
    Ein normaler Screen User wird von deinen Listen nichts haben, weil du sie ja doch wegstylen wirst.

    Ich halte nicht von einer Überverwendung von Listen,, um Content zu strukturieren.
    Grund. Benutzer von Screenreadern kennen zweierlei Arten von Navigationen: Listen und hx Hierarchien. Inhalt in listen zu strukturieren erzeugt nur eine zusätzliche Redundanz.

    Man kann natürlich argumentieren aus der Sicht eines wissenschaftlichen Dokuments. Das kann ein Argument für sich selbst sein.
    Da würde ich aber unter Umständen Definitionslisten bevorzugen.

    Was ich aber an deiner Struktur bemängle ist, dass du nicht die verschiedenen Sekoren einer Webseite berücksichtigst.

    <ul id="usabilitylinks">
    <li><a href="#navigation">zur Navigation</a></li>
    <li><a href="#coontent">zum Inhalt</a></li>
    <li><a href="#sidebar">zum Sidebar</a></li>
    </ul>

    <h1>Webseitentitel</h1>

    <h2 id="navigation">Navigation</h2>
    <ul> ..... Navigation .....</ul>

    <div id="content"><!-- Start content -->
    <h2 >Hauptüberschrift des Inhalts</h2>
    <p class=abstract>Zusammenfassung</p>
    <ul> ..Seitenlokales inhaltsverzeichnis.. </ul>
    <!-- Dein Inhalt beginnt mit h3 -->

    </div><!-- Ende content -->

    <div id="sidebar">
    <h2>Sidebar</h2>
    </div>

    <div id="sidebar">
    ... Footer inhalt ...
    </div>

    Das ist in meinen Augen gute Semantik für eine generelle Seitenstruktur.

    mfg Beat;

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    1. Korrektur

      <div id="sidebar">
      <h2>Sidebar</h2>
      </div>

      <div id="sidebar">

      ^^ Sollte "footer" heissen

      ... Footer inhalt ...
      </div>

      mfg Beat;

      --
      ><o(((°>           ><o(((°>
         <°)))o><                     ><o(((°>o
    2. Hallo Beat und danke für die Antwort, jedoch muss ich in einigen Punkten widersprechen.

      Ein div gruppiert Elemente. Vernünftige Klassennamen verleihen Semantik, die in HTML 4 noch fehlt.

      Der DIV-Tag gruppiert zwar Elemente, besitzt jedoch keine konkrete semantische Aussage zu dessen Inhalt. Mit der Angabe von 'id' oder 'class'-Attributen schaffst du dir doch nur deine eigne kleine pseudo-semantische Welt?! Welches Programm unterstützt denn die Art semantischer Verknüpfung und wer definiert da Standards?

      Deine Liste ist nicht besser lesbar, vor allem nicht im Quälcode.

      Über der Art subjektive Auffassungen des Quellcodes wollen wir besser nicht diskutieren.

      Endlose Verschachtelungen bringen dem Coder keine Übersicht.
      Klassennamen tun es.

      Um es noch einmal zu betonen : die Verschachtelungen sind mir gegeben. Darüber zu diskutieren führt uns nur weit Abseits des Themas. Die Angabe von Klassennamen führt nicht unbedingt zu einer besseren Übersicht. Doch Übersicht ist auch nicht das Thema, sondern der Einsatz von Listen und deren Zweckmäßigkeit im Einsatz außerhalb gewohnter Menüführungen und kleiner Aufzählungen.

      Ein normaler Screen User wird von deinen Listen nichts haben, weil du sie ja doch wegstylen wirst.

      Womöglich, jedoch ist die Frage der Darstellung eine komplett andere als die, der Strukturierung. Immer ein Schritt nach dem anderen.

      Ich halte nicht von einer Überverwendung von Listen,, um Content zu strukturieren.
      Grund. Benutzer von Screenreadern kennen zweierlei Arten von Navigationen: Listen und hx Hierarchien. Inhalt in listen zu strukturieren erzeugt nur eine zusätzliche Redundanz.

      Man kann natürlich argumentieren aus der Sicht eines wissenschaftlichen Dokuments. Das kann ein Argument für sich selbst sein.
      Da würde ich aber unter Umständen Definitionslisten bevorzugen.

      Nun, damit entkräftest du deine eigne Aussage. Aber die Nutzung von Listen beschränkt sich keineswegs nur auf wissenschaftliche Dokumente. Genau genommen beschränken sich Listen der Semantik nach nur auf eine reine Aufzählung. Je nach Art spezifischer als un-, geordnet oder definiert. Dass sich Listen in der Menüführung etabliert haben stimmt und kann durch Fehlinterpretation darauf ausgerichteter Programme zu Probleme führen. Dabei sind aber im Grunde die Screenreader gefragt, sich semantisch richtig zu verhalten und zu interpretieren. Listen definieren aus sich heraus keine Menüs, sondern Listen - nicht mehr und nicht weniger. Überspitzt ausgedrückt : nur weil etwas oft falsch gemacht wird, ist es zwangsläufig nicht gleich richtig.

      Was ich aber an deiner Struktur bemängle ist, dass du nicht die verschiedenen Sekoren einer Webseite berücksichtigst.

      <ul id="usabilitylinks">
      <li><a href="#navigation">zur Navigation</a></li>
      <li><a href="#coontent">zum Inhalt</a></li>
      <li><a href="#sidebar">zum Sidebar</a></li>
      </ul>

      <h1>Webseitentitel</h1>

      <h2 id="navigation">Navigation</h2>
      <ul> ..... Navigation .....</ul>

      <div id="content"><!-- Start content -->
      <h2 >Hauptüberschrift des Inhalts</h2>
      <p class=abstract>Zusammenfassung</p>
      <ul> ..Seitenlokales inhaltsverzeichnis.. </ul>
      <!-- Dein Inhalt beginnt mit h3 -->

      </div><!-- Ende content -->

      <div id="sidebar">
      <h2>Sidebar</h2>
      </div>

      <div id="sidebar">
      ... Footer inhalt ...
      </div>

      Das ist in meinen Augen gute Semantik für eine generelle Seitenstruktur.

      mfg Beat;

      Zugegeben habe ich keine 'id' oder 'class'-Attribute vergeben. Zum einen aus purer Faulheit, zum anderen weil sie zum Thema nichts beitragen. Wie schon gesagt verleihen diese Attribute KEINE semantischen Bezüge zu deren Inhalt.

      Ich danke dir für deine Mühe, jedoch bin ich in der Problematik kein Stück weiter gekommen. Vielleicht sollte ich meine Frage etwas umformulieren :

      Was spricht gegen die Verwendung von Listen zur Strukturierung von 'viel' Inhalt. Mit viel meine ich hierbei: mehr als nur die üblichen stichpunktartigen Aufzählungen oder Menüführungen, also Überschriften, Absätze, Bilder, etc.

      Ein durchaus beachtenswerter Punkt ist mit einer möglichen Fehlinterpretation der Screenreader nun schon gefunden.

      mfg
       o.a.

      1. Hallo

        Was spricht gegen die Verwendung von Listen zur Strukturierung von 'viel' Inhalt. Mit viel meine ich hierbei: mehr als nur die üblichen stichpunktartigen Aufzählungen oder Menüführungen, also Überschriften, Absätze, Bilder, etc.

        Ganz einfach die Frage: Handelt es sich bei den zu strukturierenden Inhalten um eine Auflistung?

        Tschö, Auge

        --
        Die deutschen Interessen werden am Liechtenstein verteidigt.
        Veranstaltungsdatenbank Vdb 0.2
        1. Hey,

          Ganz einfach die Frage: Handelt es sich bei den zu strukturierenden Inhalten um eine Auflistung?

          Tja, im Grunde schon. Scheinbar gibt es auch keine weiteren Nachteile. Hab mich dazu entschieden eine Liste einzusetzen. Vielen Dank!