0.7 HTML סמנטי ונגישות פתרון
פתרון תרגול 1 - המרת div-ים לHTML סמנטי¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>האתר שלי</title>
</head>
<body>
<header>
<h1>הבלוג שלי</h1>
<nav>
<ul>
<li><a href="index.html">בית</a></li>
<li><a href="about.html">אודות</a></li>
<li><a href="contact.html">צור קשר</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>הפוסט הראשון שלי</h2>
<time datetime="2026-03-15">15 מרץ 2026</time>
</header>
<p>זהו הפוסט הראשון בבלוג שלי. אני מתרגש לשתף אתכם בידע שלי.</p>
<figure>
<img src="photo.jpg" alt="צילום נוף ירוק מטיול בגליל">
<figcaption>התמונה שלי</figcaption>
</figure>
</article>
<article>
<header>
<h2>הפוסט השני שלי</h2>
<time datetime="2026-03-20">20 מרץ 2026</time>
</header>
<p>בפוסט הזה אני כותב על HTML סמנטי.</p>
</article>
</main>
<aside>
<h3>על הכותב</h3>
<p>שלום, אני ישראל ואני כותב על פיתוח אתרים.</p>
<h3>קישורים מומלצים</h3>
<ul>
<li><a href="#">MDN Web Docs</a></li>
<li><a href="#">W3Schools</a></li>
</ul>
</aside>
<footer>
<p>© 2026 כל הזכויות שמורות</p>
<nav>
<a href="privacy.html">פרטיות</a>
<a href="terms.html">תנאי שימוש</a>
</nav>
</footer>
</body>
</html>
מה השתנה:
- div#page-header הפך לheader.
- div#navigation הפך לnav.
- div#main-content הפך לmain.
- div.blog-post הפך לarticle.
- div.post-header הפך לheader (בתוך article).
- div.date הפך לtime עם datetime.
- div.image-container ו-div.image-description הפכו לfigure ו-figcaption.
- נוסף alt לתמונה.
- div#sidebar הפך לaside.
- div#page-footer הפך לfooter.
- div#footer-links הפך לnav.
פתרון תרגול 2 - מבנה בלוג סמנטי¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>הבלוג של ישראל</title>
</head>
<body>
<header>
<h1>הבלוג של ישראל</h1>
<nav>
<ul>
<li><a href="index.html">בית</a></li>
<li><a href="about.html">אודות</a></li>
<li><a href="archive.html">ארכיון</a></li>
<li><a href="contact.html">צור קשר</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>למה HTML סמנטי חשוב</h2>
<time datetime="2026-03-15">15 מרץ 2026</time>
<figure>
<img src="semantic-html.jpg" alt="דיאגרמה המציגה את מבנה דף HTML סמנטי עם header, nav, main, aside ו-footer"
width="600">
<figcaption>מבנה דף HTML סמנטי טיפוסי</figcaption>
</figure>
<p>HTML סמנטי הוא אחד הנושאים החשובים ביותר בפיתוח אתרים מודרני. במקום להשתמש ב-div לכל דבר, אנחנו משתמשים בתגיות שמתארות את התפקיד של התוכן.</p>
<p>השימוש בHTML סמנטי משפר נגישות, SEO וקריאות הקוד.</p>
<a href="post1.html">קראו עוד</a>
</article>
<article>
<h2>מדריך CSS למתחילים</h2>
<time datetime="2026-03-10">10 מרץ 2026</time>
<figure>
<img src="css-basics.jpg" alt="דוגמאות קוד CSS עם תכונות צבע, גודל טקסט ורקע"
width="600">
<figcaption>דוגמה לקוד CSS בסיסי</figcaption>
</figure>
<p>CSS (Cascading Style Sheets) היא השפה שמעצבת את המראה של אתרי אינטרנט. בפוסט הזה נלמד את הבסיס.</p>
<p>נעבור על selectors, properties, ואיך לחבר CSS לHTML.</p>
<a href="post2.html">קראו עוד</a>
</article>
</main>
<aside>
<section>
<h3>על הכותב</h3>
<p>שלום! אני ישראל, מפתח פרונטאנד עם 5 שנות ניסיון. אני אוהב לכתוב על טכנולוגיות חדשות ולשתף ידע.</p>
</section>
<section>
<h3>קטגוריות</h3>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">נגישות</a></li>
</ul>
</section>
<details>
<summary>מידע נוסף על הבלוג</summary>
<p>הבלוג הזה נוצר ב-2024 במטרה לשתף ידע על פיתוח אתרים בעברית. כל התוכן חינמי ופתוח.</p>
<p>אם אתם רוצים לתרום פוסט, צרו קשר דרך דף יצירת הקשר.</p>
</details>
</aside>
<footer>
<p>© 2026 הבלוג של ישראל. כל הזכויות שמורות.</p>
<address>
אימייל: <a href="mailto:israel@example.com">israel@example.com</a><br>
טלפון: <a href="tel:+972501234567">050-1234567</a>
</address>
<nav>
<a href="privacy.html">מדיניות פרטיות</a>
<a href="terms.html">תנאי שימוש</a>
<a href="sitemap.html">מפת אתר</a>
</nav>
</footer>
</body>
</html>
פתרון תרגול 3 - תיקון נגישות בטופס¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>טופס יצירת קשר</title>
</head>
<body>
<main>
<h1>צור קשר</h1>
<form action="/contact" method="POST">
<label for="contact-name">שם:</label>
<input type="text" id="contact-name" name="name" required
placeholder="השם שלך">
<br><br>
<label for="contact-email">אימייל:</label>
<input type="email" id="contact-email" name="email" required
placeholder="האימייל שלך">
<br><br>
<label for="contact-subject">נושא:</label>
<select id="contact-subject" name="subject">
<option value="">בחרו נושא</option>
<option value="question">שאלה</option>
<option value="complaint">תלונה</option>
<option value="feedback">משוב</option>
</select>
<br><br>
<label for="contact-message">הודעה:</label><br>
<textarea id="contact-message" name="message" rows="5" cols="40" required></textarea>
<br><br>
<p>
<img src="phone-icon.png" alt="" aria-hidden="true">
<a href="tel:+972501234567">050-1234567</a>
</p>
<button type="submit">שלח</button>
</form>
</main>
</body>
</html>
בעיות שתוקנו:
1. נוסף lang="he" לתגית html.
2. נוסף dir="rtl".
3. נוסף <meta charset="UTF-8">.
4. נוסף label עם for לכל שדה.
5. הוחלף b בlabel (b אינו סמנטי ולא מקושר לשדה).
6. נוסף alt="" ו-aria-hidden="true" לאייקון הטלפון (דקורטיבי).
7. הוחלף div onclick בbutton אמיתי.
8. נוסף name ו-id לכל שדה.
9. נוסף required לשדות חובה.
10. נוסף action ו-method לform.
11. נוסף value לoption-ים.
12. עטפנו את התוכן בmain.
פתרון תרגול 4 - ניווט מקלדת¶
תרגיל זה הוא מעשי ואין לו פתרון קוד. הנה דוגמה לסיכום שתלמיד יכול לכתוב:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>סיכום ניווט מקלדת</title>
</head>
<body>
<main>
<h1>סיכום ניווט מקלדת - אתר ynet.co.il</h1>
<section>
<h2>מה עבד טוב</h2>
<ul>
<li>כל הקישורים בתפריט ניתנים להגעה עם Tab.</li>
<li>יש אינדיקציה ויזואלית (מסגרת כחולה) כשאלמנט מקבל פוקוס.</li>
<li>שדה החיפוש עובד עם מקלדת.</li>
</ul>
</section>
<section>
<h2>מה היה קשה</h2>
<ul>
<li>לקח 15 לחיצות Tab עד שהגעתי לתוכן הראשי - אין "דלג לתוכן".</li>
<li>חלק מהתפריטים הנפתחים לא נפתחים עם מקלדת.</li>
<li>כמה כפתורים לא קיבלו פוקוס בכלל.</li>
</ul>
</section>
<section>
<h2>המלצות לשיפור</h2>
<ul>
<li>להוסיף קישור "דלג לתוכן ראשי" בתחילת הדף.</li>
<li>לוודא שכל תפריט נפתח עובד גם עם מקלדת.</li>
<li>להוסיף <code>tabindex="0"</code> לאלמנטים אינטראקטיביים שחסר להם פוקוס.</li>
</ul>
</section>
</main>
</body>
</html>
פתרון תרגול 5 - דף שאלות נפוצות נגיש¶
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<title>שאלות נפוצות - FAQ</title>
</head>
<body>
<header>
<h1>שאלות נפוצות</h1>
<nav aria-label="ניווט ראשי">
<ul>
<li><a href="index.html">בית</a></li>
<li><a href="about.html">אודות</a></li>
<li><a href="contact.html">צור קשר</a></li>
</ul>
</nav>
</header>
<main>
<nav aria-label="ניווט לקטגוריות שאלות">
<h2>קטגוריות</h2>
<ul>
<li><a href="#general">שאלות כלליות</a></li>
<li><a href="#account">חשבון וסיסמה</a></li>
<li><a href="#technical">שאלות טכניות</a></li>
</ul>
</nav>
<section id="general">
<h2>שאלות כלליות</h2>
<details>
<summary>מה שעות הפעילות שלכם?</summary>
<p>אנחנו פעילים בימים ראשון עד חמישי, בשעות 09:00-18:00. בימי שישי אנחנו פעילים בשעות 09:00-13:00.</p>
</details>
<details>
<summary>איך אפשר ליצור איתכם קשר?</summary>
<p>אפשר ליצור קשר במייל, בטלפון, או דרך טופס יצירת הקשר באתר. אנחנו מתחייבים לענות תוך 24 שעות בימי עבודה.</p>
</details>
</section>
<section id="account">
<h2>חשבון וסיסמה</h2>
<details>
<summary>איך יוצרים חשבון?</summary>
<p>לחצו על כפתור "הרשמה" בפינה העליונה של האתר, מלאו את הפרטים הנדרשים ואשרו את האימייל שתקבלו.</p>
</details>
<details>
<summary>שכחתי את הסיסמה, מה עושים?</summary>
<p>לחצו על "שכחתי סיסמה" בדף ההתחברות, הכניסו את כתובת האימייל שלכם, ותקבלו קישור לאיפוס סיסמה.</p>
</details>
</section>
<section id="technical">
<h2>שאלות טכניות</h2>
<details>
<summary>באילו דפדפנים האתר תומך?</summary>
<p>האתר תומך בגרסאות האחרונות של Chrome, Firefox, Safari ו-Edge. מומלץ לעדכן את הדפדפן לגרסה האחרונה.</p>
</details>
</section>
<hr>
<section>
<h2>לא מצאתם תשובה? שאלו אותנו</h2>
<figure>
<img src="support-team.jpg" alt="צוות התמיכה שלנו יושב מול מחשבים במשרד" width="400">
<figcaption>צוות התמיכה שלנו ישמח לעזור</figcaption>
</figure>
<form action="/ask" method="POST">
<label for="ask-name">שם:</label>
<input type="text" id="ask-name" name="name" required>
<br><br>
<label for="ask-email">אימייל:</label>
<input type="email" id="ask-email" name="email" required
aria-describedby="email-help">
<p id="email-help">נשלח את התשובה לכתובת הזו.</p>
<br>
<label for="ask-category">קטגוריה:</label>
<select id="ask-category" name="category">
<option value="">בחרו קטגוריה</option>
<option value="general">כללי</option>
<option value="account">חשבון</option>
<option value="technical">טכני</option>
</select>
<br><br>
<label for="ask-question">השאלה שלכם:</label><br>
<textarea id="ask-question" name="question" rows="5" cols="50" required
aria-describedby="question-help"></textarea>
<p id="question-help">תארו את השאלה בצורה מפורטת כדי שנוכל לעזור בצורה הטובה ביותר.</p>
<br>
<button type="submit">שלח שאלה</button>
</form>
</section>
</main>
<footer>
<p>© 2026 כל הזכויות שמורות</p>
<address>
אימייל: <a href="mailto:support@example.com">support@example.com</a><br>
טלפון: <a href="tel:+97221234567">02-1234567</a>
</address>
</footer>
</body>
</html>
פתרון תרגול 6 - שאלות תיאורטיות¶
1. מה ההבדל בין div לsection?
- div הוא מכולה גנרית בלי משמעות סמנטית. משתמשים בו רק כשאין תגית סמנטית שמתאימה, בעיקר לצורכי עיצוב.
- section מקבץ תוכן שקשור לנושא מסוים ובדרך כלל יש לו כותרת. הוא סמנטי ואומר לדפדפן ולקוראי מסך שזה קטע תוכן בעל נושא מוגדר.
2. מה ההבדל בין section לarticle?
- section הוא חלק מתוכן גדול יותר, עם נושא מסוים. הוא לא חייב להיות מובן בפני עצמו.
- article הוא תוכן עצמאי שניתן להוציא מההקשר ועדיין יהיה מובן. אם אפשר לפרסם את התוכן בנפרד - זה article.
3. למה placeholder לא מחליף label?
- placeholder נעלם כשמתחילים להקליד, כך שהמשתמש לא יכול לראות מה צפוי בשדה אחרי שהוא מתחיל למלא.
- לא כל קוראי מסך קוראים placeholder.
- placeholder בדרך כלל מוצג בצבע בהיר שקשה לקרוא.
- label תמיד נראה ותמיד נגיש.
4. מה aria-label עושה?
- aria-label מספק תיאור טקסטואלי לאלמנט שאין לו טקסט ברור בפני עצמו.
- דוגמה: כפתור שמכיל רק X - <button aria-label="סגירה">X</button>. בלי aria-label, קורא מסך יגיד רק "X כפתור" שלא ברור. עם aria-label הוא יגיד "סגירה כפתור".
5. מה ההבדל בין aria-hidden="true" לbetween hidden?
- aria-hidden="true" מסתיר את האלמנט מקוראי מסך בלבד. הוא עדיין נראה על המסך ותופס מקום.
- hidden (תכונת HTML) מסתיר את האלמנט לגמרי - גם מהמסך וגם מקוראי מסך.
6. מהן 3 רמות WCAG?
- רמה A - מינימום הכרחי (alt לתמונות, ניווט מקלדת בסיסי).
- רמה AA - הרמה שרוב החוקים דורשים (ניגודיות צבעים, labels לטפסים).
- רמה AAA - הרמה הגבוהה ביותר (קשה להשיג באופן מלא).
- רוב החוקים, כולל בישראל, דורשים עמידה ברמה AA.