ما هي أقل وسوم HTML5 شهرة ؟ وفي ماذا يتم استخدامها ؟

ما هي أقل وسوم HTML5 شهرة ؟ وفي ماذا يتم استخدامها ؟

تشتمل لغة HTML 5 على عدد كبير من الوسوم , غالباً ما نستخدم الوسوم الأساسية كوسوم <h1> و <p> و <section> ربما , لكن هناك بعض الوسوم المضمنة في لغة HTML باصدارها الخامس لا يعلم الكثيرون بوجودها , لنتعرف عليها في هذا المقال !

نبذة سريعة عن لغة HTML باصدارها الأخير HTML 5

لغة HTML هي لغة توصيفية (ليست لغة برمجة) تستخدم لتصميم مواقع الويب في المقام الأول , ولها استخدمات أخرى في تصميم تطبيقات الجوال و سطح المكتب الهجينة , ولتتعرف أكثر على التطبيقات الهجينة ننصحك بقراءة هذا المقال : التطبيقات الأصلية Native والتطبيقات الهجينة Hybrid , أيهما أفضل ؟

ترمز الحروف الى جملة Hyper Text Markup Language وتعني لغة ترميز النص الفائق , وتفتقر لغة HTML الى العديد من المزايا كالحلقات التكرارية و الدوال و المتغيرات , لذلك لا تعتبر لغة برمجة.

و يعد اتحاد شبكة الويب العاملة W3C هو المسؤول المباشر عن اللغة وتطويرها , وقام هذا الاتحاد في عام 2014 بتعميم الاصدار الخامس من HTML والذي يستخدمه النسبة الأكبر من مصممي الويب في وقتنا الحالي.

بعد أن تعرفنا على لغة HTML , سندخل الآن في موضوعنا الأساسي , سنعرفك على أقل وسوم HTML شهرة و فائدتها و كيفية استخدمها .

وسم <details> لعرض معلومات واظهارها

من الوسوم التي لا تستخدمها عادة مع أنها تسهل عليك العمل كثيراً , فبدلاً من انشاء فكرة ال Accordion باستخدام جافاسكريبت , يمكنك عملها بوسم HTML واحد !

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

<details open><p>You can visit naqrah to show our awesome blog</p></details>

وسم <dialog> لانشاء مربع حوار أو نافذة

لا يستغرب أن هذا الوسم قليل الاستخدام , فهو ليس ذا فائدة كبيرة في الحقيقة , فكل ما يفعله هو انشاء مربع حوار , مثال :

<dialogopen><p>Welcome do our website.</p></dialog>

وسم <mark> لتعزيز بروز النصوص

قد يبدو من الوسوم المميزة , فيقوم هذا الوسم باضافة خلفية للنص لتعزيز ظهوره أمام المستخدمين , مثال :

<p>Credit card required at time of <mark>booking.</mark></p>

اذاً , تخيل مع بعض ال css الامكانيات الواردة لهذا الوسم ! الا يمكننا انشاء زر باستخدام css واستخدامه على وسم <mark> و من ثم تضمين جميع الروابط ضمن وسم <mark> لانشاء تصاميم مذهلة بوقت قصير ؟

وسم <summary> لتحديد عنصر بارز في وسم <details>

<details><summary>Payment conditions</summary><p>Credit card required at time of booking.</p></details>

وسم <date> و <time> لاظهار التواريخ بشكل مميز

تستخدم للتعامل مع الوقت و التاريخ بشكل عام , وتقوم بعمل بعض التنسيقات للوقت و التاريخ في المتصفح , مثال :

<p>Breakfast buffet starts at<time>7.00 AM</time>at the restaurant.</p> 
<p>Concert at the lobby in<time datetime="2018-06-20T19:00">June 20th 7.00 PM</time></p> 

وسم <small> لتقليل أهمية العناصر عبر تصغير الحجم

يجب استخدام هذا الوسم لتقليل أهمية النص أو المعلومات. تفسر المتصفحات هذا من خلال جعلها ذات حجم خط أصغر حجماً، وبالتالي يكون لها تأثير أقل وضوحاً. يقلل هذا الوسم حجم النصوص بنسبة 40% من حجم العنصر الأب له. (معلومة غير مؤكدة)

مثال :

<p>Cancelations must be canceled up to 48h, <small>to avoid penalty of one night per room.</small></p> 

وسم <progress> لاظهار شريط تحميل على الشاشة

يعرض مؤشرا يوضح تقدم إنجاز المهمة، عادة ما يتم عرضه على أنه شريط التقدم. تستخدم الخاصية Value لتحديد عرض شريط التقدم , ولنتخيل هنا الامكانيات الواردة باستخدام هذا الوسم عند دمج تصميم مميز مع جافاسكريبت لاظهار شريط تقدم رفع الملفات مثلاً !

<progress value="70" max="100">70 %</progress>

في النهاية ...

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