HTML/Textstrukturierung/ul

Aus SELFHTML-Wiki
< HTML | Textstrukturierung(Weitergeleitet von Ul)
Wechseln zu: Navigation, Suche

Das Element ul beschreibt eine Aufzählungsliste, also eine Liste, bei der die Reihenfolge der Elemente nur eine untergeordnete oder keine Rolle spielt. ul steht dabei für unordered list, ungeordnete, unsortierte Liste.

Aufzählungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden die Listeneinträge von grafischen Browsern standardmäßig mit einem Aufzählungszeichen (Bullet) versehen. Aufzählungslisten eignen sich sehr gut, um Navigationsleisten in Webseiten zu strukturieren.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Aufzählungslisten definieren</title> </head> <body> <h1>Liste wichtiger Reime</h1> <ul> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante fällt über Kante</li> </ul> </body> </html>
<ul> leitet eine Aufzählungsliste ein. Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag, </ul> die Liste. Wie das Aufzählungszeichen (Bullet) dargestellt wird, bestimmt dabei der Web-Browser. Dessen Darstellung kann jedoch mit CSS (list-style-type) beeinflusst werden.

Das Verschachteln von Listen ist ebenfalls möglich. Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt.

Beispiel ansehen …
<!doctype html"> <html> <head> <meta charset="utf-8"> <title>Verschachtelte Listen</title> </head> <body> <h1>Dies und das im Web</h1> <ul> <li>Suchmaschinen <ul> <li>Google</li> <li>Bing</li> <li>Ask.com</li> </ul> </li> <li>Verzeichnisse <ul> <li>Yahoo</li> <li>Web.de</li> <li>DMOZ</li> </ul> </li> <li>Was anderes</li> <li>Noch was anderes</li> </ul> </body> </html>
Nach dem Text „Suchmaschinen“ sowie „Verzeichnisse“ wird das begonnene  <li>  zunächst nicht geschlossen. Stattdessen folgen unmittelbar die inneren Listen (grün dargestellt). Erst danach kommt das schließende  </ul> .

[Bearbeiten] Listen mit CSS formatieren

Wie eine Liste genau dargestellt wird, können Sie mit HTML nicht beeinflussen. Die Browser benutzen Default-Formatierungen, um Listen darzustellen. Mit Stylesheets (CSS) können Sie ganze Listen und ihre Listenpunkte jedoch nach Wunsch formatieren.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Maßgeblich sind im hier beschriebenen Zusammenhang die CSS-Eigenschaften zur:

und auch die allgemeinen Eigenschaften:

Beispiel ansehen …
<!doctype hmtl> <html> <head> <meta charset="utf-8"> <title>Listen mit CSS formatieren</title> <style> ul { list-style-type: disc; color: red; font-weight: bold; } ol { list-style-type: upper-roman; font-weight: bold; } ol > li:first-child { color: blue; } ol > li:nth-child(2) { color: maroon; } ol > li:nth-child(3) { color: olive; } dl { font-size: 0.7em ; font-family: Verdana,Arial,sans-serif; } </style> </head> <body> <h1>Listen mit CSS formatieren</h1> <h2>Aufzählungsliste</h2> <ul> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante fällt über Kante</li> </ul> <h2>Nummerierte Liste</h2> <ol> <li>bei Anette vorbeischauen</li> <li>bei Bianca vorbeischauen</li> <li>bei Christine vorbeischauen</li> </ol> <h2>Definitions- bzw. Beschreibungsliste</h2> <dl> <dt>AA</dt> <dd>Auto Answer (Modem)</dd> <dt>AAE</dt> <dd>Allgemeine Anschalte-Erlaubnis</dd> <dt>AARP</dt> <dd>Appletalk Address Resolution Protocol</dd> </dl> </body> </html>
Im Beispiel wird für eine Aufzählungsliste (<ul>…</ul>) bestimmt, dass sie ein Disk-Symbol als Bullet-Zeichen erhält, fett und in roter Farbe erscheint. Für eine nummerierte Liste (<ol>…</ol>) wird bestimmt, dass sie in römischen großen Ziffern zählt, und dass ihre Einträge fett dargestellt werden. Ihre einzelnen Listenpunkte werden zudem in unterschiedlichen Farben dargestellt. Für eine Definitionsliste (<dl>…</dl>) wird eine kleinere Schriftgröße als normal und eine Schriftart festgelegt.

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML