עיקרון חשוב של התנועה תקני אינטרנט כי הוא אחראי על התעשייה שיש לנו היום הוא הרעיון של שימוש באלמנטים HTML על מה שהם ולא על איך הם מופיעים בדפדפן כברירת מחדל. זה ידוע באמצעות HTML סמנטי.
מהו HTML סמנטי
HTML סמנטי או סימון סמנטי הוא HTML שמציג משמעות לדף האינטרנט ולא רק מצגת. לדוגמה, תג
מציין שהטקסט המצורף הוא פסקה.
זה גם סמנטי וגם מצגת, כי אנשים יודעים מה הם פסקאות ודפדפנים יודעים איך להציג אותם.
על הצד השני של המשוואה, תגים כמו ו- אינם סמנטיים, מכיוון שהם מגדירים רק כיצד הטקסט צריך להיראות (מודגש או נטוי) ואינם מספקים משמעות נוספת לסימון.
דוגמאות לתגי HTML HTML כוללים את תגי הכותרת
דרך , , ו- . יש הרבה יותר סמלים HTML סמנטי שיכול לשמש אותך לבנות אתר תואם לתקנים.
למה אתה צריך לדאוג סמנטיקה
היתרון של כתיבת HTML סמנטי נובעת ממה צריך להיות המטרה הנהיגה של כל דף אינטרנט - הרצון לתקשר. על ידי הוספת תגים סמנטיים למסמך שלך, אתה מספק מידע נוסף על מסמך זה, אשר מסייע בתקשורת. באופן ספציפי, תגים סמנטיים מבהירים לדפדפן מה המשמעות של הדף והתוכן שלו.
בהירות זו מתקשרת גם עם מנועי החיפוש, ומבטיחה שהדפים הנכונים יועברו לשאילתות הנכונות.
תגי HTML סמנטיים מספקים מידע על התוכן של תגים אלה, שמעבר לאופן שבו הם נראים בדף. טקסט המוקף בתג מזוהה מיד על ידי הדפדפן כסוג כלשהו של שפת קידוד.
במקום לנסות לעבד את הקוד, הדפדפן מבין שאתה משתמש בטקסט זה כדוגמה לקוד למטרות מאמר או הדרכה מקוונת מסוג כלשהו.
באמצעות תגי סמנטי נותן לך הרבה יותר ווים עבור עיצוב התוכן שלך. ייתכן שהיום אתה מעדיף להציג את דגימות הקוד שלך בסגנון דפדפן ברירת המחדל, אך מחר, תרצה לצרף אותן עם צבע רקע אפור, ולאחר מכן ברצונך להגדיר את משפחת הגופנים או ערימת הגופנים המדויקים החד-ספריים המשמשים עבור הדגימות שלך. אתה יכול בקלות לעשות את כל הדברים האלה באמצעות סימון סמנטי CSS להחיל בחוכמה.
השתמש סמנטית תגיות כראוי
כאשר אתה רוצה להשתמש בתגים סמנטיים כדי להעביר משמעות ולא למטרות תצוגה, אתה צריך להיות זהיר כי אתה לא משתמש בהם באופן שגוי פשוט עבור תכונות התצוגה המשותפת שלהם. חלק מהתגים הסמנטיים הנפוצים ביותר כוללים:
- blockquote - אנשים משתמשים בתג עבור הזנת טקסט שאינו ציטוט. הסיבה לכך היא כי blockquotes הם indented כברירת מחדל. אם אתה רק רוצה היתרונות של הזחה, אבל הטקסט הוא לא בלוקוטה, להשתמש בשולי CSS במקום.
- p - עורכי אינטרנט מסוימים משתמשים ב-
& nbsp; (שטח שאינו שובר הכלול בפאראגראוף) כדי להוסיף רווח נוסף בין רכיבי הדף, במקום להגדיר פסקאות בפועל עבור טקסט הדף. כמו בדוגמה שהוזכרה קודם לכן, עליך להשתמש בשוליים או בסגנון ריפוד בסגנון כדי להוסיף שטח.
- ul - כמו בלוקוטה, טקסט מצורף בתוך תג
מבטל את הטקסט ברוב הדפדפנים. דבר זה שגוי באופן סמלי וגם HTML לא חוקי, שכן רק - תגים תקפים בתוך תג
. שוב, השתמש בשוליים או בסגנון ריפוד כדי להזין טקסט.
- h1-h6 - תגי הכותרת יכולים לשמש כדי להפוך את הגופנים לגדולים יותר, אבל אם הטקסט אינו כותרת, הוא לא אמור להיות בתוך תג כותרת. השתמש במאפייני CSS במשקל הגופן ובגודל הגופן במקום זאת אם ברצונך לשנות את הגודל או המשקל של טקסט ספציפי בדף שלך ..
על ידי שימוש בתגי HTML שיש להם משמעות, אתה יוצר דפים שמקצים מידע רב יותר מאשר רק סביב הכל עם
תגים.
אילו תגיות HTML הן סמנטיות?
בעוד כמעט כל תג HTML4 וכל תגי HTML5 יש משמעות סמנטי, כמה תגים הם סמנטיים בעיקר בטבע.
לדוגמה, HTML5 הגדיר מחדש את המשמעות של התגים ו- כדי להיות סמנטי. התג אינו מעביר חשיבות רבה יותר, אלא טקסט שמוצג בדרך כלל מודגש. תג גם אינו מעביר חשיבות מיוחדת או הדגשה, אלא מגדיר טקסט שמוצג בדרך כלל באותיות נטיות.
תגי HTML סמנטיים
נוֹטָרִיקוֹן <ראשי תיבות> ראשי תיבות
ציטוט ארוך הַגדָרָה <כתובת> כתובת עבור המחבר (ים) של המסמך צִיטָטָה קוד התייחסות טקסט Teletype חלוקה לוגית מיכל כללי של סגנון מוטבע טקסט שנמחק טקסט שהוזן דָגֵשׁ דגש חזק
כותרת ברמה הראשונה
כותרת בדרגה שנייה
כותרת ברמה שלישית
כותרת ברמה הרביעית
כותרת ברמה החמישית
כותרת ברמה השישית
הפסקה מתמטית טקסט שיוזן על ידי המשתמש
טקסט מעוצב מראש
ציטוט קצר בתוך שורה פלט לדוגמה <תת> תחתי כתף טקסט משתנה או משתמש מוגדר
, ו- . יש הרבה יותר סמלים HTML סמנטי שיכול לשמש אותך לבנות אתר תואם לתקנים.
למה אתה צריך לדאוג סמנטיקה
היתרון של כתיבת HTML סמנטי נובעת ממה צריך להיות המטרה הנהיגה של כל דף אינטרנט - הרצון לתקשר. על ידי הוספת תגים סמנטיים למסמך שלך, אתה מספק מידע נוסף על מסמך זה, אשר מסייע בתקשורת. באופן ספציפי, תגים סמנטיים מבהירים לדפדפן מה המשמעות של הדף והתוכן שלו.
בהירות זו מתקשרת גם עם מנועי החיפוש, ומבטיחה שהדפים הנכונים יועברו לשאילתות הנכונות.
תגי HTML סמנטיים מספקים מידע על התוכן של תגים אלה, שמעבר לאופן שבו הם נראים בדף. טקסט המוקף בתג מזוהה מיד על ידי הדפדפן כסוג כלשהו של שפת קידוד.
במקום לנסות לעבד את הקוד, הדפדפן מבין שאתה משתמש בטקסט זה כדוגמה לקוד למטרות מאמר או הדרכה מקוונת מסוג כלשהו.
באמצעות תגי סמנטי נותן לך הרבה יותר ווים עבור עיצוב התוכן שלך. ייתכן שהיום אתה מעדיף להציג את דגימות הקוד שלך בסגנון דפדפן ברירת המחדל, אך מחר, תרצה לצרף אותן עם צבע רקע אפור, ולאחר מכן ברצונך להגדיר את משפחת הגופנים או ערימת הגופנים המדויקים החד-ספריים המשמשים עבור הדגימות שלך. אתה יכול בקלות לעשות את כל הדברים האלה באמצעות סימון סמנטי CSS להחיל בחוכמה.
השתמש סמנטית תגיות כראוי
כאשר אתה רוצה להשתמש בתגים סמנטיים כדי להעביר משמעות ולא למטרות תצוגה, אתה צריך להיות זהיר כי אתה לא משתמש בהם באופן שגוי פשוט עבור תכונות התצוגה המשותפת שלהם. חלק מהתגים הסמנטיים הנפוצים ביותר כוללים:
- blockquote - אנשים משתמשים בתג עבור הזנת טקסט שאינו ציטוט. הסיבה לכך היא כי blockquotes הם indented כברירת מחדל. אם אתה רק רוצה היתרונות של הזחה, אבל הטקסט הוא לא בלוקוטה, להשתמש בשולי CSS במקום.
- p - עורכי אינטרנט מסוימים משתמשים ב-
& nbsp; (שטח שאינו שובר הכלול בפאראגראוף) כדי להוסיף רווח נוסף בין רכיבי הדף, במקום להגדיר פסקאות בפועל עבור טקסט הדף. כמו בדוגמה שהוזכרה קודם לכן, עליך להשתמש בשוליים או בסגנון ריפוד בסגנון כדי להוסיף שטח.
- ul - כמו בלוקוטה, טקסט מצורף בתוך תג
מבטל את הטקסט ברוב הדפדפנים. דבר זה שגוי באופן סמלי וגם HTML לא חוקי, שכן רק - תגים תקפים בתוך תג
. שוב, השתמש בשוליים או בסגנון ריפוד כדי להזין טקסט.
- h1-h6 - תגי הכותרת יכולים לשמש כדי להפוך את הגופנים לגדולים יותר, אבל אם הטקסט אינו כותרת, הוא לא אמור להיות בתוך תג כותרת. השתמש במאפייני CSS במשקל הגופן ובגודל הגופן במקום זאת אם ברצונך לשנות את הגודל או המשקל של טקסט ספציפי בדף שלך ..
על ידי שימוש בתגי HTML שיש להם משמעות, אתה יוצר דפים שמקצים מידע רב יותר מאשר רק סביב הכל עם
תגים.
אילו תגיות HTML הן סמנטיות?
בעוד כמעט כל תג HTML4 וכל תגי HTML5 יש משמעות סמנטי, כמה תגים הם סמנטיים בעיקר בטבע.
לדוגמה, HTML5 הגדיר מחדש את המשמעות של התגים ו- כדי להיות סמנטי. התג אינו מעביר חשיבות רבה יותר, אלא טקסט שמוצג בדרך כלל מודגש. תג גם אינו מעביר חשיבות מיוחדת או הדגשה, אלא מגדיר טקסט שמוצג בדרך כלל באותיות נטיות.
תגי HTML סמנטיים
נוֹטָרִיקוֹן <ראשי תיבות> ראשי תיבות
ציטוט ארוך הַגדָרָה <כתובת> כתובת עבור המחבר (ים) של המסמך צִיטָטָה קוד התייחסות טקסט Teletype חלוקה לוגית מיכל כללי של סגנון מוטבע טקסט שנמחק טקסט שהוזן דָגֵשׁ דגש חזק
כותרת ברמה הראשונה
כותרת בדרגה שנייה
כותרת ברמה שלישית
כותרת ברמה הרביעית
כותרת ברמה החמישית
כותרת ברמה השישית
הפסקה מתמטית טקסט שיוזן על ידי המשתמש
טקסט מעוצב מראש
ציטוט קצר בתוך שורה פלט לדוגמה <תת> תחתי כתף טקסט משתנה או משתמש מוגדר