כותרות נפוצות ברוב דפי האינטרנט. למעשה, כמעט כל מסמך טקסט נוטה לכותרת אחת לפחות כדי שתדע את הכותרת של מה שאתה קורא. כותרות אלו מקודדות באמצעות HTML אלמנטים לכותרת - h1, h2, h3, h4, h5 ו- h6.
באתרים מסוימים, ייתכן שתגלה שכותרות מקודדות מבלי להשתמש באלמנטים אלה. במקום זאת, כותרות עשויות להשתמש בפסקאות עם תכונות מחלקה ספציפיות שנוספו להן, או בחלוקה עם אלמנטים בכיתה. הסיבה שאנו שומעים לעתים קרובות על נוהג שגוי זה היא שהמעצב "לא אוהב את מראה הכותרות". כברירת מחדל, הכותרות מוצגות באותיות מודגשות והן גדולות יותר, במיוחד רכיבי h1 ו- h2 המוצגים בגודל גופן גדול בהרבה משאר טקסט העמוד. זכור שזה רק מראה ברירת המחדל של האלמנטים האלה! עם CSS, אתה יכול לגרום לכותרת להיראות איך שתרצה! באפשרותך לשנות את גודל הגופן, להסיר את המודגש ועוד. כותרות הן הדרך המתאימה לקידוד כותרות העמוד. הנה כמה סיבות מדוע.
מדוע להשתמש בתגי כותרת יותר מאשר בחלוקה
זו הסיבה הטובה ביותר להשתמש בכותרות, ולהשתמש בהן בסדר הנכון (כלומר. h1, ואז h2, ואז h3 וכו '). מנועי חיפוש תן את השקלול הגבוה ביותר לטקסט הכלול בתגי כותרת מכיוון שיש ערך סמנטי לטקסט זה. במילים אחרות, על ידי תיוג כותרת העמוד H1, אתה אומר לעכביש של מנועי החיפוש שהוא המוקד מספר 1 של הדף. לכותרות H2 יש דגש מס '2, וכן הלאה.
אתה לא צריך לזכור באילו שיעורים השתמשת כדי להגדיר את הכותרות שלך
כאשר אתה יודע שלכל דפי האינטרנט שלך יהיה H1 מודגש, 2em וצהוב, אתה יכול להגדיר את זה פעם אחת בגיליון הסגנונות שלך ולהסתיים. כעבור 6 חודשים, כשאתה מוסיף עמוד נוסף, אתה פשוט מוסיף תג H1 בראש הדף שלך, אין לך לחזור לדפים אחרים כדי לגלות באיזה מזהה סגנון או מחלקה השתמשת כדי להגדיר את הכותרת הראשית וראשי המשנה.
ספק מתאר עמוד חזק
קווי מתאר מקלים על קריאת הטקסט. זו הסיבה שרוב בתי הספר בארה"ב לימדו את התלמידים לכתוב מתווה לפני שהם כותבים את המאמר. כאשר אתה משתמש בתגי כותרת בתבנית מתאר, לטקסט שלך יש מבנה ברור שמתגלה במהירות רבה. בנוסף, ישנם כלים שיכולים לסקור את מתאר העמוד כדי לספק תקציר, ואלה מסתמכים על תגיות כותרת עבור מבנה המתאר.
הדף שלך יהיה הגיוני גם כשהסגנונות כבויים
לא כולם יכולים להציג או להשתמש בגיליונות סגנון (וזה חוזר למספר 1 - מנועי חיפוש מציגים את התוכן (הטקסט) של הדף שלך, ולא את גליונות הסגנון). אם אתה משתמש בתגי כותרת, אתה הופך את הדפים שלך לנגישים יותר מכיוון שהכותרות מספקות מידע א תג DIV לא הייתי.
זה מועיל לקוראי מסך ונגישות אתרים
שימוש נכון בכותרות יוצר מבנה הגיוני למסמך. זה מה שקוראי המסך ישתמשו בו כדי "לקרוא" אתר למשתמש עם לקות ראייה, ולהפוך את האתר שלך לנגיש לאנשים עם מוגבלות.
סגנון הטקסט והגופן של הכותרות שלך
הדרך הקלה ביותר להתרחק מהבעיה "הגדולה, הנועזת והמכוערת" בכותרת התגים היא לעצב את הטקסט באופן שאתה רוצה שייראה. למעשה, כשעובדים על אתר חדש, עדיף לרוב לכתוב את סגנונות הפסקה, h1, h2 ו- h3. מקל רק עם משפחת גופנים וגודל / משקל. לדוגמה, זה עשוי להיות דף סגנון ראשוני לאתר חדש (אלה רק כמה סגנונות לדוגמא שניתן להשתמש בהם):
אתה יכול לשנות את גופנים של הכותרת שלך או שנה את סגנון הטקסט או אפילו את צבע הטקסט. כל אלה יהפכו את הכותרת ה"מכוערת "שלכם למשהו תוסס יותר ותואם את העיצוב שלכם.
גבולות יכולים להתלבש על כותרות
גבולות הם דרך נהדרת לשפר את הכותרות וקל להוסיף אותם. אך אל תשכח להתנסות בגבולות - אינך זקוק לגבול בכל צד בכותרת שלך. ואתה יכול להשתמש יותר מסתם גבולות משעממים.
הוספנו כותרת עליונה ותחתונה לכותרת הדוגמה שלנו כדי להציג סגנונות חזותיים מעניינים. אתה יכול להוסיף גבולות בכל דרך שאתה רוצה להשיג את סגנון העיצוב הרצוי.
הוסף תמונות רקע לכותרות שלך לפיזז עוד יותר
באתרי אינטרנט רבים יש קטע כותרת בראש הדף הכולל כותרת - בדרך כלל כותרת האתר וגרפיקה. רוב המעצבים חושבים על זה כשני אלמנטים נפרדים, אבל אתה לא צריך. אם הגרפיקה יש רק כדי לקשט את הכותרת, אז למה לא להוסיף אותה לסגנונות הכותרת?
החוכמה לכותרת זו היא שאנחנו יודעים שגובה התמונה שלנו הוא 90 פיקסלים. אז הוספנו ריפוד בתחתית הכותרת של 90 פיקסלים (ריפוד: 0.5 0 90 פיקסלים 0p;). אתה יכול לשחק עם השוליים, גובה הקו והריפוד כדי שהטקסט של הכותרת יציג בדיוק איפה שאתה רוצה אותו.
דבר אחד שיש לזכור בעת שימוש בתמונות הוא שאם יש לך אתר רספונסיבי (מה שאתה צריך) עם פריסה המשתנה על סמך גדלי המסך והתקנים, הכותרת שלך לא תמיד תהיה באותו הגודל. אם אתה זקוק לכותרת שלך בגודל מדויק, זה יכול לגרום לבעיות. זו אחת הסיבות שבדרך כלל אנו נמנעים מתמונות רקע בכותרת, מגניבים ככל שהם יכולים להיראות לפעמים.
החלפת תמונות בכותרות
זוהי טכניקה פופולרית נוספת עבור מעצבי אתרים מכיוון שהיא מאפשרת ליצור כותרת גרפית ולהחליף את הטקסט של תג הכותרת בתמונה זו. זהו האמת שנוהג עתיק של מעצבי אתרים, שהיו להם גישה למעט מאוד גופנים ורצו להשתמש בגופנים אקזוטיים יותר בעבודתם. עליית גופני האינטרנט שינתה באמת את האופן שבו מעצבים מתקרבים לאתרים. כעת ניתן להגדיר כותרות במגוון רחב של גופנים ותמונות עם גופנים מוטבעים כבר אינן נחוצות. ככזה, תמצא תמונות CSS בלבד להחלפה לכותרות באתרים ישנים שטרם עודכנו לשיטות מודרניות יותר.
נערך על ידי ג'רמי ג'ירארד