جميع وسوم و خصائص لغة HTML،
عزيزي الزائر عبر موقع المرجع الوافي نذكر في هذا المقال جميع وسوم و خصائص لغة HTML
جميع وسوم و خصائص لغة HTML؟
<!-- -->
يستخدم لوضع تعليق في الكود.
<!DOCTYPE>
يستخدم لإعلام المتصفح بإصدار لغة
HTML
المعتمد في الصفحة.
<a>
يستخدم لعرض رابط في الصفحة.
<abbr>
يستخدم لوضع تعريف لكلمة أو جملة موضوعة بشكل مختصر يتم إظهاره عند تمرير الماوس فوقه.
<address>
يستخدم لعرض معلومات التواصل مع المؤلف أو الكاتب في الصفحة.
<area>
يتسخدم لتحديد منقطة في خريطة الصورة التي يتم وضعها بواسطة الوسم
مما يجعلها كرابط يمكن النقر عليه.
<audio>
يستخدم لعرض مشغل ملف صوتي في الصفحة.
<b>
يستخدم لعرض الكلام الموضوع في الفقرة بخط عريض.
<base>
يستخدم لتحديد المسار الأساسي الذي سينطلق منه أي مسار نسبي يتم وضعه في الصفحة.
<bdi>
في حال كان النص يحتوي على جزئية مكتوبة بلغة أخرى و هذه اللغة تؤثر على طريقة عرض النص الآخر, يمكنك وضع هذه الجزئية بداخل هذا الوسم حتى يقوم المتصفح بعزلها عن باقي بالنص كي لا تؤثر عليه.
<bdo>
حيث يستخدم لتغيير جهة عرض النص و اتجاه كل حرف بداخله أيضاً.
<blockquote>
كذلك يستخدم لعرض نص مقتبس على سطر منفرد يحيطه هامش من كل الجهات.
<body>
يعتبر من الأقسام الرئيسية في الصفحة حيث أن محتوى الصفحة الذي سيظهر أمام المستخدم يجب وضعه بداخله.
<br>
حيث يستخدم لإعلان نهاية السطر الحالي, أي لعرض المحتوى التالي الذي يوضع بعده على سطر منفرد.
<button>
يستخدم لعرض زر في الصفحة.
<canvas>
يستخدم لعرض رسومات بداخل مساحة محددة في الصفحة مع الإشارة إلى أن الرسومات التي يتم عرضها بداخله يتم رسمها و تحريكها بواسطة كود جافا سكربت.
<caption>
يستخدم لإضافة عنوان أو وصف بسيط للجدول.
<cite>
يستخدم لإبراز عنوان العمل المهم المعروض في الصفحة.
<code>
يستخدم لعرض كود برمجي في الصفحة.
<col>
لتحديد خصائص ظهور الأعمدة الموضوعة في نفس المجموعة مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود.
<colgroup>
يستخدم لتقسيم أعمدة الجدول إلى مجموعات بهدف تعديل خصائص ظهورها مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود.
<data>
ليس له تأثير فعلي على المحتوى الذي يتم وضعه بداخله و لكنه يستخدم لإضافة قيمة مقابلة للمحتوى الموضوع فيه, فمثلاً قد يقوم المبرمج بترتيب محتوى الصفحة بشكل تصاعدي نسبةً لقيمه المقابلة.
<datalist>
يستخدم لعرض خيارات مجهزة مسبقاً تظهر أمام المستخدم حين يقوم بإدخال قيمة في مربع النص.
<dd>
يستخدم لعرض شرح أو خيار يندرج تحت مصطلح محدد في قوائم الوصف.
<del>
يستخدم لعرض نص محذوف.
<details>
يستخدم مع الوسم
لعرض تفاصيل إضافية يستطيع المستخدم إظهارها و إخفائها.
<dfn>
يستخدم لذكر المصطلح الذي سيتم وضع تفسير له مع الإشارة إلى أنه أيضاً يمكن إظهار تلميح فوقه يظهر عند تمرير الماوس عليه.
<dialog>
يستخدم لعرض محتوى فوق محتوى في الصفحة.
<div>
المحتوى الذي يوضع فيه يتم عرضه على سطر منفرد و الهدف الأساسي من استخدامه هو تقسيم محتوى الصفحة حيث يتم في العادة وضع كل قسم في الصفحة و الأقسام الداخلية فيها أيضاً بداخل وسم من هذا النوع.
<dl>
يستخدم لعرض قائمة وصف في الصفحة.
<dt>
يستخدم لعرض مصطلح أو عنوان في قوائم الوصف.
<em>
يستخدم لعرض النص بشكل مائل.
<embed>
يستخدم لعرض محتوى خارجي في الصفحة, هذا المحتوى ممكن أن يكون تطبيق, صورة, فيديو إلخ..
<fieldset>
يستخدم لتجميع الحقول المشتركة في النموذج.
<figcaption>
يستخدم لعرض وصف للشيء الموضوع بداخل الوسم <figure>
<figure>
يستخدم لتخصيص مكان في الصفحة بهدف عرض صورة, كود أو رسم بداخله.
<footer>
المحتوى الذي يوضع فيه يتم عرضه على سطر منفرد و لكن ليس هذا هو الهدف من استخدامه. بشكل عام إسم المؤلف, معلومات التواصل معه, حقوق النشر و الروابط المتعلقة بالمحتوى يتم وضعها بداخله.
<form>
يستخدم لعرض نموذج في الصفحة بهدف استقبال بيانات من المستخدم.
من <h1> إلى <h6>
نستخدم هذه الوسوم لعرض عناوين في الصفحة.
<head>
يعتبر من الأقسام الرئيسية في الصفحة لأنه يستخدم لإعلام المتصفح بكيفية عرض محتوى الصفحة بالإضافة إلى إمكانية تضمين ملفات التصميم, سكربتات الصفحة, أيقونة الموقع و غيرها من الأشياء المهمة فيه.
<header>
المحتوى الذي يوضع فيه يتم عرضه على سطر منفرد و لكن ليس هذا هو الهدف من استخدامه. بشكل عام المحتوى الذي يتم عرضه في أعلى أقسام الموقع أو في أعلى كل صفحات الموقع و التي قد تحتوي قائمة علوية, شعار الموقع, زر بحث إلخ.. يمكن وضعه بداخله.
<hr>
يستخدم لعرض خط أفقي في الصفحة.
<html>
يتم وضعه كأول وسم في الصفحة لأنه يعتبر الوسم الأساسي الذي يجب وضع كل وسوم الصفحة بداخله.
<i>
يستخدم لعرض النص بخط مائل.
<iframe>
يستخدم لوضع إطار في الصفحة بهدف عرض محتوى صفحة أخرى بداخله.
<img>
يستخدم لعرض صورة في الصفحة.
<input>
يستخدم لعرض مكونات تفاعلية مثل مربع نص عادي, مربع نصي للبحث, مربع لإختيار تاريخ, مربع لإدخال رقم هاتف, زر عادي, زر إختيار, زر راديو, زر لاختيار لون و غيرها من الأشياء التي يمكن الحصول عليها بواسطته.
<ins>
يستخدم لعرض خط تحت النص الجديد الذي تم إضافته على الصفحة بهدف لفت نظر المستخدم لما تم إضافته.
<kbd>
يستخدم لعرض أسماء الأزرار الموجودة على الكيبورد.
<label>
يستخدم لوضع إسم خاص لعنصر موضوع في النموذج.
<legend>
يستخدم لإضافة عنوان يظهر ضمن الحدود التي يظهرها الوسم <fieldset>
<li>
يستخدم لإضافة عنصر في القائمة التي تم إنشاءها بواسطة الوسم <ol> أو <ul> أو <menu>
<link>
يستخدم لتضمين ملفات خارجية في الصفحة و في العادة نستخدمه لتضمين ملفات التصميم و أيقونة الموقع.
<main>
المحتوى الذي يوضع فيه يتم عرضه على سطر منفرد و لكن ليس هذا هو الهدف من استخدامه. بشكل عام محتوى الصفحة الأساسي يتم وضعه فيه.
<map>
يستخدم لوضع خريطة للصورة مما يجعل أقسام هذه الخريطة يمكن النقر عليها كروابط.
<mark>
يستخدم لتعليم النص بهدف لفت نظر المستخدم إليه.
<meta>
يستخدم لتحديد خصائص الصفحة مثل الترميز, إسم المؤلف, الكلمات المفتاحية و غيرها.
<meter>
يستخدم لعرض شريط للقياس في الصفحة نسبة إمتلائه تتحدد نسبةً لقيمته الحالية مقارنةً بأصغر و أكبر قيمة تم تحديدها له.
<nav>
المحتوى الذي يوضع فيه يتم عرضه على سطر منفرد و لكن ليس هذا هو الهدف من استخدامه. بشكل عام المكان المخصص لعرض روابط فقط يمكن وضع هذه الروابط بداخل هذا الوسم.
<noscript>
يستخدم لعرض محتوى بديل في صفحة المستخدم في حال كان متصفحه لا يسمح بتنفيذ كود الجافا سكربت الخاص بالصفحة.
<object>
يستخدم لعرض محتوى خارجي في الصفحة, هذا المحتوى ممكن أن يكون تطبيق, صورة, فيديو إلخ..
<ol>
يستخدم لعرض قائمة مرتبة في الصفحة.
<optgroup>
نستخدم الوسم <optgroup> على النحو التالي لتقسيم عناصر القائمة المنسدلة التي ننشئها بواسطة الوسم <select> إلى مجموعات.
<option>
يستخدم لإضافة عنصر بداخل لإضافة خيار بداخل قائمة منسدلة تم إنشاؤها بواسطة الوسم <select> أو لإضافة خيار بداخل قائمة مساعدة تم إنشاؤها بواسطة الوسم <datalist>.
<output>
يستخدم لعرض نتيجة عملية حسابية لقيم تم إدخالها في وسوم أخرى.
<p>
يستخدم لعرض فقرة.
<param>
يمكن إضافته بداخل الوسم <object>
بهدف تحديد كيف سيتم التعامل معه.
<picture>
يستخدم لعرض صورة واحدة في الصفحة و لكن هذه الصورة يمكن أن تتبدل لصورة أخرى نسبةً لحجم الصفحة الذي نراه مناسباً لتبديل الصور.
<pre>
يستخدم لعرض نص بنفس الشكل الذي تم وضعه فيه.
<progress>
يستخدم لعرض شريط تقّدم بهدف إظهار للمسخدم كم تبقى بعد لاكتمال إتماما عملية معنية.
<q>
يستخدم لعرض النص المقتبس بين " ".
<rp>
يستخدم بداخل الوسم <ruby> لعرض أقواس حول الحاشية في حال كان المتصفح لا يدعم إمكانية عرض الحاشية فوق الكلمة الموضوعة لها.
<rt>
يستخدم بداخل الوسم <ruby> لعرض حاشية فوق الكلمة الموضوعة لها.
<ruby>
يستخدم لعرض حاشية فوق الكلمة أو بجانبها.
<s>
يستخدم لعرض نص محذوف.
<samp>
يستخدم لعرض مخرجات البرامج.
<script>
يستخدم لإضافة كود جافا سكربت في الصفحة.
<section>
المحتوى الذي يوضع فيه يتم عرضه على سطر منفرد و لكن هذا ليس الهدف من استخدامه. بشكل عام أي قسم مستقل في الصفحة (مثل قسم عرض التعليقات, آخر المقالات إلخ..) يمكن وضعه بداخل بوسم من هذا النوع.
<select>
يستخدم للحصول على قائمة منسدلة يجب إختيار أحد قيمها.
<small>
يستخدم لعرض الكلام الثانوية أو الذي يعتبر أقل أهمية بحجم خط أصغر.
<source>
يستخدم لتجهيز عدة صيغ للصوت أو الفيديو المراد عرضه في الصفحة لضمان أن يتمكن المتصفح من عرضها للمستخدم مهما كان نوع المتصفح الذي يستخدمه.
<span>
ليس له أي تأثير على المحتوى الذي يتم وضعه فيه و الهدف الأساسي من استخدامه هو تعديل طريقة ظهور بعض المحتوى الموضوع في الفقرات بواسطة كود CSS.
<strong>
يستخدم لعرض الكلام المهم في الفقرة بخط عريض.
<style>
يستخدم لإضافة كود CSS بشكل مباشر في <head> الصفحة
<sub>
يستخدم لعرض النص بشكل منخفض قليلاً عن باقي النص الموجود بجانبه.
<summary>
يستخدم لعرض لنص المختصر الذي يمكن النقر عليه لإظهار المحتوى المخفي في الوسم <details>.
<sup>
يستخدم لعرض النص بشكل مرتفع قليلاً عن باقي النص الموجود بجانبه.
<svg>
يستخدم لعرض رسومات SVG في الصفحة.
<table>
يستخدم لعرض جدول في الصفحة.
<tbody>
يستخدم لتجميع أسطر الجدول التي تحتوي معلومات عادية بهدف تعديل تصميمها بواسطة CSS لتظهر بشكل مختلف عن باقي الأسطر الموضوعة فيه.
<td>
يستخدم لإضافة خانة عادية في الجدول.
<template>
يستخدم لتجهيز المحتوى الذي سيتم عرضه لاحقاً في الصفحة بشكل مخفي و عند الحاجة لإظهاره يمكن إنشاء نسخة منه بواسطة جافا سكربت.