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

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

יש מודול בנושא קישורים ורכיב <a>. בהמשך מופיע תיאור קצר של שאר האלמנטים.

דוגמאות לקוד וכתיבה טכנית

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

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

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

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

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

המאפיין <ins> הוא ההפך מהמאפיין <del>. האלמנט הזה משמש לציון טקסט שנוסף או 'הוכנס'. אפשר לכלול את המאפיינים cite או datetime.

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

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

החריג לכלל הזה הוא אם המונח מוכר היטב לקורא, כמו HTML ו-CSS בסדרה הזו.

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

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

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

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

בדיקת ההבנה

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

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

<kbd>
<data>
<code>

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

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