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

Q: ما هو HTML الدلالي؟

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

Q: ما هي الوسوم الدلالية في HTML؟

وسوم التخطيط هي و و و و و و . ومن الوسوم الدلالية الشائعة الأخرى و و و و و والعناوين من إلى .

Q: هل div عنصر دلالي؟

لا. بلا معنى خاص به، فهو صندوق عام للتنسيق والتخطيط. استخدمه حين لا يناسب أي وسم دلالي، واستخدم و و وغيرها حين يناسب أحدها.

ما هو HTML الدلالي

HTML الدلالي يعني اختيار كل وسم بحسب ما هو المحتوى: التنقل يوضع في <nav>، والمحتوى الرئيسي في <main>، والتدوينة في <article>. تبدو الوسوم كصناديق عادية، لكنها تخبر المتصفح وقارئات الشاشة ومحركات البحث بوظيفة كل جزء من الصفحة. هذه صفحة كاملة مبنية من وسوم التخطيط الدلالية، وكل وسم فيها محاط بإطار ومعنون:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

احذف العنصر <style> وستبدو الصفحة كنص عادي، لكن البنية تبقى موجودة لمن يقرأ الشيفرة، وللبرمجيات التي تقرؤها من دون النظر إلى البكسلات.

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

الوسم	استخدمه لـ	معلم قارئ الشاشة
`<header>`	مقدمة الصفحة أو المقال: الشعار، العنوان، اسم الكاتب	banner (فقط حين لا يكون داخل `article` أو `aside` أو `main` أو `nav` أو `section`)
`<nav>`	مجموعة روابط تنقل رئيسية	navigation
`<main>`	المحتوى الخاص بهذه الصفحة، مرة واحدة في الصفحة	main
`<article>`	قطعة مستقلة لها معنى بذاتها: تدوينة، تعليق، بطاقة منتج	لا شيء افتراضيًا
`<section>`	مجموعة محتوى ذات موضوع وعنوان خاص بها	region، فقط حين يكون لها اسم قابل للوصول
`<aside>`	محتوى مرتبط بجانب التسلسل الرئيسي: شريط جانبي، ملاحظة	complementary
`<footer>`	معلومات ختام الصفحة أو المقال: حقوق النشر، الكاتب، الروابط	contentinfo (على مستوى الصفحة فقط)

لكل وسم صفحته الخاصة بتفاصيل أكثر: header وnav وsection وfooter. هذه الصفحة تشرح كيف تتكامل معًا.

لماذا لا نكتفي بـ div

الصفحة المبنية من عناصر <div> وحدها يمكن أن تبدو مطابقة للصفحة الدلالية. الفرق فيما تقوله الشيفرة. اضغط الأزرار لتحيط بإطار العناصر التي تحمل معنى في كل نسخة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

نسخة div تجد 0، والنسخة الدلالية تجد 4. هذا ما تراه التقنيات المساعدة: مستخدم قارئ الشاشة يستطيع القفز مباشرة إلى التنقل أو المحتوى الرئيسي في الصفحة الدلالية، وعليه أن يقرأ كل شيء في صفحة div. أسماء الفئات مثل class="nav" لا تعني شيئًا للمتصفح.

يبقى <div> الخيار الصحيح للصناديق الموجودة للتنسيق أو التخطيط فقط، مثل غلاف flex .cols في المثال الأول.

main وarticle وaside

<main> يحيط بما هو خاص بهذه الصفحة ويظهر مرة واحدة. وبداخله يحدد <article> المحتوى الذي يبقى له معنى لو نُسخ وحده إلى موقع آخر، و<aside> يحدد محتوى مرتبطًا يمكن حذفه من دون إفساد المقال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

للمقال <header> و<footer> خاصان به. فهما لا يقتصران على مستوى الصفحة: كل منهما يقدّم أو يختم أقرب مقال أو قسم إليه. والعنصر <time datetime> يعطي التاريخ بصيغة تقرؤها الآلة بينما يعرضه بصيغة يقرؤها الإنسان.

افحص مخطط عناوينك

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

العنوان h4 تحت «Brewing» يتخطى مستوى. غيّره إلى h3 وسيُقرأ المخطط بشكل سليم. اختر مستويات العناوين بحسب البنية، وغيّر حجمها بـ CSS إن أردتها أكبر أو أصغر.

وسوم دلالية أخرى

الدلالة لا تخص التخطيط وحده. وسوم النص هذه تحمل معنى أيضًا:

الوسم	المعنى
`<strong>`	نص مهم (عريض افتراضيًا)
`<em>`	تأكيد بالنبرة (مائل افتراضيًا)
`<figure>` و`<figcaption>`	صورة أو مخطط أو عينة شيفرة مع تعليقها
`<time datetime="...">`	تاريخ أو وقت بصيغة تقرؤها الآلة
`<address>`	بيانات الاتصال بكاتب الصفحة أو المقال
`<mark>`	نص مظلل، مثل نتيجة بحث مطابقة
`<abbr title="...">`	اختصار مع صيغته الكاملة
`<button>`	شيء ينفّذ إجراءً

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

مرّر المؤشر فوق الاختصار «W3C» لترى صيغته الكاملة في تلميح.

أخطاء شائعة

استخدام وسم بسبب مظهره. <blockquote> للاقتباسات لا للإزاحة، و<h3> لمستوى عنوان لا لنص عريض متوسط الحجم. نسّق بـ CSS.
إحاطة كل شيء بـ <section>. يجب أن يكون للقسم عنوان وموضوع. إن كنت تحتاج صندوقًا للتنسيق، فاستخدم <div>.
أكثر من <main> ظاهر. أبقِ واحدًا في كل صفحة، ولا تضعه أبدًا داخل <article> أو <aside> أو <header> أو <nav> أو <footer>.
وضع كل قائمة روابط في <nav>. احتفظ به لمجموعات التنقل الرئيسية، مثل قائمة الموقع أو فهرس المحتويات. بضعة روابط في التذييل لا تحتاج إليه.
عناصر <div> قابلة للنقر. لا يمكن الوصول إلى <div onclick> بلوحة المفاتيح. استخدم <button> للإجراءات و<a href> للتنقل.

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

ما هو HTML الدلالي؟

HTML الدلالي بنية يصف فيها كل وسم معنى محتواه: <nav> للتنقل، و<article> لقطعة مستقلة بذاتها، و<button> للزر. عندها يستطيع المتصفح وقارئات الشاشة ومحركات البحث فهم الصفحة من دون التخمين من أسماء الفئات أو التنسيقات.

ما هي الوسوم الدلالية في HTML؟

وسوم التخطيط هي <header> و<nav> و<main> و<article> و<section> و<aside> و<footer>. ومن الوسوم الدلالية الشائعة الأخرى <figure> و<figcaption> و<time> و<address> و<strong> و<em> والعناوين من <h1> إلى <h6>.

هل div عنصر دلالي؟

لا. <div> بلا معنى خاص به، فهو صندوق عام للتنسيق والتخطيط. استخدمه حين لا يناسب أي وسم دلالي، واستخدم <header> و<main> و<nav> وغيرها حين يناسب أحدها.

ما فائدة وسم aside؟

<aside> يحتوي على محتوى مرتبط بالمحتوى الرئيسي لكنه ليس جزءًا من تسلسله: شريط جانبي، صندوق روابط ذات صلة، ملاحظة مصطلحات أو اقتباس بارز. وعلى مستوى الصفحة تسرده قارئات الشاشة كمعلم تكميلي (complementary).

كم عنصر main يمكن أن يكون في الصفحة؟

<main> ظاهر واحد لكل صفحة. يحيط بالمحتوى الخاص بتلك الصفحة، ويجب ألا يقع داخل <header> أو <nav> أو <article> أو <aside> أو <footer>.

هل يساعد HTML الدلالي في تحسين محركات البحث؟

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

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