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 .