Verschachtelte Listen im HTML


HTML-Webseite und die Verschachtelte Listen


Was passiert nun, wenn Sie eine Liste in eine andere Liste setzen? Das geht in Ordnung, soweit es HTML betrifft; fügen Sie einfach die komplette Listenstruktur als einen Eintrag in eine andere Liste ein. Die eingefügte Liste wird einfach zu einem weiteren Element der anderen Liste und vom Rest dieser Liste eingerückt abgesetzt. Derartige Listen eignen sich besonders gut für Menüartige Einträge, bei denen eine Hierarchie abgebildet werden soll (beispielsweise in Inhaltsverzeichnissen), oder bei Entwürfen.


Das Einrücken von verschachtelten Listen im HTML-Code zeigt, wie sie sich im endgültigen Layout verhalten:


<ol>
	<ul>
		<li>WWW</li>
		<li>Organization</li>
		<li>Beginning HTML</li>
		<ul>
			<li>What HTML is</li>
			<li>How to Write HTML</li>
			<li>Doc structure</li>
			<li>Headings</li>
			<li>Paragraphs</li>
			<li>Comments</li>
		</ul>
	</ul>
	<li>Links</li>
	<li>More HTML</li>
</ol>


Verschachtelte Listen im HTML
Verschachtelte Listen im HTML

Manche Browser formatieren verschachtelte geordnete und ungeordnete Listen abweichend von der sie umschließenden Liste; beispielsweise könnten sie ein anderes Symbol und nicht den Punkt für eine verschachtelte Liste verwenden oder die umschließende Liste mit Buchstaben anstelle von Zahlen nummerieren. Gehen Sie aber nicht davon aus, sondern beziehen Sie sich in Ihrem Text auf »Absatz 8, Abschnitt b«, da Sie nicht sicher sein können, wie die genaue Formatierung in der endgültigen Darstellung aussehen wird.


Das folgende Beispiel zeigt, wie eine verschachtelte Liste im Safari (Abbildung) dargestellt wird:


<h1>
	Peppers
</h1>
<ul>
	<li>Bell</li>
	<li>Chile</li>
	<ul>
		<li>Serrano</li>
		<li>Jalapeno</li>
		<li>Habanero</li>
		<li>Anaheim</li>
	</ul>
	<li>Szechuan</li>
	<li>Cayenne</li>
</ul>


Verschachtelte Listen im HTML
Verschachtelte Listen im HTML

Kontakt

Email: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Tel : 038305 / 529 799
Erstellt mit HTML5 und CSS3 - © 2021  HTML Lernen