מדריך HTML5 – אלמנטים סמנטיים

‏ • Internet Israel

התקן החדש של HTML 5 מאפשר לנו גם אלמנטים סמנטיים לסידור הדף. מה זה אלמנטים סמנטיים? ראשית, אלמנטים זה דבר שאני מתאר לעצמי שאתם מכירים – div,span.h1, p כולם הם אובייקטים או אלמנטים בתוך המסמך שלנו. אלמנטים סמנטיים הם אלמנטים שגם אומרים לנו מה יש בתוכם. h1 למשל זה אלמנט סמנטי כיוון שהוא מראה שמה שיש בתוכו הוא כותרת. strong גם הוא אלמנט סמנטי כי הוא מציין שמה שהוא מכיל הוא חשוב. תקן HTML 5 נותן לנו אלמנטים סמנטיים לעיצוב הדף שגם אומרים לנו משהו על מה שיש בפנים.

למה זה טוב בדיוק?

1. SEO. מנועי החיפוש מאד אוהבים סמנטיקה וקל להרוויח נקודות ב-SEO טכני עם שימוש נבון באלמנטים סמנטיים.

2. נוחות שימוש, השוו למשל את הקוד הבא:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML 5 site</title>
    </head>
    <body>
        <div id="header">        
        </div>
        <div>
            <div id="navbar">
            </div>
            <div id="article">
            </div>
        </div>
        <div id="footer">     
        </div>
    </body>
</html>

לקוד הזה:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML 5 site</title>
    </head>
    <body>
        <header>        
        </header>
        <section>
            <nav></nav>
            <article></article> 
        </section>
        <footer></footer>
    </body>
</html>

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

ישנם כמה אלמנטים סמנטיים שניתן להשתמש בהם ב-HTML 5:

section

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

nav

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

article

מיועד לחלק המרכזי של הדף – המאמר. תגית זו תכיל את הפסקאות והטקסט המרכזי של הדף.

aside

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

hgroup

תגית שאמורה לכלול מספר כותרות, כמו למשל במבנה הבא:

<hgroup>
<h2>כותרת ראשית</h2>
<h3>כותרת משנית</h3>
</hgroup>

header

תגית הכוללת את חלקו העליון של האתר – בדרך כלל יש שם את שם הלוגו ותפריט הניווט העליון.

footer

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

figure

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

figcaption

כותרת לאלמנט ה-figure, כך למשל אני אצור figure עם figcaption:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML 5 site</title>
    </head>
    <body>
        <figure>
        <figcaption>דיאגרמת נתונים כלשהי</figcaption>
        <img src="diagram.jpg" />
        </figure>
    </body>
</html>

וכך זה יראה:

שימוש ב-figure

mark

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

אינטרנט אקספלורר 9 הוא דפדפן מודרני התומך בסטנדרטים.

אכתוב את הסינטקס הבא:

<p><mark>אינטרנט</mark> אקספלורר 9 הוא דפדפן מודרני התומך בסטנדרטים.</p>

וזו התוצאה שאקבל:

שימוש ב-mark

חשוב לציין שהאלמנטים האלו הם אלמנטים לכל דבר – כך שאפשר לעצב אותם ב-CSS בקלות, להוסיף להם id או class וכן להשתמש ב-JavaScript כדי לשנות אותם.

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

תגיות: , ,

רן בר-זיק

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.אינטרנט ישראל: www.internet-israel.com

תגובות בפייסבוק