טכניקה 1: מבנה המסמך ומטא-דאטה
מפתחי תוכן צריכים להשתמש בסימונים מבניים בצורה נכונה. תכונות ואלמנטים מבניים (ראה תכונות ואלמנטי אינדקס של HTML) מעלים את רמת העקביות במסמך ומספקים מידע על כלים אחרים (לדוגמה, כלי אינדקס, מנועי חיפוש, תוכניות המציגות טבלאות למבני נתונים, כלי ניווט המשתמשים באלמנטי כותרות ותוכנות תרגום אוטומאטיות המתרגמות משפה אחת לשניה).
1.1 מידע על המסמך (metadata)
-
13.2 השתמשו ב- metadata ע"מ להוסיף אינפורמציה סמנטית לדפים ואתרים. [עדיפות 2]
ישנם אלמנטים מבניים המספקים מידע על המסמך עצמו. דבר זה נקרא "metadata" על המסמך, "metadata" = מידע על הנתונים (data). כאשר metadata מאורגן היטב, הוא יכול לתת מידע חשוב על מטרתו וכיוונו של המסמך. אלמנטי HTML המספקים מידע שימושי על מסמך כוללים:
1.1.1 TITLE כותרת המסמך
האלמנט TITLE הבסיסי המופיע פעם אחת בלבד במסמך, בשונה מהתכונה "title" המיושמת כמעט בכל אלמנט HTML 4.01. מפתחי תוכן צריכים להשתמש בתכונה "title" בהתאמה למפרט של HTML 4.01. לדוגמה צריך להשתמש ב- "title" בקישורים כדי לתת מידע על מטרת הקישור.
1.1.2 אלמנט כתובת ADRESS
אלמנט זה יכול לספק מידע על היוצר של הדף.
1.1.3 אלמנט META
-
7.4 עד שסוכני המשתמש יאפשרו למשתמשים לעצור את העדכון (refresh), אין ליצור דפים שמעדכנים את עצמם בפרקי זמן קבועים. [עדיפות 2]
-
7.5 עד שסוכני המשתמש יאפשרו לעצור הפניה אוטומטית, אל תשתמשו בסימונים על מנת להפנות דפים אוטומטית, אלא בקשו מהשרת לבצע את ההפניות. [עדיפות 2]
אלמנט זה יכול לפרט metadata למסמך, כולל מילות מפתח ומידע על המחבר. (נא ראה התייחסות לעדכון דפים אוטומאטית כדי לדעת מדוע לא כדאי להשתמש ב-META לעדכון רגיל ואוטומאטי לדפים).
הדוגמאות הבאות הם דוגמאות HTML שליליות. הראשונה מתקדמת בדף משתמש במרווחים קבועים. למפתחי תוכן אסור להתשמש בטכניקה הזו כדי לדמות את טכנולוגית ה-"Push". המפתחים אינם יכולים לחזות לכמה זמן זקוק המשתמש בכדי לקרוא את הדף. כנ"ל עדכון מוקדם יכול לבלבל את המשתמשים. מפתחי התוכן צריכים לאשפר למשתמשים לבחור מתי הם רוצים את המידע המעודכן ביותר.
דוגמא שגויה:
<META http-equiv="refresh" content="60">
<BODY>
<P>...Information...
</BODY>
דוגמת HTML הבאה (משתמשת באלמנט META) מקדמת את המשתמש מדף אחד למישנהו לאחר פסק זמן. סימון כזה אינו כדאי מאחר והוא לא סטנדרטי, מבלבל משתמשים ויכול לשבש את היסטורית ביקור הדפים של הדפדפן.
דוגמא שגויה:
<HEAD>
<TITLE>Don't use this!</TITLE>
<META http-equiv="refresh" content="5;
http://www.example.com/newpage">
</HEAD>
<BODY>
<P>If your browser supports Refresh,
you'll be transported to our
<A href="http://www.example.com/newpage">new site</A>
in 5 seconds, otherwise, select the link manually.
</BODY>
1.1.4 הצהרת DOCTYPE!
-
3.2 השתמשו בדקדוק נכון. [עדיפות 2]
דקדוק מעודכן והצהרה על כך בתחילת המסמך מאפשר למשתמש לדעת באופן די ברור את מבנה המסמך. זה מאפשר גם לסוכני המשתמש לדעת היכן לחפש משמעויות סמנטיות (אם זה נצרך). שירות התיקוף של W3C בודק את תקיפות המסמך לפי רשימת הדקדוק המפורסמת.
1.1.5 האלמנט LINK וכלי ניווט
-
13.9 ספקו אינפורמציה על קבצי מסמכים (כלומר מסמכים המכילים מספר דפים). [עדיפות 3]
מפתחי תוכן צריכים להשתמש באלמנט LINK וב- types של קישורים בכדי לתאר את אופן הניווט במסמך וארגונו. מספר סוכני משתמש יכולים ליצור כלי ניווט או לאפשר הדפסה לפי סדר של קבוצת מסמכים במבוססת על סימונים מסוימים (כפי שבדוגמה).
אלמנטי ה-LINK הבאים יכולים להיכלל בראש פרק 2 של ספר:
<LINK rel="Next" href="chapter3">
<LINK rel="Prev" href="chapter1">
<LINK rel="Start" href="cover">
<LINK rel="Glossary" href="glossary">
1.1.6 האלמנט LINK ומסמכים אלטרנטיביים
-
6.5 הבטיחו שהתוכן הדינמי יהיה נגיש או ספקו הצגה חלופית לדף. [עדיפות 2]
האלמנט LINK יכול להיות מיועד גם למסמכים אלטרנטיביים. דפדפנים צריכים לטעון דפים אלטרנטיביים אוטומאטית באופן המבוסס על סוג דפדפן המשתמש והעדפותיו. לדוגמה, השתמש האלמנט KINK כפי שמוצג בדוגמא הבאה. סוכן משתמש התומך ב-LINK יטען את הדפים האלטרנטיביים לאותם המשתמשים שהדפדפן שלהם תומך בשיטת תרגומים "aural","braille" או "tty".
<HEAD>
<TITLE>Welcome to the Virtual Mall!</TITLE>
<LINK title="Text-only version"
rel="alternate"
href="text_only"
media="aural, braille, tty">
</HEAD>
<BODY><P>...</BODY>
1.2 קיבוץ מבני
-
12.3 כאשר ישנם פרקי מידע גדולים, פרקו אותם לחלקים קטנים יותר במקומות המתאימים. [עדיפות 2]
המנגונונים הבאים של HTML 4.01 מקבצים תוכן וגורמים לתוכן להיות מובן יותר:
- השתמש ב- FIELDSET כדי לקבץ שליטה בטפסים לתוך יחידות סמנטיות ולתאר את הקבוצה עם האלמנט LEGEND.
- השתמש ב- OPTGROUP לארגון רשימות ארוכות של אופציית תפריטים לקבוצות קטנות.
- השתמש בטבלאות לנתונים המיועדים לכך ותאר את הטבלה עם CAPTION.
- קבץ את העמודות והשורות של הטבלה עם TBODY ,TFOOT, COLGROUP.
- רשימות מקוננות עם DL, OL, UL.
- השתמש בפרק הכותרות (H1-H6) כדי ליצור מסמכים מבניים וחתוך קטעי טקסט ארוכים. ראה את הפרקים הבאים למידע נוסף.
- חתוך שורות טקסט לפסקאות (עם האלמנט P).
- תן קישורים הקשורים בנושא בקבוצה. ראה הפרק על קיבוץ ועקיפת קישורים.
כל מכניזמי הקיבוץ שהזכרנו מיועדים לשימוש רק כאשר זה מתאים וטבעי. כלומר כאשר המידע נוטה בעצמו לקבוצות לוגיות. קיבוץ רנדומלי יכול רק לבלבל את המשתמשים.
1.2.1 כותרות פרקים
-
3.5 השתמשו באלמנט ה- header על מנת להעביר את מבנה המסמך, והשתמשו בו בצורה נכונה. [עדיפות 2]
מסמכים ארוכים לפעמים מחולקים למספר פרקים, לפרקים יש תתי-נושאים, ותתי הנושאים מחולקים למספר קטעים המחולקים למספר פסקאות, וכן הלאה. ההבדלים הסמנטים האלו במסמך יוצרים את מבנהו.
קטעים אלו צריכים להופיע עם אלמנטי הכותרות של HTML (H1-H6). סימונים אחרים יכולים להשלים את האלמנטים האלו ע"י שיפור התצוגה (לדוגמא. אלמנט HR ליצירת קו מקוטע אופקי), אבל הצגה ויזואלית אינה מספקת לזיהוי קטע מסמך.
מאחר וישנם משתמשים המרפרפים על מסמך לפי הכותרות, חשוב להשתמש בהם נכון כדי להעביר את מבנה המסמך. לדוגמא, ב-HTML אלמנט H2 צריך לבוא לאחר אלמנט H1, וכן H3 לאחר H2 וכן הלאה. מפתחי תוכן צריכים להימנע מלדלג רמות (מ-H1 לדלג ל- H3). אל תשתמש בכותרות ליצירת אפקט של פונט. לדוגמא, השתמש בדפי סגנון לשינוי סגנון הפונט.
יש לציין שב-HTML אלמנטי כותרות (H1-H6) רק פותחים קטעים, הם אינם מיועדים לאלמנטי תוכן. קטע HTML הבא מראה איך אפשר להשתמש בגליון סגנון לשליטה בהצגת כותרות ותוכן:
<HEAD>
<TITLE>Cooking techniques</TITLE>
<STYLE type="text/css">
/* Indent heading and following content */
DIV.section2 { margin-left: 5% }
</STYLE>
</HEAD>
<BODY>
<H1>Cooking techniques</H1>
... some text here ...
<DIV class="section2">
<H2>Cooking with oil</H2>
... text of the section ...
</DIV>
<DIV class="section2">
<H2>Cooking with butter</H2>
... text of the section ...
</DIV>
ראה את הפרק על קישורים.
מקורות
גולשים מקוונים: 10