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

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

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

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

<article>

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

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

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

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

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

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

הערה: קטע הקוד הזה כולל רק את התוכן של <body>. הסברנו קודם לכן על ה<!doctype>, <html>, <body> והמטא-מידע.

מכיוון שאף קטע תוכן הוא לא קטע תוכן נפרד ומלא, <section> מתאים יותר מ<article>; למרות שלכל אחד יש כותרת, אין קטע הראוי <footer>.

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

בחינת ההבנה

בוחנים את הידע שלכם בכותרות ובסעיפים.

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

<heading>

אפשר לנסות שוב.

<header>

נכון!

<title>

אפשר לנסות שוב.

כמה רכיבי <main> מותרים בדף?

המרה אחת.

נכון!

ללא. זהו לא רכיב חוקי.

אפשר לנסות שוב.

רבים ככל הנדרש, כל עוד יש להם שם נגיש.

אפשר לנסות שוב.