ـ div div div كفاية div، يكتفي اغلب المطورين باستخدام div او span في كتابة صفحات الويب وهما يطلبان الرحمة😩😂.
وفي الحقيقة انه ينبغي عليك تجنب استخدامها وتفعيل استخدام عناصر الـ HTML5 Semantic Elements
فما هي ؟ وهل هي حقا بتلك الاهمية ؟ كيف استعملها؟ تابع معي
.
.
⚡️ 🧵⚡️
وفي الحقيقة انه ينبغي عليك تجنب استخدامها وتفعيل استخدام عناصر الـ HTML5 Semantic Elements
فما هي ؟ وهل هي حقا بتلك الاهمية ؟ كيف استعملها؟ تابع معي
.
.
⚡️ 🧵⚡️
هل حقا بتلك الاهمية؟
نعم SEO! اقوى العوامل التي تساهم في ظهور موقعك في أول نتائج على محركات البحث في معارك الـ SEO الضارية.
وايضا:
- إرشادية قارئ الشاشة لمساعدة المعاقين بصريًا على التنقل في الصفحة.
- يسهل للمطورين التنقل بين الاقسام بدلا من الضياع بين اقسام div اللامتناهية.
نعم SEO! اقوى العوامل التي تساهم في ظهور موقعك في أول نتائج على محركات البحث في معارك الـ SEO الضارية.
وايضا:
- إرشادية قارئ الشاشة لمساعدة المعاقين بصريًا على التنقل في الصفحة.
- يسهل للمطورين التنقل بين الاقسام بدلا من الضياع بين اقسام div اللامتناهية.
فما هي؟
Semantic elements = عناصر لها دلالة استخدام.
من اهم التطورات الأساسية في HTML5 هو وجود مجموعة موحدة من العناصر الدلالية Semantic. كلمة semantic تشير الى المعنى من كلمة او شيء. تخيل⚡️! يوجد اكثر من 100 semantic عنصر يطلب منك تطلق صراح div ويشوف له حياة😂😩⚡️.
Semantic elements = عناصر لها دلالة استخدام.
من اهم التطورات الأساسية في HTML5 هو وجود مجموعة موحدة من العناصر الدلالية Semantic. كلمة semantic تشير الى المعنى من كلمة او شيء. تخيل⚡️! يوجد اكثر من 100 semantic عنصر يطلب منك تطلق صراح div ويشوف له حياة😂😩⚡️.
من اهم هذه العناصر:
- <main>
- <section>
- <header>
- <nav>
- <footer>
- <summary>
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <mark>
- <time>
في اخر الثريد ستجد مرجعا لجميع العناصر الاخرى مع شرح اتسخدامها الصحيح⚡️
لكن لدي ملاحظات مهمة و سأشرح اهمها⚡️👇
- <main>
- <section>
- <header>
- <nav>
- <footer>
- <summary>
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <mark>
- <time>
في اخر الثريد ستجد مرجعا لجميع العناصر الاخرى مع شرح اتسخدامها الصحيح⚡️
لكن لدي ملاحظات مهمة و سأشرح اهمها⚡️👇
- الوسم <section> هو "عنصر يعرّف قسمًا من الصفحة"
مثال استخدام:
- فصول
- مقدمة
- الاخبار
- معلومات للتواصل
مثال مصور:
مثال استخدام:
- فصول
- مقدمة
- الاخبار
- معلومات للتواصل
مثال مصور:
- الوسم <article> "مقال ينفرد بذاته" وهو "عنصر يعرّف محتوى مستقلً بذاته"
مثال استخدام:
- مشاركات المنتدى
- مشاركات المدونة
- تعليقات المستخدم
- بطاقات المنتجات
- مقالات الصحف
مثال مصور:
مثال استخدام:
- مشاركات المنتدى
- مشاركات المدونة
- تعليقات المستخدم
- بطاقات المنتجات
- مقالات الصحف
مثال مصور:
- الوسم <header> حاوية لتمهيد محتوى أو مجموعة من روابط التنقل navigations
ملاحظة⛔️
يظن الكثير ان استخدامه يقتصر على روابط التنقل اعلى الصفحة. وهذا خاطئ. تستطيع استخدامه بطرق عدة ليحل كرأس لمحتوى في article او section.
ومتعارف عليه لحمل شعار الموقع.
ولايمكن وضعه بداخل <footer>
ملاحظة⛔️
يظن الكثير ان استخدامه يقتصر على روابط التنقل اعلى الصفحة. وهذا خاطئ. تستطيع استخدامه بطرق عدة ليحل كرأس لمحتوى في article او section.
ومتعارف عليه لحمل شعار الموقع.
ولايمكن وضعه بداخل <footer>
- الوسم <footer> حاوية تحدد تذييلاً لمستند أو قسم
ملاحظة⛔️
ويظن الكثير ان استخدامه يقتصر على المعلومات اسفل الصفحة. وهذا خاطئ. تستطيع استخدامه بطرق عدة ليحل كتذييل لمحتوى في article او section.
استخدام متعارف:
- معلومات حقوق التأليف والنشر
- معلومات للتواصل
- خريطة الموقع
ملاحظة⛔️
ويظن الكثير ان استخدامه يقتصر على المعلومات اسفل الصفحة. وهذا خاطئ. تستطيع استخدامه بطرق عدة ليحل كتذييل لمحتوى في article او section.
استخدام متعارف:
- معلومات حقوق التأليف والنشر
- معلومات للتواصل
- خريطة الموقع
الوسم <nav> يحدد مجموعة من روابط التنقل.
ملاحظة ⛔️
لا يجب أن تكون جميع روابط المستند داخل عنصر التنقل. عنصر التنقل مخصص فقط للكتلة الرئيسية لروابط التنقل.
يمكن للمتصفحات ، مثل برامج قراءة الشاشة لذوي الاحتياجات الخاصة، تحديد ما إذا كان سيتم حذف العرض الأولي لهذا المحتوى.
ملاحظة ⛔️
لا يجب أن تكون جميع روابط المستند داخل عنصر التنقل. عنصر التنقل مخصص فقط للكتلة الرئيسية لروابط التنقل.
يمكن للمتصفحات ، مثل برامج قراءة الشاشة لذوي الاحتياجات الخاصة، تحديد ما إذا كان سيتم حذف العرض الأولي لهذا المحتوى.
اخيرا نكتفي بهذا القدر🙌⚡️💛.
هذا المرجع لجميع عناصر HTML وشرحها
developer.mozilla.org
وكالعادة رتويت اذا استفدت، واسأل الله لكم التوفيق، قد اتغيب لفترة بسيطة استعدادا للاختبارات النهائية احتاج دعواتكم يا اصدقاء💛💛🙌⚡️.
هذا المرجع لجميع عناصر HTML وشرحها
developer.mozilla.org
وكالعادة رتويت اذا استفدت، واسأل الله لكم التوفيق، قد اتغيب لفترة بسيطة استعدادا للاختبارات النهائية احتاج دعواتكم يا اصدقاء💛💛🙌⚡️.
جاري تحميل الاقتراحات...