اختبار: هل لا يزال 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 موسعًا، وواجهة برمجة تطبيقات أصلية لهذه التفاعلات.

استخدم JavaScript لفتحه باستخدام .showModal() للنوافذ المشروطة أو .show() للنوافذ غير المشروطة، وأغلقه باستخدام .close() أو إرسال نموذج باستخدام method="dialog".

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

يُستخدم عنصر <time> للتواريخ والأوقات أو المدد. يمكن أن يتضمن محتوى مقروءًا بشريًا وخاصية datetime مقروءة آليًا. لا يحتوي HTML على عنصر <date>.

سمات ARIA (تطبيقات الإنترنت الغنية القابلة للوصول) تعزز إمكانية الوصول على الويب من خلال توفير سياق إضافي لقارئات الشاشة والتقنيات المساعدة الأخرى.

هناك أدوار وحالات وخصائص يمكن استخدامها لوصف العناصر.

<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

غرض العنصر لتقنيات المساعدة، مما يساعد في تحسين إمكانية الوصول.