אחד התגים שתלמד בשלב מוקדם שלך עיצוב אתרים חינוך הוא צמד תגים המכונים "תגי ההדגשה". בואו נסתכל מה הם התגים האלה ואיך משתמשים בהם בעיצוב אתרים כיום.
חזרה ל- XHTML
אם למדת HTML לפני שנים, הרבה לפני עלייתו של HTML5, ככל הנראה השתמשת בתגים המודגשים וגם בכתב נטוי. כפי שהיית מצפה, תגים אלה הפכו אלמנטים לטקסט מודגש או לטקסט נטוי בהתאמה. הבעיה עם התגים הללו, ומדוע הם נדחקו הצידה לטובת אלמנטים חדשים (עליהם נבדוק בקרוב), היא שהם אינם אלמנטים סמנטיים. הסיבה לכך היא שהם מגדירים איך הטקסט צריך להיראות ולא מידע על הטקסט. זכרו, HTML (שם התגיות הללו ייכתבו) עוסק במבנה ולא בסגנון חזותי! חזותית מטופלת על ידי CSS ושיטות העבודה המומלצות לעיצוב אתרים כבר מזמן קבעו כי עליכם להפריד בין סגנון ומבנה ברורים בדפי האינטרנט שלכם. פירוש הדבר שלא להשתמש באלמנטים שאינם סמנטיים ואילו פרטים נראים ולא במבנה. זו הסיבה הנועזים ו אוֹתִיוֹת מוּטוֹת התגים הוחלפו בדרך כלל בחזקה (מודגשת) והדגשה (בנטוי).
ו
האלמנטים החזקים והדגשים מוסיפים מידע לטקסט שלך, המפרט תוכן שיש להתייחס אליו באופן שונה ולהדגיש כאשר מדברים על תוכן זה. אתה משתמש באלמנטים אלה כמעט באותו אופן שבו היית משתמש באותיות מודגשות ונטויות. כל שעליך לעשות הוא להקיף את הטקסט בתגיות הפתיחה והסגירה (
ו להדגשה ו ו להדגשה חזקה) והטקסט הסגור יודגש.אתה יכול לקנן את התגים האלה וזה לא משנה איזה התג החיצוני. הנה כמה דוגמאות.
טקסט זה מודגש ורוב הדפדפנים יציגו אותו כנטוי.
טקסט זה מודגש מאוד ורוב הדפדפנים יציגו אותו כסוג מודגש.
בשתי הדוגמאות הללו איננו מכתיבים מראה חזותי עם ה- HTML. כן, מראה ברירת המחדל של ה- תג יהיה נטוי ו יהיה מודגש, אך ניתן לשנות את המראה בקלות ב- CSS. זה הטוב משני העולמות. אתה יכול למנף את סגנונות הדפדפן המוגדרים כברירת מחדל כדי לקבל טקסט נטוי או נטוי במסמך שלך מבלי לחצות את הקו ולערבב מבנה וסגנון. תגיד שרצית את זה טקסט לא רק להיות מודגש אלא גם להיות אדום, אתה יכול להוסיף את זה ל- SCS.
חזק {
צבע אדום;
}
בדוגמה זו, אינך צריך להוסיף מאפיין עבור משקל הגופן המודגש מכיוון שזו ברירת המחדל. אם אתה לא רוצה להשאיר את זה במקרה, אתה תמיד יכול להוסיף את זה ב:
חזק {
מודגש;
צבע אדום;
}
עכשיו אתה יכול להיות מובטח שיהיה לך דף עם טקסט מודגש (ואדום) בכל מקום נעשה שימוש בתגית.
הכפל את הדגש
דבר אחד ששמנו לב אליו במהלך השנה הוא מה שקורה אם מנסים להכפיל את הדגש. לדוגמה:
הטקסט הזה צריך להכיל את שניהם מודגש ומוטה טקסט בתוכו.
הייתם חושבים ששורה זו תייצר אזור שיש בו טקסט מודגש ונטוי. לפעמים זה אכן קורה, אך ראינו שחלק מהדפדפנים מכבדים רק את השני משני סגנונות ההדגשה, זה הקרוב ביותר לטקסט המדובר, ורק מציגים את זה כנטוי. זו אחת הסיבות לכך שאיננו מכפילים את תגי ההדגשה.
סיבה נוספת להימנע מ"הכפלה "זו היא למטרות סגנוניות. בדרך כלל די בצורת דגש אחת כדי להעביר את הטון שתרצה לתת. אינך צריך להדגיש, להטות, לטבוע, לצבוע, להגדיל ולהדגיש את הטקסט כדי שהוא יבלוט. הטקסט הזה, שיהיו כל סוגי ההדגשים השונים האלה, יהפוך לססגוני. אז היזהר בעת שימוש בתגי הדגשה או סגנונות CSS כדי לספק דגש ואל תגזימי.
הערה בנושא מודגש ונטוי
מחשבה אחרונה - בעוד הנועז () ונטיות () כבר לא מומלץ להשתמש בתגיות כאלמנטים מדגישים, ישנם מעצבי אתרים המשתמשים בתגיות אלה כדי לעצב אזורי טקסט מוטבעים. בעיקרון, הם משתמשים בזה כמו אֵלֵמֶנט. זה נחמד מכיוון שהתגים קצרים מאוד, אך בדרך כלל לא מומלץ להשתמש באלמנטים אלה. אנו מזכירים זאת למקרה שאתה רואה את זה שם באתרים מסוימים המשמשים לא ליצירת טקסט מודגש או נטוי, אלא כדי ליצור וו CSS לעיצוב חזותי אחר.