תגים הקשורים לטקסט

מאמר זה מסביר על תגיות הקשורות לטקסט.

ההסבר מחולק לתגים סמנטיים ותגים שאינם סמנטיים.

YouTube Video

יצירת CSS לתצוגה מקדימה

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

תגים בסיסיים הקשורים לטקסט

תג <div>

1<div>This is a division of content.</div>

• תג <div> הוא אלמנט ברמת בלוק המשמש ליצירת חלוקות בתוך HTML.

• תג <div> הוא תג שאינו סמנטי.

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

• על ידי שילוב עם CSS ו-JavaScript, תוכל לשלוט במראה ובהתנהגות של הדף.

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

תג <p>

1<p>This is a paragraph of text.</p>

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

תג <a>

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• תגית <a> משמשת ליצירת קישורים.

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

• ניתן להשתמש בו עבור קישורי טקסט או תמונה, ושימוש ב-target="_blank" יפתח את הקישור בכרטיסייה חדשה.

• המאפיין target משמש לציון האופן שבו יוצג היעד המקושר.

  • _self (ברירת מחדל): פותח את הקישור בחלון הנוכחי או בלשונית הנוכחית.
  • _blank: פותח את הקישור בחלון חדש או בלשונית חדשה.
  • _parent: פותח את הקישור במסגרת האב.
  • _top: פותח את הקישור במלוא חלון הדפדפן תוך התעלמות מכל מסגרות.

• המאפיין title משמש להצגת טקסט עזרה על הקישור. כאשר המשתמש רחף מעל הקישור, הכותרת שצוינה מוצגת.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• תגית <a> נועדה גם לקפוץ למיקומים ספציפיים בתוך אותו העמוד. כדי להשיג זאת, עליך להגדיר מאפיין id על האלמנט היעד ולהשתמש ב־id הזה במאפיין href של הקישור.

תג <span>

1Here is some <span style="color: red;">highlighted text

• תג <span> הוא אלמנט ברמה מקוונת.

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

• ניתן ליישם סגנונות ספציפיים באופן חלקי.

  כאשר תרצה להחיל עיצוב רק על חלק מהמסמך, תוכל להשתמש בתגית <span> כדי להקצות מחלקה או מזהה ב־CSS וליישם עיצובים על טווח מסוים.

• תגית <span> היא אלמנט שאינו סמנטי.

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

תגית <br>

1Here is some text with a <br> line break.

• תגית <br> היא אלמנט אינליין.

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

• זו תגית שנסגרת בעצמה, ולכן אין צורך בתגית סגירה (</br>).

• עדיף להימנע משימוש יתר בתגית <br>, ולהשתמש בתגיות <p> או CSS לשבירת פסקאות או התאמות פריסה.

  בעת ארגון טקסט לפסקאות, מתאים יותר להשתמש בתגית <p>. מומלץ גם להשתמש ב־CSS כדי לבצע התאמות פריסה. לדוגמה, שימוש במאפיין white-space ב־CSS יכול להציג שבירות שורה ורווחים בטקסט כפי שהם מופיעים.

תגית <hr>

1This is some text.<hr>This is another section of text.

• תגית <hr> היא אלמנט ברמת בלוק.

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

• זוהי תגית שסוגרת את עצמה, ולכן אין צורך בתגית סגירה (</hr>).

• ניתן להתאים את הצבע, האורך והעובי שלה באמצעות CSS.

תגיות טקסט סמנטיות

מתגית <h1> לתגית <h6>

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• תגיות <h1> עד <h6> הן תגיות כותרות המשמשות ב־HTML.

  תגית <h1> מייצגת את הכותרת החשובה ביותר ומשמשת בדרך כלל ככותרת הראשית של כל העמוד. נהוג להשתמש בתג <h1> אחד בלבד בכל מסמך HTML.

  תגית <h2> היא הכותרת החשובה הבאה אחרי <h1>, ומשמשת לכותרות של מקטעים או פרקים בתוך הדף.

  תג <h3> מייצג כותרות משנה או חלקים קטנים יותר מתחת לתג <h2>.

  התגים <h4>, <h5> ו-<h6> מייצגים כותרות ברמות נמוכות יותר, המשמשות לפריטים מפורטים או כותרות של חלקים.

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

תגית <strong>

1<strong>Important text</strong> to emphasize significance.

• תג <strong> הוא תג HTML שמשמש לציון חשיבות או הדגשה של טקסט, ומוצג בדרך כלל בכתב מודגש.

• תג <strong> הוא תג סמנטי, והמטרה העיקרית שלו היא להוסיף משמעות.

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

תג <em>

1<em>Emphasized text</em> for italics and emphasis.

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

• תג <em> הוא תג סמנטי, ומטרתו העיקרית היא להעניק משמעות.

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

תג <mark>

1<mark>Highlighted text</mark> for attention.

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

תג <del>

1<del>Deleted text</del> shows removed content.

• תג <del> משמש לציון שטקסט נמחק או שונה. תג זה שימושי להציג את ההיסטוריה של שינויים או תיקונים בטקסט.

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

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

תג <ins>

1<ins>Inserted text</ins> shows added content.

• תג <ins> משמש לציון טקסט חדש שנוסף או שונה במסמך. תג זה שימושי להמחשת היסטוריית התוספות או השינויים בטקסט.

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

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

תג <abbr>

1<abbr title="World Health Organization">WHO</abbr>

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

תגים הקשורים לעיצוב טקסט

תג <b>

1<b>Bold text</b> without semantic emphasis.

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

<i> תג

1<i>Italic text</i> for style.

• תג <i> הוא אלמנט בשורה המשמש לעשיית טקסט נטוי.

<u> תג

1<u>Underlined text</u> for decoration.

• תג <u> הוא אלמנט בשורה המשמש ליצירת קו תחתון לטקסט.

<small> תג

1<small>This is small text.</small>

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

<s> תג

1<s>Strikethrough text</s>

• תג <s> הוא אלמנט מקו שמשמש ליצירת קו חוצה על טקסט.

<sub> תג

1H<sub>2</sub>O

• <sub> הוא תג בשורה המשמש להציג טקסט בתת-כתב.

<sup> תג

1E = mc<sup>2</sup>

• <sup> הוא תג בשורה המשמש להציג טקסט בעלי-כתב.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video