🏗️ مرجع وسوم HTML بالعربي

<a>

وسم الروابط

وسم a ينشئ رابطًا تشعبيًّا إلى صفحة أخرى أو قسم داخل الصفحة أو بريد أو ملف — أهم وسوم الويب على الإطلاق.

<p>

وسم الفقرة

وسم p يمثل فقرة نصية مستقلة — الوحدة الأساسية لأي محتوى مكتوب على الويب.

<h1>–<h6>

وسوم العناوين

ستة مستويات من العناوين تبني الهيكل الهرمي للصفحة — h1 للعنوان الرئيسي الأوحد وh2-h6 للتفريعات.

<strong>

وسم الأهمية القوية

وسم strong يمنح النص أهمية دلالية حقيقية (ويظهر غامقًا) — تحذيرات، كلمات مفصلية، تنبيهات.

<br>

وسم كسر السطر

وسم br يكسر السطر داخل النص — للعناوين البريدية والشعر حصرًا، وليس لصناعة مسافات رأسية.

<em>

وسم التوكيد

وسم em يوكّد كلمة يتغير بها معنى الجملة (ويظهر مائلًا) — التوكيد الدلالي الذي تنطقه قارئات الشاشة بنبرة مختلفة.

<b> / <i>

وسما التمييز الشكلي

b للغمقة الشكلية وi للميل الشكلي — تمييز بصري بحت بلا أي دلالة، مقابل strong وem الدلاليين.

<code>

وسم الكود السطري

وسم code يميز مقتطف كود داخل الجملة بخط أحادي المسافة — لأسماء الدوال والأوامر والمتغيرات وسط النص.

<pre>

وسم النص المنسق مسبقًا

وسم pre يعرض النص كما كتبته حرفيًّا — بمسافاته وأسطره — بخط أحادي المسافة: أساس كتل الكود وفن ASCII.

<blockquote>

وسم الاقتباس

وسم blockquote يميز نصًّا منقولًا من مصدر آخر ككتلة اقتباس مستقلة — مع cite لرابط المصدر.

<hr>

وسم الفاصل الأفقي

وسم hr يرسم فاصلًا أفقيًّا يعلن انتقالًا في الموضوع — فاصل دلالي لا مجرد خط زخرفي.

<mark>

وسم التظليل

وسم mark يظلل نصًّا بخلفية صفراء كقلم التحديد — لإبراز الأجزاء ذات الصلة بسياق المستخدم كنتائج البحث.

<small>

وسم النص الثانوي

وسم small للتعليقات الجانبية والنصوص القانونية الصغيرة — حقوق النشر، إخلاء المسؤولية، الشروط الدقيقة.

<sub> / <sup>

وسما النص المنخفض والمرتفع

sub ينزل النص تحت السطر (H₂O) وsup يرفعه فوقه (x²) — للصيغ العلمية والرياضية والحواشي.

<time>

وسم الوقت والتاريخ

وسم time يلف تاريخًا أو وقتًا مع نسخة آلية القراءة في datetime — فتفهم محركات البحث «نُشر في 10 يوليو» بدقة.

<abbr>

وسم الاختصار

وسم abbr يميز الاختصارات (HTML، ناسا) ويعرض معناها الكامل في تلميح عند مرور المؤشر عبر title.

<del> / <ins>

وسما المحذوف والمضاف

del يشطب نصًّا حُذف من المستند وins يسطّر نصًّا أُضيف — لتوثيق التعديلات وعروض الأسعار.

<kbd>

وسم مدخلات لوحة المفاتيح

وسم kbd يميز ما يضغطه المستخدم على لوحة المفاتيح — Ctrl+C وEnter — بمظهر «زر» مألوف في التوثيقات.

<img>

وسم الصور

وسم img يعرض صورة في الصفحة عبر src، مع نص بديل alt إلزامي عمليًّا للوصولية والسيو.

<video>

وسم الفيديو

وسم video يشغّل الفيديو في المتصفح مباشرة بلا إضافات — مع أزرار تحكم مدمجة عبر controls.

<audio>

وسم الصوت

وسم audio يشغّل الملفات الصوتية في المتصفح — بودكاست، تلاوات، مؤثرات — مع controls للتحكم.

<iframe>

وسم الإطار المضمّن

وسم iframe يضمّن صفحة ويب كاملة داخل صفحتك — فيديوهات يوتيوب، خرائط، ومحتوى خارجي معزول.

<canvas>

وسم لوحة الرسم

وسم canvas لوحة بكسلات ترسم عليها بالجافاسكريبت — الألعاب والرسوم البيانية والمعالجات المرئية الحية.

<svg>

وسم الرسوميات المتجهة

وسم svg يرسم أشكالًا متجهة تبقى حادة بأي تكبير — الأيقونات والشعارات والمخططات، قابلة للتنسيق بـ CSS.

<picture>

وسم الصور المتجاوبة

وسم picture يقدّم نسخًا مختلفة من الصورة حسب حجم الشاشة أو دعم الصيغ — WebP للحديث وJPG للقديم بلا جافاسكريبت.

<figure>

وسم الشكل التوضيحي

وسم figure يلف صورة أو مخططًا أو كودًا مع تسمية figcaption — وحدة توضيحية مستقلة مرتبطة بالمحتوى.

<div>

وسم الحاوية العامة

وسم div حاوية كتلية عامة بلا معنى دلالي — تُستخدم لتجميع العناصر لأغراض التنسيق والتخطيط بـ CSS.

<span>

وسم الحاوية السطرية

وسم span حاوية سطرية عامة — يلتف حول جزء من نص أو عناصر صغيرة لتنسيقها دون كسر السطر.

<nav>

وسم التنقل

وسم nav يعلن أن ما بداخله كتلة روابط تنقل رئيسية — القائمة العلوية، فتات الخبز، روابط الأقسام.

<header>

وسم الترويسة

وسم header يمثل ترويسة الصفحة أو القسم — الشعار والتنقل في أعلى الموقع، أو عنوان المقال وبياناته.

<footer>

وسم التذييل

وسم footer يمثل تذييل الصفحة أو القسم — الحقوق وروابط التواصل في أسفل الموقع، أو ذيل المقال.

<section>

وسم القسم

وسم section يجمع محتوى مترابطًا موضوعيًّا تحت عنوان — أقسام صفحة الهبوط، فصول المستند الطويل.

<article>

وسم المقال المستقل

وسم article لمحتوى مكتمل بذاته يصلح للتوزيع منفردًا — تدوينة، خبر، تعليق، بطاقة منتج.

<main>

وسم المحتوى الرئيسي

وسم main يحدد المحتوى الرئيسي الفريد للصفحة — واحد لكل صفحة، خارج الترويسة والتذييل والأشرطة.

<aside>

وسم المحتوى الجانبي

وسم aside لمحتوى مرتبط بشكل غير مباشر بما حوله — الأشرطة الجانبية، صناديق «معلومة إضافية»، الإعلانات.

<details>

وسم الطي والكشف

وسم details ينشئ صندوقًا قابلًا للطي بعنوان summary — أكورديون أسئلة شائعة كامل بلا سطر جافاسكريبت واحد.

<dialog>

وسم النافذة الحوارية

وسم dialog نافذة منبثقة مدمجة بالمتصفح — showModal()‎ تفتحها بخلفية معتمة وإدارة تركيز وإغلاق بـ Esc، مجانًا.

<ul>

وسم القائمة غير المرتبة

وسم ul ينشئ قائمة نقطية لعناصر لا يهم ترتيبها، وكل عنصر فيها داخل وسم li.

<ol>

وسم القائمة المرتبة

وسم ol ينشئ قائمة مرقمة تلقائيًّا لعناصر يهم ترتيبها — خطوات، تعليمات، تصنيفات.

<table>

وسم الجدول

وسم table يعرض بيانات ثنائية الأبعاد في صفوف tr وخلايا td برؤوس th — للبيانات الجدولية حصرًا.

<li>

وسم عنصر القائمة

وسم li يمثل عنصرًا واحدًا داخل قائمة ul أو ol — لا يعيش خارجهما أبدًا.

<dl>

وسم قائمة التعريفات

وسم dl ينشئ قائمة أزواج «مصطلح وشرحه»: dt للمصطلح وdd لتعريفه — قواميس المصطلحات والبيانات الوصفية.

<form>

وسم النموذج

وسم form يجمع حقول الإدخال ويرسل بياناتها إلى الخادم عبر action وmethod — بوابة كل تفاعل مستخدم.

<input>

وسم حقل الإدخال

وسم input أكثر وسوم النماذج تنوعًا — حقل واحد يتحول عبر type إلى نص وبريد وكلمة مرور ورقم وتاريخ وملف وأكثر.

<button>

وسم الزر

وسم button ينشئ زرًّا تفاعليًّا حقيقيًّا — قابلًا للضغط والتركيز بلوحة المفاتيح، لتنفيذ الأفعال داخل النماذج وخارجها.

<select>

وسم القائمة المنسدلة

وسم select ينشئ قائمة منسدلة يختار منها المستخدم خيارًا من عناصر option جاهزة.

<textarea>

وسم حقل النص الطويل

وسم textarea حقل نصي متعدد الأسطر — للرسائل والتعليقات وكل إدخال يتجاوز سطرًا واحدًا.

<label>

وسم تسمية الحقل

وسم label يسمّي حقل إدخال ويرتبط به — الضغط على التسمية يفعّل الحقل، وقارئات الشاشة تقرؤها معه.

<fieldset>

وسم تجميع حقول النموذج

وسم fieldset يجمع حقول نموذج مترابطة داخل إطار بعنوان legend — «بيانات الشحن» و«طريقة الدفع» كمجموعات واضحة.

<datalist>

وسم قائمة الاقتراحات

وسم datalist يضيف اقتراحات تلقائية لحقل input — المستخدم يكتب بحرية وتظهر له خيارات جاهزة تُصفّى مع الكتابة.

<progress> / <meter>

وسما شريط التقدم والمقياس

progress يعرض تقدم مهمة (رفع ملف 70%) وmeter يعرض قياسًا ضمن مدى (الممتلئ من القرص) — بدلالة يفهمها الجميع.

<output>

وسم ناتج الحساب

وسم output يعرض نتيجة حساب أو تفاعل مستخدم — وقارئات الشاشة تعلن تغيّر قيمته تلقائيًّا.

<meta>

وسم البيانات الوصفية

وسم meta يزود المتصفح ومحركات البحث بمعلومات عن الصفحة: الترميز، الوصف، إعداد الشاشة، بطاقات المشاركة.

<link>

وسم ربط الموارد

وسم link يربط الصفحة بموارد خارجية من داخل head — ملفات CSS أولًا، ثم الأيقونات وcanonical والخطوط.

<script>

وسم السكربت

وسم script يضيف الجافاسكريبت للصفحة — مضمنًا أو من ملف خارجي، مع defer وasync للتحكم بتوقيت التنفيذ.

<html>

وسم جذر المستند

وسم html هو جذر كل صفحة ويب — يحتضن head وbody، وعليه تُعلن اللغة lang واتجاه الكتابة dir.

<head>

وسم رأس المستند

وسم head حاوية البيانات غير المرئية: العنوان والترميز والوصف وملفات CSS — كل ما يصف الصفحة دون أن يظهر فيها.

<body>

وسم جسم المستند

وسم body يحتضن كل المحتوى المرئي للصفحة — النصوص والصور والأزرار وكل ما يراه الزائر ويتفاعل معه.

<title>

وسم عنوان الصفحة

وسم title يحدد النص الظاهر في تبويب المتصفح — وهو نفسه العنوان الأزرق في نتائج Google: أهم سطر SEO في الصفحة.