Semantic HTML يعني استخدام عناصر HTML التي تصف معنى المحتوى، لا مجرد مظهره.
غير دلالي (Non-Semantic): <div class="header"> ... </div> <div class="nav"> ... </div>
دلالي (Semantic): <header> ... </header> <nav> ... </nav>
لماذا Semantic HTML مهم؟
1. SEO أفضل: محركات البحث تفهم محتوى صفحتك بدقة أكبر. article يخبر جوجل "هذا محتوى مستقل قابل للمشاركة". nav يخبره "هذه روابط تنقل".
2. وصولية أفضل: قارئات الشاشة للمكفوفين تعتمد على البنية الدلالية للتنقل.
3. صيانة أسهل: الكود أوضح وأسهل للفهم.
4. مشاركة أفضل: محتوى article يُعرض بشكل أجمل عند مشاركته على منصات التواصل الاجتماعي.
| 1 | <!-- ❌ Non-Semantic HTML (تجنبه) --> |
| 2 | <div class="header"> |
| 3 | <div class="nav"> |
| 4 | <div class="nav-item"><a href="/">الرئيسية</a></div> |
| 5 | </div> |
| 6 | </div> |
| 7 | <div class="content"> |
| 8 | <div class="article"> |
| 9 | <div class="title">عنوان المقالة</div> |
| 10 | <div class="text">محتوى المقالة</div> |
| 11 | </div> |
| 12 | </div> |
| 13 | <div class="footer">حقوق النشر</div> |
| 14 | |
| 15 | <!-- ✅ Semantic HTML (الطريقة الصحيحة) --> |
| 16 | <header> |
| 17 | <nav> |
| 18 | <a href="/">الرئيسية</a> |
| 19 | </nav> |
| 20 | </header> |
| 21 | <main> |
| 22 | <article> |
| 23 | <h1>عنوان المقالة</h1> |
| 24 | <p>محتوى المقالة</p> |
| 25 | </article> |
| 26 | </main> |
| 27 | <footer> |
| 28 | <p>حقوق النشر 2024</p> |
| 29 | </footer> |
مثال 1: صفحة ويب دلالية كاملة
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>مدونة تقنية</title> |
| 6 | </head> |
| 7 | <body> |
| 8 | <header> |
| 9 | <h1>مدونة المبرمج العربي</h1> |
| 10 | <nav aria-label="التنقل الرئيسي"> |
| 11 | <ul> |
| 12 | <li><a href="/">الرئيسية</a></li> |
| 13 | <li><a href="/articles">المقالات</a></li> |
| 14 | <li><a href="/about">عن المدونة</a></li> |
| 15 | </ul> |
| 16 | </nav> |
| 17 | </header> |
| 18 | |
| 19 | <main> |
| 20 | <article> |
| 21 | <header> |
| 22 | <h2>تعلم HTML في 30 يوماً</h2> |
| 23 | <time datetime="2024-06-15">15 يونيو 2024</time> |
| 24 | </header> |
| 25 | |
| 26 | <section> |
| 27 | <h3>مقدمة</h3> |
| 28 | <p>HTML هو اللبنة الأساسية...</p> |
| 29 | </section> |
| 30 | </article> |
| 31 | |
| 32 | <aside> |
| 33 | <h2>مقالات ذات صلة</h2> |
| 34 | </aside> |
| 35 | </main> |
| 36 | |
| 37 | <footer> |
| 38 | <p>© 2024 جميع الحقوق محفوظة</p> |
| 39 | </footer> |
| 40 | </body> |
| 41 | </html> |