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

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

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

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

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

קודם צריך לבנות כותרת עליונה לאתר. מתחילים עם תגי עיצוב לא סמנטיים, ומתקדמים עד שמגיעים לפתרון טוב. כך תוכלו ללמוד על היתרונות של רכיבי הכותרת והקטע ב-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 מספקים אמצעים לעיצוב ול-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> מבטל את הצורך בהערות כדי לזהות איזה אלמנט כל תג סגירה סגר. בנוסף, שימוש בתגים שונים לאלמנטים שונים מבטל את הצורך בווים id ו-class. יכול להיות שלסלקטורים ב-CSS יש ספציפיות נמוכה. סביר להניח שתוכלו לטרגט את הקישורים באמצעות header nav a בלי לחשוש מהתנגשות.

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

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

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

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

מודל אובייקטים של נגישות ב-Chrome.

בצילום המסך הזה יש שתי כותרות תחתונות: אחת ב-<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,‏ role וסמנטי), אפשר להכניס את התוכן שקשור באופן חלקי לתוך התג <aside>. כמו רוב התגים, התג <aside> יוצג כנראה בסרגל צד או בתיבת מידע. התג <aside> הוא גם תג ציון דרך, עם התפקיד המרומז complementary.

<article>

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

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

<section>

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

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

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

בדיקה של רמת ההבנה שלך

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

מהו הרכיב שמשמש להכללת האזור באתר שכולל את הלוגו או הכותרת של האתר, ואת הניווט הראשי.

<heading>
אפשר לנסות שוב.
<header>
תשובה נכונה!
<title>
אפשר לנסות שוב.

כמה אלמנטים מסוג <main> מותרים בדף?

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