HTML: دلاليات HTML

الوسوم الدلالية (semantic tags) تعطي معنى لهيكل صفحة الويب — تخبر المتصفح ليس فقط بكيفية عرض شيء ما، ولكن أيضًا "ما هو هذا القسم." هذا يساعد بشكل كبير في تحسين محركات البحث (SEO) وإمكانية الوصول وقابلية قراءة الكود.

1. ما هي الدلاليات

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

▶ مثال

<header>
<h1>مدونتي</h1>
<nav>
<a href="index.html">الرئيسية</a>
</nav>
</header>
<main>
<article>
<h2>عنوان المقال</h2>
<p>محتوى المقال...</p>
</article>
<aside>شريط جانبي</aside>
</main>
<footer>
<p>&copy; 2026</p>
</footer>

2. فوائد الدلاليات

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

3. حاوية الصورة/المحتوى: figure و figcaption

<figure> يغلف محتوى قائمًا بذاته مثل الصور أو أجزاء الكود أو المخططات، بينما <figcaption> يوفر تسمية توضيحية له:

<figure>
### ▶ مثال
<img src="chart.png" alt="مخطط بيانات مبيعات 2026">
<figcaption>الشكل 1: مقارنة المبيعات الربعية لعام 2026</figcaption>
</figure>

<figure>
<pre><code>console.log("Hello World");</code></pre>
<figcaption>مثال كود: طباعة Hello World</figcaption>
</figure>

4. الوقت والتمييز: time و mark

<time> يجعل التواريخ والأوقات قابلة للقراءة آليًا، و <mark> يميز كلمات البحث أو النص المهم:

<p>نُشر في <time datetime="2026-06-12">12 يونيو 2026</time></p>

<p>ابحث عن: <mark>الوسوم الدلالية</mark>،
### ▶ مثال
سيتم تمييز النتائج.</p>

<p><time datetime="2026-06-12T14:30:00+08:00">
الساعة 2:30 مساءً غدًا</time> سيعقد الاجتماع.</p>

5. محتوى قابل للطي: details و summary

<details> ينشئ عنصرًا تفاعليًا قابلًا للطي/التمدد، و <summary> يحدد عنوانه المرئي. HTML خالص، لا حاجة إلى JavaScript:

<details>
<summary>ما هي الوسوم الدلالية؟</summary>
<p>الوسوم الدلالية هي وسوم HTML تستخدم أسماء ذات معنى
لوصف غرض المحتوى، مثل &lt;header&gt; و
### ▶ مثال
&lt;nav&gt; و &lt;article&gt; وغيرها.</p>
</details>

<details open>
<summary>لوحة موسعة بالفعل (مع سمة open)</summary>
<p>إضافة سمة open تجعل اللوحة موسعة افتراضيًا.</p>
</details>

❓ أسئلة شائعة

📖 ملخص

• الوسوم الدلالية الأساسية: <header> و <nav> و <main> و <section> و <article> و <aside> و <footer>
• <figure> + <figcaption> يغلفان الصور/الكود مع تسميات توضيحية
• <time> يحدد تواريخ قابلة للقراءة آليًا؛ <mark> يميز النص
• <details> + <summary> ينشئان لوحات قابلة للطي بـ HTML خالص
• الدلاليات تحسن SEO وإمكانية الوصول وقابلية قراءة الكود
• <div> و <span> ليس لهما دلالات؛ استخدمهما فقط عندما لا يوجد وسم مناسب

📝 تمارين

1. ابنِ هيكلًا: استخدم الوسوم الدلالية لبناء هيكل صفحة مدونة واملأها بنص مؤقت.
2. قارن التجربة: استخدم قارئ شاشة لتصفح صفحة pure <div> وصفحة دلالية جنبًا إلى جنب، ولاحظ الفرق.

فريق Web-Tutorial التقني

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

من نحن