מדריך HTML5 – אלמנטים סמנטיים
התקן החדש של 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>
וכך זה יראה:
mark
אלמנט שתפקידו לבצע הדגשה של מילה או ביטוי מסוים. למשל, אם אני רוצה להדגיש את המילה 'אינטרנט' בפסקה:
אינטרנט אקספלורר 9 הוא דפדפן מודרני התומך בסטנדרטים.
אכתוב את הסינטקס הבא:
<p><mark>אינטרנט</mark> אקספלורר 9 הוא דפדפן מודרני התומך בסטנדרטים.</p>
וזו התוצאה שאקבל:
חשוב לציין שהאלמנטים האלו הם אלמנטים לכל דבר – כך שאפשר לעצב אותם ב-CSS בקלות, להוסיף להם id או class וכן להשתמש ב-JavaScript כדי לשנות אותם.
למרות שהשימוש באלמנטים סמנטיים לפי תקן HTML 5 הוא לא חובה, השימוש באלמנטים האלו יכול לתת נקודות ב-SEO וגם להקל על הפיתוח.
תגובות בפייסבוק