תגיות ol, ul, li ויצירת רשימות

יצירת רשימות ב-HTML

רשימה היא אוסף של איברים. לדוגמה: רשימת קניות, רשימת מטלות, רשימת ערי בירה בעולם, רשימת מורשי כניסה למערכת וכיו"ב.

רשימה יכול להיות ממוספרת או לא ממוספרת.

"רשימה ממוספרת", נקראת גם Ordered List, היא רשימה שבה כל איבר מקבל מספר סידורי (האיבר הראשון 1, השני 2 וכן הלאה).

"רשימה לא ממוספרת", נקראת גם Unordered List, היא רשימה שבה כל האיברים מופיעים ללא כל מספר סידורי.

קיימת רשימה מסוג נוסף, המכונה "רשימת תיאורים", Description List, שכוללת מונחים ותאורים.

יצירת רשימה ממוספרת ב-HTML

רשימה ממוספרת יוצרים באמצעות התגית ol (קיצור של Ordered List). כל איבר ברשימה נעטף בתגית li (קיצור של List Item).

דוגמה:

<ol>
	<li>banana</li>
	<li>apple</li>
	<li>orange</li>
	<li>pear</li>
</ol>

בדוגמה זו יצרנו רשימה של פירות:

1. banana
2. apple
3. orange
4. pear

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

יצירת רשימה לא ממוספרת ב-HTML

רשימה לא ממוספרת יוצרים באמצעות התגית ul (קיצור של Unordered List). גם הפעם, כל איבר ברשימה נעטף בתגית li, בדיוק כמו שעשינו ברשימות ממוספרות.

דוגמה:

<ul>
	<li>football</li>
	<li>basketball</li>
	<li>hiking</li>
	<li>jogging</li>
</ul>

בדוגמה זו יצרנו רשימה של פעילויות ספורט:

• football
• basketball
• hiking
• jogging

באמצעות עיצוב עם CSS, ניתן לשנות את עיצוב הבולט המסמן את הרשימה מעיגול מלא לעיגול חלול, ריבוע או אפשרויות שונות נוספות.

יצירת רשימת הגדרות ב-HTML

רשימת תאורים יוצרים באמצעות התגית dl (קיצור של Description List).

רשימה זו יכולה לכלול מונח (term) אחד או יותר, כאשר לכל מונח ניתן להוסיף תאור (description) אחד או יותר.

מונחים נרשום באמצעות התגית dt, ואת התאורים נרשום באמצעות התגית dd.

דוגמה:

<dl>
	<dt>Spain</dt>
	<dt>Germany</dt>
	<dd>Berlin</dd>
	<dt>UK</dt>
	<dd>English</dd>
	<dd>London</dd>
	<dt>Israel</dt>
	<dd>Hebew</dd>
	<dd>Jerusalem</dd>
</dl>

בדוגמה זו יצרנו רשימת מדינות. לחלקן אין תאורים, לחלקן תאור אחד (עיר בירה) ולחלקן שני תאורים (שפה ועיר בירה).

Spain

Germany

Berlin

UK

English

London

Israel

Hebew

Jerusalem