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

Q: מהן התגיות הסמנטיות ב-HTML?

תגיות הפריסה הן , , , , , ו- . תגיות סמנטיות נפוצות אחרות הן , , , , , והכותרות עד .

Q: האם div הוא אלמנט סמנטי?

לא. ל- אין משמעות משלו; הוא קופסה כללית לעיצוב ולפריסה. השתמשו בו כשאף תגית סמנטית לא מתאימה, וב- , , ובאחרות כשכן.

מה זה HTML סמנטי

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

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

תגיות הפריסה הסמנטיות

תגית	השתמשו בה ל	ציון דרך בקורא מסך
`<header>`	הפתיחה של העמוד או של article: לוגו, כותרת, שם הכותב	banner (רק כשהיא לא בתוך `article`, `aside`, `main`, `nav` או `section`)
`<nav>`	בלוק של קישורי ניווט מרכזיים	navigation
`<main>`	התוכן הייחודי לעמוד הזה, פעם אחת בעמוד	main
`<article>`	יחידה עצמאית שיש לה משמעות בפני עצמה: פוסט, תגובה, כרטיס מוצר	אין כברירת מחדל
`<section>`	קבוצת תוכן נושאית עם כותרת משלה	region, רק כשיש לה שם נגיש
`<aside>`	תוכן קשור לצד הזרימה הראשית: סרגל צד, הערה	complementary
`<footer>`	מידע סוגר של העמוד או של article: זכויות יוצרים, כותב, קישורים	contentinfo (רק ברמת העמוד)

לכל תגית יש עמוד משלה עם פרטים נוספים: header, nav, section ו-footer. העמוד הזה מסביר איך הן משתלבות יחד.

למה לא פשוט להשתמש ב-div

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

גרסת ה-div מוצאת 0, הגרסה הסמנטית מוצאת 4. זה מה שטכנולוגיה מסייעת רואה: משתמש בקורא מסך יכול לקפוץ ישר לניווט או לתוכן הראשי בעמוד הסמנטי, ובעמוד ה-div הוא צריך לקרוא הכול. שמות classes כמו class="nav" לא אומרים לדפדפן כלום.

<div> עדיין הבחירה הנכונה לקופסאות שקיימות רק בשביל עיצוב או פריסה, כמו עטיפת ה-flex .cols בדוגמה הראשונה.

main, article ו-aside

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

ל-article יש <header> ו-<footer> משלו. הם לא מוגבלים לרמת העמוד: כל אחד מהם פותח או סוגר את ה-article או ה-section הקרובים אליו. האלמנט <time datetime> נותן את התאריך בצורה שמכונה יכולה לקרוא, ומציג אותו בצורה שאדם קורא.

בדקו את מבנה הכותרות

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

ה-h4 שמתחת ל-"Brewing" מדלג על רמה. שנו אותו ל-h3 והמבנה נקרא כמו שצריך. בחרו רמות כותרת לפי המבנה, ושנו את הגודל שלהן עם CSS אם אתם רוצים אותן גדולות או קטנות יותר.

עוד תגיות סמנטיות

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

תגית	משמעות
`<strong>`	טקסט חשוב (מודגש כברירת מחדל)
`<em>`	הדגשה בטון (נטוי כברירת מחדל)
`<figure>` ו-`<figcaption>`	תמונה, תרשים או דוגמת קוד עם הכיתוב שלהם
`<time datetime="...">`	תאריך או שעה בצורה שמכונה יכולה לקרוא
`<address>`	פרטי קשר של כותב העמוד או ה-article
`<mark>`	טקסט מסומן, כמו התאמה בחיפוש
`<abbr title="...">`	ראשי תיבות עם הצורה המלאה שלהם
`<button>`	משהו שמבצע פעולה

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

העבירו את העכבר מעל ראשי התיבות "W3C" כדי לראות את הצורה המלאה ב-tooltip.

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

שימוש בתגית בגלל המראה שלה. <blockquote> הוא לציטוטים, לא להזחה; <h3> הוא לרמת כותרת, לא לטקסט מודגש בגודל בינוני. עצבו עם CSS.
לעטוף הכול ב-<section>. ל-section צריכים להיות כותרת ונושא. אם צריך קופסה לעיצוב, השתמשו ב-<div>.
יותר מ-<main> גלוי אחד. השאירו אחד בעמוד, ולעולם אל תקננו אותו בתוך <article>, <aside>, <header>, <nav> או <footer>.
לשים כל רשימת קישורים ב-<nav>. שמרו אותו לבלוקים מרכזיים של ניווט, כמו תפריט האתר או תוכן עניינים. כמה קישורים בפוטר לא צריכים אותו.
אלמנטי <div> לחיצים. אי אפשר להגיע ל-<div onclick> עם המקלדת. השתמשו ב-<button> לפעולות וב-<a href> לניווט.

שאלות נפוצות

מה זה HTML סמנטי?

HTML סמנטי הוא קוד שבו כל תגית מתארת את המשמעות של התוכן שלה: <nav> לניווט, <article> ליחידה עצמאית, <button> לכפתור. כך הדפדפן, קוראי מסך ומנועי חיפוש יכולים להבין את העמוד בלי לנחש משמות של classes או מעיצוב.

מהן התגיות הסמנטיות ב-HTML?

תגיות הפריסה הן <header>, <nav>, <main>, <article>, <section>, <aside> ו-<footer>. תגיות סמנטיות נפוצות אחרות הן <figure>, <figcaption>, <time>, <address>, <strong>, <em> והכותרות <h1> עד <h6>.

האם div הוא אלמנט סמנטי?

לא. ל-<div> אין משמעות משלו; הוא קופסה כללית לעיצוב ולפריסה. השתמשו בו כשאף תגית סמנטית לא מתאימה, וב-<header>, <main>, <nav> ובאחרות כשכן.

בשביל מה משמשת התגית aside?

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

כמה אלמנטי main יכולים להיות בעמוד?

<main> גלוי אחד לכל עמוד. הוא עוטף את התוכן שייחודי לעמוד הזה, ואסור שיישב בתוך <header>, <nav>, <article>, <aside> או <footer>.

האם HTML סמנטי עוזר ל-SEO?

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

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