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

HTML סמנטי

רן בר-זיק דצמבר 20, 2008 8:56 pm אין תגובות

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

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

התוכן באתר האינטרנט הוא חשוב מאד והרבה מאד מתכנתים שעומדים מאחורי עורכי ה-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.

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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