4.5 KiB
4.5 KiB
title | localeTitle |
---|---|
Semantic HTML Elements | عناصر HTML الدلالية |
عناصر HTML الدلالية
يمثل العنصر <em>
النص كما يتم التأكيد عليه أعلى النص حوله. عادةً ، يقوم المتصفح بعرض هذا بخط مائل ، ولكن يمكنك إضافة أنماط أخرى باستخدام CSS.
توفر عناصر HTML الدلالية معنى للمتصفحات ومطوري البرامج ومستخدمي الموقع. وعلى النقيض من عناصر مثل <div>
أو <span>
، فإن العناصر الدلالية مثل <header>
و <footer>
تشرح بوضوح غرض كل قسم من موقع الويب.
لماذا استخدام عناصر الدلالي؟
يستخدم المطورون عناصر دلالية لتعزيز ما يلي:
- إمكانية الوصول: مساعدة التقنيات المساعدة في قراءة وتفسير صفحة الويب الخاصة بك
- البحث: مساعدة أجهزة الكمبيوتر على فهم محتواك
- التدويل: 13٪ فقط من العالم هم من الناطقين باللغة الإنجليزية
- إمكانية التشغيل المتبادل: مساعدة المبرمجين الآخرين على فهم بنية صفحة الويب الخاصة بك 1
عناصر دلالية الدلالي مفيدة
- يحدد
<header>
رأس المستند أو القسم - يعرّف
<footer>
تذييل للمستند أو مقطع <nav>
يحدد ارتباطات التنقل في المستند- يحدد
<main>
المحتوى الرئيسي للمستند - يحدد
<section>
قسمًا في المستند - تحدده هذه المواصفة كـ "تجميع مواضيعي للمحتوى ، وعادةً ما يكون عنوانًا له" ، حتى يمكنك التفكير فيه على أنه مثل الفصل <article>
يحدد مقالة في المستند- يحدد
<aside>
المحتوى بخلاف محتوى الصفحة - يحدد
<address>
معلومات الاتصال الخاصة بمؤلف / مالك مستند أو مقال - يعرّف
<figure>
المحتوى المكتفي ذاتيًا ، مثل الرسوم التوضيحية والرسوم البيانية والصور ومجموعات الرموز وما إلى ذلك. 2
العناصر الدلالية الأقل شهرة
<bdi>
يحدد جزء من النص قد يتم تنسيقه في اتجاه مختلف عن النص الآخر (على سبيل المثال ، اقتباسًا بالعبرية أو العربية في مقالة إنجليزية بخلاف ذلك)- يحدد
<details>
إضافية يمكن للأشخاص عرضها أو إخفاءها (مثل تلميح الأداة) <dialog>
يحدد مربع حوار أو نافذة- يعرّف
<figcaption>
التسمية التوضيحية لـ<figure>
- يعرّف
<mark>
النص المميز أو المميز - يعرّف
<menuitem>
عنصر أمر / قائمة يمكن للمستخدم تحديده من قائمة منبثقة - يحدد
<meter>
القياس القياسي ضمن نطاق معروف (مقياس) - يعرّف
<progress>
تقدم المهمة <rp>
يحدد ما يتم عرضه في المتصفحات التي لا تدعم التعليقات التوضيحية في روبي<rt>
يحدد شرح / نطق الحروف (للطباعة الآسيوية الشرقية)<ruby>
يعرّف تعليقًا روبيًا (للطباعة الآسيوية الشرقية)- يعرّف
<summary>
عنوانًا مرئيًا لعنصر<details>
<time>
يحدد التاريخ / الوقت<wbr>
يحدد احتمال كسر خط 2
مصادر
- لي ، ميشيل. "نظرة عامة على دلالات HTML5." CodePen . 16 فبراير 2016. الوصول: 24 أكتوبر 2017
- Bidaux ، فينسنت. "العناصر الدلالية HTML5 و Webflow: الدليل الأساسي." Webflow . 16 ديسمبر 2016. تم الوصول إليها: 24 من تشرين الأول 2017
معلومات اكثر:
لمزيد من المعلومات: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics
راجع مقالة MDN Web Docs .