הדגשות והטיית טקסט ב-HTML
תגיות עיצוב הן תגיות שמשפיעות על ניראות האלמנטים המופיעים בעמוד ה-HTML.
בגירסאות HTML ישנות, היו תגיות עיצוב רבות ונעשה בהן שימוש נרחב. ב-HTML5 חלק גדול מתגיות העיצוב כבר אינו בשימוש, והעיצוב נעשה רק באמצעות CSS.
תגיות העיצוב שעדין בשימוש ויוצרות קוד HTML5 תיקני, הן תגיות שמקנות משמעות ולא רק עיצוב.
דוגמה:
<p>
My name is <i>Robert Cohen</i> and I'm a <b>website developer</b>.<br />
I think my work is <strong>very cool</strong> and I like <em>very</em> much.
</p>בדוגמה זו אנו מציגים פיסקה בת 2 שורות, כאשר משולבות בתוכן תגיות העיצוב b, strong, i, em.
בשורה הראשונה אנו עושים שימוש בתגית i שעוטפת את השם Robert Cohen. התגית הזו הופכת את הטקסט לטקסט נטוי (italic). מבחינה סמנטית, השימוש בתגית i נעשה כדי להבליט שמות, ביטויים, מונחים טכניים, מושגים שונים וכן הלאה.
בהמשך השורה אנו עושים שימוש בתגית b שעוטפת את הכיתוב website developer. התגית הזו הופכת את הטקסט לטקסט מודגש (bold). מבחינה סמנטית, השימוש בתגית b נעשה להבלטה של קטעי טקסט, אבל מבלי לקבוע שהטקסט המודגש הוא חשוב יותר. כלומר, הוא באותה רמת חשיבות כמו יתר המשפט שאינו מודגש.
בשורה השניה אנו עושים שימוש בתגית strong שעוטפת את הכיתוב very cool. התגית הזו גם היא הופכת את הטקסט לטקסט מודגש כמו תגית b. יחד עם זאת, השימוש בתגית strong (לעומת התגית b) קובע שהטקסט המודגש הוא ברמת חשיבות גבוהה יותר.
בהמשך השורה השניה אנו עושים שימוש בתגית em שעוטפת את הכיתוב very. התגית הזו גם היא הופכת את הטקסט לטקסט נטוי כמו תגית i. יחד עם זאת, השימוש בתגית em (לעומת התגית i) קובע שזהו טקסט שחשוב לנו להדגיש.
כששוקלים אם להשתמש בתגית b או strong, צריך לחשוב האם הטקסט המודגש יהיה ברמת חשיבות גבוהה יותר מאשר יתר הטקסט. אם כן, נשתמש ב-strong. אם לא, נשתמש ב-b.
באופן דומה, כששוקלים אם להתמש בתגית i או em, צריך לחשוב האם הטקסט הנטוי הוא טקסט שחשוב לנו במיוחד להדגישו. אם כן, נשתמש ב-em. אם לא, נשתמש ב-i.
תגיות עיצוב נוספות
מעבר לתגיות b, i, strong, קיימות תגיות עיצוב נוספות שפחות נפוצות. נסקור את החשובות יותר מהן:
q - ציטוט קצר (כאשר משולב בתוך הטקסט)
blockquote - ציטוט ארוך (כאשר עומד עצמאית)
cite - כותרת של יצירת אומנות (ספר, סרט, ציור וכו')
abbr - קיצור או ראשי תיבות
dfn - הגדרה של מושג
var - משתנה במתמטיקה או בשפת תוכנה
code - קטע קוד
samp - דוגמת פלט של קוד
address - כתובות
small - הקטנת הטקסט
ins - טקסט שהוכנס (נניח כהערה שמישהו הוסיף על כיתוב קיים)
del - טקסט שנמחק (נניח כמחיקה של כיתוב קיים)
pre - טקסט לא מעוצב
נשים לב כי כל התגיות האלו מקנות משמעות לאלמנט אותו הן עוטפות ולא רק מעצבות אותו מבחינת הניראות.
