מהי כותרת ואיך ליצור כותרת ב-HTML
כותרת בעמוד HTML היא הצגה של נושא העמוד, כשם שכותרת של מאמר מציגה את נושא המאמר.
כותרת ב-HTML יכולה להיות ראשית או מדרגה היררכית נמוכה יותר. הכותרת הראשית ביותר תקרא h1 (האות h מגיעה מהמילה header), כותרת ברמה מתחת תקרא h2, מתחתיה תהיה כותרת h3 וכן הלאה.
תיאורטית, הכותרת ברמה הנמוכה ביותר היא כותרת ברמה 6 (הכותרת h6), אבל בפועל נהוג להשתמש לכל היותר בכותרות ברמה 3 (הכותרת h3).
לכל עמוד HTML יכולה להיות לכל היותר כותרת h1 יחידה. אין הגבלה על כמות הכותרות המשניות, אבל חשוב שהסידור שלהן יהיה נכון: כותרת h3 תימצא תמיד מתחת לכותרת h2 שתהיה תמיד מתחת לכותרת h1.
נמחיש דוגמה לשימוש בכותרות:
<h1>How to drive a car?</h1>
<h2>What is a car?<h2>
<h3>The gear</h3>
<p>
some text here
</p>
<p>
some text here
</p>
<h3>The engine</h3>
<p>
some text here
</p>
<p>
some text here
</p>
<h2>How to read traffic signs?<h2>
<p>
some text here
</p>
<h3>Stop sign</h3>
<p>
some text here
</p>
<h3>Traffic lights</h3>
<p>
some text here
</p>
זוהי דוגמה למבנה מאמר העוסק בהדרכת נהיגה.
הכותרת הראשית h1 של המאמר היא How to drive a car והמאמר מחולק ל-2 פרקי משנה עם כותרות h2 בראש כל אחד מהם. כותרת h2 אחת היא What is a car והכותרת השניה היא How to read traffic signs.
הפרק What is a car מחולק לשני תתי פרקים: The gear ו-The engine כאשר בראש כל אחד מהם מופיעה כותרת h3.
הפרק How to read traffic signs מחולק לשני תתי פרקים: Stop sign ו-Traffic lights כאשר בראש כל אחד מהם מופיעה כותרת h3.
נשים לב כי לאחר הכותרת h2 הראשונה, מופיעה מיד כותרת h3, בעוד לאחר הכותרת h2 השניה מופיעה קודם פיסקה (תגית p) ורק לאחריה כותרת h3. שני המצבים תקינים, שכן אין חובה שהכותרות יופיעו מיד זו אחרי זו.
חשיבות השימוש בכותרות ב-HTML
נשים לב, כי היינו יכולים בדוגמה שהצגנו לעיל לעטוף את הטקסט How to drive a car בתגית p (במקום בתגית h1) ולהגדיר לו עיצוב שיציג את הכיתוב הזה כאילו הוא כותרת. אבל זה לא יהיה נכון לעשות כך.
השימוש בתגיות של הכותרות הוא לא כדי לעצב את הכיתוב (שהכיתוב יראה ככותרת בדפדפן), אלא כדי לתת סמנטיקה (משמעות) לכיתוב.
התגיות h1,h2,h3 מספקות משמעות סמנטית לטקסט המופיע בתוכן. כלומר, הדפדפן ומנועי החיפוש יודעים כי הכיתוב How to drive a car הוא לא סתם טקסט שנראה כמו כותרת, אלא הוא ממש כותרת.
בכך שנתנו משמעות סמנטית לכותרת השגנו מספר דברים:
- שיפרנו את הקידום האורגני של עמוד ה-HTML במנועי החיפוש - מנועי החיפוש מיחסים חשיבות גבוהה יותר לכיתוב שבכותרות ועוזרים לקדם ביטויים הנמצאים בו
- שיפרנו את הנגשת העמוד לאנשים עם מוגבלות - כלי הנגשה רבים מסייעים בזיהוי הכותרות, מבליטים אותם ואף מקריאים אותם
- שיפרנו את קריאות ה-HTML עצמו עבורנו כמתכנתים - בעתיד בוודאי נרצה לערוך או לשנות את ה-HTML שיהיה קריא יותר אם נעשה שימוש בתגיות הסמנטיות
