במאמר על HTML סמנטי, הסברתי על חשיבות השימוש ב-HTML סמנטי בכל מה שקשור לאתרי אינטרנט וכמה השימוש בHTML סמנטי תורם לנושא נגישות אתר האינטרנט. וכלל ידוע בבניית אתרים הוא שמה שתורם לנגישות תורם גם לקידום אתר האינטרנט.
אני יוצא מנקודת הנחה שכל מי שקורא מאמר זה יודע מה זה HTML סמנטי ומשתמש בפסקאות (p), כותרות (H1-6) ורשימות (ul או ol) כמו שצריך. במאמר זה אסביר על תגיות סמנטיות נוספות שרבים אינם מכירים. אם תשלבו אותם באתר האינטרנט שלכם, סביר להניח שלא רק תהפכו אותו לנגיש יותר, אלא גם לנגיש יותר עבור מנועי החיפוש.
כל התגיות נתמכות בכל דפדפני האינטרנט למעט אינטרנט אקספלורר 6. שום תגית מהתגיות שאני ממליץ עליהן כאן לא נראית רע באינטרנט אקספלורר 6. במקרה הגרוע הוא פשוט לא יראה אותה, אך שאר הדפדפנים – כן.
תגיות ציטוטים
בתגיות אלו אנו משתמשים כאשר יש צורך בציטוט ממקור כלשהו באינטרנט, התגיות המיוחדות לציטוטים מאפשרות לנו לציין את המקור ומי יצר את הציטוט. מבחינת נגישות כמובן שאין צורך להסביר את התועלת. ומבחינת מנוע החיפוש, העובדה שאתם מצטטים ונותנים קרדיט הולם לא מזיקה ומונעת מכם נזקים בשל תוכן כפול.
תגית blockquote – ציטוט ארוך
כאשר אנו רוצים לצטט מקור/אתר אחר והציטוט הוא ארוך (יותר משורה) אנו יכולים להשתמש בתגית זו ואף להוסיף cite שמפרט את הקישור שממנו הציטוט נלקח. שימושי ביותר על מנת למנוע סכנה של 'תוכן כפול'.
התוכן באתר האינטרנט הוא חשוב מאד והרבה מאד מתכנתים שעומדים מאחורי עורכי ה-HTML (WYSIWYG למי שמבין) מזניחים את התוכן הסמנטי באתרי האינטרנט שלהם וחבל.
ראשית אולי כדאי שאגדיר מהו HTML סמנטי. ובכן, HTML סמנטי הוא HTML תקני שמגובה באמצעות תגיות המפרשות את המשמעות מאחורי הטקסט. נשמע מסובך? דוגמא קטנה תמחיש את זה היטב.
<blockquote cite="https://internet-israel.com/internet/%D7%A0%D7%92%D7%99%D7%A9%D7%95%D7%AA/html-%D7%A1%D7%9E%D7%A0%D7%98%D7%99/"> <p><strong>התוכן באתר האינטרנט</strong> הוא חשוב מאד והרבה מאד מתכנתים שעומדים מאחורי עורכי ה-HTML (WYSIWYG למי שמבין) מזניחים את התוכן הסמנטי באתרי האינטרנט שלהם וחבל. </p>
<p>ראשית אולי כדאי שאגדיר מהו <strong>HTML סמנטי</strong>. ובכן, HTML סמנטי הוא HTML תקני שמגובה באמצעות תגיות המפרשות את המשמעות מאחורי הטקסט. נשמע מסובך? דוגמא קטנה תמחיש את זה היטב. </p>
</blockquote>
תגית q – ציטוט קצר
בדומה לתגית הציטוט הארוך. אנו משתמשים בתגית q לציטוטים קצרים. גם פה אנו יכולים להוסיף cite. כך למשל:
בסופו של דבר, כדי לקדם את האתר שלכם במנועי חיפוש, אתם רק צריכים לעשות אתר טוב.
<q cite="http://www.calcalist.co.il/internet/articles/0,7340,L-3172082,00.html"> בסופו של דבר, כדי לקדם את האתר שלכם במנועי חיפוש, אתם רק צריכים לעשות אתר טוב.</q>
תגית cite – המצוטט
בתגית זו אני משתמש על מנת לכתוב את שמו של זה שהשמיע את הציטוט שהזכרתי ב q או ב blockquote. למשל:
בסופו של דבר, כדי לקדם את האתר שלכם במנועי חיפוש, אתם רק צריכים לעשות אתר טוב.
רן יניב הרטשטיין, כלכליסט
<q cite="http://www.calcalist.co.il/internet/articles/0,7340,L-3172082,00.html"> בסופו של דבר, כדי לקדם את האתר שלכם במנועי חיפוש, אתם רק צריכים לעשות אתר טוב. </q> <cite>רן יניב הרטשטיין, כלכליסט</cite>
תגיות קיצורים, הגדרות וראשי תבות
בתגיות אלו אנו משתמשים כאשר יש צורך בהסבר של ראשי תבות או מונח טכני או סתם הגדרה פרטית שהגדרנו. מבחינת נגישות זה מאפשר לאנשים עם בעיות דיסלקציה/זכרון לקבל פירוש מיידי של ראשי התיבות.
תגית abbr – קיצורים וראשית תבות
בתגית זו אנו משתמשים כאשר יש צורך בפירוש של קיצורי שפה או ראשתי תיבות. למשל:
צריך לדעת HTML בתחום בניית אתרי אינטרנט.
<abbr title="HyperText Markup Language">HTML</abbr>
אפשר וחשוב לציין את השפה אם מדובר בשפה אחרת. למשל:
SNCF
<abbr lang="fr" title="Société Nationale des Chemins de Fer">SNCF</abbr>
תגית acronym – ראשי תבות
עדיף שלא להשתמש בתגית זו כיוון שהיא לא תהיה בתקן HTML 5
בתגית זו אנו משתמשים כאשר אנו משתמשים בראשי תיבות שהם חלק מהשפה, זה קצת מבלבל עם התגית הקודמת אך ישנו כלל אצבע פשוט: משתמשים בתגית זו אם הביטוי הוא חלק מהשפה. כמו למשל צה"ל, גדנ"ע, מתנ"ס ושאר ביטויים שאנחנו משתמשים בהם כחלק מהשפה.
צה"ל הוא כבר חלק מהשפה. חישבו על הביטויים שנגזרו מהשם כמו צה"לי.
<acronym title="צבא הגנה לישראל">צה"ל</acronym>
תגית dfn – הגדרה
כאשר אנו מגדירים מונח כלשהו שרלוונטי למאמר שלנו. בניגוד לראשי תיבות או קיצורים, מדובר בהגדרה מקומית יותר. למשל
קוד נגיש: קוד תקין לפי תקן Strict, לא טבלאי וסמנטי העומד בתקינת נגישות WCAG A ומאפשר לבעלי מוגבלויות לגלוש באתר האינטרנט.
<p> <dfn>קוד נגיש</dfn>: קוד תקין לפי תקן Strict, לא טבלאי וסמנטי העומד בתקינת נגישות WCAG A ומאפשר לבעלי מוגבלויות לגלוש באתר האינטרנט.</p>
תגיות קוד
קבוצה זו של תגיות רלוונטית וחשובה במיוחד באתרי מחשבים אשר מפרטים קודים של תוכנה וסקריפטים שונים.
תגית code – קוד ממשי
תגית חשובה באתרים שבהם יש קוד כגון האתר הזה. כאשר יש קוד אני מקיף אותו בתגית הזו. מדובר בקטעי קוד שאם אעשה להם cut&paste הם יעבדו.
תגית sample – פלט של מחשב
שימושי לאתרים המראים פלט של מחשב. כאשר יש לי פלט, (למשל מערך של PHP) אני אעטוף אותו בתגית הזו.
תגית KBD – קלט מקלדת
תגית אקזוטית זו היא לצורך ציון קלט של מקלדת. אם לצורך העניין יש לי אתר שבו אני מסביר על תוכנית javascript שכתבתי והתוכנית הזו עושה משהו כשהמשתמש לוחץ על K
תגית VAR – משתנה או פרמטר בתוכנת מחשב
גם התגית הזו היא נדירה יחסית. משתמשים בה כאשר אנו מתייחסים למשתנה או פרמטר כלשהו. למשל:
המשתנה width קובע את אורך האלמנט.
<p>המשתנה <var>width</var> קובע את אורך האלמנט.</p>
תגיות עריכה
תגיות אלו רלוונטיות בעיקר לבלוגים או לאתרים המכילים מסמכים דינמיים שיש בהם את השינויים שנעשו בהם – הכנסה והורדה של טקסט.
תגית ins – טקסט שהוכנס לאחר הכתיבה
לעתים יש צורך בהצהרה על טקסט שהוכנס לאחר הכתיבה, כמו למשל הערה חשובה שהתבררה רק לאחר הכתיבה. רוב האנשים פדשוט עורכים את הטקסט, אך יש כאלו שחשוב להם להראות שהחלק הזה עודכן. זה רלוונטי במיוחד לבלוגים אבל לא רק. התגית ins מאפשרת לנו לעשות את זה. כאשר בתוך התגית אפשר לקשר למקור שבו יש הסבר על הסיבה להכנסה המאוחרת. למשל:
הערה מאוחרת: לאחר שקראתי את מאמרו המפורסם של רן יניב הרטשטיין בכלכליסט, מסתבר שבניית אתרים לפי טבלאות היא לא מאד נבונה.
<ins cite="http://www.calcalist.co.il/internet/articles/0,7340,L-3172082,00.html" date="24122008"> הערה מאוחרת: לאחר שקראתי את מאמרו המפורסם של רן יניב הרטשטיין בכלכליסט, מסתבר שבניית אתרים לפי טבלאות היא לא מאד נבונה. </ins>
תגית del – טקסט שנמחק לאחר הכתיבה
גם זו תגית שימושית למדי בבלוגים והיא בדיוק הפוכה מתגית ה ins. כאשר אני רוצה למחוק את המידע, אך שעדיין ייראה באתר (וייראה שמחקתי אותו) התגית הזו היא אידיאלית. שוב, רבים מהאנשים פשוט מוחקים ומעדכנים את דף האינטרנט, אבל יש כאלו שחשוב להם להראות את העדכון.
הכי טוב להשתמש בפרונטפייג' לכתוב את האתר!!!1
<del date="24122008" cite="http://www.calcalist.co.il/internet/articles/0,7340,L-3172082,00.html">הכי טוב להשתמש בפרונטפייג' לכתוב את האתר!!!1</del>
תגית כתובת
לא מצאתי שום קטגוריה לתגית הזו.
תגית address – כתובת
תגית הבאה להראות את הכתובת (האמיתית או המייל) של יוצר המסמך. שימושי ל-footer קבוע באתר שמכיל את כתובת העסק ודרכים ליצירת קשר.
אינטרנט ישראלשלח לעורך המסמך מייל
רחוב אינטרנט 8, פינת אתר אינטרנט 9
<address> אינטרנט ישראל<br /> <a href="mailto:[email protected]">שלח לעורך המסמך מייל</a><br /> רחוב אינטרנט 8, פינת אתר אינטרנט 9<br /> </address>
