• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Semantik: Verteiler/Linkseite. Verschachtelte Liste (li ->p oder dl -> dt -> dd)

S

Shrax

Mitglied
Ich habe eine Frage zur Semantik und ob das Valide/ein fehler ist.

Also nehmen wir an, ich habe ein Hauptmenü. Eine Waggerechte Navigation auf der Website.

Diese Navigation ist so verschachtelt, das sie ein Dopdownmenü ergibt. Sollte dies jedoch ein Browser nicht untersützen (hover usw.) wird mit JavaScript für zb. den ie6 das menü ausgeklappt.

Sollte der nutzer jedoch einen alten browser der das nicht unterstützt nutzen, und gleichzeitig JavaScript aus haben, kann er mit einem klick auf einen Hauptmenüpunkt auf diese Hauptseite jeder Kategorie gehen.

In dieser Hauptseite sind nochmal alle Links aufgelistet. Doch WIE liste ich diese am besten auf, wenn darunter eine kleine beschreibung stehen soll?

Also Quasi eine Liste von links


  • Link 1
  • Link 2
  • Link 3
Allerdings soll drunter eine beschreibung des Links stehen

  • Link 1
In Link 1 geht es um [...]

  • Link 2
In Link 2 geht es um [...]

  • Link 3
In Link 3 geht es um [...]


Wie löse ich das am Semantischsten mit HTML?

Mir fallen 2 möglichkeiten ein. Einmal eine Liste mit absätzen:

<ul>
<li>
<h3><a href="#">Link 1</a></h3>
<p>In Link 1 geht es um [...]</p>
</li>
<li>[...]</li>
</ul>

oder soll ich das besser mit einer Definitionsliste in html lösen?

<dl>
<dt><a href="#">Link 1</a></dt>
<dd>In Link 1 geht es um [...]</dd>
<dt></dt>
<dd></dd>
</dl>


Denn es wird ja nicht direkt das Wort "Link 1" deviniert, sondern der Inhalt zu dem der Link führt.
 
Werbung:
Ich weißes nicht genau aber ich denke semantisch korrekt wäre dann das verschachteln von Listen hier das Codebeispiel von Selfhtml:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Verschachtelte Listen</title>
</head>
<body>
<h1>Dies und das im Web</h1>

<ul>
  <li>Suchmaschinen
    <ul>
      <li>Google</li>
      <li>AltaVista</li>
      <li>Fireball</li>
    </ul>
  </li>
  <li>Verzeichnisse
    <ul>
      <li>Yahoo</li>
      <li>Web.de</li>
      <li>Dino-Online</li>
    </ul>
  </li>
  <li>Was anderes</li>
  <li>Noch was anderes</li>
</ul>

</body>
</html>

Und hier der Link zur Seite: SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen


Wie gesagt bin mir nicht ganz sicher...



T02
 
Ja das wäre eine Überschrift mit unterpunkten die die Links darstellen. Doch das will ich ja nicht. Die Links sind sozusagen überschriften, darunter die erklährung was in der Seite auf den der Link leitet für ein Inhalt ist.
 
Werbung:
Ich würde wohl die Definitionsliste nehmen. Bei der Variante mit der Überschrift folgt eigentlich kein Inhalt, deswegen ist das für mich die schlechtere Variante.
 
Ich finde auch, dass das ein Paradebeispiel für eine Definitionsliste ist. Du hast einen Term (<dt>) und eine Beschreibung dazu (<dd>), zwei Einheiten, die untrennbar miteinander verbunden sind.
Außerdem definierst Du weiterhin das Menü auch als Liste, wie es sein soll.
 
Vielen Dank.
Ich hab das jetzt mal mit einer Definitionsliste umgesetzt und anschließend mit CSS gestaltet. Macht einen guten eindruck, und der Quellcode sieht auch recht übersichtlich aus.

mfg shrax
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben