עיצוב רשימות מדורגות .

התג <ul> מציין תחילת רשימה מדורגת .

התג <li> מציין תחילת אלמנט ברשימה .

התג </ul> מציין סוף רשימה .

התג <ul> יוצר רשימה מדרגית , ובנוסף לכך יוצר אחידות בשוליים .כל רשימה מתחילה עם התג <ul> ומסיימת עם </ul> . בתוך הרשימה כל אלמנט מתחיל עם <li> .

הקוד הפשוט ליצירת רשימה מדרגית יראה כך :

<p>Animals That Make Poor Office Pets:
<ul>
<li> Chickens
<li> Llamas
<li> Pigs
</ul>

ובדפדפן זה יראה כך :

Animals That Make Poor Office Pets:

• Chickens
• Llamas
• Pigs

ניתן גם להכניס רשימה בתוך רשימה . יש לזכור לסגור עם התג </ul> , לדוגמא :

<p>Animals That Make Poor Office Pets:
<ul>
<li>Chickens
<ul>
<li>difficult to house train
<li>lay eggs in weird places
</ul>

<li>Llamas
<ul>
<li>always spitting
<li>can't sit in your lap while you work
</ul>

<li>Pigs
<ul>
<li>can up-end a desk with a toss of the head
<li>need office mudhole (maybe that's a plus?)
</ul></ul>

ובדפדפן זה יראה כך :

Animals That Make Poor Office Pets:

• Chickens
  • difficult to house train
  • lay eggs in weird places
• Llamas
  • always spitting
  • can't sit in your lap while you work
• Pigs
  • can up-end a desk with a toss of the head
  • need office mudhole (maybe that's a plus?)

כפי שציינו מקודם תג <ul> שומר גם על שוליים שמאליים .

במידה ונכתוב את הקוד הבא :

<ul>Mona Lisa smiles
<p>
<ul><ul>and walks away.
<p>
</ul></ul></ul>Think about the words you meant to say.

נקבל :

Mona Lisa smiles
and walks away.

צריך לשים לב שמספר תגי <ul> שולבו בקטע ויצרו שוליים בתוך השוליים המקוריים .יש לזכור לסיים עם התג </ul> .

נטסקייפ יצרה תגים מיוחדים שמאפשרים לשנות את הצורה של התבליטים שמופיעים בראש כל שורה . חשוב לציין שהדף לא ייהרס במידה ומשתמשים בדפדפן שלא תומך בתגים מסוימים , אלא הוא פשוט לא יציג אותם .

האופציות לתבליטים בנטסקייפ הם :

• <li type=disc>
• <li type=circle>
• <li type=square>