רכיבי טקסט אחרים בתוך השורה

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

בתיעוד של דוגמאות קוד, צריך להשתמש ברכיב <code>. על ידי כברירת מחדל, תוכן הטקסט מוצג בגופן Unicode. כשכוללים מספר שורות קוד, צריך להציב את <code> בתוך <pre>, שמייצג טקסט עם פורמט מוגדר מראש.

<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
  and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>

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

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

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

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

ניתן להשתמש ברכיב <var> לביטויים מתמטיים או של משתני תכנות. רוב הדפדפנים מציגים את תוכן הטקסט בגרסה נטויה של הגופן שמסביב. אם כותבים הרבה מתמטיקה, כדאי להשתמש ב-MathML, שמבוסס על XML שפת סימון מתמטית לתיאור סימון מתמטי.

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

משתמשים ב-<del> כדי לציין טקסט שהוסר, או 'נמחק'. אופציונלי: אפשר לכלול את השדה cite שמוגדר למשאב שמסביר את השינוי ואת המאפיין datetime עם המאפיין תאריך או תאריך ושעה בפורמט תאריך ושעה שקריאים למחשבים. רכיב הקו החוצה, <s>, ניתן לציין שהתוכן כבר לא רלוונטי, אבל לא הוסר בפועל מהמסמך.

<ins> הוא ההפך לאלמנט <del>; הוא בשימוש כדי לציין טקסט שנוסף, או "נוסף", כולל גם את המאפיינים cite או datetime.

הגדרות ותמיכה בשפה

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

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

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

כשכותבים שפות עם כיוונים שונים, ה-HTML מספק את הקוד <bdi> לטיפול בטקסט שעשוי להיות דו-כיווני, בנפרד מהטקסט שמסביבו. הבינלאומיות הזו שימושי במיוחד כאשר תוכן בעל כיוון לא ידוע נוסף באופן דינמי לדף. <bdo> מבטל את הכיוון הנוכחי של הטקסט, ולעבד טקסט בכיוון אחר. ב-W3C יש מבוא לאלגוריתמים דו-כיווניים.

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

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

חשוב לשים לב שהסוגריים לא גלויים אם הדפדפן תומך ב-<ruby>.

הדגשת טקסט

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

  • שימוש ברכיב <em> כדי להדגיש או להדגיש חלק מסוים של תוכן. אפשר להציב את הרכיב <em> בתוך רכיב, וכל רמת קינון מציינת רמה גבוהה יותר של הדגשה. לרכיב הזה יש סמנטי משמעות, וניתן להשתמש בה כדי להדגיש סוכני משתמש שמיעתיים כמו קוראי מסך, Alexa ו-Siri.
  • משתמשים ברכיב <mark> כדי לזהות טקסט או להדגיש אותו. שהוא רלוונטי באופן כלשהו, כמו הדגשה (או "סימון") של אירוע מונחי החיפוש בתוצאות החיפוש. הפעולה הזאת מאפשרת תוכן מסומן כך שניתן יהיה לזהות אותו במהירות, מבלי להוסיף הדגשה או חשיבות.
  • הרכיב <strong> מזהה שהטקסט הוא בעל עוצמה בחשיבותו. בדרך כלל דפדפנים מעבדים את התוכן עם גופן כבד יותר.
  • את הרכיב <cite>, שמכוסה במידע בסיסי על טקסט, משמש לסימון שמות של ספרים, מאמרים או יצירה יצירתית אחרת, או הפניה מקוצרת או מטא-נתונים של ציטוטים ביבליוגרפיים כאלה, כמו מספר ISBN של ספר.

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

<i>

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

ב-MLW משתמשים ברכיב <span> לטקסט המוזר שמופיע בתחתית הביקורת של Toasty McToastface בסדנה. <span> מספק קונטיינר גנרי מוטבע, שאין לו סמנטיקה ולא מייצג שום דבר. היה שימוש הולם ב<i>.

סגנון ברירת המחדל של הרכיב <i> הוא לעבד את הרכיב בגופן נטוי. בדוגמה הזו מגדירים את font-style: normal כיוון שהתווים שבהם נעשה שימוש אינם זמינים בכתב נטוי.

<u>

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

<p>I always spell <u>licence</u> wrong</p>

<b>

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

רווח לבן

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

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

כדי להוסיף מפריד או הפסקה בין קטעי תוכן, כמו בין פרקים בספר, או בין קטעי תוכן משיקים. בין המנולוגיה באורך 5,000 מילים לבין המתכון שהמשתמשים מחפשים בפועל, כדאי להוסיף <hr> לרכיב מסוים. HR הוא ראשי התיבות של כלל אופקי. למרות שדפדפנים בדרך כלל מעבדים קו אופקי, לאלמנט הזה יש משמעות סמנטית. תפקיד ברירת המחדל הוא separator.

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

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

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

הרכיבים <br>, <hr> ו-<wbr> הם רכיבים ריקים, כלומר לא יכולים להיות בהם צמתים צאצאים – וגם לא בתצוגת עץ רכיבים או טקסט. לאף אחת מהאפשרויות האלה אין "תוספות" שבהם אפשר לאחסן את התוכן, אין להם תג סיום.

בדיקת ההבנה

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

באיזה רכיב להשתמש כדי להציג דוגמת קוד?

<data>
<code>
<kbd>

למה משמש הרכיב <ruby>?

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