Verschachteln von Listen in HTML5?

Angelo Schuler · 22. April 2020

Hallo!

Gerade bin ich beim Bearbeiten des Übungsprojektes "Tübingen anders sehen". Axel führt hier eine verschachtelte Liste für die Navigation ein. Ich hatte schon vorgearbeitet und war auch auf diesem Weg, der im Browser auch funktioniert, im Validator aber nicht akzeptiert wird. Allerdings hatte ich das neue ul nicht innerhalb eines li notiert. Schliesslich habe ich das Problem über CSS gelöst, indem ich für li eine Klasse Unterpunkt definiert und dort das geänderte Aussehen notiert habe. Das führte zum erwünschten Ergebnis. Was ist nun die bessere Lösung, verschachteln oder nur über CSS gehen?

Arne Drews · 22. April 2020

Was genau meinst Du denn? Verschachteln und CSS hat erstmal nichts miteinander zu tun.

Ich kann die Elemente verschachteln:

Code

<ul>
    <li>
        <ul>
            <il></li>
        </ul>
    </li>
</ul>

und trotzdem mit CCS drauf zugreifen:

Code

LI > UL { … }
UL UL { … }
UL > LI > UL { … }

wären die ersten Möglichkeiten, die mir adhoc einfallen.

Sempervivum · 22. April 2020

Wie Axel es gemacht hat, sehe ich, aber nicht deinen Code. Posten diesen doch mal.

Angelo Schuler · 23. April 2020

Hallo, danke für die Antworten. War ein ungeübter Start. Hier mein Code in HTML5

Ich hatte zuerst

HTML

<ul>
    <li>......</li>
    <li>......</li>
    <ul>
        <li>......</li>
        <li>......</li>
    </ul>
    <li>......</li>
    </ul>

geschrieben. Das hat war nicht valide Eine Verschachtelung, wie Arne sie gepostet hat, würde funktionieren. Ja, aber meine Überlegung bezüglich des Tübingen-Projektes ging weiter: Brauche ich die Verschachtelung überhaupt? In CSS brauche ich so so oder so einen Klassenselektor für die Unterliste. Damit wären m.E. zwei Listen überflüssig. Nun sieht es konkret so aus:

HTML

<nav>
        <ul>
            <li> <a href="index.htm">Startseite</a></li>
            <li> <a href="geschichte">Geschichte Tübingens</a></li>
            <li> Tübingen anders sehen</li>

            <li class="unterpunkt"> <a href="Stiftskirche">Stiftskirche</a></li>
            <li class="unterpunkt"> <a href="neckarbruecke">Neckarbrücke</a></li>
            <li class="unterpunkt"> <a href="friedhof">Friedhof</a></li>
            <li class="unterpunkt"> <a href="marktplatz">Marktplatz</a></li>
            <li class="unterpunkt"> <a href="aula">Alte Aula</a></li>
         
            <li> <a href="kontakt">Kontakt</a></li>
            <li> <a href="impressum">Impressum</a></li>
        
        </ul>
    </nav>

Alles anzeigen

und in CSS

CSS

nav li {
    
    list-style: none;
}
.unterpunkt {
    
    list-style: square;
    margin-left: 30px;
    
}

Das Design ist noch nicht fertig, aber auf dem richtigen Weg.

Nun meine konkrete Frage an die Geübten: Was ist "best use"? Meiner Auffassung nach der schlankere HTML-Code in Form einer einzigen ul ohne Unterliste. Was meint Ihr?

Sempervivum · 23. April 2020

Zitat

Was ist "best use"? Meiner Auffassung nach der schlankere HTML-Code in Form einer einzigen ul ohne Unterliste. Was meint Ihr?

Ich bin da anderer Meinung: Hier spielt nicht nur eine Rolle, wie schlank der HTML-Code ist und wie leicht er sich stylen lässt sondern auch die Logik bzw. Semantik: Die Unterpunkte sind jeweils einem Hauptpunkt unter- bzw. zugeordnet und das sollte sich auch direkt im HTML wiederspiegeln.

Zitat

In CSS brauche ich so so oder so einen Klassenselektor für die Unterliste.

Nicht unbedingt:

CSS für die Listenelemente der Hauptliste:

Code

nav>ul>li {
}

CSS für die Listenelemente der Unterliste:

Code

nav>ul>li>ul>li {
}

Verschachteln von Listen in HTML5?

Jetzt mitmachen!

Teilen

Tags