تحسين تطوير الويب باستخدام عناصر HTML مُبتكرة وفعّالة: نصائح لتطوير مهاراتك

في عالم الويب المُتسارع ، يتطلب تحسين مهارات تطوير الويب تبني نهجٍ مُستدام ومُبتكر لضمان بقائك على اطلاعٍ بأحدث التقنيات والاتجاهات. تُعد عناصر HTML من أهم أسس هذا التطوير ، إذ تُمثل اللغة الأساسية التي يُبنى بها هيكل وتصميم صفحات الويب. ومع ذلك ، لا يقتصر الأمر على استخدام العناصر الأساسية فحسب ، بل يتطلب أيضًا النظر في استخدام عناصر HTML غير عادية ومبتكرة التي تُضفي جاذبية وفعاليَّة إلى تجربة المستخدم.

بصفتك مطور ويب ، يجب أن تكون على دراية جيدة بعناصر HTML الشائعة مثل <div> و <p> و <img> التي تُمثل بنية صفحات الويب ومحتواها. ومع ذلك ، فإنَّ لغة HTML تقدم أكثر من ذلك بكثير!

من خلال استكشاف هذه العناصر الفريدة ، يُمكنك تحسين وظائف تطبيقات الويب التي تُنشئها ، مما يجعلها تبرز ضمن المُنافسة. تحقق من الأسباب التي تجعل تعلم HTML ضروريًا لكل مُطور.

1. <details> و <summary>

تخيل أنَّ لديك معلومات أو محتوى واسع النطاق لا تُريد أن يرتبك القارئ به على الفور. ستنقذك عناصر <details> و <summary>!

تعمل هذه العناصر معًا لإنشاء قسم قابل للتوسيع بعنوان أو ملخص يُمكن لمستخدمي موقع الويب النقر فوقه للكشف عن المزيد من التفاصيل. بشكل افتراضي ، لن يتم عرض المحتوى الموجود داخل عنصر <details> ، مما يُحافظ على صفحتك مرتبة ومنظمة.

يُمكن للزائر النقر بسهولة على الملخص للوصول إلى المعلومات المخفية.

<details>
  <summary>Click to reveal more information</summary>

  <p>This content will be hidden by default but will appear when the user
  clicks the summary.</p>
</details>

باستخدام هذه العناصر ، يُمكنك إخفاء أقسام كبيرة من النص أو التعليمات البرمجية أو غيرها من المعلومات ، مما يُوفر تجربة سهلة الاستخدام مع الحفاظ على تصميم نظيف. قد تُساعدك هذه العناصر أيضًا على تحسين مهاراتك كمصمم واجهة أمامية.

2. <mark>

يُتيح لك العنصر <mark> إبراز أجزاء مُعينة من مُحتواك ، مما يجعلها تبرز بصريًا. عند استخدام عنصر <mark> ، عادةً ما تقوم المُتصفحات بتطبيق لون أصفر للخلفية على النص الموجود بداخلها ، مما يلفت انتباه القارئ إليه.

هذه الميزة مفيدة بشكل خاص عندما تُريد التأكيد على الكلمات الأساسية أو العبارات المُهمة أو نتائج البحث على صفحة الويب الخاصة بك.

<p>
  You can use the <mark>mark</mark> tag to highlight important words or
  phrases.
</p>

على سبيل المثال ، إذا كان موقع الويب يحتوي على وظيفة بحث ، فيمكنك استخدام عنصر <mark> لتمييز مطابقات استعلام البحث في النتائج ، مما يسهل على المستخدمين العثور على المعلومات ذات الصلة.

3. <s>

هل سبق لك أن واجهت مواقف أصبح فيها المحتوى قديمًا أو لم يعد ذا صلة ، ولكنك لا تزال ترغب في عرضه لأغراض تاريخية أو للإشارة إلى التغييرات بمرور الوقت؟

تعرف على العنصر <s>! إنه يُمثل نصًا يتوسطه خط ويعرض أي محتوى داخل العنصر بخط يتوسطه خط.

<p>
  This product is <s>out-of-stock</s> currently available at a discounted
  price!
</p>

في هذا المثال ، سيتم عرض out-of-stock كنص يتوسطه خط ، مُشيرًا إلى أنَّ حالة مخزون المُنتج قد تغيرت.

4. <time>

عندما تُريد إضافة معنى دلالي للتواريخ والأوقات في محتواك ، فإنَّ عنصر <time> سيكون في متناول يديك.

باستخدام السمة datetime ، يُمكنك تحديد إصدار يمكن قراءته آليًا من التاريخ أو الوقت ، مما يساعد المتصفحات ومحركات البحث وقارئات الشاشة على فهم السياق.

<p>
  The Declaration of Independence was signed on
  <time datetime="1776-07-04">July 4, 1776</time>.
</p>

باستخدام عنصر <time> ، فإنك تمنح المحتوى مزيدًا من البنية وتجعله في متناول مجموعة أكبر من المستخدمين ، بما في ذلك ذوي الاحتياجات الخاصة الذين يستخدمون أدوات قراءة الشاشة.

5. <bdi>

قد تكون إدارة النص بلغات مُتعددة على صفحة الويب أمرًا صعبًا في بعض الأحيان ، خاصة عندما يتطلب كل جزء تنسيقًا مختلفًا.

سيُقدم لك العنصر <bdi> المُساعدة من خلال عزل جزء من النص الذي يجب أن يُعامله المتصفح بشكل مختلف بسبب مُتطلبات اللغة المختلفة.

<p>
  <bdi>5,000</bdi> people attended the conference.
</p>

في هذا المثال ، يلتف العنصر <bdi> بالرقم 5000. هذا يضمن أنه إذا كان النص المحيط بلغة مختلفة أو يتطلب تنسيقًا مختلفًا ، فلن يتداخل مع الرقم.

6. <ruby> ، <rp> ، <rt>

بالنسبة للكتابة في دول شرق آسيا ، أين يتم استخدام أدلة النطق أو فوريغانا أو التعليقات التوضيحية الأخرى بشكل شائع أعلى أو أسفل الأحرف ، تلعب العناصر <ruby> و <rt> و <rp> هذا الدور.

<p>
  I'm learning
  <ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>

في هذا المثال ، يحتوي العنصر <ruby> على الحرف 漢 (كانجي) ، ويحتوي العنصر <rt> على النطق か ん (كان). تُوفر عناصر <rp> أقواسًا احتياطية للمتصفحات التي لا تدعم التعليقات التوضيحية باللون الأحمر.

7. <wbr>

عندما يكون لديك كلمات طويلة قد تُعطل التنسيق ، فإنَّ عنصر <wbr> هنا للمساعدة. يقترح فرصة لفاصل سطر (فرصة كسر الكلمات) في كلمة طويلة ، حيث قد يختار المُتصفح التفاف النص.

<p>
  This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p>

في المثال أعلاه ، يتضمن عنوان URL الطويل عنصر <wbr> والذي يتيح للمتصفح تقسيمه إلى سطرين إذا لزم الأمر ، مع الحفاظ على تخطيط المحتوى المُحيط. تحقق من دليل المبتدئين للصور المُتجاوبة بتنسيق HTML.

8. <sub> و <sup>

بالنسبة إلى الرموز العلمية أو الرياضية أو الصيغ الكيميائية أو الحواشي السفلية ، يُمكنك استخدام العناصر <sub> و <sup> للنص المنخفض والنص المرتفع ، على التوالي.

<p>
  The chemical formula for water is H<sub>2</sub>O,
  and the Pythagorean theorem is
  a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p>

يستخدم هذا المثال عنصر <sub> لعرض 2 في H2O على هيئة نص مُنخفض ، بينما يعرض العنصر <sup> الأس في نظرية فيثاغورس.

9. <meter>

هل تحتاج إلى تمثيل القياسات العددية ضمن نطاق معروف ، مثل استخدام القرص أو التقييمات أو درجات الاختبار؟ سيُساعدك العنصر <meter>.

باستخدام سمات القيمة ، والحد الأدنى ، والحد الأقصى ، يُمكنك تحديد القيمة الحالية ، والحد الأدنى للقيمة ، والحد الأقصى لقيمة القياس ، على التوالي.

<meter value="75" min="0" max="100">75%</meter>

في هذا المثال ، يُمثل عنصر <meter> درجة اختبار تبلغ 75%.

10. <dialog>

عندما تحتاج إلى إنشاء مربع حوار أو نافذة تراكب للشروط أو تفاعلات منبثقة مشروطة ، فإن عنصر <dialog> هو السبيل للذهاب. يمكنك استخدام السمة open لإظهار مربع الحوار افتراضيًا.

<dialog open>
  <p>This is a dialog box!</p>
  <button>Close</button>
</dialog>

في هذا المثال ، يظهر مربع حوار بسيط يحتوي على فقرة وزر إغلاق عند تحميل الصفحة ، وذلك بفضل السمة open. يمكنك تخصيص محتوى مربع الحوار وسلوكه باستخدام JavaScript لمزيد من التفاعلات المتقدمة.

11. <optgroup>

استخدم عنصر <optgroup> لتجميع الخيارات ذات الصلة داخل عنصر القائمة المُنسدلة <select>. والذي يسمح لك بتنظيم الخيارات وتصنيفها لتسهيل التنقل والاختيار.

1. <optgroup> هي عنصر حاوية يجمع علامات <option> ذات الصلة داخل عنصر <select>.
2. يُساعد في تنظيم الخيارات عن طريق إنشاء تجميع مرئي أو تصنيف داخل القائمة المنسدلة.
3. تتطلب علامة <optgroup> سمة تسمية تحدد اسم أو عنوان مجموعة الخيارات.
4. يمكن أن يحتوي على عنصر <option> واحد أو أكثر كعناصره الفرعية ، والتي تُمثل الخيارات الفردية داخل المجموعة.

على سبيل المثال:

<select>
  <optgroup label="Asia">
    <option value="kr">South Korea</option>
  </optgroup>

  <optgroup label="Europe">
    <option value="de">Germany</option>
  </optgroup>
</select>

يقوم هذا المثال بتجميع قائمة التحديد المُنسدلة إلى قسمين: آسيا وأوروبا. تحتوي كل مجموعة على عناصر تُمثل بلدانًا مختلفة داخل تلك المنطقة.

عزِّز كفاءتك في تطوير الويب

يُمكن أن يؤدي تعلم عناصر HTML الأقل شهرة إلى تحسين مهاراتك في تطوير الويب بشكل كبير. على الرغم من عدم الاعتراف بها ، إلا أنها تُقدم ميزات قيمة لسياقات مُحددة.

تعمل إضافة هذه العناصر إلى مجموعة المهارات الخاصة بك على تحسين التفاعل وإمكانية الوصول وتبسيط عملية تطوير الويب. تذكر ، على الرغم من أنها قد تكون غير مألوفة ، إلا أن لها تأثيرًا كبيرًا على رحلتك كمطور ويب. يُمكنك الإطلاع الآن على يُمكنك البرمجة أثناء التنقل: أفضل تطبيقات تحرير HTML لنظام Android.