רשימות

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

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

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

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

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

רשימות לא ממוינות

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

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

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

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

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

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

כפי שמצוין בעט הקוד, המאפיין 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>הקודים שלפניו וסופרים לאחור את אלו הבאים אחריו. אם לפריט שני ברשימה יש מאפיין ערך, המונה יאופס באותו פריט שני ברשימה, והערך הבא יקטן באחד.

אפשר לשלוט בכל הפעולות האלה גם באמצעות מוני 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>

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

<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. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</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. מדובר בתכונה שאינה באג. בדרך כלל, לא מומלץ להוסיף את מאפיין התפקיד כשמשתמשים באלמנטים סמנטיים, כי הוא לא נחוץ. ובדרך כלל לא צריך להוסיף אחד לרשימה, אלא אם המשתמש באמת צריך לדעת שמדובר ברשימה, למשל מתי המשתמש ילמד כמה פריטים יש ברשימה.

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

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

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

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

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

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

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

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

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

בדיקת ההבנה

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