البرمجة
#HTML
#تطوير_ويب
8 وسوم HTML لتحسين موقعك: توقف عن الإفراط في البرمجة!
اكتشف الاستخدامات المتعددة لهذه الجواهر المخفية في HTML، ولماذا هي مفيدة للغاية في تطوير الويب.
وسم <audio>: تشغيل الصوتيات بسهولة
تدعم HTML عناصر الوسائط المتعددة - الصور والفيديو والصوت - منذ عقود، ولكن العنصران الأخيران كانا يتطلبان مكونات إضافية للمتصفح مثل Adobe Flash لكي يعملا. لحسن الحظ، جلبت HTML5 عناصر صوت وفيديو أصلية إلى الويب، وما زالت التطبيقات تتحسن منذ ذلك الحين.
عنصر الصوت اليوم هو مشغل نظيف وبسيط مع عناصر التحكم التي تتوقعها: زر تشغيل/إيقاف مؤقت، وتفاصيل التوقيت، وشريط تقدم تفاعلي. يمكنك حتى تخصيص هذا المشغل إلى حد ما، مما يجعله عنصرًا بعرض كامل، على سبيل المثال.
وسم <canvas>: تحكم دقيق بالرسومات
HTML هي لغة ترميزية تعريفية، تهتم بمعنى المحتوى بدلاً من كيفية ظهوره في المتصفح. للحصول على المظهر المطلوب، هناك CSS، ولكن حتى هذه اللغة تستجيب ويمكن أن يتم عرضها بشكل مختلف تمامًا من جهاز إلى آخر.
إذا كنت تعمل على مكون يتطلب دقة بكسل، فإن عنصر canvas هو الأنسب لك. باستخدام canvas، يمكنك كتابة نص على الصفحة بخط دقيق ورسم الرسومات بثقة.
هذا لا يعني أنه يجب عليك استخدام canvas طوال الوقت؛ فهو ليس بديلاً جيدًا للمحتوى الحقيقي على صفحاتك. ولكن إذا كنت تقوم ببناء لعبة أو واجهة مصممة خصيصًا لاستخدام ضيق، فيمكن أن تكون canvas وسيلة فعالة للقيام بذلك.
وسم <datalist>: اقتراحات تلقائية للإدخال
يمكن لهذا العنصر الغامض توسيع أنواع معينة من المدخلات من خلال تقديم مجموعة من القيم المقترحة للاختيار من بينها. على سبيل المثال، عند إقرانه بإدخال نصي، ستحصل على إكمال تلقائي دون أي تعليمات برمجية، فقط عن طريق تعريف مجموعة الخيارات الصالحة:
يمكنك بعد ذلك ربط عنصر إدخال بهذه القائمة باستخدام معرفه:
لكن الأمر لا يتوقف عند هذا الحد؛ يعمل datalist مع أنواع أخرى من العناصر. يتناسب جيدًا مع مدخلات الألوان، حيث يمكن للمتصفحات تقديم لوحة من الألوان المفضلة:
يختلف دعم datalist عبر المتصفحات، لذا تأكد من اختباره بعناية. لحسن الحظ، يجب أن يتحلل هذا العنصر بشكل جيد عندما لا يكون مدعومًا.
وسم <details>: عناصر قابلة للطي
يقوم وسم details بإنشاء أداة كشف، وهو جزء من المحتوى الخاص بك يمكن للقارئ تبديله لعرضه أو إخفائه. هذه الأدوات رائعة لأشياء مثل الاختبارات القصيرة والمعلومات التكميلية ويمكن أن تقارب حتى واجهات علامات تبويب أكثر تعقيدًا.
في أبسط أشكاله، يسهل استخدام هذا الوسم:
يمكنك أيضًا إقرانه بعنصر summary لتخصيص العنوان في الجزء العلوي من الأداة:
وسم <mark>: تمييز النص المهم
كان هذا العنصر موجودًا منذ فترة، وقد تدفعك بساطته إلى الاعتقاد بأنه ليس مفيدًا جدًا، ولكن هذا أبعد ما يكون عن الواقع. يمكنك استخدام عنصر mark للفت الانتباه إلى جزء معين من النص مطابق دلاليًا للنص المحيط به.
عادةً ما يعرض نمط المتصفح الافتراضي عنصر mark بخلفية صفراء:
يشير هذا إلى نمط قلم التحديد، مما يعني تمييز نطاق من النص باعتباره مهمًا أو ذا صلة بشكل خاص بسياق معين.
أحد أفضل استخدامات mark هو تمييز نتائج البحث. يمكنك أيضًا استخدامه للفت الانتباه إلى المحتوى الذي تم التعليق عليه أو تمييز الاختلافات بين جزء من النص وآخر.
وسم <progress>: أشرطة التقدم الأنيقة
العناصر المفضلة لدي هي تلك التي تفعل الكثير بالقليل. إنها تأخذ الاحتياجات الحالية التي تم تلبيتها باستخدام عدد لا يحصى من تطبيقات JavaScript وتلبيها باستخدام HTML قياسي ومتسق وموثوق.
progress هو مثال على ذلك. ينتج هذا الوسم شريط تقدم قابل للتصميم وقابل للبرمجة لتمثيل حالة إكمال مهمة:
يمكنك استخدام progress بقيمة فاصلة عائمة بين 0 و 1:
أو يمكنك توفير حد أقصى وقيمة بالنسبة له:
بدون أي قيمة على الإطلاق، يجب أن تجد أن متصفحك يقوم بتحريك شريط التقدم للإشارة إلى نشاط مستمر بدون حالة معروفة.
وسم <picture>: صور متجاوبة بذكاء
وسم picture هو مجرد مكافئ حديث لـ img، أليس كذلك؟ ليس تمامًا: لدى picture الكثير لتقدمه، معظمه تحت ستار التصميم المتجاوب.
قد تبدو النتائج تمامًا مثل img، لكن هذا الوسم يتعلق بكيفية وصولك إلى الوجهة. باستخدام picture، يمكنك تحديد صورة وفقًا لما يلي:
- التنسيق، مما يعني أنه يمكنك دعم نطاق أوسع من الأجهزة.
- حجم الملف، حتى تتمكن من تحسين الأداء وتوفير نطاق ترددي للمستخدمين.
- التخطيط، حتى تتمكن من تصميم تصميمك ليناسب حجم الشاشة.
يتم تحقيق كل هذا من خلال بنية تسمح بالعديد من خيارات الصور بدلاً من خيار واحد:
يتضمن استخدام picture قدرًا أكبر من العمل مقارنة بصورة img واحدة، ولكنه أسهل بكثير من محاولة الاحتفاظ بمواقع ويب كاملة منفصلة لكل استخدام.
وسم <template>: إنشاء محتوى ديناميكي بسهولة
سأختتم بعلامة متقدمة تعتمد على JavaScript، ولكنها يمكن أن تغير عملية العمل مع المحتوى الديناميكي بشكل كبير.
كما يوحي الاسم، يحدد عنصر template ترميزًا يمكنك استخدامه لإنشاء ترميز جديد بسهولة. بشكل افتراضي، لن تظهر عناصر template، لكنها جزء من DOM، ويمكنك استخدامها لإنشاء عناصر ستظهر.
بدون template، تتطلب إضافة محتوى إلى DOM إما الكثير من التعليمات البرمجية (باستخدام createElement و createTextNode و appendChild وطرق مماثلة) أو الكثير من معالجة السلاسل، مع innerHTML، والتي يمكن أن تكون غير آمنة إذا لم تكن حريصًا. باستخدام template، يمكنك تحديد جزء من الترميز مثل هذا:
التعليقات 0
سجل دخولك لإضافة تعليق
لا توجد تعليقات بعد. كن أول من يعلق!