HTML סמנטי

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

התוכן באתר האינטרנט הוא חשוב מאד והרבה מאד מתכנתים שעומדים מאחורי עורכי ה-HTML (WYSIWYG למי שמבין) מזניחים את התוכן הסמנטי באתרי האינטרנט שלהם וחבל.

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

<br /><span style="font weight: 900; font-size: x-large; color: Black; display: Block">אינטרנט</span>
<br />
<br />דף זה מדבר על <b>אינטרנט</b> אינטרנט הוא אחלה של דבר, אפשר לגלוש בו, אפשר להנות ממנו ואפשר להוריד ממנו תכנים.
<br />
<br /><span style="font weight: 700; font-size: x-large; color: Black; display: Block">תכנים באינטרנט</span>
<br />
<br />חשוב להדגיש שבתור <i>אתר שומר חוק</i> אנחנו ממליצים על הורדת תכנים חוקיים בלבד.

הקוד האמור לעיל הוא תקין לגמרי, הוא יעבור גם את הבדיקות של XHTML Strict וייחשב למהוגן למדי. למרות זאת, שימו לב לקוד הבא:

<h1>אינטרנט</h1>
<p>דף זה מדבר על <strong>אינטרנט</strong>. אינטרנט הוא אחלה של דבר, אפשר לגלוש בו, אפשר להנות ממנו  ואפשר להוריד ממנו תכנים.</p>
<h2>תכנים באינטרנט</h2>
<p>חשוב להדגיש שבתור <em>אתר שומר חוק</em> אנחנו ממליצים על הורדת תכנים חוקיים בלבד.</p>

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

למה זה חשוב מבחינת נגישות אינטרנט? כיוון שקוראי אתרים עבור עיוורים נעזרים בתגיות סמנטיות להקראה ולמיקוד. הרבה יותר קל לקורא כזה לדעת מה זה h1 או em מאשר מה זה pan style="font weight: 900; font-size: x-large; color: Black; display: או מה זה i.

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

מדובר במאמץ קטן שמשתלם בגדול.

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

פוסטים נוספים שכדאי לקרוא

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

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

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

עבודה בהיי טק

איך מראיינים סניורים?

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

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

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