אלמנטים סמנטיים ב-html5

html5 הוא שם משפחה כולל להרבה סוגים של טכנולוגיות. המפורסמים שבהם:

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

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

מהי הבעיה שבאים לפתור כאן?

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

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

האלמנטים החדשים

הנה האלמנטים שבאו לתת משמעות למבנה הדף:

  • header - ראש, יכול להכיל כותרות, ניווט
  • footer - מידע על התוכן, זכויות יוצרים
  • hgroup - מאגד כותרות יחד (למשל לוגו וטאגליין) - יצא מהתקן
  • nav - סדרת קישורים המיועדת לניווט
  • aside - מידע משלים לתוכן, פס צדדי
  • article - גוף התוכן, כתבה
  • section - יחידות נפרדות בדף
  • figure, figcaption - תמונה ותיאור התמונה

אנקפסולציה

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

על ההבדל שבין article ו-section

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

ב-section אמורים להשתמש כשמדובר בתוכן שלא עומד כשלעצמו, למשל: יצירת שני חלקים בדף - "חדשות" ו"אירועים".

מאפיין role

העולם שלנו אולי היה פשוט יותר כשהיה רק header אחד ו-footer אחד בדף. עכשיו, כשיש לנו הרבה כאלו, איך נסמן באופן סמנטי מהו ה-header שבאמת מופיע בראש הדף, ולא רק בראש הפוסט או הכתבה? לשם כך אפשר להשתמש בסטנדרט בשם aria שהומצא עבור עיוורים המשתמשים בקוראי מסך. הרעיון הוא שאתם יכולים להוסיף את המאפיין role לאלמנטים המרכזיים בדף, ולתת להם את הערכים הבאים:

  • banner - הפס בראש הדף (א.ק.א. #header)
  • search - תיבת חיפוש (א.ק.א. #search)
  • main - התוכן המרכזי בדף (א.ק.א. #content)
  • complementary - הסיידבאר (א.ק.א. #sidebar)
  • contentinfo - הפס בתחתית הדף (א.ק.א #footer)

הכל טוב ויפה, אבל מה עם אקספלורר?

התגיות החדשות נתמכות בכל הבראוזרים המודרניים. כלומר, כל דבר חוץ מאקספלורר 8 ומטה. ישנו סקריפט מיוחד (html5shiv) המאפשר להשתמש באלמנטים החדשים גם באקספלורר. הבעיה היחידה שעלולה לצוץ היא אם הג'אווה-סקריפט מכובה אצל המשתמש. חוץ מצירוף הסקריפט לאתר, צריך גם לכתוב ב-css את הכלל הבא:


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    
 display:block;
}

דוגמא מלאה

לסיום, הנה דוגמא מלאה של כל מה שדיברנו עליו:


<!DOCTYPE HTML>
<html lang="he" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>כותרת החלון</title>
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <style type="text/css">
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    
     display:block;
    }
  </style>
</head>
<body>
  <div id="container">
    <header role="banner">
      <hgroup>
        <h1>לוגו</h1>
        <h2>טאגליין</h2>
      </hgroup>
      <aside>
        <form action="#" role="search">
          <input type="text" name="s" id="s">
          <input type="submit" value="חפש">
        </form>
      </aside>
      <nav>
        <ul>
          <li><a href="#">דף הבית</a></li>
          <li><a href="#">אודות</a></li>
          <li><a href="#">צור קשר</a></li>
        </ul>
      </nav>
    </header>
    <article role="main">
      <!-- main content goes here -->
    </article>
    <aside role="complementary">
      <!-- sidebar goes here -->
    </aside>
    <footer role="contentinfo">
      <!-- footer goes here -->
    </footer>
  </div><!-- container -->
</body>
</html>

תגיות:,

תגובה אחת

  1. תודה, סופסוף אני מבינה מה זה הhtml5 הזה, ובשביל מה זה טוב. גזרתי ושמרתי להבא.