اصبحت HTML اقوى من أي وقت مضى
إليك بعض الوسوم الرائعة في HTML التي يمكنك استخدامها دون الحاجة الى JS
1- الوسم <dialog>
يستخدم لإظهار نافذة منبثقة تفاعلية للمستخدم
مثال
<dialog open>
<p>Dialog Content</p>
</dialog>
2- الوسم <details> & <Summary>
يستخدم لإظهار محتوى قابل للطي
مثال
<details open>
<summary>Heading</summary>
<p>Some extremely long content…</p>
</details>
3- الوسم <picture>
يسمح العنصر للمطورين بتحديد مصادر مختلفة لنفس الصورة. استنادًا إلى السمات التي تم تمريرها إلى تلك المصادر ، يحدد المستعرض الصورة المراد تنزيلها واستخدامها.
4- الوسم <input>
يستخدم عند التحقق من الصحة بشكل فوري مع اختيار اللون المناسب
مثال
<input type="color" />
Number inputs:
<input type="number" min="0" max="99" />
كما تلاحظ تم تحديد المدخلات بانها عددية فقط
خلاف ذلك سوف يظهر اللون الاحمر للتنبيه
5- الوسم <main>
يستخدم لتحديد النص الاساسي في الصفحة
6 - الوسم <nav>
يمكنك تجميع الارتباطات links الخاصة بالصفحة على شكل جدول باستخدام الوسم nav
مثال
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
7- الوسم <header> يستخدم لتحديد راس الصفحة وفصله عن بقية المكونات
مثال
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
8- الوسم <pre> يستخدم لاظهار النص المكتوب كما هو على سبيل المقال قطعة او خبر
مثال :
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
9- الوسم <time>
يستخدم لاظهار الوقت والتاريخ حسب التنسيق المطلوب
مثال :
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
<p><b>Note:</b> The time element does not render as anything special in any of the major browsers.</p>
10- الوسم <mark> يستخدم هذا الوسم لتمييز كلمة او جملة بعلامة مائية للفت انتباه القاريء
مثال :
<p>Do not forget to buy <mark>milk</mark> today.</p>
إرسال تعليق