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

מהו HTML סמנטי?

HTML סמנטי או סימון סמנטי הוא HTML שמכניס משמעות לדף האינטרנט ולא רק למצגת. לדוגמא, א

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

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

דוגמאות לתגי HTML סמנטיים כוללים:

• תגי כותרת

   דרך

ישנם הרבה יותר תגיות HTML סמנטיות לשימוש בעת בניית אתר תואם לתקנים.

מדוע אכפת לך מסמנטיקה

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

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

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

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

שימוש נכון בתגיות סמנטיות

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

• ציטוט יש אנשים שמשתמשים ב- תג להכנסת טקסט שאינו ציטוט. הסיבה לכך היא שברק ציטוטים מוטבעים כברירת מחדל. אם אתה פשוט רוצה להכניס טקסט שאינו ציטוט, השתמש במקום זאת בשולי CSS.
• עמ ' - ישנם עורכי אתרים שמשתמשים בהם (רווח לא שובר הכלול בפסקה) כדי להוסיף רווח נוסף בין רכיבי העמוד, במקום להגדיר פסקאות בפועל לטקסט של אותו דף. כמו בדוגמה הקודמת, במקום זאת כדאי להשתמש במאפיין שוליים או סגנון ריפוד כדי להוסיף מקום.
• ul - כמו עם

  , מצרף טקסט בתוך a

   תייג כניסות לטקסט ברוב הדפדפנים. זה גם שגוי סמנטית וגם HTML לא חוקי, כי רק
  •  התגים תקפים בתוך
    תָג. שוב, השתמש בשוליים או בסגנון הריפוד כדי להזין טקסט.
  • h1, h2, h3, h4, h5 ו- h6 - אתה יכול להשתמש בתגי כותרת כדי להפוך את הגופנים לגדולים ונועזים יותר, אך אם הטקסט אינו כותרת, השתמש במקום זאת במאפייני משקל הגופן וגודל הגופן.

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

   תגים.

  אילו תגי HTML הם סמנטיים?

  למרות שכמעט כל תג HTML4 וכל HTML5 לתגיות יש משמעויות סמנטיות, יש תגיות שהן בְּרֹאשׁ וּבְרִאשׁוֹנָה סֵמַנטִי.

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

  תגי HTML סמנטיים

  נוֹטָרִיקוֹן
  ראשי תיבות
  הצעת מחיר ארוכה
  הַגדָרָה
  כתובת המחבר / ים של המסמך
  צִיטָטָה
  הפניה לקוד
  טקסט טקסט
  חלוקה הגיונית
  מיכל כללי בסגנון מוטבע
  טקסט שנמחק
  טקסט מוכנס
  דָגֵשׁ
  דגש חזק
  כותרת מדרגה ראשונה
  כותרת מדרגה שנייה
  כותרת מדרגה שלישית
  כותרת מדרגה רביעית
  כותרת מדרגה חמישית
  כותרת דרגה שישית
  	הפסקה נושאית
  טקסט שיוזן על ידי המשתמש
  טקסט מעוצב מראש
  הצעת מחיר קצרה
  פלט לדוגמא
  מנוי
  כתב עליון
  טקסט משתנה או מוגדר על ידי המשתמש