وسم الترويسة <header>

وسم header يمثل ترويسة الصفحة أو القسم — الشعار والتنقل في أعلى الموقع، أو عنوان المقال وبياناته.

وسم دلالي مزدوج الاستخدام: ابن مباشر لـ body فيكون ترويسة الموقع (شعار + قائمة + بحث)، أو داخل article/section فيكون ترويسة ذلك الجزء (عنوان المقال + تاريخه + كاتبه).

لا تخلطه بـ head: ذاك وسم البيانات الوصفية غير المرئية في أعلى المستند، وheader جزء مرئي تمامًا من الصفحة.

الصياغة

<header>
  <h1>اسم الموقع</h1>
  <nav>...</nav>
</header>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<header style="background:#ede9fe; padding:16px; border-radius:10px; display:flex; justify-content:space-between; align-items:center">
  <strong style="color:#6d28d9">The Code Fix</strong>
  <span>🔍 بحث</span>
</header>
<p style="margin-top:12px">محتوى الصفحة يبدأ هنا...</p>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
—	لا خصائص مميزة — قيمته في دلالته

💡 نصائح عملية

يجوز أكثر من header بالصفحة: واحد للموقع وواحد داخل كل مقال
ترويسة الموقع الثابتة عند التمرير؟ position:sticky في CSS

⚠️ أخطاء شائعة

الخلط بين header (مرئي) وhead (بيانات وصفية) — وظيفتان مختلفتان تمامًا
وضع header داخل footer أو header آخر مباشرة — تداخل ممنوع

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs