لغة HTML: بناء الهيكل العظميّ لصفحتك الأولى

جهّزت بيئتك، وأتقنت محرّرك، وصارت الطرفية لغةً تحادث بها جهازك. آن أن تكتب أوّل شيءٍ حقيقيّ. وأوّل ما تكتبه في الويب دائمًا هو HTML: اللغة التي تبني هيكل كل صفحةٍ رأيتها في حياتك. هذا المقال يعطيك فهمًا متينًا لأساسياتها، ثمّ تبني به أوّل صفحةٍ لك من الصفر.

سأشرح ما HTML ودورها، وكيف يتركّب الوسم والعنصر والسمة، وأنواع الوسوم، وأهمّها عمليًّا، وكيف تتكامل مع CSS وجافاسكربت، وكيف تكتب صفحةً يفهمها المتصفّح وقارئ الشاشة معًا. افتح VS Code، ولنبدأ.

ما لغة HTML؟

أوّل ما يجب أن تستقرّ عليه: HTML لغة توصيفٍ لا لغة برمجة، وهذا التمييز مفتاح فهم دورها.^[1] لغة البرمجة تعطي الحاسوب منطقًا وتعليمات («إن حدث هذا فافعل ذاك»)، أمّا لغة التوصيف فتصف المحتوى وتنظّمه. وظيفة HTML ليست تنفيذ إجراءات، بل إعطاء المحتوى الخام هيكلًا ومعنًى.

ويتّضح ذلك من اسمها الكامل، HyperText Markup Language. فـ«HyperText» (النصّ التشعبيّ) يشير إلى ربط المستندات بعضها ببعض: النصّ العاديّ خطّيٌّ كصفحات كتاب، أمّا النصّ التشعبيّ فيحمل روابط تقفز بك من صفحةٍ إلى أخرى، وهذا المفهوم هو «الشبكة» في الشبكة العنكبوتية. و«Markup» (التوصيف) هو جوهر عملها: تحيط المحتوى بعلاماتٍ تسمّى «الوسوم» تخبر المتصفّح ما هذا المحتوى لا كيف يبدو. فالوسم <h1> يقول للمتصفّح «هذا أهمّ عنوانٍ في الصفحة»، لا «اجعل هذا النصّ كبيرًا غليظًا»؛ فالمظهر وظيفة CSS. و«Language» لأنها لغةٌ رسميةٌ لها مفرداتها (الوسوم المتاحة) وقواعدها (كيف تُكتب وتُرتَّب).

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

من الوسم إلى العنصر إلى السمة

قبل الوسوم، اضبط ثلاث كلماتٍ يخلط بينها المبتدئ، وضبطها يريحك في كل ما يأتي. «الوسم» (tag) هو العلامة نفسها، مثل <p>. و«العنصر» (element) هو الوحدة الكاملة: وسم بدايةٍ، فمحتوًى، فوسم نهاية، هكذا:

<p>هذا المحتوى يقع بين وسمَي البداية والنهاية.</p>

هذا «عنصر فقرة» كامل. و«السمة» (attribute) معلومةٌ إضافيةٌ تكتب داخل وسم البداية على صورة اسم="قيمة" لتصف العنصر أو تحدّد سلوكه، مثل href في الرابط وsrc في الصورة. فكّر في الوسم اسمًا، والسمة صفةً تصفه.

والعناصر تتداخل: تضع عنصرًا داخل عنصرٍ داخل آخر، فتتكوّن «شجرةٌ» من العناصر هي بنية صفحتك كلّها. فقرةٌ داخل مقالٍ داخل المحتوى الرئيسيّ داخل جسم الصفحة. وهذه الشجرة بالضبط هي ما يبنيه المتصفّح في ذاكرته ليعرض الصفحة، وما تستهدفه CSS وجافاسكربت لاحقًا. فاحرص على إغلاق ما تفتح، وعلى ترتيب التداخل، فالشجرة المرتّبة صفحةٌ سليمة.

ولهذه الشجرة اسمٌ ستلقاه كثيرًا: «نموذج كائن المستند» (DOM). فحين يقرأ المتصفّح ملفّ HTML (كما مرّ بك في مقال المتصفّح) يحوّل نصّك إلى هذه الشجرة الحيّة في ذاكرته، وهي ما تراه فعلًا على الشاشة. وعليها تشتغل CSS لتلوّن العقد، وجافاسكربت لتضيف العقد وتحذفها وتغيّرها لحظيًّا. فأنت حين تكتب HTML سليمةً متداخلةً بترتيب، تبني للمتصفّح شجرةً نظيفةً يسهل عرضها والتعامل معها.

أنواع الوسوم

ليست الوسوم كلّها سواء؛ تقسيمها بثلاث طرقٍ يعينك على كتابة شيفرةٍ أدقّ.

الزوجية مقابل الفارغة

الوسوم الزوجية (الأشيع) تأتي زوجًا: وسم بدايةٍ مثل <p> ووسم نهايةٍ مثل </p>، والمحتوى بينهما، فتحدّد بداية نطاق تأثيرها ونهايته بوضوح. أمّا الوسوم الفارغة (الفردية) فلا محتوى لها ولا وسم نهايةٍ، تدرج عنصرًا بنفسها، مثل <img> للصورة و<br> لكسر السطر و<hr> لخطٍّ فاصل و<input> لحقل إدخال.

الكتلية مقابل السطرية

هذا أهمّ تقسيمٍ من ناحية التخطيط. الوسوم الكتلية (Block) تشغل كامل عرض المساحة المتاحة وتبدأ سطرًا جديدًا دائمًا، كأنها «كتل» بناءٍ تتراصّ، مثل العناوين والفقرات و<div> والقوائم. فلو وضعت فقرتين متتاليتين ظهرت كلٌّ منهما في سطرٍ مستقلّ ولو كانتا قصيرتين. أمّا الوسوم السطرية (Inline) فتشغل قدر محتواها فقط ولا تبدأ سطرًا جديدًا، بل «تتدفّق» مع النصّ حولها، مثل <a> و<strong> و<span>. فيمكنك وضع رابطٍ في منتصف فقرةٍ دون أن يقطع سطرها.

الدلالية مقابل غير الدلالية

هذا المفهوم صار جوهريًّا في HTML5. الوسوم الدلالية (Semantic) تصف معنى ما تحتويه بوضوح، مثل <header> و<nav> و<main> و<article> و<footer>. وهي مهمّةٌ لثلاثة: تجعل شيفرتك مقروءةً سهلة الصيانة، وتعين قارئات الشاشة على التنقّل في موقعك، وتساعد محرّكات البحث على فهم بنيته. في مقابلها الوسوم غير الدلالية التي لا تخبر بشيءٍ عن معنى محتواها، وأشهرها <div> (حاوية كتلية عامة) و<span> (حاوية سطرية عامة)، تستعملهما لتجميع عناصر بهدف تصميمٍ أو تفاعلٍ حين لا يوجد وسمٌ دلاليٌّ مناسب. القاعدة: استعمل الوسم الدلاليّ متى وُجد، ولا تلجأ إلى <div> إلا عند الحاجة.

نبذة تاريخية: كيف تطوّرت HTML

اختُرعت HTML على يد العالم البريطانيّ تيم بيرنرز-لي في مختبر CERN سنة 1991. ولم تكن رؤيته صناعة تجارب بصريةٍ معقّدة، بل حاجةً عمليةً بحتة: طريقةٌ بسيطةٌ يشارك بها العلماء مستنداتهم البحثية ويربطون بينها. كان الإصدار الأوّل بسيطًا جدًّا، نحو ثمانية عشر وسمًا فقط، وظيفتها تحديد العناوين والفقرات والقوائم، والأهمّ إنشاء الروابط التشعبية التي أعطت الويب اسمه.^[2]

ومع انتشار الويب ظهرت الحاجة إلى توحيد اللغة، فصار إصدار HTML 4.01 سنة 1999 المعيار السائد سنواتٍ، وقدّم مبدأً حاسمًا لا يزال أساس التطوير الحديث: فصل الهيكل عن التصميم. فقبله كان المطوّرون يستعملون وسومًا للتصميم (مثل <font> و<center>)، فجاء المعيار يؤكّد أن على HTML أن تهتمّ بالهيكل وحده، ويُترَك المظهر كلّه لـCSS.

ثمّ جاء HTML5، الذي أعلنه اتّحاد الويب W3C معيارًا رسميًّا في الثامن والعشرين من أكتوبر 2014،^[3] فحوّل اللغة من أداةٍ لهيكلة المستندات إلى منصّةٍ تشغّل تطبيقاتٍ معقّدة: أضاف الوسوم الدلالية، ودعمًا مدمجًا للفيديو والصوت (<video> و<audio>) أغنى عن إضافاتٍ خارجيةٍ كانت سائدة، ورسومًا عبر <canvas>، وتحسيناتٍ كبيرةً على النماذج.

وملاحظةٌ تصحّح فهمًا شائعًا: لم تَعُد HTML اليوم تحمل رقم إصدار. فمنذ سنة 2019 صار المرجع الرسميّ الوحيد هو «المعيار الحيّ» (HTML Living Standard) الذي تطوّره مجموعة WHATWG، يتحدّث باستمرارٍ دون أرقام إصدارات.^[4] فحين تسمع «HTML5» اليوم، فالمقصود غالبًا هذه اللغة الحديثة الحيّة لا إصدارٌ متجمّد.

أهمّ الوسوم التي تحتاجها

لن تحفظ مئات الوسوم لتبدأ؛ مجموعةٌ صغيرةٌ تشكّل تسعين في المئة من أيّ صفحةٍ تبنيها. وإليك أهمّها مرتّبةً بحسب دورها.

وسوم هيكل المستند

هذه الهيكل العظميّ الذي لا تخلو منه صفحة. يبدأ كل مستندٍ بالإعلان <!DOCTYPE html> (وهو إعلانٌ إلزاميٌّ لا وسمٌ، يخبر المتصفّح أن هذه صفحة HTML حديثة). ثمّ الوسم الجذر <html> الذي يغلّف كل شيء. وداخله قسمان: <head> وهو «عقل» الصفحة، يحمل معلوماتٍ غير مرئيةٍ للزائر، و<body> وهو «جسمها»، فيه كل المحتوى المرئيّ.

وأهمّ ما في الرأس: <title> يحدّد عنوان الصفحة الذي يظهر في تبويب المتصفّح، و<meta> يقدّم بياناتٍ وصفية، أبرزها charset="UTF-8" الذي يضمن عرض الحروف العربية صحيحةً، وviewport الضروريّ للتصميم المتجاوب على الهواتف، و<link> الذي يربط الصفحة بملفّاتٍ خارجيةٍ وأشهر استعمالٍ له ربط ملفّ الأنماط:

<link rel="stylesheet" href="style.css">

وثمّة «التعليقات»: ملاحظاتٌ تكتبها داخل الشيفرة بين <!-- و-->، يتجاهلها المتصفّح ولا يعرضها، تشرح بها جزءًا معقّدًا لنفسك أو لفريقك.

وسوم التخطيط الدلالي

وسومٌ كتليةٌ أضافها HTML5 لتعطي أقسام الصفحة معنًى: <header> للجزء العلويّ التقديميّ (الشعار والتنقّل عادةً)، و<nav> لروابط التنقّل الرئيسية، و<main> للمحتوى الرئيسيّ الفريد (واحدٌ فقط في الصفحة)، و<section> لتقسيم المحتوى إلى أقسامٍ موضوعية، و<article> لمحتوًى مستقلٍّ قابلٍ لإعادة التوزيع (مقالة، منشور، بطاقة منتج)، و<aside> لمحتوًى جانبيٍّ كصندوق «مقالات ذات صلة»، و<footer> للتذييل. وحين لا يناسب أيٌّ منها تستعمل <div> حاويةً عامة.

وسوم المحتوى

بها تهيكل النصّ الفعليّ. العناوين من <h1> إلى <h6> بتدرّجٍ هرميّ (و<h1> للعنوان الرئيسيّ مرّةً واحدة)، و<p> للفقرات، و<a> للروابط (بسمة href للوجهة)، و<img> للصور (بسمتَي src للمصدر وalt للوصف البديل)، و<ul> و<ol> و<li> للقوائم المنقّطة والمرقّمة وعناصرها.

وانتبه إلى فرقٍ دلاليٍّ لطيف: <strong> و<b> كلاهما يُظهر النصّ غليظًا، لكنّ <strong> يحمل معنى الأهمّية، و<b> للتغليظ البصريّ فحسب. وكذلك <em> (تأكيدٌ دلاليٌّ) مقابل <i> (إمالةٌ بصرية). و<blockquote> للاقتباسات الطويلة، و<span> لتحديد جزءٍ صغيرٍ من النصّ لتنسيقه دون التأثير في سطره.

وسوم النماذج

بها تجمع البيانات من المستخدم. <form> الحاوية التي تلتفّ حول الحقول، و<label> يربط نصًّا وصفيًّا بحقلٍ (والنقر عليه يركّز على الحقل، وهو مهمٌّ لإمكانية الوصول)، و<input> الحقل متعدّد الأنواع بحسب سمة type: text للنصّ، وemail للبريد، وpassword لإخفاء النصّ، وcheckbox وradio للاختيار، وsubmit لزرّ الإرسال. ولديك <textarea> لحقلٍ نصّيٍّ متعدّد الأسطر، و<select> مع <option> لقائمةٍ منسدلة. وتذكّر أن HTML تبني شكل النموذج فقط؛ أمّا استقبال بياناته ومعالجتها فيحتاج لغةً في الخادم تتعلّمها لاحقًا، فالنموذج هنا هو الواجهة لا المعالجة.

الجداول والوسائط

ولعرض البيانات في صفوفٍ وأعمدةٍ (كجدول أسعارٍ أو نتائج) يوجد «الجدول»: <table> حاويته، وداخله <tr> لكل صفّ، و<th> لخلية العنوان و<td> لخلية البيانات. ومهمٌّ أن تعرف أن الجداول للبيانات الجدولية فقط، لا لتخطيط الصفحة (كان ذلك خطأً قديمًا حلّه CSS كما رأيت). أمّا الوسائط فلها وسومها المدمجة منذ HTML5: <video> للفيديو و<audio> للصوت، تشغّلهما دون إضافاتٍ خارجية، و<iframe> لتضمين صفحةٍ أو فيديو يوتيوب داخل صفحتك.

وثمّة تفصيلٌ يحيّر المبتدئ: كيف تكتب رمزًا له معنًى خاصٌّ في HTML، مثل علامتَي «أصغر من» و«أكبر من» اللتين تبدأ بهما الوسوم؟ تستعمل «الكيانات» (entities): تكتب < لإظهار <، و> لإظهار >، و& لإظهار &، و© لرمز حقوق النشر. فإن أردت عرض شيفرةٍ في صفحةٍ دون أن يفسّرها المتصفّح وسومًا، فبالكيانات تكتبها.

السمات: id وclass والجسر إلى CSS وجافاسكربت

مرّت بك سماتٌ خاصةٌ بوسومٍ بعينها: href للرابط، وsrc لمصدر الصورة أو السكربت، وalt للوصف البديل للصورة. لكن أهمّ سمتين عامّتين هما id وclass، فهما «بطاقتا الهوية» اللتان تجعلان عنصرك قابلًا للاستهداف. تعطي id العنصرَ معرّفًا فريدًا لا يتكرّر في الصفحة، تستعمله جافاسكربت للوصول إلى عنصرٍ بعينه. وتعطي class العنصرَ تصنيفًا يمكن أن يتشاركه كثيرون، تستعمله CSS لتطبيق النمط نفسه على مجموعةٍ من العناصر دفعةً واحدة.

ولنرَ كيف تعمل هذه «البطاقات» جسرًا بين اللغات الثلاث. أوّلًا تبني HTML الهيكل وتلصق عليه التعريفات:

<article id="product-card-1" class="product-card">
  <h2 class="product-title">قهوة أرابيكا</h2>
  <img src="coffee.jpg" alt="حبوب قهوة أرابيكا">
  <p class="product-description">بنٌّ عالي الجودة من مزارع كولومبيا.</p>
  <button class="btn">أضِف إلى السلة</button>
</article>

ثمّ تقرأ CSS هذه البطاقات وتطبّق التصميم بناءً عليها (تستهدف الأصناف بنقطةٍ قبل الاسم):

.product-card {
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
}
.btn {
  background-color: green;
  color: white;
  padding: 10px;
  border: none;
}

وأخيرًا تستعمل جافاسكربت البطاقات نفسها لتضيف السلوك، فتصل إلى العنصر بمعرّفه أو صنفه وتغيّره عند الحدث:

const card = document.getElementById('product-card-1');
const button = card.querySelector('.btn');
button.addEventListener('click', function() {
  button.textContent = "تمت الإضافة!";
});

هكذا يتوزّع العمل: HTML للبنية والمعنى، وCSS للمظهر، وجافاسكربت للسلوك، والسمات id وclass هي حلقة الوصل بينها. وهذه هي العلاقة الجوهرية التي يقوم عليها تطوير الواجهات الأمامية.

اكتب لكل قارئ: إمكانية الوصول

صفحتك لا يقرؤها المبصرون فقط. ملايين المستخدمين يتصفّحون بـ«قارئات الشاشة» التي تنطق لهم محتوى الصفحة، وHTML المكتوبة جيّدًا هي ما يجعل موقعك صالحًا لهم. وهذا ليس إضافةً كماليةً بل جزءٌ من إتقان اللغة.^[5]

أوّل أدوات ذلك الوسوم الدلالية: حين يرى قارئ الشاشة <nav> يعلن «قائمة تنقّل»، وحين يرى <main> يقفز إليه مباشرةً، فيتنقّل المستخدم في موقعك بكفاءةٍ بدل أن يتيه في وسوم <div> صمّاء. وثانيها النصّ البديل alt في الصور: قارئ الشاشة لا «يرى» الصورة، بل ينطق وصفها، فالوصف الجيّد يوصل معنى الصورة لمن لا يراها (واترك alt فارغًا للصور الزخرفية فقط). وثالثها <label> الموصول بكل حقلٍ في نماذجك، فبه يعرف المستخدم ماذا يكتب في الحقل.

ورابعها هيكل العناوين: استعمل <h1> إلى <h6> بترتيبٍ منطقيٍّ لا تقفز فيه، فهي تكوّن «مخطّط» صفحتك الذي يتنقّل به قارئ الشاشة من عنوانٍ إلى عنوان. والمكافأة أن هذه العناية نفسها تخدم محرّكات البحث: فالبنية الواضحة التي تعين قارئ الشاشة تعين زاحف البحث على فهم صفحتك، وهو ما تفصّله سلسلة تحسين الظهور. اكتب لأجل الإنسان أوّلًا، وستجد الآلة فهمتك تبعًا.

عاداتٌ تكتب بها HTML نظيفة

قبل أن تبني، خذ خمس عاداتٍ تجنّبك أكثر أخطاء المبتدئين، وتجعل شيفرتك مقروءةً تعمل في كل المتصفّحات:

• أغلق كل وسمٍ زوجيٍّ تفتحه؛ الوسم المنسيُّ يربك بنية الصفحة كلّها (وإضافة مثل Auto Rename Tag تعينك على ذلك).
• استعمل <h1> واحدًا فقط في الصفحة، ورتّب العناوين بعده دون قفزٍ من <h2> إلى <h4>.
• آثِر الوسم الدلاليّ على <div> كلّما وُجد وسمٌ يصف المعنى.
• أزِح العناصر المتداخلة بمسافةٍ بادئةٍ (المتصفّح يتجاهل هذه المسافات، لكنها تجعل شيفرتك مقروءةً لك ولفريقك).
• افحص صفحتك بمدقّق W3C الرسميّ (validator.w3.org)، فهو يكشف لك الوسوم الناقصة والأخطاء قبل أن تتفاقم.

مشروعٌ عمليّ: هيكل مقالة

لنجمع كل ما سبق في صفحةٍ واحدة: هيكل HTML كاملٍ لمقالة مدوّنة. وهذا الملفّ حجر الأساس الذي تبني عليه في المقالين التاليين، فتصمّمه بـCSS ثمّ تضيف إليه التفاعل بجافاسكربت. أنشئ في VS Code ملفًّا باسم index.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>مقالة تجريبية عن HTML</title>
</head>
<body>
    <header>
        <h1>مدوّنتي التقنية</h1>
        <nav>
            <ul>
                <li><a href="#">الرئيسية</a></li>
                <li><a href="#">عن المدوّنة</a></li>
                <li><a href="#">تواصل معنا</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>ما لغة HTML؟</h2>
            <img src="html_logo.png" alt="شعار لغة HTML5" width="200">
            <p>لغة توصيف النصّ التشعبيّ هي اللغة القياسية لإنشاء صفحات الويب وهيكلتها.</p>
            <p>تتكوّن من وسوم تصف أجزاء المحتوى ليعرضها المتصفّح بشكل صحيح.</p>
            <h3>أهمّ المفاهيم:</h3>
            <ul>
                <li>الوسوم</li>
                <li>السمات</li>
                <li>العناصر</li>
            </ul>
        </article>
    </main>

    <footer>
        <p>جميع الحقوق محفوظة، 2025، مدوّنتي التقنية.</p>
    </footer>
</body>
</html>

الآن انقر الملفّ بالزرّ الأيمن في VS Code واختر «Open with Live Server»، فيفتح المتصفّح صفحتك. ستبدو بسيطةً بلا تصميم، وهذا هو المطلوب تمامًا: بنيتَ هيكلًا دلاليًّا قويًّا منظّمًا، استعملت فيه <header> و<main> و<article> و<footer> لتحديد الأقسام، و<nav> للتنقّل، والعناوين والصور والقوائم في مواضعها. احتفظ بالملفّ؛ فهو لوحتك الفارغة التي تبدأ بتلوينها في المقال القادم.

بنيت الهيكل، فإلى الكساء

انتقلت من نظرية HTML إلى بناء صفحتك الأولى عمليًّا، وصارت لك المهارة التأسيسية لهيكلة أيّ محتوًى على الويب. لكنّ الصفحة، كما رأيت، منظّمةٌ صمّاء تفتقر إلى الجمال: هيكلٌ عظميٌّ متينٌ بلا كساء.

والخطوة التالية، وهي الأكثر إمتاعًا، أن تكسوه. ستأخذ ملفّ HTML نفسه الذي بنيته للتوّ وتتعلّم كيف تتحكّم بألوانه وخطوطه وتخطيطه عبر لغة الأنماط: «لغة CSS وإضفاء الأناقة على موقعك».

المصادر

1. MDN: أساسيات HTML. HTML لغة توصيف لا برمجة، وبنية الوسم والعنصر والسمة.
2. CERN: مولد الويب. اختراع تيم بيرنرز-لي الويب وHTML في CERN سنة 1991.
3. W3C: إعلان HTML5 معيارًا رسميًّا. صدور توصية HTML5 في 28 أكتوبر 2014.
4. WHATWG: المعيار الحيّ لـHTML. HTML اليوم معيارٌ حيٌّ بلا أرقام إصدارات، وهو المرجع الرسميّ.
5. MDN: HTML وإمكانية الوصول. الوسوم الدلالية والنصّ البديل والعناوين لقارئات الشاشة.