מידע בסיסי על טקסט

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

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

כותרות, חזרתי

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

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

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

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

אבל מודל האובייקטים של הנגישות, או AOM, עדיין ידווח על הרמה של הרכיב בצורה נכונה. במקרה הזה, "heading, level 1" (כותרת, רמה 1). שימו לב: הדפדפן לא עושה זאת ברמות כותרת אחרות. עם זאת, אין להשתמש בעיצוב דפדפן ברמת הכותרת. למרות שדפדפנים לא תומכים בקווים כלליים, מעמידים פנים שהם תומכים - עליכם לסמן את כותרות התוכן כאילו הן תומכות. כך התוכן שלכם יהיה הגיוני למנועי חיפוש, לקוראי מסך ולתחזקי העתיד (שזה אולי כדאי לכם).

מחוץ לכותרות, רוב הטקסט המובנה מורכב מסדרה של פסקאות. ב-HTML, פסקאות מסומנות בתג <p>. תג הסוגר הוא אופציונלי, אבל תמיד מומלץ.

לקטע #about יש כותרת וכמה פסקאות:

הקטע הזה הוא לא ציון דרך כי אין לו שם נגיש. כדי להפוך את ההרשאה הזו לתפקיד region, שהוא תפקיד ציון דרך, אפשר להשתמש ב-aria-labelledby כדי לספק את השם הנגיש:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

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

ציטוטים וציטוטים

כאשר אתה מסמן מאמר או פוסט בבלוג, ייתכן שתרצה לכלול ציטוט או ציטוט, עם או בלי ציטוט ביבליוגרפי גלוי. קיימים רכיבים לשלושת הרכיבים האלו: <blockquote>, <q> ו-<cite> עבור ציטוט ביבליוגרפי גלוי, או המאפיין cite כדי לספק מידע נוסף לחיפוש.

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

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

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

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

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

אם הציטוט מתוך "Bendan Smooth" נלקח מהכתב העת אופליין שלה, אתם צריכים לכתוב את ה-blockquote כך:

לאלמנט הציטוט הביבליוגרפי <cite> אין תפקיד משתמע והוא צריך לקבל את השם הנגיש מהתוכן שלו. אין לכלול aria-label.

כדי לתת קרדיט כשאין אפשרות להציג את התוכן כשאין אפשרות להציג את התוכן, אפשר להשתמש במאפיין cite שמקבל את הערך של כתובת ה-URL של מסמך המקור או ההודעה המצוטטת. המאפיין הזה תקף גם ב-<q> וגם ב-<blockquote>. למרות שזו כתובת URL, היא קריאה למחשבים אבל הקורא לא יכול לראות אותה:

תג הסגירה </p> הוא אופציונלי (ותמיד מומלץ), אבל תמיד חובה להשתמש בתג הסוגר </blockquote>.

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

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

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

q::before {content: open-quote;}
q::after {content: close-quote;}

המאפיין lang מופיע כדי ליידע את הדפדפן שבעוד ששפת הבסיס של הדף הוגדרה כאנגלית בתג הפותח <html lang="en-US">, פסקת הטקסט הזו כתובה בשפה אחרת. הפעולה הזו עוזרת לשלוט באמצעות הקול כמו Siri, Alexa ו-VoiceOver להשתמש בהגייה בצרפתית. ההגדרה גם מודיעה לדפדפן איזה סוג של ציטוטים יש לעבד.

בדומה ל-<blockquote>, הרכיב <q> תומך במאפיין cite.

ישויות HTML

אולי הבחנתם ברצף הבריחה (escape) או ב-"entity". מכיוון שה-< משמש ב-HTML, צריך לצאת ממנו באמצעות < או בקידוד < שקל לזכור אותו. ב-HTML יש ארבע ישויות שמורות: <, >, & ו-". ההפניות לתווים הן <, >, & ו-", בהתאמה.

יש כמה ישויות אחרות שבמקרים רבים משתמשים בהן: © לזכויות יוצרים (©),™ לסימנים מסחריים (TM) ו-  כדי ליצור מרחב משותף חדש. כדאי להוסיף רווחים ללא הפסקות בין קטעי טקסט כדי להוסיף רווח בין שני תווים או מילים, בלי לפגוע ברצף של מעברי שורה. יש יותר מ-2,000 הפניות לתווים בעלי שם. אבל אם צריך, לכל תו בודד, כולל סמלי אמוג'י, יש קוד מקביל מקודד שמתחיל ב-&#.

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

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

גם המשפט האחרון בקטע הבלוק הזה יכול להיות כתוב:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

בבלגן הזה של הקוד יש כמה תווים ללא סימון בתו בריחה (escape) וכמה הפניות לתווים בעלי שם. מכיוון שקבוצת התווים היא UTF-8, אין צורך לסמן בתו בריחה (escape) את התווים האחרונים ב-blockquote, כמו בדוגמה הזו. צריך לסמן בתו בריחה (escape) רק תווים שמערכת התווים לא תומכת בהם. אם צריך, קיימים כלים רבים שמאפשרים לבלוט מתווים שונים, ואפשר גם פשוט לכלול את <meta charset="UTF-8"> ב-<head>.

גם אם תציינו את מערכת התווים כ-UTF-8, עדיין תצטרכו לסמן בתו בריחה את < כדי להדפיס את התו הזה על המסך. באופן כללי, אין צורך לכלול הפניות לתווים בעלי שם עבור >, " או &. אבל אם רוצים לכתוב מדריך לישויות HTML, צריך לכתוב < כשמלמדים מישהו איך לתכנת <. 😀

אה, והאמוג'י של הסמיילי הוא 😀, אבל המסמך הזה מוגדר כ-UTF-8, כך שאי אפשר לסמן אותו בתו בריחה (escape).

בדיקת ההבנה

בחינת הידע שלך בטקסט ב-HTML.