أساسيات HTML: اكتب صفحتك الأولى على الويب (درس مجاني مع محرر مباشر)

العناصر والوسوم والسمات

الوسم هو النص الموجود بين قوسي الزاوية. فالوسم <p> يفتح فقرة و</p> يغلقها، ووسم الإغلاق فيه شرطة مائلة. ووسم الفتح مع المحتوى ووسم الإغلاق يكوّنون معاً عنصراً. ويمكن وضع العناصر داخل عناصر أخرى، ويسمى ذلك التداخل: <p>This is <strong>important</strong>.</p> يضع عنصر strong داخل فقرة.

بعض العناصر لا محتوى لها ولا وسم إغلاق، وتسمى العناصر الفارغة، ومن أشهرها <br> (سطر جديد) و<img> (صورة) و<meta>. قد تراها مكتوبة بالشكل <br /> في الشيفرات القديمة، والشرطة هنا مسموحة لكنها لا تفعل شيئاً في HTML.

السمات تضيف معلومات إضافية إلى العنصر، وتُكتب داخل وسم الفتح بالشكل name="value". فمثلاً <a href="https://needmytools.com"> يحدد وجهة الرابط، و<html lang="en"> يخبر المتصفح أن الصفحة بالإنجليزية. ضع قيم السمات دائماً بين علامتي تنصيص، فذلك يمنع الأخطاء عندما تحتوي القيمة على مسافة.

هيكل الصفحة

يجب أن يكون <!DOCTYPE html> في السطر الأول. وهو ليس عنصراً، بل يطلب من المتصفح استخدام الوضع القياسي. وبدونه يعود المتصفح إلى "وضع التوافق" الذي يقلّد أخطاء المتصفحات القديمة وقد يكسر تخطيط صفحتك بطرق يصعب اكتشافها.

بعده يأتي <html>، العنصر الجذر الذي يحيط بكل شيء. وفي داخله يضم <head> معلومات للمتصفح ومحركات البحث: ترميز الأحرف <meta charset="utf-8">، و<title> الذي يظهر على تبويب المتصفح وفي نتائج البحث، ولاحقاً ملفات التنسيق. أما <body> فيضم المحتوى الذي يراه الناس فعلاً.

وسمة lang على العنصر <html> أهم مما تبدو. فقارئات الشاشة تستخدمها لاختيار الصوت والنطق الصحيحين، والمتصفحات تستخدمها في تقسيم الكلمات وعرض الترجمة. ولصفحة عربية تكتب <html lang="ar" dir="rtl">، فالسمة dir تجعل النص والتخطيط يسيران من اليمين إلى اليسار.

كيف يقرأ المتصفح ملفك

عندما تفتح صفحة، ينزّل المتصفح نص HTML ويحلّله إلى شجرة من الكائنات تسمى DOM (نموذج كائن المستند). ثم تنسّق CSS هذه الشجرة، ويمكن لـ JavaScript تغييرها. ولهذا يهم التداخل الصحيح، فالشجرة تُبنى من طريقة فتح وسومك وإغلاقها.

محللات HTML متسامحة. فإذا نسيت وسم إغلاق، يخمّن المتصفح مكانه ويكمل بدلاً من إظهار خطأ. وهذا مفيد للزوار لكنه خطر عليك، لأن الصفحة قد تبدو سليمة في مكان وتنكسر في آخر. وأداة تحقق مثل W3C Nu تكشف الأخطاء التي أصلحها المتصفح بصمت.

احفظ الصفحة في ملف ينتهي بـ .html (مثل index.html) وافتحه في أي متصفح، فلا حاجة إلى خادم أو تثبيت. واستخدم محرر نصوص أو محرر شيفرة، لا معالج كلمات، لأن معالجات الكلمات تضيف تنسيقات مخفية.

أخطاء شائعة

• إغلاق الوسوم بترتيب خاطئ

  <p><strong>Hi</p></strong> يجعل عنصرين يتقاطعان. أغلق الداخلي أولاً: <p><strong>Hi</strong></p>. تخيّلها صناديق داخل صناديق.

• حذف تعريف نوع المستند أو ترميز الأحرف

  بدون <!DOCTYPE html> تعمل الصفحة في وضع التوافق، وبدون <meta charset="utf-8"> قد يتحول النص العربي والرموز إلى أحرف غريبة. ضعهما في كل صفحة.

• وضع محتوى مرئي داخل head

  العناوين والفقرات مكانها <body>. ولا يوضع في <head> إلا معلومات عن الصفحة مثل <title> و<meta>.

تمرين

حوّل الشيفرة الأولية إلى صفحة كاملة: أضف تعريف نوع المستند، وعنصر html مع lang="en"، وhead فيه ترميز الأحرف وعنوان، وbody فيه عنوان h1 واحد وفقرة واحدة عنك.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>About me</title>
  </head>
  <body>
    <h1>About me</h1>
    <p>I am learning HTML on NeedMyTools.</p>
  </body>
</html>

اختبار سريع

أسئلة يطرحها الناس

المصادر

روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.

• MDN: Basic HTML syntax
• WHATWG HTML Living Standard: The HTML syntax
• MDN: Quirks mode and standards mode
• W3C Nu HTML Checker

تبقى أمثلة الشيفرة بالإنجليزية وتعمل في بيئة معزولة على جهازك. والنص العربي بانتظار المراجعة من متحدث أصلي. وإذا لاحظت خطأ فأخبرنا عبر صفحة التواصل.