תודה שצפית ב-Google I/O! צפייה בתוכן על פי דרישה.

דף זה תורגם על ידי Cloud Translation API.

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

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

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

כותרות, עם חזרה

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

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

דוגמאות מקננות H1.

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

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

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

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

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

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

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

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

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

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

אם הציטוט של Blendan Smooth לקוח מהמגזין הלא מקוון שלה, היה עליך לכתוב את ציטוט הבלוק כך:

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

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

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

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

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

רכיב המירכאות המוטבעות, <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, צריך לסמן בתו בריחה (escape) אותו באמצעות < או קידוד שפחות קל לזכור: <. ב-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&#x336;&#x33C;&#x356;&tcedil;&#x318;h&#x31D;&#x330;&#x329;&#x348;&#x317;i&#x319;&#x32A;n&#x34F;&#x329;&#x319;
&#x34D;&#x331;&#x32B;&#x31C;&#x31F;g&#x322;&#x323;&#x345; &#x317;&#x330;&#x353;&#x332;&#x31E;&#x300;t&#x359;&#x300;o&#x31F;
&#x316;&#x356;&#x339;&#x315; &#x353;&#x33C;&#x34E;&#x31D;&#x356;&#x32D;d&oacute;&#x32A;&#x320;&#x355;&#x31C; &#x34D;&#x331;
&#x34E;&#x35A;&#x32F;&#x31F;&#x301;w&#x32E;&#x332;&#x339;&#x355;&#x348;&#x31F;&#x35E;&igrave;th&#x322; &#x330;&#x333;
&#x32F;&#x32E;&#x347;

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

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

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

בדיקת ההבנה

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

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

c

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

©

תשובה נכונה!

&copyright.

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

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

<blockquote>

תג תקין

<quote>

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

<cite>

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