عدد الكلمات: ~٢٣٠٠ · مدة القراءة: ١٢ دقيقة

لغة الهيكل

تعلم أساسيات HTML لبناء أول صفحة ويب بيدك — الكود ليس لغزاً، بل هو وصفة

ملاحظة للقارئ: هذا المقال مستقلٌ تماماً، وما تحتاجه للبدء هو متصفحٌ وأي محرر نصوصٍ عادي. لكن إن أردت الصورة الأكبر — أين تقع HTML في منظومة بناء المواقع وما الذي تحتاجه فعلاً — فننصحك بمراجعة مقالتنا الثانية في السلسلة: تشريح مواقع الويب: الفرق بين صفحات الهبوط والمدونات ومعارض الأعمال.

حين تفتح أيّ موقع على الإنترنت وتضغط بالزر الأيمن وتختار “عرض مصدر الصفحة”، ستجد أمامك نصاً مليئاً بإشاراتٍ مثل <h1> و<p> و<div>. هذا هو HTML — وما يبدو مخيفاً في أول نظرة ليس أكثر من نظامٍ بسيطٍ لوضع الأشياء في مكانها الصحيح على الصفحة. في هذا المقال من منصة ذي يزن، سنتعلم سويةً هذا النظام من الصفر، ونبني بنهاية المقال صفحةً ويب حقيقيةٍ بأيدينا.

ما هو HTML وماذا يفعل تحديداً؟

HTML اختصارٌ لـ HyperText Markup Language، وترجمته الحرفية هي “لغة ترميز النص الفائق”، لكن المعنى الأوضح هو: لغة الهيكل. مهمة HTML الوحيدة هي الإجابة على سؤالٍ واحد: ما هذا العنصر على الصفحة؟ هل هو عنوانٌ رئيسي أم فقرةٌ نصية أم صورةٌ أم رابطٌ أم قائمة؟

HTML لا تُجيب على كيف يبدو هذا العنصر — هذا عمل CSS التي سنتناولها في المقال الخامس — ولا تُجيب على ماذا يفعل حين يضغط عليه المستخدم — هذا عمل JavaScript. ثلاثةٌ لكلٍّ منهم دوره، وHTML هي الأساس الذي لا يقوم البناء بدونه.

تخيّل HTML على أنها هيكل المبنى — الجدران والأعمدة والطوابق — أما CSS فهي الطلاء والديكور، وJavaScript هي الأبواب الأتوماتيكية والمصاعد. لا يمكن للطلاء أن يمنح الجدران استقراراً لا تملكه.

HTML ليست برمجةً بالمعنى الدقيق

هذا التوضيح مهمٌ لأنه يُزيل قلقاً حقيقياً عند كثيرين: HTML لا تحتوي على منطقٍ أو شروطٍ أو حلقاتٍ تكرارية — كل ما فيها هو وسومٌ تصف ما الشيء. هذا يعني أنها اللغة الوحيدة على الإنترنت التي يمكن لأي شخصٍ تعلّم أساسياتها في ساعاتٍ قليلة والحصول على نتيجةٍ مرئية فورية.

ألا تعرف كيفية نطق أو قراءة جملةٍ واحدةٍ على الأقل بلغةً أخرى؟ لا يهم أن تتقن اللغة الأخرى، ألا تعلم على الأقل جملة واحدة؟ HTML هي لغةٌ أخرى، ومعنا ستراها أسهل للتعلم من اللغات البشرية الحقيقية.

الوسوم (Tags): مبدأ الفتح والإغلاق

كل شيء في HTML يقوم على فكرةٍ واحدة: الوسم يُخبر المتصفح أين يبدأ العنصر وأين ينتهي. الوسم الافتتاحي يُكتب بين قوسين زاويتين مثل <p>، والوسم الختامي يُكتب بشرطةٍ مائلة قبل الاسم مثل </p>، وبينهما يُوضع المحتوى.

مثالٌ مباشر:

<p>هذا نصٌ عادي في فقرة.</p>
<h1>هذا عنوانٌ رئيسي.</h1>
<h2 style="color: #c0392b;">هذا عنوانٌ فرعي أصغر، وسيظهر باللون الأحمر.</h2>

المتصفح حين يقرأ هذا يفهم تلقائياً: الأول فقرةٌ نصية عادية، والثاني العنوان الأهم في الصفحة، والثالث عنوانٌ ثانوي له لون خاص، وسيُظهرها بأحجامٍ مختلفة وفق ذلك الفهم.

الوسوم ذاتية الإغلاق

بعض الوسوم لا تحتاج إلى وسمٍ ختامي لأنها لا تحتوي على نصٍّ بداخلها، بل تقوم بعملها بمجرد وجودها. الصورة مثلاً لا تحمل نصاً بين وسمين، بل تُشير إلى ملفٍّ خارجي:

<img src="photo.jpg" alt="وصف الصورة" />
<br />   <!-- سطر جديد -->
<hr />   <!-- خطٌ فاصل أفقي -->

الوسوم الأساسية التي تكفيك لبناء أي صفحة

الإنترنت يستخدم عشراتٍ من الوسوم، لكن ٩٠٪ من الصفحات الحقيقية تقوم على عشرةٍ أو خمسة عشر وسماً. هؤلاء هم:

السمات (Attributes): كيف تُعطي الوسم معلوماتٍ إضافية

كثيرٌ من الوسوم تحتاج إلى معلوماتٍ إضافية لتؤدي عملها. الصورة مثلاً تحتاج أن تعرف أين الملف، والرابط يحتاج أن يعرف إلى أين يُوجّه المستخدم. هذه المعلومات الإضافية تُسمّى “سمات” (Attributes) وتُوضع داخل الوسم الافتتاحي.

<!-- الرابط: href يُحدد الوجهة، target يُحدد طريقة الفتح -->
<a href="https://zyyazan.sy/" target="_blank">منصة ذي يزن</a>

<!-- الصورة: src مسار الملف، alt نصٌ بديلٌ يظهر لو لم تُحمَّل -->
<img src="images/photo.jpg" alt="وصفٌ مختصر للصورة" />

<!-- المدخل: type يُحدد النوع (نص، بريد، كلمة مرور..) -->
<input type="email" placeholder="أدخل بريدك الإلكتروني" />

ملاحظة: حينما نريد أن نكتب ملاحظات داخل كود هتمل ولكن لا نريد للمتصفح أن يظهرها للقارئ فإننا نحصرها بين الوسمين  <!--      -->.

السمة alt في الصور تستحق توقفاً خاصاً: هي ليست اختياريةً رغم أن كثيرين يُهملونها، إذ تخدم ثلاثة أغراضٍ حيوية في آنٍ واحد — تُساعد المكفوفين الذين يستخدمون قارئات الشاشة، وتُحسّن ظهور الموقع في محركات البحث، وتظهر للجميع حين تفشل الصورة في التحميل، وما ينبغي أن تكتبه فيها هو وصفٌ مبسطٌ للصورة المشار إليها.

الهيكل العظمي لأي صفحة HTML

كل صفحة ويب احترافيةٍ تبدأ بهيكلٍ أساسي ثابت. هذا الهيكل يُخبر المتصفح بكل ما يحتاجه قبل أن يبدأ في عرض المحتوى: ما إصدار HTML المستخدم، ما لغة الصفحة، ما عنوانها الذي يظهر في التبويب، وأين يجد ملفات التنسيق.

<!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>
</head>

<body>
  <!-- هنا يأتي كل المحتوى الذي يراه الزائر -->
</body>

</html>

كل سطرٍ هنا له غرضٌ واضح:

<!DOCTYPE html> — ليس وسماً بل إعلانٌ يُخبر المتصفح أن هذه صفحة HTML5، الإصدار الحديث والمعتمد حالياً.

lang="ar" dir="rtl" — تُخبر المتصفح بلغة المحتوى واتجاهه، وهذا ضروريٌ للغة العربية حتى تعمل الحروف والنصوص والمحاذاة بشكلٍ صحيح.

<head> — قسمٌ لا يراه الزائر مباشرةً، لكنه يحتوي على معلوماتٍ مهمة للمتصفح ومحركات البحث: الترميز، العنوان، روابط ملفات CSS.

charset="UTF-8" — يضمن عرض اللغة العربية وكل الأحرف الخاصة بشكلٍ سليم دون تشويه.

viewport — يجعل الصفحة تتكيف مع حجم شاشة الجوال بدلاً من أن تظهر صغيرةً مزدحمة.

<body> — هنا فقط يسكن كل ما يراه الزائر: العناوين، الفقرات، الصور، الروابط، القوائم.

الوسوم الدلالية (Semantic HTML): لماذا لا يكفي div لكل شيء؟

كان بإمكان مبتكري HTML أن يجعلوا كل شيء داخل وسمٍ واحد، لكنهم اختاروا وسوماً ذات معنىً محدد، وهذا ما يُسمّى بالـ HTML الدلالي (Semantic HTML). الفرق بين <div> و<header> مثلاً ليس في كيفية ظهورهما للزائر — كلاهما حاوية — بل في ما يعنيانه لمحركات البحث وأدوات إمكانية الوصول وزميلك المطوّر الذي سيقرأ كودك لاحقاً.

<body>

  <header>
    <!-- رأس الموقع: الشعار وقائمة التنقل -->
    <nav>
      <a href="/">الرئيسية</a>
      <a href="/about">من نحن</a>
    </nav>
  </header>

  <main>
    <!-- المحتوى الرئيسي للصفحة -->
    <article>
      <h1>عنوان المقال</h1>
      <p>نص المقال...</p>
    </article>

    <aside>
      <!-- محتوى جانبي: روابط ذات صلة، إعلان -->
    </aside>
  </main>

  <footer>
    <!-- تذييل الصفحة: حقوق النشر، روابط إضافية -->
    <p>منصة ذي يزن &copy; ٢٠٢٦</p>
  </footer>

</body>

غوغل وبقية محركات البحث تُقدّر الـ HTML الدلالي لأنها تفهم بنية الصفحة دون الحاجة لتحليلٍ إضافي، وهذا يعني ظهوراً أفضل في نتائج البحث مجاناً بمجرد كتابة كودٍ صحيح.

أول صفحة ويب كاملة: طبّق الآن

افتح أي محرر نصوصٍ عادي؛ مثلاً المفكّرة (Notepad) في ويندوز، أو TextEdit في ماك، أو تطبيق تحرير النصوص (مثل Spck Editor أو QuickEdit) إن كنت تستخدم الجوال، أو برنامج VS Code إن كان مثبّتاً لديك. بعد ذلك، انسخ هذا الكود كاملاً واحفظ الملف باسم index.html. أخيراً، افتح الملف بالنقر المزدوج عليه (أو عبر مستعرض الملفات في جوالك)، وسيُفتح مباشرة في المتصفح كصفحة ويب حقيقية.

🛠️ تنبيه هام لتحويل ملفك إلى صفحة ويب:

إذا قمت بحفظ الملف وما زال يفتح كمستند نصي عادي، فذلك لأن نظام تشغيلك يخفي امتدادات الملفات تلقائياً. اتبع الآتي فوراً:

• لمستخدمي ويندوز: افتح المجلد ← اضغط على View (عرض) في الأعلى ← فعّل خيار File name extensions. سيتغير اسم ملفك إلى index.html.txt، قم بإعادة تسميته واحذف ملاحقة .txt من النهاية تماماً.
• لمستخدمي الماك: اضغط على الملف ← اختر Rename ← غيّر النهاية من .txt إلى .html واقبل رسالة التأكيد.

بمجرد حذف .txt، ستتحول أيقونة الملف فوراً إلى شعار متصفحك، وبذلك يصبح جاهزاً للتشغيل كصفحة ويب حقيقية!

<!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>
</head>

<body>

  <header>
    <h1>مرحباً بك في صفحتي</h1>
    <nav>
      <a href="#about">من أنا</a> |
      <a href="#services">خدماتي</a> |
      <a href="#contact">تواصل معي</a>
    </nav>
  </header>

  <main>

    <section id="about">
      <h2>من أنا</h2>
      <p>
        أنا <strong>[اسمك هنا]</strong>، متخصصٌ في 
        <em>[مجالك]</em>. أعمل منذ عدة سنواتٍ على 
        تقديم <strong>قيمةٍ حقيقية</strong> لعملائي.
      </p>
    </section>

    <section id="services">
      <h2>ما الذي أقدمه</h2>
      <ul>
        <li>خدمة أولى: وصفٌ مختصر</li>
        <li>خدمة ثانية: وصفٌ مختصر</li>
        <li>خدمة ثالثة: وصفٌ مختصر</li>
      </ul>
    </section>

    <section id="contact">
      <h2>تواصل معي</h2>
      <p>
        يمكنك التواصل عبر البريد:
        <a href="mailto:email@example.com">email@example.com</a>
      </p>
    </section>

  </main>

  <footer>
    <p>جميع الحقوق محفوظة &copy; ٢٠٢٦</p>
  </footer>

</body>
</html>

الصفحة التي ستراها ستكون بسيطةً جداً بصرياً — نصٌ على خلفيةٍ بيضاء — وهذا طبيعيٌ ومقصود. HTML وحدها لا تُجمّل، هي فقط تُرتّب وتُنظّم. الجمال يأتي مع CSS في المقال الخامس، وستتفاجأ كم يُغيّر CSS شكل هذه الصفحة بعدة أسطرٍ فقط.

الكود الذي كتبته الآن هو بالضبط ما تقوم عليه كل صفحة ويب على الإنترنت — من أبسط المدونات إلى أضخم المواقع. الفارق هو في التفاصيل لا في المبدأ.

أشيع الأخطاء التي يقع فيها المبتدئ

معظم الأخطاء في HTML تنتمي إلى فئةٍ واحدة: وسمٌ افتتاحي بلا وسمٍ ختامي، أو العكس. المتصفحات الحديثة متسامحةٌ مع بعض هذه الأخطاء وتُصحّحها تلقائياً، لكن الاتكاء على هذا التسامح يُفضي إلى نتائجٍ غير متوقعة خاصةً في المتصفحات القديمة والأجهزة المختلفة.

من أشيع الأخطاء أيضاً: نسيان إغلاق وسم التعليق <!-- -->، واستخدام علامات الاقتباس العربية “” بدلاً من الإنكليزية ” ” في قيم السمات، وإهمال سمة alt في الصور. وللتحقق من صحة الكود هناك أداةٌ مجانية ومعتمدة من منظمة W3C على validator.w3.org تكشف الأخطاء فور لصق الكود فيها.

للمدوّنين الذين يستخدمون ووردبريس تحديداً

إن كنت تكتب مقالاتك في ووردبريس وتتعامل أحياناً مع محرر الكود المباشر (Code Editor)، فإن هذه الأساسيات كافيةٌ لتفهم ما يحدث وتُعدّل ما تحتاج. لكن ووردبريس يُضيف طبقاتٍ إضافية من الوسوم الخاصة به فوق HTML العادية. للمدونين الذين يريدون إتقان HTML في سياق ووردبريس تحديداً — بدءاً من التعامل مع وسوم الفقرات وحتى تنسيق الجداول وتضمين الروابط الداخلية — راجع مقالتنا التطبيقية: شيفرة الكتابة: دليل المدوّن لترويض وحوش الـ HTML، حيث تجد أمثلةً جاهزةً للنسخ واللصق من أول يومٍ في محرر ووردبريس.

HTML ومحركات البحث: ارتباطٌ أعمق مما تتوقع

محركات البحث لا تقرأ صفحاتك كما يقرأها الإنسان — هي تحلّل HTML وتبني فهمها للصفحة منه. الوسم <h1> يُخبر غوغل “هذا الموضوع الأهم في الصفحة”، والوسم <title> في الرأس يُحدد ما يظهر في نتائج البحث، وسمة alt في الصور تُخبره بمحتواها لأنه لا “يرى” الصور.

هذا يعني أن HTML المكتوبة بشكلٍ صحيح هي الطبقة الأولى والأساسية لتحسين محركات البحث (السيو)، وأن كل إهمالٍ في بنية الكود له ثمنٌ في مرحلة الظهور. للتوسع في هذا الجانب من موقعك راجع سلسلتنا: دليل السيو.

خلاصة المقال والخطوة القادمة

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

الخطوة التالية الموصى بها:

خذ الصفحة التي بنيتها الآن وافتحها في المتصفح أمامك، ثم تابع معنا المقال التالي: التنسيق البصري: كيف تحوّل الهياكل الصامتة إلى صفحات مذهلة باستخدام CSS، حيث ستُضيف إلى نفس الهيكل الذي بنيته ألواناً وخطوطاً وتباعداً ومحاذاةً — وستُدرك بنفسك كيف يُغيّر CSS كل شيء بضعة أسطر.

المراجع والمصادر:

1. توثيق HTML الرسمي على MDN Web Docs: MDN HTML Reference
2. أداة التحقق من صحة HTML الرسمية: W3C Markup Validation Service
3. مرجع وسوم HTML5 الدلالية: WHATWG HTML Living Standard

— دليل تصميم مواقع الويب —

المقال السابق: ٣- المواقع التفاعلية

المقال الحالي: ٤- لغة الهيكل: HTML

المقال التالي: ٥- التنسيق البصري: CSS

سلاسل مشابهة: دليل التدوين | ورشة التدوين متعدد الوسائط | دليل السيو

منصة ذي يزن © 2026