סיכום של פטפוט מתאר מסמכים אחרונים

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

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

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

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

בהסתכלות מעבר ל"חדשות" שהאלגוריתם רשמית כבר איננו, ברוס מקונן שאין גנרי <h> אלמנט או דומה שניתן לחתוך כדי לייצר את רמת הכותרת הנכונה. אני מסכים. בעל <h1> אלמנט קיים בעצם כחשוף <title> הוא מגביל, במיוחד מכיוון שדפים בנויים כל כך רק לעתים רחוקות סביב מאמר בודד עם כותרת אחת ברמה העליונה. לעתים קרובות אני מוצא את עצמי מתכווץ בכל פעם שאני מכין רכיב כרטיס כלשהו בשימוש <h3> אולי נכון מבחינה טכנית, אבל מרגיש לא בסדר. וזה עוד לפני שדיברנו על שיקולי הסגנון שבהם רמת כותרת נמוכה יותר צריכה כעת להיראות כמו רמת כותרת גבוהה יותר.

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

<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>

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

Disappointingly Average
└── The Autobiography of Geoff Graham
    └── by Geoff Graham

מה שאנחנו רוצים במקום זה א קבוצה של כותרות. רמז על <hgroup> אֵלֵמֶנט:

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

אז, אנחנו מקבלים את המבנה הזה:

<hgroup>
  <h1>Disappointingly Average</h1>
  <p>The Autobiography of Geoff Graham</p>
  <p>by Geoff Graham</p>
</hgroup>

<hgroup> is role=generic כרגע, אבל סטיב מצביע על הצעה שיכול למפות את זה role=group. אם זה יקרה, עץ הנגישות יאפשר לטכנולוגיה מסייעת להקצות משמעות סמנטית יותר לפסקאות האלה כמו כתוביות וקטעי הכותרת שהם. נשמע קל אבל סטיב מציין אתגרים שנמצאים בדרך. הוא גם מדגים כיצד ניתן ליישם דפוס מסוג זה כיום עם תכונות ARIA.

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