התוכן באתר האינטרנט הוא חשוב מאד והרבה מאד מתכנתים שעומדים מאחורי עורכי ה-HTML (WYSIWYG למי שמבין) מזניחים את התוכן הסמנטי באתרי האינטרנט שלהם וחבל.
ראשית אולי כדאי שאגדיר מהו HTML סמנטי. ובכן, HTML סמנטי הוא HTML תקני שמגובה באמצעות תגיות המפרשות את המשמעות מאחורי הטקסט. נשמע מסובך? דוגמא קטנה תמחיש את זה היטב. שימו לב בבקשה לשני סוגי ה-HTML הבאים:
<pre>
<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> אנחנו ממליצים על הורדת תכנים חוקיים בלבד.
</pre>
הקוד האמור לעיל הוא תקין לגמרי, הוא יעבור גם את הבדיקות של XHTML Strict וייחשב למהוגן למדי. למרות זאת, שימו לב לקוד הבא:
<pre>
<h1>אינטרנט</h1>
<p>דף זה מדבר על <strong>אינטרנט</strong>. אינטרנט הוא אחלה של דבר, אפשר לגלוש בו, אפשר להנות ממנו ואפשר להוריד ממנו תכנים.</p>
<h2>תכנים באינטרנט</h2>
<p>חשוב להדגיש שבתור <em>אתר שומר חוק</em> אנחנו ממליצים על הורדת תכנים חוקיים בלבד.</p>
</pre>
ה-HTML הזה יציג אותה תוצאה כקודמו. אך בניגוד לקודמו, הוא קצר יותר בחצי, הרבה יותר קל לשינוי והרבה יותר קל להבין, גם ללא ידע ב-HTML, מה חשוב בדף הזה ובמה הוא עוסק. השימוש הנבון בכותרות ובתגיות תלויות הקשר כמו strongו-em מאפשרות לכל אחד, גם אם הוא לא מבין HTML, להבין את ההקשר כבר מתוך הקוד.
למה זה חשוב מבחינת נגישות אינטרנט? כיוון שקוראי אתרים עבור עיוורים נעזרים בתגיות סמנטיות להקראה ולמיקוד. הרבה יותר קל לקורא כזה לדעת מה זה h1 או em מאשר מה זה pan style="font weight: 900; font-size: x-large; color: Black; display: או מה זה i.
ואם זה טוב לנגישות, תהיו בטוחים שזה גם טוב לקידום אתרים. לא, לא צריך להתחיל ולסמן strong מסביב לכל מילת קישור מבוקשת. אבל שימוש נבון בתגיות תלויות הקשר מתוך מחשבה על נגישות אינטרנט, תאפשר לגוגל למקם את אתר האינטרנט שלכם במקום טוב יותר.
מדובר במאמץ קטן שמשתלם בגדול.
לקריאה נוספת – הכנסו למאמר המספר על תגיות סמנטיות בתקן XHTML שכדאי להכיר וכמובן על התגיות הסמנטיות החדשות שיש ב-HTML 5.
אהבתם? לא אהבתם? דרגו!
(אין הצבעות)
כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
תשארו בקשר!