רשימות

bookmark_border קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

יש כמה דרכים שונות לסמן רשימות ב-HTML. יש רשימות ממוספרות (<ol>), רשימות עם תבליטים (<ul>) ורשימות תיאור (<dl>). פריטים ברשימות (<li>) מוטמעים ברשימות ממוספרות וברשימות עם תבליטים. ברשימת תיאורים מופיעים מונחי תיאור (<dt>) ופרטי תיאור <dd>.. כל המונחים והפרטים האלה מוסברים כאן.

בטפסים ב-HTML, רשימות של רכיבי <option> מרכיבות את התוכן של <datalist> <select> ושל <optgroup> בתוך <select>. הסוגים האלה מוסברים במאמר בנושא טופסי HTML.

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

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

רשימות לא ממוספרות

התג <ul> הוא תג האב של רשימות לא מסודרות של פריטים. הצאצאים היחידים של <ul> הם רכיבי <li> list item אחד או יותר. אפשר ליצור רשימה של מכונות. אנחנו משתמשים ברשימה לא מסודרת כי הסדר לא משנה (אל תספרו להם את זה):

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

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

הרכיב <ol> הוא רכיב ההורה של רשימות פריטים מסודרות. הצאצאים היחידים של <ol> הם רכיב <li> אחד או יותר, או פריטים ברשימה. אבל במקרה הזה, ה'תבליטים' הם מספרים מסוגים שונים. אפשר להגדיר את הסוג ב-CSS באמצעות המאפיין list-style-type או באמצעות המאפיין type.

למאפיין <ol> יש שלושה מאפיינים ספציפיים לרכיב: type,‏ reversed ו-start.

המאפיין type עם הערכים המוגדרים מראש קובע את סוג המספור. יש חמישה ערכים תקינים ל-type. ערך ברירת המחדל הוא 1 למספרים, אבל אפשר להשתמש גם ב-a,‏ A,‏ i או I לאותיות קטנות וגדולות או לספרות רומיות. המאפיין list-style-type מספק הרבה יותר ערכים.

כמו שצוין ב-codepen, המאפיין list-style-type מבטל את הערך של המאפיין type. עם זאת, כשכותבים מסמכים שבהם הסוג המספרי חשוב, כמו מסמכים משפטיים, צריך לכלול את type.

אם כוללים את מאפיין הערך הבוליאני reversed, סדר המספרים מתהפך, מהמספר הגדול ביותר למספר הנמוך ביותר. המאפיין start מגדיר את ערך ההתחלה. ערך ברירת המחדל הוא 1.

בדומה ל-</ul>, חובה להשתמש בתג הסגירה </ol>.

אפשר להוסיף רשימות בתוך רשימות, אבל הן צריכות להיות בתוך פריט ברשימה. חשוב לזכור שהרכיב היחיד שיכול להיות צאצא של <ul> או <ol> הוא רכיב <li> אחד או יותר.

פריטים ברשימה

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

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

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

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

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

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

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

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

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

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

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

גם קינון רשימות בתוך רשימות הוא דבר נפוץ מאוד. באתר MLW אין רשימות מקוננות, אבל באתר הזה יש. במודול הראשון בסדרה הזו, מבוא ל-HTML, יש שני תתי-סעיפים בקטע על הרכיבים העיקריים. בתוכן העניינים, שהוא רשימה לא מסודרת, יש רשימה לא מסודרת מוטמעת עם קישורים לשני הקטעים האלה:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

מכיוון ש-<ul> הוא צאצא יחיד של <li>, רשימה מקוננת נמצאת בתוך <li>, אף פעם לא ישירות בתוך <ol> או <ul>.

בדוגמה האחרונה, אפשר לראות ש-role="list" נכלל ב-<ul>. למרות שהתפקיד המרומז של התגים <ul> ו-<ol> הוא list, הסרת המראה של הרשימה באמצעות CSS, כולל הגדרת display: grid או list-style-type: none, עלולה לגרום ל-VoiceOver (קורא המסך של iOS ו-MacOS) להסיר את הסמנטיקה המרומזת ב-Safari. זו תכונה ולא באג. בדרך כלל לא מומלץ להוסיף את מאפיין התפקיד כשמשתמשים ברכיבים סמנטיים, כי זה לא נחוץ. בדרך כלל גם לא צריך להוסיף אותה לרשימה, אלא אם המשתמש צריך לדעת שזו רשימה, למשל אם הוא ירוויח מזה שהוא יידע כמה פריטים יש ברשימה.

רשימות תיאורים

רשימת תיאורים היא רכיב description list ‏ (<dl>) שמכיל סדרה של (אפס או יותר) description terms ‏ (<dt>) וdescription details ‏ (<dd>). השמות המקוריים של שלושת הרכיבים האלה היו definition list,‏ definition term ו-definition definition. השם השתנה בתקן החיים.

בדומה לרשימות מסודרות ולרשימות לא מסודרות, אפשר ליצור רשימות מקוננות. בניגוד לרשימות מסודרות ולרשימות לא מסודרות, הן מורכבות מצמדי מפתח/ערך. בדומה ל-<ul> ול-<ol>, ‏ <dl> הוא מאגר האב. הרכיבים <dt> ו-<dd> הם צאצאים של <dl>.

אנחנו יכולים ליצור רשימה של מכונות עם היסטוריית הקריירה והשאיפות שלהן. רשימת תיאורים של תלמידים, שמסומנת באמצעות התג <dl>, כוללת קבוצה של מונחים שמוגדרים באמצעות התג <dt>, יחד עם תיאור של כל מונח שמוגדר באמצעות התגים <dd>. במקרה הזה, ה'מונחים' הם שמות התלמידים והתיאורים הם היעדים המקצועיים של כל תלמיד.

רשימת התיאורים הזו לא באמת חלק מדף ה-MLW. רשימות תיאור לא מיועדות רק למונחים ולהגדרות, ולכן השמות של הרכיבים הכלליים יותר.

כשיוצרים רשימה של מונחים וההגדרות או התיאורים שלהם, או רשימות דומות של צמדי מפתח/ערך, רכיבי רשימת התיאורים מספקים את הסמנטיקה המתאימה. התפקיד המרומז של <dt> הוא term, כאשר listitem הוא תפקיד מותר אחר. התפקיד המשתמע של <dd> הוא definition, ואין הרשאות לתפקידים אחרים. בניגוד ל-<ul> ול-<ol>, ל-<dl> אין תפקיד ARIA מרומז. זה הגיוני כי <dl> לא תמיד רשימה. אבל אם כן, הוא מקבל את התפקידים list ו-group.

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

לכל <dt> יש לפחות <dd> אחד משויך, ולכל <dd> יש לפחות <dt> אחד משויך. אפשר להשתמש ב-CSS כדי להגדיר מספר משתנה של רכיבים כאלה באמצעות הקומבינטור של אחים סמוכים או :has() סלקטור יחסי. אם צריך, אפשר לכלול את התג <div> כצאצא של <dl>, ואת התג <dl> כהורה של רכיב אחד או יותר מסוג <dt> או <dd> (או שניהם). אפשר להוסיף ל-<dl> עוד כמה ילדים: מותר להוסיף <div>, <template> או <script>. לאף אחד מהרכיבים של רשימת התיאורים אין מאפיינים ספציפיים לרכיב.

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

בדיקת ההבנה

בודקים את הידע שלכם לגבי רשימות.