HTML

אלמנטים סמנטיים

מה זה Semantic HTML?

HTML סמנטי משתמש בתגיות שמתארות את המשמעות של התוכן, לא רק את המראה שלו.

<!-- לא סמנטי -->
<div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>

<!-- סמנטי -->
<header>...</header>
<main>...</main>
<footer>...</footer>

למה זה חשוב?

אלמנטים עיקריים

<header> - כותרת עליונה

<header>
    <h1>שם האתר</h1>
    <nav>...</nav>
</header>

<nav> - ניווט

<nav>
    <a href="/">בית</a>
    <a href="/about">אודות</a>
</nav>

<main> - תוכן עיקרי

<main>
    <h1>התוכן העיקרי</h1>
</main>

⚠️ רק <main> אחד בדף!

<footer> - תחתית

<footer>
    <p>© 2024 כל הזכויות שמורות</p>
</footer>

<aside> - תוכן צדדי

<aside>
    <h3>מאמרים קשורים</h3>
</aside>

אלמנטים לתוכן

<article> - תוכן עצמאי

<article>
    <h2>כותרת המאמר</h2>
    <p>תוכן המאמר...</p>
</article>

<section> - סעיף

<section>
    <h2>נושא</h2>
    <p>תוכן...</p>
</section>

<figure> + <figcaption>

<figure>
    <img src="chart.png" alt="תרשים">
    <figcaption>תרשים מכירות</figcaption>
</figure>

<time> - תאריך

<time datetime="2024-12-25">25 בדצמבר</time>

<details> + <summary>

<details>
    <summary>לחץ לפרטים</summary>
    <p>תוכן מוסתר...</p>
</details>

מבנה דף

<header>
    <nav>...</nav>
</header>
<main>
    <article>
        <section>...</section>
    </article>
    <aside>...</aside>
</main>
<footer>...</footer>

← חזרה: טפסים | → המשך: תכונות