جاري التحميل...
جاري التحميل...
وسوم ذات معنى لتحسين بنية الصفحة
HTML الدلالي هو استخدام علامات HTML التي تحمل دلالات ذات معنى لمحتواها، بدلاً من استخدام علامات عامة مثل
كلمة "دلالي" تعني "له معنى". عندما نستخدم علامة مثل 💡 تشبيه بسيط: تخيّل أنك تكتب رسالة لعمى. هل ستقول "افتح الصندوق رقم 5" أم "افتح صندوق البريد"؟ الثاني أوضح لأنه يحمل معنى. HTML الدلالي يفعل نفس الشيء — يعطي كل قسم في صفحتك اسماً دلالياً..
HTML الدلالي مهم لأسباب أساسية عدة:
<header>: ترويسة الصفحة أو القسم<footer>: تذييل الصفحة أو القسم<nav>: قسم التنقل<main>: المحتوى الرئيسي للصفحة (يجب أن يكون واحداً فقط)<article>: محتوى مستقل (مقال، منشور)<section>: قسم منطقي داخل الصفحة<aside>: محتوى جانبي<figure> و<figcaption>: للصور والوصف<time>: للتواريخ والأوقات<mark>: للنص المُميّزدعنا نرى الفرق:
في هذا المثال، كل شيء هو <div> — المتصفح لا يفهم أي جزء هو الترويسة أو المحتوى أو التنقل.
الكود الثاني أوضح بكثير! كل علامة تخبرك بدورها فوراً. قارئ الشاشة يستطيع الآن أن يقول "أنت الآن في قسم التنقل" بدلاً من "أنت في div رقم 3".
ما هو الفرق الرئيسي بين HTML الدلالي وغير الدلالي؟
أنشئ صفحة "من نحن" باستخدام HTML الدلالي: 1. header مع شعار وعنوان، 2. nav بالتنقل، 3. main، 4. article للمحتوى الرئيسي، 5. section لقسم الميزات، 6. aside لمعلومة جانبية، 7. footer.
الحل:
<!-- الحل المتوقع -->
<header>
<h1>موقعي</h1>
<nav>
<ul>
<li><a href="/">الرئيسية</a></li>
<li><a href="/blog">المدونة</a></li>
<li><a href="/contact">تواصل</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>عنوان المقال</h2>
<p>محتوى المقال هنا...</p>
<section>
<h3>القسم الأول</h3>
<p>تفاصيل إضافية...</p>
</section>
</article>
<aside>
<h3>مقالات ذات صلة</h3>
<ul>
<li><a href="#">مقال 1</a></li>
<li><a href="#">مقال 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 جميع الحقوق محفوظة</p>
</footer>أنشئ صفحة مدونة باستخدام عناصر HTML الدلالية:
<header> بعنوان الموقع و<nav><main> يحتوي على <article> مع <section>s<aside> للمقالات ذات الصلة أو الشريط الجانبي<figure> و<figcaption> للصور<time> لتواريخ المقالات<footer> بمعلومات حقوق النشر💡 تذكر: <code><main></code> يجب أن يظهر مرة واحدة فقط لكل صفحة. كل <code><section></code> يجب أن يكون له عنوان. محتوى <code><article></code> يجب أن يكون قابلاً للتوزيع بشكل مستقل.
عناصر الهيكل:
<header> - ترويسة الصفحة/القسم<nav> - روابط التنقل<main> - المحتوى الرئيسي (واحد فقط للصفحة)<section> - قسم منطقي مع عنوان<article> - محتوى مستقل<aside> - محتوى جانبي<footer> - تذييل الصفحة/القسمعناصر النص:
<figure> - حاوية صورة/محتوى<figcaption> - تعليق الصورة<blockquote> - اقتباس كتلي<cite> - مصدر الاقتباس<mark> - نص مُميّز<time> - التواريخ والأوقاتالقوائم والجداول:
<details> - محتوى قابل للتوسيع<summary> - ملخص التفاصيل<caption> - عنوان الجدول<thead> - رأس الجدول<tbody> - جسم الجدول<tfoot> - تذييل الجدولهيكل الصفحة:
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
</body>