יצירת מבנה סמנטי

אנו מודים לאתר webaim.org שהרשה לנו לתרגם את המאמר "Creating Semantic Structure".
(copyrights 2012 – WebAIM)

תוכן המאמר:

טבעו של HTML
שימוש בכותרות להגדרת מבנה התוכן
שימוש נכון בכותרות
שימוש נכון ברשימות

טבעו של HTML

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

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

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

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

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

לדוגמה, רוב המעצבים הגרפיים נמנעים מלהשתמש בתגיות הסטנדרטיות לציון כותרות ב-HTML (תגיות <h1>, <h2> … <h6>) בשל היותן מוגזמות: ברוב הדפדפנים תגיות אלו גורמות לכותרות להיראות גדולות באופן אבסורדי (<h1>, <h2>) או קטנות באופן מגוכח (<h4>, <h5>, <h6>). אך תגיות הכותרת בשפת HTML מראש לא לקחו עיצוב גרפי בחשבון.

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

שימוש בכותרות להגדרת מבנה התוכן

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

לדוגמה:
בדקו את המבנה התוכן של עמודי האתר שלך על ידי כניסה לעמוד http://validator.w3.org/detailed.html. הזינו את כתובת העמוד לתיבת הטקסט, סמנו את תיבת הסימון ליד "Show Outline" ולחצו על כפתור "Validate this page". בינתיים התעלמו משגיאות HTML שעלו בדו"ח, וגללו את העמוד עד לחלקו התחתון, עד לכותרת " Document Outline". תחת כותרת זו תראו סיכום של מבנה התוכן של העמוד כפי שהוגדר באמצעות תגיות הכותרת (<h1>-<h6>). אם המבנה התוכן כפי השתקבל לא תואם את מבנה התוכן כפי שהוא אמור להיות, סביר להניח שאין שימוש נכון בתגיות הכותרת (או שאין שימוש בהן כלל).

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

מבנה העמודים צריך להיות היררכי, כאשר האלמנט המסומן כאלמנט הראשי ביותר (<h1>) הוא האלמנט החשוב בדף (בדרך כלל כותרת העמוד). לאחר מכן כותרות התוכן (<h2>) שהן לרוב כותרות מרכזיות במאמר. אחריהן כותרות ברמה היררכית שלישית (שהן תת כותרות של כותרות ברמה <h2>) וכך הלאה. מבחינה טכנית, כותרות משנה צריכות להיכלל תחת כותרת ראשית אחת מעליהן.

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

שימוש נכון בכותרות

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

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

למעשה, אם ברצונכם להדגיש משהו, טכנית יש להשתמש בתגית <strong> במקום בתגית <bold>, ובתגית <em> במקום בתגית <i>. התגיות <i> ו-<bold> נועדו למתן תוצאות ויזואליות בלבד, ואילו לתגיות <em> ו-<strong> משמעות סמנטית. מבחינה ויזואלית לתגית <b> ולתגית <strong>, כמו גם לתגית <i> ולתגית <em> אותו אפקט ויזואלי. מפתחים צריכים להתשמש בתגיות HTML באופן תקני ונכון. בתוכנת Dreamweaver למשל, תוכלו לבחור "Edit > Preferences > General" ולבחור " Use <strong> and <em> in place of <b> and <i>."

שימוש נכון ברשימות

רשימות HTML – <ol>, <ul> ו-<dl> מייצגות גם הן מידע על מבנה היררכיית התוכן. לכל אחת מתגיות אלו חוקים לגבי אופן השימוש בהן. תגית <ul> משמשת להגדרת רשימות שבהן אין חשיבות לסדר התוכן  (Unordered lists). תגית <ol> משמשת לסימון התקדמות או המשכיות (Ordered lists). תגית <dl> משמשת להצגת רשימת הגדרות בצורה מבנית (Definition lists).

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