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

כיסינו את רוב האלמנטים של 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, שפת סימון מתמטית שמבוססת על XML כדי לתאר את הסימון המתמטי.

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

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

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

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

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

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

בחינת ההבנה

בחינת הידע שלך לגבי טקסט מוטבע.