אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » תגיות סמנטיות ב-HTML 5

תגיות סמנטיות ב-HTML 5

רן בר-זיק מרץ 18, 2010 11:54 am אין תגובות

הסבר ודוגמאות על כל התגיות הסמנטיות בתקן HTML 5.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כיום, אם אני רואה גוש של טקסט – למשל:


<p>
רחוב ז'בוטינסקי 2224, פתח תקוה
</p>

אם אני בן אדם סביר, אני יכול להבין שמדובר בכתובת. אך אם אני מכונה, כמו למשל הבוט של גוגל שסורק את העמוד, אין לי דרך פשוטה וקלה להבין שמדובר בכתובת. אך אם אשתמש בתגית הסמנטית (שקיימת כבר בתקן HTML 4) של address:


<address>
רחוב ז'בוטינסקי 2224, פתח תקוה
</address>

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

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

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

תגיות סמנטיות של חלקי האתר

תגיות אלו מאפשרות לנו לחלק את האתר לחלקים שונים לפי סוג התוכן הקיים בהם. על כל התגיות האלו להיות בתוך תגית body:

header (שימו לב לא להתבלבל עם תגית head!) משמשת אותנו עבור תיחום חלקו העליון של העמוד. מדובר בחלק המכיל בדרך כלל את תמונת הלוגו, שם האתר ועוד אלמנטים הקשורים לכותרת.

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

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

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

article – תגית שמסמנת את המידע באתר בה"א הידיעה – המיקום המרכזי של התוכן שיש בדף: בין אם זה מאמר, תמונה או כל אלמנט מידע אחר שמהווה את מרכז החשיבות של הדף.

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

תגיות טקסט

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

time – תגית שהטקסט שהיא מכילה מציין זמן: תאריך או שעה.

mark – תגית המציינת טקסט מסומן (highlighted). בניגוד ל-strong או ל-emphesize היא כוללת טקסט שיש לו משמעות כרפרנס עבור מקור חיצוני אחר. שימושי מאד עבור פיצ'רים שבמסגרתם יש סימון של מילות החיפוש שדרכו הגעתם אל התוכן.

dialog – תגית המציינת דו שיח ותשמש אותנו במקרה של תיאור שיחה או תמלול.

meter -תגית המציינת מד התקדמות. כמו למשל במדריך התקנה או אשף הגדרות זה או אחר. התגית מכילה 2 תכונות: max שמכיל את מספר הצעדים המקסימלי ו-min שמכיל את מספר הצעדים המינימלי. למשל, אם יש לי מדריך מעמוד 1 עד עמוד 10 וכרגע אנו בעמוד 2, אני אכניס את הטקסט הבא כמציין מיקום:

<meter max="10" min="1">אתה בעמוד 2 מתוך 10</meter>

progress – בדומה ל-meter היא מכילה בתוכה מידע הקשור להתקדמות – אך יותר בתחום של הורדת מידע וזה שימושי במיוחד עבור JavaScript שייצוק תוכן לתוך התגית הזו.

hgroup – תגית זו אמורה ליצור קבוצת כותרות כאשר יש לי שתי כותרות אחת אחרי השניה. אם למשל יש לי כותרת h2 שמייד אחרי יש כותרת h3, אני אשתמש ב-hgroups על מנת לאחד ביניהן:


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

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

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»HTML 5 העלאת תמונות ומניפולציות בתמונות
»modernizr – ספריית JavaScript ל-HTML 5
HTML 5
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד