HTMLجميع وسوم و خصائص اللغة
- مفهوم دعم المتصفحات
- جميع وسوم HTML
مفهوم دعم المتصفحات
هناك متصفحات كثيرة يمكنك استخدامها لتصفح المواقع مثل Chrome و Firefox و Edge و Safari و Opera إلخ..
تم تطوير هذه المتصفحات على مدار سنوات لذلك تجد عشرات الإصدارات لكل واحد منها و إلى يومنا هذا لا يزال يتم تحديثها بشكل مستمر.
بالنسبة للغة HTML فأغلب الوسوم و خصائصها هي نفسها في جميع المتصفحات و لكن عليك معرفة التالي:
- هناك عدد قليل جداً من الوسوم و الخصائص الإضافية المتوفرة في بعض المتصفحات فقط.
- هناك وسوم مشتركة بين جميع المتصفحات و لكن يتم عرضها بشكل مختلف على حسب نوع المتصفح الذي يتم فتح الصفحة بواسطته.
حل مشكلة الإختلاف بين المتصفحات
كمصصم مواقع، قم دائماً باستخدام الوسوم و الخصائص المشتركة بين جميع المتصفحات أو معظمها لضمان عمل و ظهور تصاميمك بنفس الشكل عند المستخدم مهما كان نوع المتصفح الذي يستخدمه.
نود الإشارة أيضاً إلى أنه لا داعي لقلق كثيراً بهذا الخصوص لأنك مستقبلاً قد تستخدم مكتبات جاهزة مثل Bootstrap و UIkit و غيرها من المكتبات الرائعة لبناء تصاميم جميل جداً تعمل على جميع المتصفحات بنفس الطريقة.
جميع وسوم HTML
الجدول التالي يتضمن جميع وسوم اللغة و خصائصها و المتصفحات التي تدعمها مع أمثلة شاملة لكل وسم.
| الوسم | استخدامه |
|---|---|
<!-- --> |
يستخدم لوضع تعليق في الكود. تابع القراءة |
<!DOCTYPE> |
يستخدم لإعلام المتصفح بإصدار لغة HTML المعتمد في الصفحة. تابع القراءة |
<a> |
يستخدم لعرض رابط في الصفحة. تابع القراءة |
<abbr> |
يستخدم لوضع تعريف لكلمة أو جملة موضوعة بشكل مختصر يتم إظهاره عند تمرير الماوس فوقه. تابع القراءة |
<address> |
يستخدم لعرض معلومات التواصل مع المؤلف أو الكاتب في الصفحة. تابع القراءة |
<area> |
يتسخدم لتحديد منقطة في خريطة الصورة التي يتم وضعها بواسطة الوسم <map> مما يجعلها كرابط يمكن النقر عليه.تابع القراءة |
<article> |
المحتوى الذي يوضع فيه يتم عرضه على سطر منفرد و لكن هذا ليس الهدف من استخدامه. بشكل عام إذا كانت الصفحة تعرض مجموعة مقالات، تعليقات، بطاقات إلخ.. يمكن عرض كل واحدة منهم بداخل وسم من هذا النوع. تابع القراءة |
<aside> |
المحتوى الذي يوضع فيه يتم عرضه على سطر منفرد و لكن هذا ليس الهدف من استخدامه. بشكل عام المحتوى الغير مرتبط بشكل مباشر بمحتوى الصفحة يمكن وضعه بداخل وسم من هذا النوع. أيضاً إذا كان تصميم الصفحة يتضمن قائمة جانبية على طول الصفحة يمكن وضع محتوى القائمة بداخل وسم من هذا النوع. تابع القراءة |
<audio> |
يستخدم لعرض مشغل ملف صوتي في الصفحة. تابع القراءة |
<b> |
يستخدم لعرض الكلام الموضوع في الفقرة بخط عريض. تابع القراءة |
<base> |
يستخدم لتحديد المسار الأساسي الذي سينطلق منه أي مسار نسبي يتم وضعه في الصفحة. تابع القراءة |
<bdi> |
في حال كان النص يحتوي على جزئية مكتوبة بلغة أخرى و هذه اللغة تؤثر على طريقة عرض النص الآخر، يمكنك وضع هذه الجزئية بداخل هذا الوسم حتى يقوم المتصفح بعزلها عن باقي بالنص كي لا تؤثر عليه. تابع القراءة |
<bdo> |
يستخدم لتغيير جهة عرض النص و اتجاه كل حرف بداخله أيضاً. تابع القراءة |
<blockquote> |
يستخدم لعرض نص مقتبس على سطر منفرد يحيطه هامش من كل الجهات. تابع القراءة |
<body> |
يعتبر من الأقسام الرئيسية في الصفحة حيث أن محتوى الصفحة الذي سيظهر أمام المستخدم يجب وضعه بداخله. تابع القراءة |
<br> |
يستخدم لإعلان نهاية السطر الحالي، أي لعرض المحتوى التالي الذي يوضع بعده على سطر منفرد. تابع القراءة |
<button> |
يستخدم لعرض زر في الصفحة. تابع القراءة |
<canvas> |
يستخدم لعرض رسومات بداخل مساحة محددة في الصفحة مع الإشارة إلى أن الرسومات التي يتم عرضها بداخله يتم رسمها و تحريكها بواسطة كود جافاسكربت. تابع القراءة |
<caption> |
يستخدم لإضافة عنوان أو وصف بسيط للجدول. تابع القراءة |
<cite> |
يستخدم لإبراز عنوان العمل المهم المعروض في الصفحة. تابع القراءة |
<code> |
يستخدم لعرض كود برمجي في الصفحة. تابع القراءة |
<col> |
في حال كانت أعمدة الجدول مقسمة لمجموعات بواسطة الوسم <colgroup> يمكن استخدام الوسم <col> لتحديد خصائص ظهور الأعمدة الموضوعة في نفس المجموعة مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود CSS.تابع القراءة |
<colgroup> |
يستخدم لتقسيم أعمدة الجدول إلى مجموعات بهدف تعديل خصائص ظهورها مع الإشارة إلى أنه يتم تحديد هذه الخصائص بواسطة كود CSS. تابع القراءة |
<data> |
ليس له تأثير فعلي على المحتوى الذي يتم وضعه بداخله و لكنه يستخدم لإضافة قيمة مقابلة للمحتوى الموضوع فيه، فمثلاً قد يقوم المبرمج بترتيب محتوى الصفحة بشكل تصاعدي نسبةً لقيمته المقابلة. تابع القراءة |
<datalist> |
يستخدم لعرض قائمة خيارات مجهزة مسبقاً تظهر أمام المستخدم حين يقوم بإدخال قيمة في مربع النص. المميز في هذه القائمة أنها نسبةً للأحرف التي يدخلها المستخدم تعرض له الخيارات التي تبدأ بنفس الأحرف. تابع القراءة |
<dd> |
يستخدم لعرض شرح أو خيار يندرج تحت مصطلح محدد في قوائم الوصف. تابع القراءة |
<del> |
يستخدم لعرض نص محذوف. تابع القراءة |
<details> |
يستخدم مع الوسم <summary> لعرض تفاصيل إضافية يستطيع المستخدم إظهارها و إخفائها.تابع القراءة |
<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> |
يستخدم لتجهيز المحتوى الذي سيتم عرضه لاحقاً في الصفحة بشكل مخفي و عند الحاجة لإظهاره يمكن إنشاء نسخة منه بواسطة جافاسكربت. تابع القراءة |
<textarea> |
يستخدم لإضافة مربع نص متعدد الأسطر في الصفحة. تابع القراءة |
<tfoot> |
يستخدم لتجميع الأسطر التي تحتوي على المعلومات المراد عرضها بشكل مختلف في آخر الجدول. تابع القراءة |
<th> |
يستخدم لإضافة خانة تمثل عنوان لعمود أو سطر الجدول. تابع القراءة |
<thead> |
يستخدم لتجميع الأسطر التي تحتوي على العناوين المراد عرضها بشكل مختلف في الجدول. تابع القراءة |
<time> |
يستخدم بهدف جعل محركات البحث تفهم التاريخ و الوقت المشار إليه في النص بشكل أفضل. تابع القراءة |
<title> |
يستخدم لتحديد عنوان الصفحة الذي سيظهر في تبويب المتصفح. تابع القراءة |
<tr> |
يستخدم لإضافة سطر في الجدول. تابع القراءة |
<track> |
يستخدم لإضافة ترجمة كتابية للملف الصوتي أو للفيديو المعروض في الصفحة. تابع القراءة |
<u> |
يستخدم لعرض خط تحت النص. تابع القراءة |
<ul> |
يستخدم لعرض قائمة غير مرتبة في الصفحة. تابع القراءة |
<var> |
يستخدم لعرض أسماء المتغيرات المستخدمة في العمليات الحسابية بشكل مميز عن باقي النص. تابع القراءة |
<video> |
يستخدم لعرض فيديو في الصفحة. تابع القراءة |
<wbr> |
يستخدم لتحديد المكان الذي سيتم قطع النص عنده و عرضه على سطر جديد في حال كان لا يمكن عرضه كله نفس السطر. تابع القراءة |
