تعلّم كتابة HTML من الصفر

كل صفحة ويب فتحتها، سواء كانت موقعًا إخباريًا أو متجرًا أو مدونة شخصية، لها بنية أساسية مكتوبة بلغة HTML. ولغة HTML ليست لغة برمجة بالمعنى المعتاد القائم على الحسابات والحلقات، بل هي لغة توصيف (Markup Language) تخبر المتصفح بما يمثله كل جزء من الصفحة: عنوان أو فقرة أو صورة أو رابط أو نموذج. يبدأ هذا الدرس من الصفر ويصل بك إلى صفحة ملف شخصي تعمل فعليًا.

ما هي HTML

HTML اختصار لعبارة HyperText Markup Language. تشير كلمة "HyperText" إلى نص مترابط بالروابط، وتشير كلمة "Markup" إلى وسوم (Tags) تحدد معنى المحتوى. يقرأ المتصفح ملف HTML من الأعلى إلى الأسفل، ويفسر الوسوم على أنها بنية الصفحة، ثم يعرضها للمستخدم.

لا تحدد HTML الألوان أو أحجام الخطوط مباشرة، فهذه مهمة CSS، أما جعل الصفحة تتفاعل مع المستخدم فهو مهمة JavaScript. وتعمل اللغات الثلاث معًا مثل هيكل المنزل (HTML) ودهانه وديكوره (CSS) والكهرباء التي تجعله يعمل (JavaScript).

الأدوات المطلوبة

تحتاج كتابة HTML إلى أداتين فقط.

1. **محرر نصوص:** يصلح المفكرة Notepad على ويندوز، لكن يُنصح ببرنامج VS Code المجاني، فهو يلوّن الوسوم ويكمل الكود تلقائيًا.

2. **متصفح ويب:** مثل Chrome أو Edge أو Firefox لفتح الملف ومعاينة النتيجة.

أنشئ مجلدًا جديدًا باسم `my-website`، ثم أنشئ داخله ملفًا باسم `index.html`. فالاسم `index.html` هو الاسم القياسي الذي تتعرف عليه المتصفحات وخوادم الويب بوصفه الصفحة الرئيسية.

أول صفحة ويب

افتح الملف `index.html` واكتب الكود التالي.

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحتي الرئيسية</title>
</head>
<body>
  <h1>مرحبًا بالعالم</h1>
  <p>هذه أول صفحة ويب كتبتها بنفسي.</p>
</body>
</html>

لنتأمل البنية خطوة بخطوة.

• `<!DOCTYPE html>` يخبر المتصفح أن الملف مستند HTML5، ويجب أن يكون في السطر الأول دائمًا.
• `<html lang="ar">` هو الإطار الرئيسي للصفحة. وقيمة `lang` تخبر المتصفح ومحركات البحث واللغة الأساسية للصفحة، وتساعد قارئات الشاشة أيضًا.
• `<head>` يحتوي على معلومات لا يراها الزائر مباشرة، مثل ترميز الأحرف وعنوان الصفحة وإعدادات الأجهزة المحمولة.
• `<meta charset="UTF-8">` يحدد ترميز UTF-8 الذي يعرض جميع اللغات بشكل صحيح.
• `<title>` هو الاسم الذي يظهر على تبويب المتصفح.
• `<body>` يحتوي على كل ما يراه الزائر على الشاشة.

احفظ الملف ثم انقر عليه نقرًا مزدوجًا لفتحه في المتصفح، وستشاهد العنوان والفقرة اللذين كتبتهما.

طريقة حفظ كل مثال وتشغيله

1. أنشئ على سطح المكتب مجلدًا باسم `my-website`.

2. أنشئ داخله ملفًا جديدًا باسم `index.html`. تذكر الأمثلة اسم الملف الذي يُستخدم لكل مثال في الجدول أدناه.

3. انسخ الكود من المثال، والصقه بدلًا من محتوى الملف.

4. احفظ الملف بترميز UTF-8. في المفكرة اختر "حفظ باسم" واضبط الترميز على UTF-8. وتأكد أن الملف ينتهي فعلًا بـ `.html` وليس `.html.txt`.

5. انقر نقرًا مزدوجًا على الملف لفتحه في المتصفح، أو اضغط F5 بعد كل حفظ لتحديث الصفحة.

6. إذا كنت تستخدم VS Code فثبّت إضافة Live Server لتتحدث الصفحة تلقائيًا عند كل حفظ.

الأمثلة التي تحتوي على صور، مثل المعرض أو المقهى، تحتاج أن تكون ملفات الصور في المجلد نفسه الذي فيه ملف HTML، وأن تطابق أسماؤها قيمة `src` تمامًا. وإذا لم تتطابق الأسماء، سيعرض المتصفح إطار صورة مكسورًا مع نص `alt` بدلًا منها.

النصوص والعناوين

توفر HTML وسوم العناوين من `<h1>` إلى `<h6>`. فالوسم `<h1>` هو أهم عنوان، ويُستخدم عادة مرة واحدة في الصفحة. أما `<h2>` إلى `<h6>` فتُستخدم للعناوين الفرعية بالترتيب.

<h1>قصتي</h1>
<h2>الطفولة</h2>
<p>وُلدت في القاهرة وأحببت القراءة منذ صغري.</p>
<p>أحب <strong>البرمجة</strong> و<em>التصوير</em>.</p>
<p>هذا السطر ينكسر<br>إلى سطر جديد.</p>

الوسم `<p>` يمثل فقرة. الوسم `<strong>` يجعل النص عريضًا ويدل على أهميته، أما `<em>` فيجعله مائلًا ويدل على التأكيد. والوسم `<br>` ينتقل إلى سطر جديد دون بدء فقرة جديدة، وليس له وسم إغلاق.

الروابط والصور

يُنشئ الوسم `<a>` رابطًا، وقيمة `href` هي وجهته.

<a href="https://www.example.com">زيارة الموقع التجريبي</a>
<a href="about.html">الانتقال إلى صفحة من أنا</a>

الرابط الأول يأخذ الزائر إلى موقع خارجي، والرابط الثاني يفتح الملف `about.html` في المجلد نفسه.

يعرض الوسم `<img>` الصور. ويحتاج إلى قيمة `src` تشير إلى مكان الصورة، ويجب دائمًا إضافة نص `alt` يصف الصورة لمن لا يستطيع رؤيتها أو عندما لا تُحمَّل الصورة.

<img src="photo.jpg" alt="صورة لمنظر طبيعي عند شروق الشمس" width="400">

القوائم

تستخدم القائمة غير المرتبة الوسم `<ul>`، والقائمة المرتبة الوسم `<ol>`، وكل عنصر في القائمة يستخدم `<li>`.

<h2>اللغات التي أريد تعلمها</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>خطوات التثبيت</h2>
<ol>
  <li>حمّل البرنامج</li>
  <li>ثبّته باتباع الخطوات</li>
  <li>افتح البرنامج وابدأ الاستخدام</li>
</ol>

الجداول

تُكتب الجداول باستخدام الوسم `<table>`. كل صف يُكتب بالوسم `<tr>`، وخلايا العناوين بالوسم `<th>`، وخلايا البيانات بالوسم `<td>`.

<table>
  <tr>
    <th>المادة</th>
    <th>الدرجة</th>
  </tr>
  <tr>
    <td>الرياضيات</td>
    <td>85</td>
  </tr>
  <tr>
    <td>الإنجليزية</td>
    <td>78</td>
  </tr>
</table>

استخدم الجداول فقط للبيانات الجدولية الحقيقية، ولا تستخدمها لتنسيق الصفحة كاملة، فذلك يصعّب قراءتها على قارئات الشاشة.

النماذج

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

<form action="/send" method="post">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">البريد الإلكتروني:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">الرسالة:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">إرسال</button>
</form>

يرتبط الوسم `<label>` بحقل الإدخال من خلال الخاصية `for`، ويجب أن تطابق قيمتها الخاصية `id` في حقل الإدخال. بهذه الطريقة ينتقل التركيز إلى الحقل عند النقر على التسمية، وتعرف قارئات الشاشة الغرض من كل حقل. وتمنع الخاصية `required` الإرسال عند ترك الحقل فارغًا، وتطلب `type="email"` من المتصفح التحقق من صيغة البريد الإلكتروني.

الوسوم الدلالية

إلى جانب الوسم `<div>` الذي لا يحمل معنى محددًا، توفر HTML5 وسومًا دلالية تصف بنية الصفحة بوضوح.

• `<header>` رأس الصفحة أو المقال
• `<nav>` قائمة التنقل
• `<main>` المحتوى الرئيسي للصفحة، ويُستخدم مرة واحدة في كل صفحة
• `<section>` قسم من المحتوى له عنوانه الخاص
• `<article>` محتوى مستقل يمكن قراءته وحده، مثل مقال أو منشور
• `<footer>` ذيل الصفحة أو المقال

<body>
  <header>
    <h1>موقعي</h1>
    <nav>
      <a href="index.html">الرئيسية</a>
      <a href="about.html">من أنا</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>المقال الأول</h2>
      <p>محتوى المقال.</p>
    </article>
  </main>
  <footer>
    <p>جميع الحقوق محفوظة 2026</p>
  </footer>
</body>

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

الخاصيتان id وclass

الخصائص (Attributes) معلومات إضافية توضع داخل الوسم، مثل `href` و`src` و`alt` التي رأيناها سابقًا. وأكثر الخصائص استخدامًا هما `id` و`class`.

• قيمة `id` يجب ألا تتكرر في الصفحة، وتُستخدم لتحديد عنصر واحد.
• يمكن استخدام `class` في عدة عناصر، وتُستخدم لتجميعها وتنسيقها بـ CSS.

<p id="intro" class="highlight">هذه الفقرة لها معرّف وتنتمي إلى مجموعة highlight.</p>
<p class="highlight">هذه الفقرة تنتمي إلى المجموعة نفسها.</p>

ربط CSS وJavaScript

لتحسين مظهر الصفحة، احتفظ بالتنسيق في ملف CSS منفصل، واربطه في قسم `<head>` باستخدام الوسم `<link>`.

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

قد يحتوي ملف `style.css` على ما يلي.

body {
  font-family: sans-serif;
  background-color: #f5f7fb;
  color: #1a1a1a;
}
h1 {
  color: #2255aa;
}

يُربط JavaScript بالوسم `<script>`، ويُفضَّل وضعه قبل الوسم `</body>` ليُحمَّل محتوى الصفحة أولًا.

<script src="main.js"></script>

مشروع صغير: صفحة ملف شخصي

اجمع كل ما تعلمته في صفحة ملف شخصي.

<!DOCTYPE html>
<html lang="ar">
<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>
      <a href="#about">من أنا</a>
      <a href="#skills">المهارات</a>
      <a href="#contact">التواصل</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>من أنا</h2>
      <img src="me.jpg" alt="صورة أحمد علي" width="160">
      <p>أنا مطور ويب أتعلم شيئًا جديدًا كل يوم.</p>
    </section>

    <section id="skills">
      <h2>المهارات</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section id="contact">
      <h2>التواصل</h2>
      <p>البريد الإلكتروني: <a href="mailto:[email protected]">[email protected]</a></p>
    </section>
  </main>

  <footer>
    <p>تم إنشاؤه باستخدام HTML</p>
  </footer>
</body>
</html>

يشير الرابط `#about` إلى العنصر الذي يحمل `id="about"` في الصفحة نفسها، فينتقل القائمة مباشرة إلى ذلك القسم. أما الرابط `mailto:` فيفتح برنامج البريد الإلكتروني لدى الزائر.

مثال عملي: بناء قائمة مقهى خطوة بخطوة

لنكتب صفحة قائمة لمقهى خيالي، لنتدرب على دمج عدة وسوم معًا. نبدأ بالهيكل الأساسي.

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>قائمة مقهى الحديقة</title>
</head>
<body>
  <h1>قائمة مقهى الحديقة</h1>
  <p>مفتوح كل يوم من 8:00 صباحًا حتى 6:00 مساءً.</p>
</body>
</html>

شرح سطرًا بسطر:

• `<h1>` هو اسم المقهى، وهو العنوان الرئيسي الوحيد في الصفحة.
• `<p>` نص عادي، مثل ساعات العمل، ولا يحتاج إلى تمييز خاص.

ثم نضيف قسم المشروبات. نستخدم `<h2>` للعناوين الفرعية، و`<ul>` مع `<li>` للقوائم.

<h2>القهوة الساخنة</h2>
<ul>
  <li>إسبريسو 45 ريالًا</li>
  <li>لاتيه 55 ريالًا</li>
  <li>كابتشينو 55 ريالًا</li>
</ul>

<h2>المشروبات الباردة</h2>
<ul>
  <li>أمريكانو مثلج 60 ريالًا</li>
  <li>لاتيه الماتشا 50 ريالًا</li>
</ul>

نضع الأسعار بعد ذلك في جدول لتسهيل المقارنة، باستخدام `<table>` و`<th>` و`<td>` كما شرحنا سابقًا.

<table>
  <tr>
    <th>المشروب</th>
    <th>الحجم</th>
    <th>السعر</th>
  </tr>
  <tr>
    <td>لاتيه</td>
    <td>صغير</td>
    <td>55 ريالًا</td>
  </tr>
  <tr>
    <td>لاتيه</td>
    <td>كبير</td>
    <td>65 ريالًا</td>
  </tr>
</table>

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

<img src="shop.jpg" alt="واجهة مقهى الحديقة مظللة بالأشجار" width="600">
<p><a href="index.html">العودة إلى الرئيسية</a></p>

احفظ الملف المجمّع وافتحه في المتصفح. سترى قائمة فيها عنوان وقوائم وجدول وصورة. غيّر اسم مشروب أو سعرًا ثم حدّث المتصفح، وستظهر النتيجة فورًا. هذه الحلقة من التعديل والحفظ والتحديث هي سير العمل الأساسي الذي ستستخدمه كل يوم عند كتابة صفحات الويب.

أخطاء شائعة يقع فيها المبتدئون وطرق إصلاحها

• **نسيان وسم الإغلاق:** كتابة `<p>نص` دون `</p>` قد تُفسد شكل الصفحة. تأكد أن كل وسم مفتوح له وسم إغلاق مقابل.
• **استخدام `<br>` لإنشاء مسافات بين الفقرات:** استخدم وسوم `<p>` منفصلة للفقرات، ولا يصلح تكرار `<br>` بديلًا عنها.
• **ترك `alt` فارغًا في الصور:** لن يعرف مستخدمو قارئات الشاشة ما تعرضه الصورة. أضف دائمًا وصفًا قصيرًا.
• **تكرار `id`:** يجب أن يكون كل `id` فريدًا في الصفحة، والتكرار قد يعطل الروابط وCSS.
• **مسار ملف خاطئ:** تأكد من تطابق أسماء الملفات والمجلدات حرفًا بحرف، فكثير من الخوادم تفرّق بين الأحرف الكبيرة والصغيرة.
• **عدم ظهور التعديلات:** احفظ الملف ثم حدّث المتصفح، أو اضغط Ctrl+F5 لإعادة التحميل بالكامل.

عند حدوث خطأ، افتح أدوات المطور في المتصفح (اضغط F12 واختر تبويب Console). غالبًا ما تشير رسالة الخطأ إلى السطر المسبب للمشكلة، وهذا يسرّع الإصلاح كثيرًا.

وسوم وأوامر إضافية تستحق المعرفة

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

التمييز والدلالة داخل النص

<p>السعر القديم <s>100 ريال</s>، والآن <mark>80 ريالًا</mark> فقط</p>
<p>الماء هو H<sub>2</sub>O، وE = mc<sup>2</sup></p>
<p>ملاحظة: <small>الضريبة غير مشمولة</small></p>
<p>ما الاسم الكامل لـ <abbr title="HyperText Markup Language">HTML</abbr>؟</p>
<p>موعد الاجتماع <time datetime="2026-10-30">30 أكتوبر</time></p>

يُبرز الوسم `<mark>` النص، ويُنشئ `<sub>` و`<sup>` الأرقام السفلية والعلوية، ويعرض `<abbr>` الاسم الكامل عند تمرير المؤشر، ويقدم `<time>` تاريخًا يقرؤه الإنسان والآلة معًا.

الاقتباس والشيفرة

<blockquote cite="https://example.com/source">
  التعلم هو الممارسة المتكررة.
</blockquote>
<p>مثال على أمر: <code>console.log("hi")</code></p>
<pre>
  يحافظ هذا السطر على
  المسافات وأسطر النص كما كُتبت تمامًا.
</pre>

يُستخدم `<blockquote>` لاقتباس نص من مصدر آخر، ويعرض `<code>` الأوامر داخل الجملة، ويحافظ `<pre>` على المسافات وفواصل الأسطر بالكامل.

تجميع المحتوى

<figure>
  <img src="chart.png" alt="مخطط المبيعات الشهرية" width="500">
  <figcaption>المبيعات الشهرية لعام 2026</figcaption>
</figure>

<details>
  <summary>انقر لمعرفة طريقة التسجيل</summary>
  <p>أدخل اسمك وبريدك الإلكتروني ثم أكد.</p>
</details>

<dl>
  <dt>HTML</dt>
  <dd>لغة تحدد بنية صفحات الويب.</dd>
  <dt>CSS</dt>
  <dd>لغة تحدد مظهر صفحات الويب.</dd>
</dl>

يربط `<figure>` و`<figcaption>` الصورة بوصفها. ويُخفي `<details>` المحتوى حتى ينقر الزائر، ويقرن `<dl>` المصطلحات بشروحها.

الفيديو والصوت والإطارات المضمّنة

<video controls width="480" poster="cover.jpg">
  <source src="clip.mp4" type="video/mp4">
  متصفحك لا يدعم تشغيل الفيديو.
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<iframe src="https://www.example.com/map" width="400" height="300" title="خريطة موقع المتجر"></iframe>

تعرض الخاصية `controls` أزرار التشغيل. ويضمّن `<iframe>` صفحة أخرى داخل صفحتك. أضف دائمًا خاصية `title` حتى يعرف مستخدمو قارئات الشاشة محتوى الإطار.

عناصر نموذج إضافية

<form>
  <fieldset>
    <legend>قنوات استلام الأخبار</legend>
    <input type="checkbox" id="mail" name="channel" value="mail">
    <label for="mail">البريد الإلكتروني</label>
    <input type="radio" id="sms" name="plan" value="sms">
    <label for="sms">الرسائل النصية</label>
  </fieldset>

  <label for="city">المدينة:</label>
  <select id="city" name="city">
    <option value="riyadh">الرياض</option>
    <option value="jeddah">جدة</option>
  </select>

  <label for="visit">تاريخ الزيارة:</label>
  <input type="date" id="visit" name="visit">

  <label for="qty">الكمية:</label>
  <input type="number" id="qty" name="qty" min="1" max="10" value="1">
</form>

تسمح مربعات الاختيار بتحديد أكثر من خيار، بينما تسمح أزرار الراديو التي تشترك في الخاصية `name` نفسها باختيار خيار واحد فقط. ينشئ `<select>` قائمة منسدلة، ويجعل `type="date"` أو `type="number"` المتصفح يعرض أداة الإدخال المناسبة لنوع البيانات.

الفواصل ومؤشرات التقدم

<hr>
<p>اكتمل التنزيل بنسبة 70%</p>
<progress value="70" max="100"></progress>
<meter value="0.6" min="0" max="1">60%</meter>

يدل `<hr>` على انتقال بين موضوعات، وليس مجرد خط زخرفي. ويعرض `<progress>` عملية قيد التنفيذ، بينما يعرض `<meter>` قيمة مقاسة ضمن نطاق محدد.

عشرة أمثلة HTML إضافية

فيما يلي عشرة أنماط تراها في المواقع الحقيقية. يمكن نسخ كل مثال واستخدامه نقطة انطلاق، مع شرح سبب كتابته بهذه الطريقة.

المثال 1: مذكرات رحلة

<article>
  <h2>شيانغ ماي: 3 أيام وليلتان</h2>
  <p>رحلة في مطلع العام، والطقس فيها لطيف.</p>
  <ol>
    <li>اليوم الأول: معبد دوي سوثيب</li>
    <li>اليوم الثاني: سوق فارورود</li>
    <li>اليوم الثالث: دوي إنثانون</li>
  </ol>
</article>

تستخدم المذكرات الوسم `<article>` لأنها محتوى مستقل يمكن قراءته وحده. وتستخدم `<ol>` لأن ترتيب الأيام له معنى، ولو استخدمنا `<ul>` لضاع هذا الترتيب.

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

<form action="/register" method="post">
  <label for="username">اسم المستخدم (من 4 إلى 12 حرفًا إنجليزيًا):</label>
  <input type="text" id="username" name="username"
         pattern="[A-Za-z]{4,12}" required>

  <label for="password">كلمة المرور (8 أحرف على الأقل):</label>
  <input type="password" id="password" name="password"
         minlength="8" required>

  <label for="birth">تاريخ الميلاد:</label>
  <input type="date" id="birth" name="birth">

  <button type="submit">تسجيل</button>
</form>

تفحص الخاصية `pattern` النص باستخدام تعبير نمطي، وتحدد `minlength` الحد الأدنى للطول، وتجعل `required` الحقل إلزاميًا. ينبّه المتصفح المستخدم إلى تصحيح المدخلات قبل الإرسال، فيخفف العبء عن الخادم. لكن يجب أن يتحقق الخادم من البيانات بنفسه أيضًا، لأن فحوص المتصفح يمكن تجاوزها.

المثال 3: معرض صور

<section>
  <h2>صور الرحلة</h2>
  <figure>
    <img src="doi1.jpg" alt="بحر من الضباب فوق دوي إنثانون" width="300">
    <figcaption>ضباب الصباح</figcaption>
  </figure>
  <figure>
    <img src="temple.jpg" alt="معبد قديم بين أشجار عالية" width="300">
    <figcaption>معبد في المدينة القديمة</figcaption>
  </figure>
</section>

توضع كل صورة داخل `<figure>` مع `<figcaption>`، فيرتبط الوصف بالصورة فعليًا. ويجب أن يصف النص البديل `alt` ما تعرضه الصورة، لا أن يكتب كلمة "صورة" فقط.

المثال 4: قائمة تنقل متداخلة

<nav>
  <ul>
    <li><a href="index.html">الرئيسية</a></li>
    <li>
      <a href="shop.html">المتجر</a>
      <ul>
        <li><a href="shop-shirts.html">القمصان</a></li>
        <li><a href="shop-bags.html">الحقائب</a></li>
      </ul>
    </li>
    <li><a href="contact.html">اتصل بنا</a></li>
  </ul>
</nav>

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

المثال 5: قسم الأسئلة الشائعة

<h2>الأسئلة الشائعة</h2>
<details>
  <summary>متى يصل طلبي؟</summary>
  <p>يستغرق التوصيل من يوم إلى 3 أيام عمل حسب المنطقة.</p>
</details>
<details>
  <summary>هل يمكنني إرجاع المنتج؟</summary>
  <p>نعم، خلال 7 أيام إذا لم يكن المنتج قد استُخدم.</p>
</details>

يختصر `<details>` الصفحة، ويعمل دون JavaScript، ويبقى سهل الوصول للجميع.

المثال 6: جدول مقارنة الباقات

<table>
  <caption>مقارنة الباقات</caption>
  <thead>
    <tr>
      <th scope="col">الميزة</th>
      <th scope="col">الأساسية</th>
      <th scope="col">الاحترافية</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">مساحة التخزين</th>
      <td>5 جيجابايت</td>
      <td>50 جيجابايت</td>
    </tr>
    <tr>
      <th scope="row">السعر الشهري</th>
      <td>99 ريالًا</td>
      <td>299 ريالًا</td>
    </tr>
  </tbody>
</table>

يسمّي `<caption>` الجدول، ويفصل `<thead>` و`<tbody>` بين العناوين والمحتوى، وتوضح `scope` ما إذا كان العنوان يخص عمودًا أو صفًا. ويعتمد قارئ الشاشة على هذه المعلومات لقراءة البيانات بشكل صحيح.

المثال 7: اقتباس مع مصدره

<figure>
  <blockquote cite="https://example.com/book">
    <p>لا تخف من البطء، بل خف من التوقف.</p>
  </blockquote>
  <figcaption>من كتاب <cite>طريق الكاتب</cite></figcaption>
</figure>

يُستخدم `<cite>` لعنوان العمل لا لاسم مؤلفه. وتشير الخاصية `cite` على `<blockquote>` إلى المصدر.

المثال 8: مربع بحث مع اقتراحات

<form action="/search" method="get" role="search">
  <label for="q">ابحث عن منتج</label>
  <input type="search" id="q" name="q" list="suggest" placeholder="مثال: قهوة">
  <datalist id="suggest">
    <option value="قهوة متوسطة التحميص">
    <option value="قهوة داكنة التحميص">
    <option value="شاي أخضر">
  </datalist>
  <button type="submit">بحث</button>
</form>

يمنح `type="search"` الحقل زر مسح للنص. ويعرض `<datalist>` اقتراحات أثناء الكتابة. وعند استخدام `method="get"` تظهر كلمات البحث في الرابط، فيمكن مشاركة النتائج أو حفظها في المفضلة.

المثال 9: روابط داخلية باستخدام id

<nav>
  <a href="#intro">المقدمة</a> |
  <a href="#terms">المصطلحات</a>
</nav>

<h2 id="intro">المقدمة</h2>
<p>نص المقدمة...</p>

<h2 id="terms">المصطلحات</h2>
<dl>
  <dt>URL</dt>
  <dd>عنوان المورد على الويب.</dd>
  <dt>DNS</dt>
  <dd>النظام الذي يحوّل أسماء النطاقات إلى عناوين IP.</dd>
</dl>

يشير الرابط الذي يبدأ بـ `#` إلى `id` داخل الصفحة نفسها، فينتقل المتصفح إلى العنوان دون تحميل صفحة جديدة.

المثال 10: وسوم meta لمحركات البحث والمشاركة

<head>
  <meta charset="UTF-8">
  <meta name="description" content="تعلّم بناء المواقع بلغة HTML من الصفر.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="تعلّم HTML من الصفر">
  <meta property="og:type" content="article">
  <link rel="canonical" href="https://example.com/html-course/">
</head>

يمثل `description` الملخص الذي تعرضه محركات البحث غالبًا أسفل عنوان الصفحة. ويتحكم `og:title` وَ`og:type` في شكل الرابط عند مشاركته على مواقع التواصل. ويحدد `canonical` النسخة الأساسية من الصفحة، مما يساعد على تجنب مشكلات تكرار المحتوى.

النتائج المتوقعة للأمثلة الإضافية

عادات جيدة منذ البداية

• ضع `lang` الصحيح في `<html>`، وأضف `alt` لكل صورة.
• استخدم الوسوم حسب معناها، لا حسب شكلها فقط.
• أغلق كل وسم، ورتب الكود بالمسافات البادئة ليسهل قراءته.
• افحص الصفحة بأداة التحقق W3C Markup Validator لاكتشاف الأخطاء.
• اختبر الصفحة بعرض الهاتف المحمول، فكثير من الزوار يصلون من أجهزتهم المحمولة.

الخطوات التالية

بعد أن تفهم HTML، تعلّم CSS لتنسيق صفحاتك، ثم JavaScript لجعلها تستجيب للزوار. ولاحقًا يمكنك تعلم Git لإدارة الكود، وأطر العمل مثل React أو Vue عندما تكبر المشاريع.

الخلاصة

HTML أساس كل صفحة ويب. فهم البنية الأساسية، من `<html>` و`<head>` و`<body>`، مرورًا بالنصوص والروابط والصور والقوائم والجداول والنماذج، يتيح لك بناء صفحات تعمل من البداية. ابدأ بصفحات صغيرة، وزد التعقيد تدريجيًا، ومارس كل يوم ولو قليلًا، وستتحسن بسرعة.