תיעוד HTML עם דוגמאות להרצה: תגיות

Q: מה ההבדל בין תגית HTML לאלמנט HTML?

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

Q: האם תגיות HTML רגישות לאותיות גדולות וקטנות?

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

מה זו תגית HTML

תגית HTML היא שם בתוך סוגריים משולשים שמסמן קטע תוכן. רוב התגיות באות בזוגות: תגית פתיחה כמו <p> ותגית סגירה עם לוכסן כמו </p>. כל מה שביניהן הוא התוכן, והחבילה כולה היא אלמנט.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

שנו את <h1> ל-<h2> (גם בתגית הפתיחה וגם בתגית הסגירה) והכותרת קטנה. שם התגית הוא מה שאומר לדפדפן מה התוכן.

אנטומיה: תגיות, מאפיינים ואלמנטים

<a href="/docs/html/links" class="nav">Links</a>

חלק	בדוגמה
תגית פתיחה	`<a href="/docs/html/links" class="nav">`
שם התגית	`a`
מאפיינים	`href="/docs/html/links"` ו-`class="nav"`
תוכן	`Links`
תגית סגירה	`</a>`
אלמנט	כל מה שלמעלה יחד

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

שמות תגיות לא רגישים לאותיות גדולות וקטנות: <P> ו-<p> זהים. כתבו אותם באותיות קטנות.

תגיות ריקות: בלי תגית סגירה

חלק מהאלמנטים לא יכולים להכיל כלום, ולכן יש להם רק תגית פתיחה. הם נקראים אלמנטים ריקים (void elements, ויש שאומרים self closing tags):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

הרשימה המלאה: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

אפשר לכתוב אותם כ-<br /> עם לוכסן. ב-HTML הלוכסן לא עושה כלום; הוא מותר כדי שקוד בסגנון XHTML ימשיך לעבוד. הדפדפן מתעלם גם מהלוכסן בתגית רגילה, כמו <div />, כלומר ה-div עדיין פתוח.

קינון תגיות

אלמנטים נכנסים לתוך אלמנטים אחרים. הכלל הוא: סגרו תגיות בסדר הפוך לזה שבו פתחתם אותן. האחרונה שנפתחה היא הראשונה שנסגרת.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

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

אלמנטי block ו-inline

רוב התגיות מתחלקות לשתי קבוצות תצוגה. אלמנטי block (div, p, h1 עד h6, ul, section) מתחילים בשורה חדשה ותופסים את כל הרוחב. אלמנטי inline (span, a, strong, em, code) יושבים בתוך שורת טקסט ורחבים רק כמו התוכן שלהם.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

התיבות הכחולות נמתחות לרוחב העמוד; הכתומות עוטפות רק את הטקסט שלהן. CSS יכול לשנות את זה עם המאפיין display, אבל כל תגית מתחילה עם ברירת המחדל שלה. ראו div ו-span לשני המיכלים הכלליים.

תגיות ה-HTML הנפוצות ביותר

תגית	מטרה
`<html>`, `<head>`, `<body>`	שלד המסמך
`<title>`, `<meta>`, `<link>`	מידע על העמוד ב-head
`<h1>` עד `<h6>`	כותרות
`<p>`	פסקה
`<a>`	קישור
`<img>`	תמונה
`<ul>`, `<ol>`, `<li>`	רשימות
`<strong>`, `<em>`	טקסט חשוב וטקסט מודגש בטון
`<br>`, `<hr>`	ירידת שורה, מעבר נושא
`<div>`, `<span>`	מיכלי block ו-inline כלליים
`<table>`, `<tr>`, `<th>`, `<td>`	טבלאות
`<form>`, `<input>`, `<label>`, `<button>`	טפסים
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	מבנה עמוד עם משמעות

לרשימה בעמוד אחד שאפשר להדפיס, ראו את דף העזר ל-HTML.

תגיות שלא קיימות

אם מקלידים תגית שהדפדפן לא מכיר, הוא לא נכשל. הוא יוצר אלמנט לא מוכר, מציג את התוכן שלו, ומתייחס אליו כ-inline:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

לתגית לא מוכרת אין משמעות למנועי חיפוש או לקוראי מסך, אז העדיפו תגית אמיתית. אם אתם בונים רכיב משלכם עם JavaScript, תנו לו שם עם מקף (user-badge): שמות עם מקף שמורים לאלמנטים מותאמים אישית ואף פעם לא מתנגשים עם תגיות HTML עתידיות.

טעויות נפוצות

לשכוח תגית סגירה. </a> או </strong> חסרים הופכים את שאר העמוד לקישור או לטקסט מודגש. דפדפנים סוגרים חלק מהתגיות בשבילכם (</p>, </li>), אבל לא את אלה.
לסגור תגית ריקה. </br> ו-</img> אינם תקינים. דפדפנים אפילו קוראים את </br> כ-<br> פותח, כך ש-<br></br> נותן שתי ירידות שורה.
תגיות חופפות. סגרו בסדר הפוך: <b><i>x</i></b>, אף פעם לא <b><i>x</b></i>.
לשים block בתוך פסקה. <div>, רשימה או כותרת בתוך <p> מסיימים את הפסקה מוקדם. השתמשו ב-<div> כמיכל החיצוני.
לבחור תגיות לפי המראה שלהן. השתמשו ב-<h2> כי זו כותרת, לא כי היא גדולה. גודל ומשקל שייכים ל-CSS.

שאלות נפוצות

מה ההבדל בין תגית HTML לאלמנט HTML?

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

לאילו תגיות HTML לא צריך תגית סגירה?

אלמנטים ריקים (void) לא יכולים להכיל תוכן, ולכן אין להם תגית סגירה: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> ו-<embed>.

לכתוב <br> או <br />?

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

האם תגיות HTML רגישות לאותיות גדולות וקטנות?

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

כמה תגיות HTML יש?

תקן ה-HTML הנוכחי מגדיר יותר מ-100 אלמנטים, אבל עמודים יומיומיים משתמשים בכ-20 עד 30 מהם: כותרות, פסקאות, קישורים, תמונות, רשימות, div, span, טפסים ותגיות הפריסה הסמנטיות.

מה קורה אם משתמשים בתגית שלא קיימת?

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

מושגים קשורים