مرجع وسوم HTML (HTML Tags Reference) هو دليل شامل يضم جميع العناصر والوسوم المتاحة في HTML من الإصدارات المختلفة، بدءاً من HTML الأساسي وصولاً إلى HTML5 الحديث. يمكن تشبيه هذا المرجع بموسوعة مكتبة ضخمة منظمة في أقسام متخصصة، حيث كل قسم يحتوي على مجموعة من الوسوم المترابطة وظيفياً. في مواقع الأخبار، يساعد المرجع في اختيار وسوم المحتوى والوسائط والنماذج والجداول. في المتاجر الإلكترونية، يوجه نحو وسوم النماذج المتقدمة والعناصر التفاعلية ووسوم البيانات المنظمة. للصفحات الشخصية، يقدم إرشادات حول وسوم الوسائط والتنسيق والعناصر الدلالية. وفي البوابات الحكومية، يركز على وسوم إمكانية الوصول والنماذج المعقدة والبيانات المهيكلة. خلال هذا الدرس الشامل، ستتعلم جميع فئات وسوم HTML المتاحة مع أمثلة عملية، بدءاً من الوسوم الأساسية للهيكل، مروراً بوسوم النصوص والوسائط والنماذج والجداول، وصولاً إلى الوسوم المتقدمة والحديثة في HTML5، مما يجعلك قادراً على إنشاء مواقع ويب احترافية ومتكاملة.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>مرجع HTML الشامل</title> <!-- وسوم الرأس الأساسية -->
<meta name="description" content="دليل شامل لجميع وسوم HTML">
</head>
<body>
<header><h1>مرجع وسوم HTML الكامل</h1></header> <!-- وسوم الهيكل -->
<nav><a href="#content">المحتوى</a></nav> <!-- وسوم التنقل -->
<main id="content"><p>هذا مثال على <strong>الوسوم الأساسية</strong></p></main>
</body>
</html>
يوضح المثال الأساسي الهيكل الجذري لأي صفحة HTML مع عرض الفئات الرئيسية للوسوم. يبدأ بـ DOCTYPE html5 الحديث، يليه وسم html الجذر مع تحديد اللغة العربية. في قسم head نجد الوسوم الوصفية الأساسية: meta للترميز والوصف، وtitle لعنوان الصفحة. قسم body يحتوي على الوسوم الهيكلية مثل header وnav وmain، بالإضافة إلى وسوم النصوص مثل h1 وp وstrong. هذا التنظيم يمثل الأساس الذي تُبنى عليه جميع صفحات الويب. الوسوم الدلالية تجعل المحتوى مفهوماً لمحركات البحث وقارئات الشاشة، بينما الوسوم الوصفية تحسن من SEO وتجربة المستخدم. استخدام strong بدلاً من b يضيف معنى دلالياً للتأكيد، وليس مجرد تنسيق بصري. تحديد lang وdir أساسي للمحتوى العربي لضمان العرض الصحيح. هذا المثال يُظهر كيف تتكامل الوسوم المختلفة لتكوين صفحة ويب متكاملة ومتوافقة مع المعايير الحديثة.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>متجر إلكتروني شامل</title><link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>متجرنا الإلكتروني</h1><nav><ul><li><a href="#products">المنتجات</a></li></ul></nav></header>
<main><section id="products"><h2>منتجاتنا</h2>
<article><h3>هاتف ذكي</h3><figure><img src="phone.jpg" alt="هاتف ذكي حديث"><figcaption>أحدث الهواتف</figcaption></figure>
<p>وصف المنتج مع <mark>المميزات الخاصة</mark></p><details><summary>المواصفات</summary><dl><dt>الشاشة</dt><dd>6.1 بوصة</dd></dl></details>
<form><fieldset><legend>طلب المنتج</legend><label for="qty">الكمية:</label><input type="number" id="qty" min="1" required>
<select name="color"><option value="black">أسود</option></select><button type="submit">أضف للسلة</button></fieldset></form></article></section>
<aside><h4>عروض خاصة</h4><ul><li>خصم 20%</li></ul></aside></main><footer><small>© 2025 متجرنا</small></footer>
</body>
</html>
هذا المثال العملي يدمج معظم فئات وسوم HTML في تطبيق متجر إلكتروني حقيقي. نبدأ بوسوم الرأس المتقدمة مثل viewport وlink للربط بملف CSS. الهيكل يتضمن header مع عنوان h1 وقائمة تنقل nav بـ ul وli. في المحتوى الرئيسي main، نجد section لتقسيم المنتجات وarticle لكل منتج منفرد. وسوم الوسائط تظهر في figure وimg مع figcaption للتسمية التوضيحية. وسم mark يبرز النص المهم، بينما details وsummary ينشئان محتوى قابل للطي. قائمة التعريف dl مع dt وdd تنظم المواصفات بوضوح. النماذج تتضمن form مع fieldset وlegend للتجميع، وlabel مربوطة بـ input، وselect مع option للخيارات، وbutton للإرسال. وسم aside للمحتوى الجانبي وfooter للتذييل مع small لحقوق الطبع. هذا التنوع يوضح كيف تتكامل وسوم HTML المختلفة لبناء تجربة مستخدم غنية ومتكاملة، مع الحفاظ على الدلالة الصحيحة وإمكانية الوصول.
أفضل الممارسات في استخدام مرجع HTML الشامل تبدأ بفهم التصنيف الوظيفي للوسوم واختيار الأنسب لكل غرض. الوسوم الدلالية مثل article وsection وaside أفضل من div العامة لأنها تضيف معنى للمحتوى. في النماذج، استخدم label مع كل input واربطهما بـ for وid، واستفد من HTML5 attributes مثل required وplaceholder وpattern. للوسائط، أضف دائماً alt للصور وcontrols لملفات الصوت والفيديو. استخدم figure مع figcaption للصور التوضيحية. في الجداول، اربط headers بـ scope واستخدم caption للوصف. من الأخطاء الشائعة استخدام وسوم العرض القديمة مثل font وcenter بدلاً من CSS، أو استخدام table للتخطيط. تجنب div soup باستخدام الوسوم الدلالية المناسبة. عدم إغلاق الوسوم أو تداخلها خطأ يؤثر على العرض. نسيان إمكانية الوصول مثل alt وlang وrole يضر بتجربة ذوي الاحتياجات الخاصة. للتصحيح، استخدم W3C Markup Validator للتحقق من صحة الكود، واختبر بمتصفحات مختلفة وقارئات الشاشة. راجع مرجع HTML بانتظام لاكتشاف وسوم جديدة أو خصائص لم تكن تستخدمها.
📊 مرجع سريع - وسوم HTML الأساسية
| الفئة |
الوسم |
الوصف |
مثال الاستخدام |
| هيكل الصفحة |
<html> |
العنصر الجذر للصفحة |
<html lang="ar" dir="rtl"> |
| رأس الصفحة |
<head> |
معلومات وصفية عن الصفحة |
<head><title>العنوان</title></head> |
| عنوان الصفحة |
<title> |
عنوان يظهر في شريط المتصفح |
<title>موقعي الإلكتروني</title> |
| معلومات وصفية |
<meta> |
بيانات وصفية للصفحة |
<meta charset="UTF-8"> |
| جسم الصفحة |
<body> |
المحتوى المرئي للصفحة |
<body><h1>مرحباً</h1></body> |
| عناوين |
<h1>-<h6> |
عناوين بمستويات مختلفة |
<h1>العنوان الرئيسي</h1> |
| فقرة |
<p> |
فقرة نصية |
<p>هذه فقرة من النص</p> |
| رابط |
<a> |
رابط تشعبي |
<a href="page.html">اذهب للصفحة</a> |
| صورة |
<img> |
عرض صورة |
<img src="photo.jpg" alt="صورة"> |
| قائمة مرقمة |
<ol> |
قائمة مرتبة بأرقام |
<ol><li>العنصر الأول</li></ol> |
| قائمة نقطية |
<ul> |
قائمة غير مرتبة |
<ul><li>عنصر القائمة</li></ul> |
| عنصر قائمة |
<li> |
عنصر داخل قائمة |
<li>محتوى العنصر</li> |
| قسم عام |
<div> |
حاوي عام للعناصر |
<div class="container">المحتوى</div> |
| نص مضمن |
<span> |
عنصر نصي مضمن |
<span class="highlight">نص مميز</span> |
| نموذج |
<form> |
نموذج لإدخال البيانات |
<form action="submit.php" method="post"> |
| حقل إدخال |
<input> |
حقل لإدخال البيانات |
<input type="text" name="username"> |
| منطقة نص |
<textarea> |
منطقة لإدخال نص متعدد الأسطر |
<textarea rows="4" cols="50"></textarea> |
| زر |
<button> |
زر تفاعلي |
<button type="submit">إرسال</button> |
| قائمة اختيار |
<select> |
قائمة منسدلة للاختيار |
<select><option>خيار</option></select> |
| خيار |
<option> |
خيار في قائمة الاختيار |
<option value="1">الخيار الأول</option> |
| تسمية |
<label> |
تسمية لحقل النموذج |
<label for="name">الاسم:</label> |
| جدول |
<table> |
جدول لعرض البيانات |
<table><tr><td>خلية</td></tr></table> |
| صف جدول |
<tr> |
صف في الجدول |
<tr><td>البيانات</td></tr> |
| خلية جدول |
<td> |
خلية بيانات في الجدول |
<td>محتوى الخلية</td> |
| رأس الجدول |
<th> |
خلية رأس في الجدول |
<th>عنوان العمود</th> |
📊 مرجع سريع - وسوم HTML5 الدلالية
| الفئة |
الوسم |
الوصف |
مثال الاستخدام |
| رأس الصفحة |
<header> |
رأس الصفحة أو القسم |
<header><h1>العنوان</h1></header> |
| تنقل |
<nav> |
روابط التنقل الرئيسية |
<nav><ul><li><a href="/">الرئيسية</a></li></ul></nav> |
| المحتوى الرئيسي |
<main> |
المحتوى الرئيسي للصفحة |
<main><article>المقال</article></main> |
| قسم |
<section> |
قسم من المحتوى |
<section><h2>عنوان القسم</h2></section> |
| مقال |
<article> |
محتوى مستقل وكامل |
<article><h2>عنوان المقال</h2></article> |
| محتوى جانبي |
<aside> |
محتوى جانبي مرتبط |
<aside><h3>روابط ذات صلة</h3></aside> |
| تذييل |
<footer> |
تذييل الصفحة أو القسم |
<footer><p>حقوق الطبع 2025</p></footer> |
| شكل توضيحي |
<figure> |
محتوى مرئي مع تسمية |
<figure><img src="chart.jpg"><figcaption>الرسم البياني</figcaption></figure> |
| تسمية توضيحية |
<figcaption> |
تسمية للشكل التوضيحي |
<figcaption>وصف الصورة</figcaption> |
| تفاصيل |
<details> |
محتوى قابل للطي والتوسع |
<details><summary>العنوان</summary>التفاصيل</details> |
| ملخص |
<summary> |
عنوان للتفاصيل القابلة للطي |
<summary>اضغط للتفاصيل</summary> |
| وقت |
<time> |
تاريخ أو وقت |
<time datetime="2025-07-29">29 يوليو 2025</time> |
| نص مميز |
<mark> |
نص مميز أو محدد |
<mark>النص المهم</mark> |
| شريط التقدم |
<progress> |
شريط تقدم |
<progress value="70" max="100">70%</progress> |
| عداد |
<meter> |
عداد أو مقياس |
<meter value="6" min="0" max="10">6 من 10</meter> |
| تعريف |
<dfn> |
مصطلح يتم تعريفه |
<dfn>HTML</dfn> هي لغة ترميز |
| اختصار |
<abbr> |
اختصار أو اسم مختصر |
<abbr title="Hypertext Markup Language">HTML</abbr> |
| استشهاد |
<cite> |
مرجع أو مصدر |
<cite>كتاب البرمجة</cite> |
| اقتباس |
<blockquote> |
اقتباس طويل |
<blockquote>هذا اقتباس طويل</blockquote> |
| اقتباس قصير |
<q> |
اقتباس مضمن قصير |
<q>اقتباس قصير</q> |
📊 مرجع سريع - وسوم النماذج المتقدمة
| الفئة |
الوسم |
الوصف |
مثال الاستخدام |
| مجموعة حقول |
<fieldset> |
تجميع حقول النموذج |
<fieldset><legend>بيانات شخصية</legend></fieldset> |
| عنوان المجموعة |
<legend> |
عنوان لمجموعة الحقول |
<legend>معلومات الاتصال</legend> |
| خيارات متعددة |
<optgroup> |
تجميع خيارات القائمة |
<optgroup label="الفواكه"><option>تفاح</option></optgroup> |
| قائمة بيانات |
<datalist> |
قائمة اقتراحات للإدخال |
<input list="cities"><datalist id="cities"><option value="الرياض"></datalist> |
| مخرجات |
<output> |
نتيجة حساب أو عملية |
<output name="result" for="a b">النتيجة</output> |
| إدخال ملون |
<input type="color"> |
أداة اختيار الألوان |
<input type="color" name="bgcolor"> |
| إدخال تاريخ |
<input type="date"> |
أداة اختيار التاريخ |
<input type="date" name="birthday"> |
| إدخال وقت |
<input type="time"> |
أداة اختيار الوقت |
<input type="time" name="meeting"> |
| إدخال رقم |
<input type="number"> |
حقل إدخال رقمي |
<input type="number" min="1" max="100"> |
| إدخال نطاق |
<input type="range"> |
شريط تمرير للأرقام |
<input type="range" min="0" max="100" value="50"> |
| إدخال بحث |
<input type="search"> |
حقل بحث |
<input type="search" name="q" placeholder="ابحث..."> |
| إدخال رابط |
<input type="url"> |
حقل إدخال رابط |
<input type="url" name="website"> |
| إدخال بريد |
<input type="email"> |
حقل إدخال بريد إلكتروني |
<input type="email" name="email" required> |
📊 مرجع سريع - وسوم الوسائط والتفاعل
| الفئة |
الوسم |
الوصف |
مثال الاستخدام |
| صوت |
<audio> |
ملف صوتي |
<audio controls><source src="song.mp3" type="audio/mpeg"></audio> |
| فيديو |
<video> |
ملف فيديو |
<video controls width="320"><source src="movie.mp4" type="video/mp4"></video> |
| مصدر وسائط |
<source> |
مصدر ملف للوسائط |
<source src="video.webm" type="video/webm"> |
| نص بديل |
<track> |
ترجمات أو نص بديل للفيديو |
<track kind="subtitles" src="subs.vtt" srclang="ar"> |
| رسوم |
<canvas> |
منطقة رسم بـ JavaScript |
<canvas id="myCanvas" width="200" height="100"></canvas> |
| رسوم متجهة |
<svg> |
رسوم متجهة مضمنة |
<svg><circle cx="50" cy="50" r="40"></svg> |
| محتوى مضمن |
<iframe> |
إطار لصفحة ويب أخرى |
<iframe src="page.html" width="300" height="200"></iframe> |
| كائن مضمن |
<object> |
كائن خارجي مضمن |
<object data="document.pdf" type="application/pdf"></object> |
| محتوى تفاعلي |
<embed> |
محتوى خارجي مضمن |
<embed src="animation.swf" type="application/x-shockwave-flash"> |
| خريطة صورة |
<map> |
خريطة نقرات للصورة |
<map name="imagemap"><area shape="rect" coords="0,0,50,50" href="link.html"></map> |
| منطقة نقر |
<area> |
منطقة قابلة للنقر في الخريطة |
<area shape="circle" coords="100,100,50" href="page.html"> |
📊 مرجع سريع - وسوم التنسيق والنصوص
| الفئة |
الوسم |
الوصف |
مثال الاستخدام |
| تأكيد قوي |
<strong> |
نص مهم بتأكيد قوي |
<strong>تحذير مهم</strong> |
| تأكيد |
<em> |
نص مؤكد أو مُشدد عليه |
<em>كلمة مهمة</em> |
| كود |
<code> |
كود برمجي مضمن |
<code>console.log('Hello')</code> |
| كود منسق |
<pre> |
نص منسق مسبقاً |
<pre> function test() { return true; }</pre> |
| متغير |
<var> |
متغير أو معامل |
<var>x</var> = 10 |
| لوحة مفاتيح |
<kbd> |
نص يمثل إدخال لوحة المفاتيح |
اضغط <kbd>Ctrl+C</kbd> |
| عينة |
<samp> |
عينة من مخرجات برنامج |
<samp>File not found</samp> |
| حذف |
<del> |
نص محذوف |
<del>السعر القديم</del> |
| إدراج |
<ins> |
نص مُدرج أو مُضاف |
<ins>السعر الجديد</ins> |
| صغير |
<small> |
نص بحجم صغير |
<small>حقوق الطبع محفوظة</small> |
| فوقي |
<sup> |
نص فوقي |
E = mc<sup>2</sup> |
| تحتي |
<sub> |
نص تحتي |
H<sub>2</sub>O |
| فاصل سطر |
<br> |
فاصل سطر |
السطر الأول<br>السطر الثاني |
| خط أفقي |
<hr> |
خط فاصل أفقي |
<hr> |
| اتجاه النص |
<bdi> |
عزل اتجاه النص |
<bdi>النص العربي</bdi> |
| تجاوز الاتجاه |
<bdo> |
تجاوز اتجاه النص |
<bdo dir="ltr">نص بالاتجاه المحدد</bdo> |
| كسر الكلمة |
<wbr> |
نقطة كسر اختيارية للكلمة |
كلمة<wbr>طويلة<wbr>جداً |
📊 مرجع سريع - وسوم الجداول المتقدمة
| الفئة |
الوسم |
الوصف |
مثال الاستخدام |
| عنوان الجدول |
<caption> |
عنوان توضيحي للجدول |
<caption>جدول المبيعات الشهرية</caption> |
| رأس الجدول |
<thead> |
مجموعة صفوف رأس الجدول |
<thead><tr><th>الاسم</th></tr></thead> |
| جسم الجدول |
<tbody> |
مجموعة صفوف بيانات الجدول |
<tbody><tr><td>أحمد</td></tr></tbody> |
| تذييل الجدول |
<tfoot> |
مجموعة صفوف تذييل الجدول |
<tfoot><tr><td>المجموع</td></tr></tfoot> |
| مجموعة أعمدة |
<colgroup> |
تجميع أعمدة للتنسيق |
<colgroup><col span="2" style="background:yellow"></colgroup> |
| عمود |
<col> |
خصائص عمود أو مجموعة أعمدة |
<col style="width:50%"> |
📊 مرجع سريع - وسوم البيانات والقوائم
| الفئة |
الوسم |
الوصف |
مثال الاستخدام |
| قائمة تعريف |
<dl> |
قائمة تعريفات ومصطلحات |
<dl><dt>HTML</dt><dd>لغة ترميز</dd></dl> |
| مصطلح |
<dt> |
مصطلح في قائمة التعريف |
<dt>CSS</dt> |
| تعريف |
<dd> |
تعريف المصطلح |
<dd>لغة تنسيق الصفحات</dd> |
| عنوان المجموعة |
<hgroup> |
تجميع عناوين مترابطة |
<hgroup><h1>العنوان</h1><h2>العنوان الفرعي</h2></hgroup> |
| بيانات |
<data> |
ربط المحتوى بقيمة آلية |
<data value="12345">رقم المنتج: ١٢٣٤٥</data> |
خلاصة هذا المرجع الشامل تؤكد على أن HTML يحتوي على أكثر من 100 وسم مختلف، كل منها له غرض محدد ومكانه المناسب في بناء صفحات الويب. الوسوم الهيكلية مثل header وnav وmain تنظم المحتوى دلالياً، بينما وسوم النصوص مثل strong وem تضيف معنى للمحتوى. وسوم النماذج توفر أدوات تفاعلية متقدمة، ووسوم الوسائط تدعم المحتوى الغني. HTML5 أضاف العديد من الوسوم الحديثة مثل progress وmeter وtime التي تحسن تجربة المستخدم وإمكانية الوصول. فهم هذا التنوع الهائل يمكّنك من اختيار الوسم الأنسب لكل موقف، مما يحسن جودة الكود وأداء الموقع. الخطوة التالية هي ربط هذه المعرفة بـ CSS لإضافة التصميم والتخطيط، وJavaScript للتفاعل والديناميكية. أنصح بحفظ هذا المرجع كمصدر دائم والرجوع إليه عند بناء مشاريعك. تذكر أن استخدام الوسم الصحيح ليس فقط مسألة عمل، بل احترام لمعايير الويب وتحسين لتجربة جميع المستخدمين.
