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.

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

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

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

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

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

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

עבודה עם GPT למתכנתים

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

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