רשימות

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

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

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

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

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

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

בחינת ההבנה

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