وثائق HTML قابلة للتشغيل: وسوم HTML

Q: ما الفرق بين وسم HTML وعنصر HTML؟

الوسم هو ما تكتبه، مثل أو . العنصر هو الكيان الكامل الذي يبنيه المتصفح منه: وسم الفتح وسماته والمحتوى ووسم الإغلاق. Hi وسمان يشكّلان عنصر p واحدًا.

Q: هل وسوم HTML حساسة لحالة الأحرف؟

لا. و ينتجان العنصر نفسه، وكذلك أي مزيج من الأحرف الكبيرة والصغيرة. الأحرف الصغيرة هي الأسلوب المعتمد، وهي ما تُخرجه معظم أدوات التنسيق.

ما هو وسم HTML

وسم HTML اسم بين قوسين زاويين يحدد نوع جزء من المحتوى. تأتي معظم الوسوم في أزواج: وسم فتح مثل <p> ووسم إغلاق بشرطة مائلة مثل </p>. كل ما بينهما هو المحتوى، والمجموعة كاملة تسمى عنصرًا.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

غيّر <h1> إلى <h2> (في وسم الفتح ووسم الإغلاق معًا) وسيصغر العنوان. اسم الوسم هو ما يخبر المتصفح بنوع المحتوى.

التشريح: الوسوم والسمات والعناصر

<a href="/docs/html/links" class="nav">Links</a>

الجزء	في المثال
وسم الفتح	`<a href="/docs/html/links" class="nav">`
اسم الوسم	`a`
السمات	`href="/docs/html/links"` و`class="nav"`
المحتوى	`Links`
وسم الإغلاق	`</a>`
العنصر	كل ما سبق معًا

توضع السمات دائمًا في وسم الفتح، وليس في وسم الإغلاق أبدًا. تجد شرحها في صفحة السمات.

أسماء الوسوم لا تتأثر بحالة الأحرف: <P> و<p> متماثلان. اكتبها بأحرف صغيرة.

الوسوم الفارغة: بلا وسم إغلاق

بعض العناصر لا يمكن أن تحتوي على أي شيء، لذلك لها وسم فتح فقط. تسمى هذه العناصر الفارغة (void elements)، ويسميها البعض أيضًا الوسوم ذاتية الإغلاق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

القائمة الكاملة: area وbase وbr وcol وembed وhr وimg وinput وlink وmeta وsource وtrack وwbr.

يمكنك كتابتها بشرطة مائلة هكذا <br />. الشرطة لا تفعل شيئًا في HTML، وهي مسموحة كي تبقى الشيفرة المكتوبة بأسلوب XHTML صالحة. والشرطة في وسم عادي مثل <div /> يتجاهلها المتصفح أيضًا، أي أن div يبقى مفتوحًا.

تداخل الوسوم

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

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

يحدث إصلاحان. الوسمان المتشابكان <b> و<i> يُقسَّمان إلى عناصر إضافية. والعنصر <p> لا يمكن أن يحتوي على <div>، فيغلق المتصفح الفقرة قبل div ويحوّل </p> الشارد إلى فقرة جديدة فارغة. عندما يتصرف CSS أو JavaScript بشكل غريب، فالتداخل الخاطئ من أول ما يجب فحصه.

العناصر الكتلية والعناصر السطرية

تنقسم معظم الوسوم إلى مجموعتي عرض. العناصر الكتلية (block) مثل div وp وh1 إلى h6 وul وsection تبدأ في سطر جديد وتأخذ العرض الكامل. والعناصر السطرية (inline) مثل span وa وstrong وem وcode تقع داخل سطر النص وعرضها بقدر محتواها فقط.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

الصناديق الزرقاء تمتد على عرض الصفحة، والكهرمانية تحيط بنصها فقط. يمكن لـ CSS تغيير ذلك بالخاصية display، لكن لكل وسم قيمته الافتراضية. راجع div وspan لمعرفة الحاويتين العامتين.

أشهر وسوم HTML

الوسم	الغرض
`<html>`, `<head>`, `<body>`	هيكل المستند
`<title>`, `<meta>`, `<link>`	معلومات الصفحة في head
`<h1>` إلى `<h6>`	العناوين
`<p>`	فقرة
`<a>`	رابط
`<img>`	صورة
`<ul>`, `<ol>`, `<li>`	القوائم
`<strong>`, `<em>`	نص مهم ونص مؤكَّد
`<br>`, `<hr>`	سطر جديد، فاصل موضوعي
`<div>`, `<span>`	حاويتان عامتان كتلية وسطرية
`<table>`, `<tr>`, `<th>`, `<td>`	الجداول
`<form>`, `<input>`, `<label>`, `<button>`	النماذج
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	بنية الصفحة ذات المعنى

للحصول على قائمة في صفحة واحدة يمكنك طباعتها، راجع ورقة مرجعية لـ HTML.

وسوم غير موجودة

إذا كتبت وسمًا لا يعرفه المتصفح فلن يفشل. سينشئ عنصرًا مجهولًا، ويعرض محتواه، ويعامله كعنصر سطري:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

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

أخطاء شائعة

نسيان وسم الإغلاق. غياب </a> أو </strong> يجعل بقية الصفحة رابطًا أو نصًا عريضًا. تغلق المتصفحات بعض الوسوم نيابة عنك (</p> و</li>)، لكن ليس هذه.
إغلاق وسم فارغ. </br> و</img> غير صالحين. بل إن المتصفحات تقرأ </br> كوسم فتح <br>، فينتج <br></br> سطرين جديدين.
تشابك الوسوم. أغلق بالترتيب العكسي: <b><i>x</i></b>، وليس <b><i>x</b></i> أبدًا.
وضع عنصر كتلي داخل فقرة. وجود <div> أو قائمة أو عنوان داخل <p> ينهي الفقرة مبكرًا. استخدم <div> كحاوية خارجية.
اختيار الوسوم بحسب مظهرها. استخدم <h2> لأنه عنوان، لا لأنه كبير. الحجم والسماكة مكانهما CSS.

الأسئلة الشائعة

ما الفرق بين وسم HTML وعنصر HTML؟

الوسم هو ما تكتبه، مثل <p> أو </p>. العنصر هو الكيان الكامل الذي يبنيه المتصفح منه: وسم الفتح وسماته والمحتوى ووسم الإغلاق. <p>Hi</p> وسمان يشكّلان عنصر p واحدًا.

ما وسوم HTML التي لا تحتاج إلى وسم إغلاق؟

العناصر الفارغة (void elements) لا يمكن أن تحتوي على شيء، لذلك ليس لها وسم إغلاق: <br> و<hr> و<img> و<input> و<meta> و<link> و<source> و<track> و<wbr> و<area> و<base> و<col> و<embed>.

هل أكتب <br> أم <br />؟

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

هل وسوم HTML حساسة لحالة الأحرف؟

لا. <P> و<p> ينتجان العنصر نفسه، وكذلك أي مزيج من الأحرف الكبيرة والصغيرة. الأحرف الصغيرة هي الأسلوب المعتمد، وهي ما تُخرجه معظم أدوات التنسيق.

كم عدد وسوم HTML؟

يعرّف معيار HTML الحالي أكثر من 100 عنصر، لكن الصفحات اليومية تستخدم نحو 20 إلى 30 منها: العناوين والفقرات والروابط والصور والقوائم وdiv وspan والنماذج ووسوم التخطيط الدلالية.

ماذا يحدث إذا استخدمت وسمًا غير موجود؟

ينشئ المتصفح له عنصرًا مع ذلك، ويعرض محتواه، ويعامله كعنصر سطري بلا معنى خاص. العناصر المخصصة مسموحة إذا احتوى اسمها على شرطة، مثل <user-card>.

مفاهيم ذات صلة