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

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

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

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

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

ראשי הפרקים של <body> באתר MLW.com

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

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

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

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

רוצים לבדוק את הידע שלכם בנושא כותרות וקטעים?