58 lines
4.5 KiB
Markdown
58 lines
4.5 KiB
Markdown
|
---
|
|||
|
|
title: Semantic HTML Elements
|
|||
|
|
localeTitle: عناصر 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
|
|||
|
|
|
|||
|
|
### مصادر
|
|||
|
|
|
|||
|
|
1. [لي ، ميشيل. "نظرة عامة على دلالات HTML5." _CodePen_ . 16 فبراير 2016. الوصول: 24 أكتوبر 2017](https://codepen.io/mi-lee/post/an-overview-of-html5-semantics)
|
|||
|
|
2. [Bidaux ، فينسنت. "العناصر الدلالية HTML5 و Webflow: الدليل الأساسي." _Webflow_ . 16 ديسمبر 2016. تم الوصول إليها: 24 من تشرين الأول 2017](https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide)
|
|||
|
|
|
|||
|
|
#### معلومات اكثر:
|
|||
|
|
|
|||
|
|
لمزيد من المعلومات: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics
|
|||
|
|
|
|||
|
|
راجع [مقالة MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) .
|