תיעוד HTML עם דוגמאות להרצה: רשימות

Q: איך יוצרים תבליטים ב-HTML?

משתמשים ברשימה לא ממוספרת: עם אחד לכל תבליט, למשל Milk Eggs . הדפדפן מצייר תבליט לפני כל פריט ומזיח את הרשימה.

Q: איך מסירים את התבליטים מרשימה ב-HTML?

הגדירו list-style: none על ה- ב-CSS. הגדירו גם padding-inline-start: 0 (או padding: 0) כדי להסיר את ההזחה שהדפדפן מוסיף בשביל התבליטים.

Q: איך מתחילים רשימה ממוספרת ממספר אחר?

משתמשים במאפיין start: ממספר את הפריט הראשון 5. reversed סופר לאחור במקום, ו-value על קובע את המספר של הפריט הזה ושל אלה שאחריו.

Q: איך יוצרים רשימה מקוננת ב-HTML?

שימו את ה- או ה- הפנימי בתוך של הרשימה החיצונית, אחרי הטקסט של אותו פריט. רשימה שמונחת ישירות בתוך אחר, בין אלמנטי , אינה תקינה.

רשימות ב-HTML: ul, ol ו-li

ל-HTML יש שתי רשימות עיקריות. <ul> (unordered list, רשימה לא ממוספרת) מציגה תבליטים, ו-<ol> (ordered list, רשימה ממוספרת) מציגה מספרים. כל פריט הוא <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

השתמשו ב-<ol> כשלסדר יש משמעות (שלבים, דירוגים, תוכן עניינים) וב-<ul> כשאין. קוראי מסך מכריזים על שתיהן כרשימות עם מספר הפריטים, למשל "list, 3 items", ולכן רשימה אמיתית עדיפה על שורות שמתחילות ב-"•" או ב-"1." שהוקלדו ידנית.

רשימה יכולה להכיל ישירות רק אלמנטי <li>. כל השאר, כולל כותרות, פסקאות ורשימות אחרות, נכנס לתוך <li>.

סגנונות תבליטים

list-style-type על ה-<ul> משנה את התבליט. הפסאודו-אלמנט ::marker מעצב את התבליט או המספר עצמו, בנפרד מהטקסט:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

ערך מסוג מחרוזת משתמש בטקסט הזה כתבליט. "\2713 " הוא סימן וי ואחריו רווח אחד: הרווח הראשון רק מסיים את ה-escape \2713. ::marker מקבל רק מאפיינים מעטים, בעיקר color, font-size ומאפייני גופן אחרים, וזה מכסה את הבקשה הנפוצה ל"תבליטים צבעוניים" בלי קוד נוסף.

רשימות ממוספרות: מספרים, אותיות וספרות רומיות

ל-<ol> יש מאפיינים למספור שלה:

מאפיין	דוגמה	תוצאה
`type`	`type="a"`	a, b, c (גם `A`, `i`, `I` ו-`1` עובדים)
`start`	`start="5"`	מתחיל לספור מ-5
`reversed`	`reversed`	סופר לאחור
`value` (על `<li>`)	`<li value="10">`	הפריט הזה הוא 10, והבאים ממשיכים משם

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type בסדר גמור ב-HTML כי לאותיות יכולה להיות משמעות ("בחרו באפשרות B"). לשינויים חזותיים בלבד, list-style-type: upper-alpha או lower-roman ב-CSS עושים את אותו הדבר.

רשימות מקוננות

תת-רשימה נכנסת לתוך ה-<li> שהיא שייכת אליו, אחרי הטקסט של הפריט. דפדפנים משנים את התבליט בכל רמה: עיגול מלא, אחר כך עיגול ריק, ואחר כך ריבוע.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

שימו לב איפה נמצא </li>: הפריט "Frontend" נסגר רק אחרי תת-הרשימה שלו. סגירה שלו לפני ה-<ul> שמה את תת-הרשימה ישירות בתוך ה-<ul> החיצוני, וזה לא תקין גם אם זה נראה כמעט אותו דבר.

אפשר לקנן גם רשימות ממוספרות באותה דרך, והמספור מתחיל מחדש מ-1 בכל תת-רשימה. למספרים כמו 1.1 ו-1.2 צריך מוני CSS.

רשימות הגדרה: dl, dt ו-dd

רשימת הגדרה מצמידה מונחים לתיאורים שלהם: מילון מונחים, פרטי הזמנה, זוגות בסגנון שאלות ותשובות. <dt> הוא המונח ו-<dd> התיאור:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

למונח יכולים להיות כמה <dd>, וכמה <dt> יכולים לחלוק <dd> אחד. דפדפנים מזיחים את <dd> כברירת מחדל; כלל ה-margin שלמעלה מסיר את ההזחה. לנתונים עם כמה עמודות, טבלה מתאימה יותר.

רשימות בלי תבליטים: תפריטים ורשימות אופקיות

תפריטי ניווט הם רשימות של קישורים. הסירו את התבליטים עם list-style: none ואת ההזחה עם padding: 0, ואז סדרו את הפריטים בשורה עם flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

בעיני קוראי מסך הרשימה עדיין רשימה ("navigation, list, 3 items"). חריג אחד: Safari עם VoiceOver עלול לאבד את משמעות הרשימה כשהתבליטים מוסרים. אם מספר הפריטים חשוב למשתמשים שלכם, הוסיפו role="list" ל-<ul>.

ריווח ברירת מחדל

דפדפנים נותנים לרשימות margin עליון ותחתון של 1em ומזיחים אותן עם padding-inline-start: 40px, ושם יושבים התבליטים. ה-padding נמצא בצד ההתחלה, כך שבשפות מימין לשמאל התבליטים וההזחה עוברים לצד השני אוטומטית. הסירו את ה-padding והתבליטים יוצאים מחוץ לתיבת הרשימה, שם הם עלולים להיחתך; השאירו מעט padding או השתמשו ב-list-style-position: inside.

טעויות נפוצות

<li> בלי רשימת אב. הוא חייב להיות בתוך <ul>, <ol> או <menu>.
רשימה מקוננת מחוץ ל-<li> שלה. שימו את תת-הרשימה בתוך הפריט שהיא שייכת אליו.
טקסט או תגיות אחרות ישירות בתוך <ul>, כמו <ul><p>Note</p><li>...</li></ul>. העבירו אותם לתוך <li> או אל מחוץ לרשימה.
הקלדת תבליטים או מספרים ידנית עם • ו-<br>. קוראי מסך שומעים פסקה, לא רשימה.
list-style: none בלי padding: 0, מה שמשאיר הזחה מסתורית של 40 פיקסלים.
שימוש ב-<ol> בשביל המראה. אם הסדר לא משנה, השתמשו ב-<ul> ועצבו אותו.

שאלות נפוצות

איך יוצרים תבליטים ב-HTML?

משתמשים ברשימה לא ממוספרת: <ul> עם <li> אחד לכל תבליט, למשל <ul><li>Milk</li><li>Eggs</li></ul>. הדפדפן מצייר תבליט לפני כל פריט ומזיח את הרשימה.

מה ההבדל בין ul ל-ol?

<ul> היא רשימה לא ממוספרת, שמוצגת עם תבליטים, לפריטים שהסדר שלהם לא משנה. <ol> היא רשימה ממוספרת, שמוצגת עם מספרים, לשלבים ולדירוגים שבהם הסדר כן משנה. שתיהן מכילות פריטי <li>.

איך מסירים את התבליטים מרשימה ב-HTML?

הגדירו list-style: none על ה-<ul> ב-CSS. הגדירו גם padding-inline-start: 0 (או padding: 0) כדי להסיר את ההזחה שהדפדפן מוסיף בשביל התבליטים.

איך מתחילים רשימה ממוספרת ממספר אחר?

משתמשים במאפיין start: <ol start="5"> ממספר את הפריט הראשון 5. reversed סופר לאחור במקום, ו-value על <li> קובע את המספר של הפריט הזה ושל אלה שאחריו.

איך יוצרים רשימה מקוננת ב-HTML?

שימו את ה-<ul> או ה-<ol> הפנימי בתוך <li> של הרשימה החיצונית, אחרי הטקסט של אותו פריט. רשימה שמונחת ישירות בתוך <ul> אחר, בין אלמנטי <li>, אינה תקינה.

מושגים קשורים