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

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

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

כותרות, מבט נוסף

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

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

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

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

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

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

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

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

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

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

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

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

ציטוטים ומקורות

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

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

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

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

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

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

אם הציטוט של בלנדה סמוּת' נלקח מהמגזין שלה שלא באינטרנט, כותבים את הציטוט המובלט כך:

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

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

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

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

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

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

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

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

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

ישויות HTML

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

עוד כמה ישויות שבהן תשתמשו לעיתים קרובות הן © לזכויות יוצרים (©),™ לסימן מסחרי (™) ו-  לרווח קשיח. רווחים קשיחים שימושיים כשרוצים להוסיף רווח בין שני תווים או בין שתי מילים, אבל למנוע מעבר שורה במיקום הזה. יש יותר מ-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̢ ̰̳
̯̮͇

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

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

אה, והסמיילי הזה הוא 😀, אבל המסמך הזה מוגדר כ-UTF-8, אז הוא לא מוצג כתווים מיוחדים.

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

בודקים את הידע שלכם לגבי טקסט ב-HTML.

איך מציגים סמל זכויות יוצרים ב-HTML?

c

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

©

תשובה נכונה!

&copyright.

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

איזה רכיב משמש לציון ציטוט?

<blockquote>

תשובות נכונות

<quote>

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

<cite>

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