لماذا Semantic HTML؟ لأنه يجعل موقعك أفضل لمحركات البحث (SEO)، سهل الصيانة، ومتوافق مع دعم ذوي الاعاقة البصرية او الحركية!
بدلًا من استخدام <div> في كل مكان، استخدم وسوم تدل على المعنى… مثل <header> للرأس، <footer> للأسفل.
div ليس خطأ، لكنه عنصر عام. استخدمه عندما لا يوجد وسم دلالي مناسب، أو عند الحاجة لتجميع عناصر لأغراض CSS فقط.
اليوم سنحوّل موقعك البسيط إلى كود احترافي بـ ٦ وسوم فقط!
لماذا نستخدم Semantic HTML؟ (٥ فوائد سريعة)
أهم ٦ وسوم دلالية (مع أمثلة عملية)
<header> – الرأس العلوي
وسم الرأس العلوي او header له وسم فتح ووسم اغلاق انظر الى الكود التالي لتعرف وسم الفتح ووسم الإغلاق. ومابينهما اي نص او اي كود تضعه يكون في الراس العلوي للصفحة
<header>
<h1>موقعي الشخصي</h1>
</header>تخيل ان موقعك الشخصي يحتوي على navigation وهو التنقل بين الصفحات مثلا في اعلى الصفحة تضع الصفحة الرئيسية ثم تسجيل الدخول ثم انشاء حساب ثم مقالاتي وهكذا . فهذا افضل مكان لتضع هذه الروابط به.
ايضا تخيل موقعك يحتوي على اسم الموقع مثلا منصة ابرمج وهناك صورة لوقو للموقع ، فهنا افضل مكان لوضعهم بالصفحة اي داخل وسم الرأس العلوي الهيدر header.
<nav> – قائمة التنقل
للروابط الرئيسية مثل "الرئيسية، عني، تواصل".
افضل مكان نضع به قائمة التنقل هو وسم nav وله وسم فتح واغلاق كما تراه بالكود ادناه:
ايضا هذا الوسم nav نضعه داخل وسم header لاننا نريده في اعلى الصفحة.
<nav>
<ul>
<li><a href="/">الرئيسية</a></li>
<li><a href="/about">عني</a></li>
</ul>
</nav><main> – المحتوى الرئيسي
الجزء الأساسي من الصفحة، بدون الرأس أو التذييل. نقصد بالرأس header الجزء العلوي للصفحة مثلما هنا في منصة ابرمج الراس يحتوي على قائمة للتنقل بين صفحات الموقع و صورة شعار الموقع لوقو. بينما التذييل footer سنشرحه لاحقا وهو الجزء الذي في نهاية الصفحة. فهنا أي محتوى تريد بين رأس وتذييل الصفحة الافضل تضعه داخل وسم main.
<main>
<h2>مقال اليوم</h2>
<p>...</p>
</main><section> – قسم مستقل
لتقسيم المحتوى إلى أقسام، مثل "خدماتنا". يمكنك انشاء اكثر من قسم section في الصفحة.
<section>
<h2>خدماتنا</h2>
<p>...</p>
</section><article> – محتوى مستقل
للمقالات أو المنشورات التي يمكن قراءتها لوحدها.
<article>
<h2>كيف تتعلم HTML؟</h2>
<p>...</p>
</article><footer> – التذييل
لحقوق النشر، روابط، أو معلومات الاتصال. التذييل هو الجزء السفلي من الصفحة فهنا في منصة ابرمج تجد بعض الروابط مثل من نحن؟ و شروط الاستخدام و سياسة الاستخدام في منطقة footer.
<footer>
<p>© ٢٠٢٥ موقعي. جميع الحقوق محفوظة.</p>
</footer>تمرين اليوم: حوّل موقعك الشخصي إلى Semantic HTML (١٠ دقايق!)
خذ الكود من الدرس السابق، وأعد كتابته باستخدام الوسوم الدلالية:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>موقعي الشخصي (Semantic)</title>
</head>
<body>
<header>
<h1>مرحبًا، أنا [اسمك]</h1>
</header>
<nav>
<ul>
<li><a href="#about">عني</a></li>
<li><a href="#skills">مهاراتي</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>نبذة عني</h2>
<img src="https://picsum.photos/300/300" alt="صورتي">
<p>أنا طالب/مبرمج...</p>
</section>
<article id="skills">
<h2>مهاراتي</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</article>
</main>
<footer>
<p>تواصلوا معي: <a href="https://instagram.com/">إنستغرام</a></p>
<p>© [عام]</p>
</footer>
</body>
</html>الكود أعلاه عند حفظه كملف html وفتحه عن طريق متصفح الانترنت تظهر النتيجة التالية:
مهمتك الآن:
- انسخ الكود أعلاه
- غيّر المحتوى ليصبح عنك (أضف روابط، صور، إلخ)
- احفظ وافتح الملف…
- لاحظ الفرق: الكود أصبح أكثر تنظيمًا!
- نصيحة: استخدم id للروابط الداخلية مثل #about
خلاصة الدرس في ٦ كلمات:
header – nav – main – section – article – footer
استخدمها دائمًا… وستصبح مطورًا محترفًا في أيام!
الدرس القادم : الخصائص أو السمات في HTML
سنتعلم الخصائص أو السمات التي تستخدم داخل الوسوم!