רשימות לא סדורות: יותר מסתם תבליטים

מושג הרשימה

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

לא מנוצלות ומושמצות

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

המופרדות על ידי תגיות <hr /> או מקבצים של תגיות <a> המופרדים בעזרת תוחמים (delimiter) כמו | (בר אנכי) או • (;‎•). הסיבה העיקרית לכך היא כנראה המטען הסגנוני הכבד של CSS (ריפוד [padding], תבליטים וכו') המתלווה לאלמנט ה- <ul> . מנהלי אתרים רבים סבורים שקל יותר להחיל סגנונות על אלמנט נקי כמו <div> מאשר להסיר אותם מ- <ul> . הוסיפו לכך את היישום הלא עקבי של סגנונות ברירת המחדל על פני פלטפורמות דפדפנים שונות, והתוצאה היא בלגן די רציני.

למרבה המזל, ה-CSS הגורם לאלמנטים של רשימה להופיע בצורה כמעט זהה ברוב הדפדפנים הוויזואליים המודרניים, וגם להיות זהים ל- <div> <a>-ים או אפילו ל-<span>-ים פנימיים (inline), כבר זוכה בתמיכה נרחבת. ראו את סעיף הקריאה הנוספת המפנה לכמה אתרים המסבירים כיצד לעשות זאת.

 

יתרונות השימוש ברשימות לא סדורות

 

מובנות גם מחוץ להקשר

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

אולם כשמארגנים תוכן ברשימות, נוספת לו משמעות באמצעות סימני העריכה שלכם, ללא קשר לגיליון הסגנונות שלכם. התקני גלישה הסורקים רק את התוכן שלכם (ומתעלמים מה-CSS הוויזואלי), כמו דפדפני טקסט, דפדפני תִדבור (text-to-speech) ואפילו רובוטי חיפוש יכולים להבין את מבנה הרשימות שלכם ולהציג (או לפרש) אותו כפי שהוא.

 

מוסיפות שימושיוּת

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

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

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

 

זה דבר טוב

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

קריאה נוספת

• ה-Listamatic!, אוצר של סגנונות רשימות. ראו גם את המדריכים המעולים שלהם.
• הערותיו של אריק מאייר על דירוג (indentation) רשימות עקבי בפלטפורמות דפדפנים שונות, אוגוסט 2002.
• מאמר מפורט על אילוף רשימות מתוך A List Apart, ספטמבר 2002.
• רשימות במפרט HTML 4.01.

 

על ה"טיפים להבטחת איכות"

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

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

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

 

הוספת תגובה