Symbole in HTML Aufzählungslisten formatieren

In HTML gibt es verschiedene Arten, Listen darzustellen. Zum einen kann man Listen nummerieren ( <ol> Tag), so dass die Listeneinträge mit Zahlen durchnummeriert werden. Zum anderen kann man eine einfache Aufzählung machen, welche vor jeden Listeneintrag ein Aufzählungssymbol einfügt( <ul> Tag).
Es gibt in HTML die Möglichkeit, das Symbol einer Aufzählungsliste zu ändern. Wie das geht, erfahren Sie hier.

Werbung

Neben den hier vorgestellten Möglichkeiten können Sie das Erscheinungsbild dieser “unordered lists” mittels CSS anpassen. Beim Einsatz von CSS bieten sich viele Möglichkeiten und Vorteile der Formatierung. Sehen Sie dazu meine Beitrage zum Thema CSS.

Unordered Lists werden in HTML mittels dem Tag <ul> ausgezeichnet. Die einzelnen Listeneinträge werden mit dem <li> Tag ausgezeichnet. Eine einfach Liste sieht also so aus:

<ul>
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

So sieht’s aus:

• Punkt 1
• Punkt 2
• Punkt 3

Ändern der Aufzählungszeichen

Es besteht die Möglichkeit, die Aufzählungszeichen zu ändern. Dazu stehen folgende Typen zur Verfügung: disc, circle und square.
Sie können einer Liste den Typ des Aufzählungszeichens im <ul>-Tag wie folgt zuweisen:

<!-- TYPE DISC -->
<ul type="disc">
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
</ul>

So sieht’s aus:

• Punkt 1
• Punkt 2
• Punkt 3

<!-- TYPE CIRCLE -->
<ul type="circle">
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

So sieht’s aus:

• Punkt 1
• Punkt 2
• Punkt 3

<!-- TYPE SQUARE -->
<ul type="square">
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

So sieht’s aus:

• Punkt 1
• Punkt 2
• Punkt 3

Sollen die einzelnen Aufzählungszeichen auch innerhalb einer Liste variieren, kann man diese auch im <li>-Tag auszeichnen.

<ul>
	<li type="disc">Disc</li>
	<li type="circle">Circle</li>
	<li type="square">Square</li>
</ul>

So sieht’s aus:

• Disc
• Circle
• Square

Für die Formatierung von HTML Elementen sollten Sie grundsätzlich die Verwendung von CSS in Erwägung ziehen. Sehen Sie dazu meine Beitrage zum Thema CSS.