חידון: האם HTML עדיין שייך בקורות החיים שלך?

התג <ul> יוצר רשימה לא מסודרת, כאשר פריטים מסומנים בדרך כלל בתבליטים.

האלמנט <dd> מגדיר תיאור, הגדרה או ערך ברשימת תיאורים, ומשמש בתוך תגיות <dl> כדי להתאים ל-<dt> (מונח תיאור).

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

<dl>
<dt>JS</dt>
<dd>Client-side</dd>
<dd>Server-side</dd>

<dt>HTML</dt>
<dd>Client-side</dd>
</dl>

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

זה שימושי לתמונות, דיאגרמות, קטעי קוד ועוד.

<figure>
<img src="../image.jpg" alt="Description of image">
<figcaption>Image caption</figcaption>
</figure>

האלמנט <article> משמש להגדרת קטע תוכן עצמאי שניתן להפיץ או לעשות בו שימוש חוזר באופן עצמאי.

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

ניתן להשתמש במספר אלמנטים article בעמוד (לדפים עם גלילה אינסופית, למשל). או, ניתן לקנן אותם זה בתוך זה כדי ליצור היררכיה של “תוכן עצמאי”.

<article>
<h2>Article Title</h2>
<p>Article content...</p>
<article class="discussion">
<h3>Comment by User</h3>
<p>Comment content...</p>
</article>
</article>

<fieldset> משמש לקיבוץ פקדי טופס קשורים, ו-<legend> מספק כותרת/תווית לקבוצה, ומשפר את הנגישות.

זה שימושי לקיבוץ רכיבי טופס קשורים, כמו קטע לכתובת משלוח או פרטי תשלום.

<fieldset>
<legend>Shipping Address</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
...
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<label for="card">Card Number:</label>
<input type="text" id="card" name="card">
...
</fieldset>

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

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

<meter min="-60" max="130" value="75" /> 75°F
<meter min="0" max="100" value="75" /> 75%

האלמנט <source> משמש לציון פורמטי מדיה זמינים.

הוא משמש במיוחד עם האלמנטים <video>, <audio> ו-<picture>, ומאפשר לדפדפן לבחור את הפורמט המתאים ביותר.

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

האלמנט <hgroup> מקבוץ כותרת עם תוכן משני קשור, בדרך כלל אלמנט <p> אחד או יותר.

הוא עשוי להיות שימושי כאשר לכותרת יש כותרת משנה, תגית, או כותרת חלופית שאינה אמורה להפוך לכותרת נוספת במתאר המסמך.

<article>
<hgroup>
<h1>Frankenstein</h1>
<p>Or: The Modern Prometheus</p>
</hgroup>
<section>
<h2>Chapter 1</h2>
<p>...</p>
</section>
</article>

האלמנט <menu> מייצג רשימה של פקודות או פקדים אינטראקטיביים.

אם הרשימה שלך היא קישורי ניווט, השתמש ב-<nav> עם <ul>. השתמש ב-<menu> לפקדים דמויי סרגל כלים או רשימות פקודות.

<menu>
<li><button type="button">Copy</button></li>
<li><button type="button">Paste</button></li>
</menu>

<details> מאפשר תוכן מתקפל, ו-<summary> מציין כותרת גלויה לתוכן.

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

<details>
<summary>Click to expand 🤯</summary>
<p>Hidden content! 💥</p>
</details>

האלמנט <dialog> משמש לחלונות קופצים או מודאליים, ומספק סימון סמנטי, CSS מורחב ו-API מקורי לאינטראקציות אלו.

השתמש ב-JavaScript כדי לפתוח אותו עם .showModal() עבור דיאלוגים מודאליים או .show() עבור דיאלוגים לא מודאליים, וסגור אותו עם .close() או שליחת טופס באמצעות method="dialog".

<dialog>
<h2>Modal Title</h2>
<p>Modal content...</p>
<button>Close</button>
</dialog>

האלמנט <time> משמש לתאריכים, שעות או משכי זמן. הוא יכול לכלול תוכן קריא לאדם ותכונת datetime קריאה למכונה. ב-HTML אין אלמנט <date>.

תכונות ARIA (Accessible Rich Internet Applications) משפרות את נגישות האינטרנט על ידי מתן הקשר נוסף לקוראי מסך ולטכנולוגיות מסייעות אחרות.

ישנם תפקידים, מצבים ומאפיינים שניתן להשתמש בהם לתיאור אלמנטים.

<button aria-label="Close" aria-expanded="true">X</button>
<main aria-live="polite">...</main>
<dialog
role="alertdialog"
aria-modal="true"
aria-labelledby="dialog_label"
aria-describedby="dialog_desc"
></dialog>

תכונת role מתארת

את מטרת האלמנט לטכנולוגיות מסייעות, ועוזרת לשפר את הנגישות.