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.

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

רספברי פיי

מה זה AIoT? ואיך אפשר להתחיל?

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

ספריות ומודולים

מציאת PII באמצעות למידת מכונה

כך תגנו על משתמשים שלכם שמעלים מידע אישי רגיש כמו תעודות זהות באמצעות שירות אמאזוני.

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

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

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

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