HTML/רשימות

ל-HTML תווים מיוחדים להצגת רשימות במסמך. יש שלושה סוגי רשימות. רשימה עם נקודות, רשימה ממוספרת, ורשימת הגדרות.

שלושת סוגי הרשימות שנלמד (ul, ol, dl) הם אלמנטים מסוג גוש ולכן, למשל, אסור להם להיות צאצאים של p. לעומת זאת אין להם בעיה להיות צאצאים של body.

רשימה עם נקודות

את הרשימה יש ליצור עם האלמנט ul. (פירוש הקיצור unorderd list - רשימה לא ממוספרת). לאלמנט ul מותר שיהיו בנים רק מסוג אחד: אלמנטים מסוג li (פירוש הקיצור list item - פריט ברשימה). כל אלמנט li בתוך אלמנט ul הוא פריט ברשימה ויסומן בנקודה עגולה. חובה שיהיה לפחות פריט אחד ברשימה.

לדוגמה:

<ul>
    <li> פריט אחד </li>
    <li> פריט שני </li>
    <li> פריט שלישי </li>
</ul>

פלט:

• פריט אחד
• פריט שני
• פריט שלישי

בתוך ul יש רק פריטים מסוג li בתוך li ניתן לשים טקסט ואלמנטים רבים אחרים.

רשימה ממוספרת

את הרשימה יש ליצור עם האלמנט ol. (פירוש הקיצור orderd list - רשימה ממוספרת). לאלמנט ol מותר שיהיו בנים רק מסוג אחד: אלמנטים מסוג li (פירוש הקיצור list item - פריט ברשימה). כל אלמנט li בתוך אלמנט ol הוא פריט ברשימה ויסומן במספר עוקב לקודמו. חובה שיהיה לפחות פריט אחד ברשימה.

לדוגמה:

<ol>
    <li> פריט אחד </li>
    <li> פריט שני </li>
    <li> פריט שלישי </li>
</ol>

פלט:

1. פריט אחד
2. פריט שני
3. פריט שלישי

בתוך ol יש רק פריטים מסוג li! בתוך li ניתן לשים טקסט ואלמנטים רבים אחרים.

רשימת הגדרות

את הרשימה יש ליצור עם האלמנט dl. (פירוש הקיצור definition list - רשימת הגדרות). לאלמנט dl מותר שיהיו בנים משני סוגים: אלמנטים מסוג dt (פירוש הקיצור definition list: term - מונח ברשימת הגדרות) ואלמנטים מסוג dd (פירוש הקיצור definition list: definition - הגדרה ברשימת הגדרות). לרוב הם יופיעו בזוגות. קודם dt עם המונח, ואחר-כך dd עם ההגדרה שלו. לדוגמה:

<dl>
    <dt> HTML </dt>
    <dd> פורמט ליצירת דפי אינטרנט </dd>

    <dt> CSS </dt>
    <dd> פורמט לעיצוב דפי HTML </dd>

    <dt> Javascript </dt>
    <dd> שפת תסריטים להעשרת דפי אינטרנט </dd>
</dl>

פלט:

HTML

פורמט ליצירת דפי אינטרנט

CSS

פורמט לעיצוב דפי HTML

Javascript

שפת תסריטים להעשרת דפי אינטרנט

• בתוך dl יש רק פריטים מסוג dt ו- dd! בתוכם ניתן לשים טקסט ואלמנטים רבים אחרים.
• ל-dd מותר שיהיו בנים מרוב הסוגים. ל-dt לעומת זאת מותר להכיל רק אלמנטים מסוג שורה.

רשימה בתוך רשימה

ניתן להכניס רשימה בתוך רשימה. הכלל הוא כזה: בתוך li ו- dd מותר לשים תת-רשימות מסוג ul, ol או dl. אסור לשים רשימה כצאצא ישיר של רשימה אחרת, אלא כצאצא ישיר של פריט ברשימה (li ו- dd). ב-dt אסור להכניס עוד רשימות.

דוגמה 1:

<ul>
  <li> פריט אחד </li>
  <li> פריט שני
      <ul>
        <li> תת-פריט ראשון </li>
        <li> תת-פריט שני
             <ol>
               <li> ממוספר 1 </li>
               <li> ממוספר 2 
                    <ol>
                      <li> תת-ממוספר 1 </li>
                      <li> תת-ממוספר 2 </li>
                    </ol>
               </li>
               <li> ממוספר 3 </li>
             </ol>
        </li>
        <li> תת-פריט שלישי </li>
        <li> תת-פריט רביעי </li>
     </ul>
  </li>
  <li> פריט שלישי </li>
</ul>

פלט:

• פריט אחד
• פריט שני
  • תת-פריט ראשון
  • תת-פריט שני
    1. ממוספר 1
    2. ממוספר 2
       1. תת-ממוספר 1
       2. תת-ממוספר 2
    3. ממוספר 3
  • תת-פריט שלישי
  • תת-פריט רביעי
• פריט שלישי

מפרטים

• ul
• ol
• li
• dl
• dd
• dt

ניווט

הפרק הקודם: התגית marquee

רשימות תרגילים

הפרק הבא: טבלאות פשוטות