כותרות וקטעים

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

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

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

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

אתר <header>

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

אם השקעתם מעט מחשבה, או ללא מחשבה בכלל בסמנטיקה של הכותרת, תוכלו להשתמש בקוד הבא:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

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

המאפיינים id ו-class מספקים קטעי הוק (hooks) לסגנון ול-JavaScript, אבל הם לא מוסיפים ערך סמנטי לקורא המסך וגם (בדרך כלל) למנועי החיפוש.

אפשר לכלול מאפייני role כדי לספק סמנטיקה ליצירת מודל טוב של אובייקט נגישות (AOM) לקוראי מסך:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
<div>
<!-- end of header -->

התכונה הזו לכל הפחות מספקת סמנטיקה ומאפשרת להשתמש בבוררי מאפיינים ב-CSS, אבל עדיין מוסיפה תגובות שבעזרתן אפשר לזהות איזה <div> נסגר כל </div>.

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

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

הקוד הזה משתמש בשני ציוני דרך סמנטיים: <header> ו-<nav>.

זו הכותרת הראשית. הרכיב <header> לא תמיד מאפיין של ציון דרך. יש לו סמנטיקה שונה בהתאם למיקום שבו הוא ממוקם. כשהרמה <header> היא ברמה העליונה, מדובר באתר banner – תפקיד מפורסם, שאולי ציינתם בבלוק הקוד role. כש<header> נמצא בתוך היררכיה ב-<main>, ב-<article> או ב-<section>, הוא פשוט מזהה אותו ככותרת של הקטע ולא כציון דרך.

הרכיב <nav> מזהה תוכן כניווט. מכיוון ש-<nav> הזה נמצא בתוך כותרת האתר, זהו תפריט הניווט הראשי של האתר. אם הוא היה מקונן ב-<article> או ב-<section>, הוא היה ניווט פנימי עבור הקטע הזה בלבד. בעזרת אלמנטים סמנטיים יצרתם מודל אובייקטי נגישות משמעותי, או AOM. ה-AOM מאפשר לקורא המסך ליידע את המשתמשים על כך שקטע זה מורכב מבלוק ניווט ראשי, שבו הם יכולים לנווט או לדלג.

שימוש בתגים הסוגרים </nav> ו-</header> מבטל את הצורך בתגובות כדי לזהות איזה רכיב נסגר כל תג סיום. בנוסף, שימוש בתגים שונים לרכיבים שונים מבטל את הצורך בתגי הוק (hooks) id ו-class. לסלקטורים ב-CSS יכולה להיות ספציפיות נמוכה. סביר להניח שאפשר לטרגט לקישורים עם header nav a בלי לחשוש מהתנגשות.

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

אתר <footer>

בואו נתכנת את הכותרת התחתונה של האתר.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

בדומה למדיניות <header>, הקביעה אם הכותרת התחתונה היא ציון דרך תלויה במיקום שבו הכותרת התחתונה מוצבת. כשמדובר בכותרת התחתונה של האתר, היא משמשת כציון דרך. היא צריכה לכלול את המידע הרצוי לגבי הכותרת התחתונה של האתר בכל דף, כמו הצהרה על זכויות יוצרים, פרטים ליצירת קשר וקישורים למדיניות הפרטיות שלך בנושא קובצי cookie. הערך המשתמע של role בכותרת התחתונה של האתר הוא contentinfo. במקרים אחרים, לכותרת התחתונה אין תפקיד משתמע והיא לא ציון דרך, כמו בצילום המסך הבא של AOM ב-Chrome (שכולל <article> עם <header> ו-<footer> בין <header> ל-<footer>).

בצילום המסך הזה יש שתי כותרות תחתונות: אחת ברמה <article> והשנייה ברמה העליונה. הכותרת התחתונה ברמה העליונה היא ציון דרך עם התפקיד המרומז של contentinfo. הכותרת התחתונה השנייה היא לא ציון דרך. דפדפן Chrome מציג אותו בתור FooterAsNonLandmark. ב-Firefox הוא מוצג בתור section.

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

<footer> הוא צאצא של <article>, <aside>, <main>, <nav> או <section>, המשמעות היא לא ציון דרך. אם הפוסט מופיע מעצמו, בהתאם לתגי העיצוב, יכול להיות שהכותרת התחתונה תקודם.

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

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

מבנה המסמך

המודול הזה מתחיל בספרות <header> ו-<footer>, מכיוון שהם ייחודיים ולפעמים הם נחשבים לאלמנטים מסוג 'ציון דרך', או 'חלוקה'. בואו נדבר על נושאי "משרה מלאה" של חלוקה למקטעים על ידי דיון על פריסות הדפים הנפוצות ביותר:

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

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

אם אתם יוצרים בלוג, יכול להיות שיש לכם סדרת מאמרים ב-<main>:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

בעת שימוש באלמנטים סמנטיים, הדפדפנים יכולים ליצור עצי נגישות משמעותיים, וכך לאפשר למשתמשים בקורא מסך לנווט בקלות רבה יותר. כאן, banner ו-contentinfo מסופקים דרך האתרים <header> ו-<footer>. הרכיבים החדשים שנוספו כאן כוללים את <main>, <aside> ו-<article>. גם, <h1> ו-<nav> שבהם השתמשת קודם, וגם <section>, שלא השתמשת בהם עדיין.

<main>

יש רכיב אחד של ציון דרך <main>. הרכיב <main> מזהה את התוכן העיקרי של המסמך. בכל דף צריך להיות רק מאפיין אחד מסוג <main>.

<aside>

<aside> מיועד לתוכן שקשור באופן עקיף או קשור לתוכן העיקרי של המסמך. לדוגמה, המאמר הזה עוסק ב-HTML. בקטע שעוסק בספציפיות של סלקטור ב-CSS של שלוש הדוגמאות לכותרות אתרים (div, תפקיד וסמנטי), אפשר לכלול בצד <aside> את הרכיבים שקשורים למשיקים; וכמו ברוב המקרים, <aside> יוצג בסרגל צד או בתיבת קריאה. גם <aside> הוא מאפיין מפורסם, עם התפקיד המרומז של complementary.

<article>

בתוך <main> הוספנו שני רכיבי <article>. זה לא היה נחוץ בדוגמה הראשונה, כשהתוכן הראשי היה רק מילה אחת, או בעולם האמיתי, קטע תוכן אחד. אבל אם אתם כותבים בלוג, כמו בדוגמה השנייה שלנו, כל פוסט צריך להיות ב-<article>, בתוך <main>.

<article> מייצג קטע תוכן שלם או עצמאי, שלמעשה ניתן לעשות בו שימוש חוזר. חשוב על כתבה כמו על כתבה בעיתון. בדפוס, כתבה חדשותית על ג'סינדה ארדרן, ראשת ממשלת ניו זילנד, עשויה להופיע רק במדור אחד, אולי בחדשות מהעולם. באתר של המאמר, אותה כתבה עשויה להופיע בדף הבית, בקטע פוליטיקה, באוקיאניה או במדור החדשות של אסיה והאוקיינוס השקט, ובהתאם לנושא החדשות, אולי במדורי הספורט, סגנון החיים או הטכנולוגיה. המאמר עשוי להופיע גם באתרים אחרים, כמו Pocket או Yahoo News!

<section>

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

בחזרה לדוגמה של Jacinda Ardern, בדף הבית של העיתון, הבאנר יכלול את שם העיתון ואחריו <main> אחד, המחולק לכמה <section>, עם כותרת כמו "חדשות מהעולם". ו"פוליטיקה"; ובכל קטע יש סדרה של <article>. בתוך כל <article>, ייתכן שיופיע גם רכיב <section> אחד או יותר. אם תסתכלו בדף הזה, תראו את כל "הכותרות והקטעים" הוא <article>. לאחר מכן <article> זה מחולק למספר <section>, כולל site header, site footer ומבנה המסמך. למאמר עצמו יש כותרת, וכך גם לכל אחד מהקטעים.

<section> אינו ציון דרך, אלא אם יש לו שם נגיש. אם יש לו שם נגיש, התפקיד המשתמע הוא region. כדאי להשתמש בתפקידים של נקודות ציון באופן מוגבל כדי לזהות חלקים גדולים יותר במסמך. שימוש ביותר מדי תפקידים של ARIA עלול ליצור 'רעש' בקוראי מסך, דבר שמקשה על הבנת הפריסה הכוללת של הדף, יכול להועיל אם <main> מכיל שניים או שלושה קטעי משנה חשובים, כולל שם נגיש לכל <section>.

כותרות: <h1>-<h6>

קיימים שישה רכיבים של כותרות קטעים: <h1>, <h2>, <h3>, <h4>, <h5> ו-<h6>. כל אחת מייצגת אחת משש הרמות של כותרות קטעים. <h1> היא הרמה הגבוהה ביותר או החשובה ביותר, ו-<h6> היא הרמה הנמוכה ביותר.

כשכותרת מוצבת בבאנר של מסמך <header>, היא הכותרת של האפליקציה או האתר. כשהוא מקונן ב-<main>, גם אם הוא מקונן בתוך <header> ב-<main>, זו הכותרת של הדף הזה ולא של האתר כולו. כשהוא מקונן ב-<article> או ב-<section>, זו הכותרת של קטע המשנה הזה של הדף.

מומלץ להשתמש ברמות כותרת בדומה לרמות של כותרות בכלי לעריכת טקסט: להתחיל ב-<h1> ככותרת הראשית, ב-<h2> ככותרות של קטעי משנה וב-<h3> אם יש בקטעי המשנה האלה קטעים. להימנע מדילוג על רמות הכותרות. יש כאן מאמר טוב על כותרות של קטעים.

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

עכשיו יש לכם מספיק ידע כדי להסביר על MachineLearningWorkshop.com:

תיאור <body> של MLW.com

זהו מתווה התוכן הגלוי באתר של סדנה ללמידת מכונה:

מכיוון שאף קטע תוכן הוא לא קטע תוכן עצמאי ומלא, <section> מתאים יותר מ<article>. אמנם לכל כותרת יש כותרת, אבל אף קטע לא שווה ל-<footer>.

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

בדיקת ההבנה

בוחנים את הידע שלכם לגבי כותרות וקטעים.