وسوم العناوين (H1 إلى H6)

في الدرس اللي فات، إحنا شرحنا "الهيكل العظمي" الكامل للصفحة: بدأنا بـ <!DOCTYPE>، وعرفنا الفرق بين الـ <head> (المخ الخفي) والـ <body> (الجسم المرئي).

قاعدة ذهبية: كل الوسوم اللي هنشرحها في الدرس ده (من <h1> لـ <h6>) مكانها "حصرياً" و "دائمًا" جوه الوسم <body>. أوعى تحطهم في الـ <head>.

إيه هي وسوم العناوين (Headings)؟

وسوم العناوين، أو الـ "Headings"، هي وسوم مزدوجة (ليها فتحة وقافلة) بنستخدمها عشان ندي "عناوين" للمحتوى بتاعنا.

تخيل إنك بتكتب مقالة في جرنان، أو بتألف كتاب. إنت مش بتكتب كل الكلام "سايح" على بعضه. إنت بتستخدم:

عنوان رئيسي ضخم للجرنان كله (ده الـ <h1>).
عناوين أصغر شوية للمقالات المختلفة (دي الـ <h2>).
عناوين فرعية جوه كل مقالة عشان تقسمها لنقط (دي الـ <h3>).

الوسوم دي هي اللي بتعمل كده بالظبط في صفحة الويب. هي بتعرف المتصفح (والزائر) "إيه هو الهيكل" بتاع الصفحة دي.

نقطة مهمة: كل وسوم العناوين هي وسوم "Block-level". يعني إيه؟ يعني الوسم بياخد "سطر لوحده". لما بتكتب <h1>، هو بينزل سطر جديد، وبعد ما بيخلص، أي حاجة بعده بتيجي في سطر جديد. (هنشرح الفرق بين Block و Inline بالتفصيل في المستقبل، بس خلي المعلومة دي في دماغك).

الأهمية الحقيقية: "الهرمية" مش "الشكل"

ده أهم مفهوم في الدرس كله، ولازم تفهمه 100%.

لما المبتدئ بيشوف الوسوم دي، بيلاحظ إن <h1> بيخلي الخط "كبير وتخين (Bold)"، وإن <h6> بيخلي الخط "صغير". فبيفتكر إن الوسوم دي وظيفتها "التصميم" أو "الاستايل". وده **غلط كارثي**.

وظيفة وسوم العناوين "ليست" تغيير شكل الخط. وظيفتها "الوصف" أو "المعنى".

لما بتكتب <h1>، إنت مش بتقول للمتصفح "خلي الخط ده كبير". إنت بتقوله "السطر ده هو أهم عنوان في الصفحة دي كلها".

لما بتكتب <h2>، إنت بتقوله "ده عنوان فرعي من العنوان الرئيسي اللي فات".

لما بتكتب <h6>، إنت بتقوله "ده عنوان تفصيلي صغير جدًا، أهميته هي أقل أهمية في الصفحة".

تشبيه هيكل الشركة

تخيل الصفحة بتاعتك شركة:

<h1>: هو "المدير العام" أو "رئيس مجلس الإدارة". (مفيش غير واحد بس).
<h2>: هما "نواب المدير" أو "مديرين الإدارات" (إدارة التسويق، إدارة الحسابات). (ممكن يكون فيه كذا واحد).
<h3>: هما "رؤساء الأقسام" جوه كل إدارة (رئيس قسم الدعاية جوه إدارة التسويق).
<h4>: هما "مديرين الفرق" جوه كل قسم.
وهكذا...

إنت بتستخدم الوسوم دي عشان تبني "الهيكل الإداري" للمحتوى بتاعك. أما "شكلهم" (حجم الخط ولونه) ده شغلانة الـ CSS اللي هنتعلمها بعدين، وهنغير كل الأشكال دي براحتنا.

القاعدة الأساسية: الـ 6 مستويات (H1 إلى H6)

لغة HTML بتقدملك 6 مستويات من العناوين عشان تبني بيهم الهيكل ده.

<h1>...</h1> (الأعلى أهمية)
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6> (الأقل أهمية)

"افتراضيًا" (Default)، المتصفح بيعرضهم بأحجام مختلفة عشان يوريك الفرق في الأهمية ده: <h1> بيكون الأكبر، و <h6> بيكون الأصغر (لدرجة إنه أحيانًا بيكون أصغر من الخط العادي!).

تعالَى نشوفهم كلهم تحت بعض في مثال:

مثال (1): عرض الـ 6 مستويات


<!DOCTYPE html>
<html>
<head>
    <title>درس العناوين</title>
</head>
<body>

    <h1>ده العنوان مستوى 1 (الأهم)</h1>
    <p>ده نص عادي للمقارنة.</p>

    <h2>ده العنوان مستوى 2</h2>
    <p>ده نص عادي للمقارنة.</p>

    <h3>ده العنوان مستوى 3</h3>
    <p>ده نص عادي للمقارنة.</p>

    <h4>ده العنوان مستوى 4</h4>
    <p>ده نص عادي للمقارنة.</p>

    <h5>ده العنوان مستوى 5</h5>
    <p>ده نص عادي للمقارنة.</p>

    <h6>ده العنوان مستوى 6 (الأقل أهمية)</h6>
    <p>ده نص عادي للمقارنة.</p>

</body>
</html>

لو جربت الكود ده، هتلاحظ إن <h1> ضخم، وكل اللي بعده بيصغر تدريجيًا.

الوسم `<h1>`: المدير العام (العنوان الأوحد)

الوسم <h1> هو أهم وسم في الصفحة. هو "العنوان الرئيسي" اللي بيقول للزائر "الصفحة دي كلها بتتكلم عن إيه".

قاعدة شبه رسمية: الصفحة الواحدة المفروض يكون فيها <h1> واحد بس.

ليه؟ نرجع لتشبيه الشركة. مينفعش شركة يكون فيها 5 مديرين عامين. هو مدير واحد بس اللي بيقول الكلمة العليا. نفس الكلام، مينفعش الصفحة يكون ليها 5 عناوين رئيسية. هو عنوان واحد بس اللي بيعرفنا الصفحة دي عن إيه.

العنوان اللي بتحطه في <h1> (جوه الـ <body>) المفروض يكون قريب جدًا في المعنى (أو مطابق) للعنوان اللي حطيته في <title> (جوه الـ <head>).

<title>: بيظهر في التاب فوق.
<h1>: بيظهر كأول وأكبر عنوان جوه الصفحة نفسها.

مثال (2): الاستخدام الصحيح لـ H1


<!DOCTYPE html>
<html>
<head>
    <title>وصفة عمل الكيكة الإسفنجية</title>
</head>
<body>

    <!-- العنوان الرئيسي والأوحد للصفحة -->
    <h1>طريقة عمل الكيكة الإسفنجية خطوة بخطوة</h1>
    
    <p>الكيكة الإسفنجية هي أساس التورتات... (إلخ)</p>

    <!-- (هنا هييجي باقي المحتوى زي H2 للمقادير و H2 للطريقة) -->

</body>
</html>

الوسم `<h2>`: نواب المدير (العناوين الرئيسية)

بما إننا استخدمنا <h1> خلاص، إزاي نقسم المقالة بتاعتنا؟ هنا بييجي دور الـ <h2>.

الـ <h2> بنستخدمه عشان نقسم الموضوع الرئيسي (بتاع <h1>) إلى "أقسام رئيسية".

في المثال بتاع الكيكة اللي فات:

<h1>: طريقة عمل الكيكة الإسفنجية...
<h2>: المقادير.
<h2>: طريقة التحضير.
<h2>: نصائح لنجاح الكيكة.

لاحظ إن "المقادير" و "طريقة التحضير" و "نصائح" كلها أقسام "متساوية في الأهمية" وكلها بتخدم على الموضوع الرئيسي <h1>. عشان كده كلهم بياخدوا <h2>.

إنت ممكن تستخدم <h2> أكتر من مرة عادي جدًا.

مثال (3): استخدام H1 مع H2


<body>

    <h1>طريقة عمل الكيكة الإسفنجية خطوة بخطوة</h1>
    <p>الكيكة الإسفنجية هي أساس التورتات... (إلخ)</p>
    
    <h2>أولاً: المقادير</h2>
    <p>- كوب دقيق.</p>
    <p>- كوب سكر.</p>
    
    <h2>ثانياً: طريقة التحضير</h2>
    <p>1. نقوم بخلط الدقيق مع السكر...</p>
    <p>2. نضع الخليط في الفرن...</p>
    
    <h2>ثالثاً: نصائح لنجاح الكيكة</h2>
    <p>- يجب تسخين الفرن مسبقاً.</p>

</body>

الوسوم `<h3>` إلى `<h6>`: باقي الفريق (التفاصيل)

طيب، إيه لازمة باقي المستويات؟

بنستخدمهم لما نحتاج نقسم "قسم فرعي" (زي <h2>) إلى "أقسام أصغر" جواه.

نرجع لمثال الكيكة: جوه قسم <h2> بتاع "طريقة التحضير"، ممكن أكون عايز أقسمه لنقطتين: "تحضير العجينة" و "التسوية في الفرن". في الحالة دي، النقطتين دول ياخدوا <h3>.

<h1>: طريقة عمل الكيكة...
- <h2>: المقادير
- <h2>: طريقة التحضير
  - <h3>: تحضير العجينة
  - <h3>: التسوية والخبز
- <h2>: نصائح...

القاعدة: "أوعى تنط". مينفعش تستخدم <h3> غير لو فيه <h2> فوقه. ومينفعش تستخدم <h4> غير لو فيه <h3> فوقه. لازم تمشي بالترتيب الهرمي.

بصراحة، في 90% من المواقع العادية، إنت نادرًا ما هتحتاج تنزل عن <h3> أو <h4>. المستويات <h5> و <h6> موجودة للمستندات المعقدة جدًا (زي الأبحاث العلمية أو الأوراق القانونية).

مثال متكامل: هيكل مقالة كاملة

ده مثال بيجمع كل حاجة، وبيوريك إزاي الهيكل الهرمي ده بيخلي المقالة منظمة وسهلة القراية.

مثال (4): هيكل هرمي كامل (H1-H4)


<body>

    <h1>دليل تعلم تطوير الويب للمبتدئين</h1>
    <p>هذا الدليل هو خطوتك الأولى...</p>
    
    <h2>الخطوة الأولى: تعلم الأساسيات (Frontend)</h2>
    <p>لتصميم شكل الموقع، يجب أن تبدأ بـ...</p>
    
        <h3>1. لغة HTML (الهيكل)</h3>
        <p>هي اللغة المسؤولة عن بناء هيكل الصفحة...</p>
        
        <h3>2. لغة CSS (التصميم)</h3>
        <p>هي المسؤولة عن الألوان والخطوط...</p>
        
        <h3>3. لغة JavaScript (التفاعل)</h3>
        <p>هي المسؤولة عن جعل الموقع تفاعلي...</p>
            
            <h4>أمثلة على التفاعل</h4>
            <p>- القوائم المنسدلة.</p>
            <p>- النوافذ المنبثقة.</p>

    <h2>الخطوة الثانية: تعلم (Backend)</h2>
    <p>بعد أن أتقنت الواجهة الأمامية...</p>
    
        <h3>1. لغات الخادم</h3>
        <p>مثل Python أو PHP...</p>
        
        <h3>2. قواعد البيانات</h3>
        <p>مثل MySQL أو MongoDB...</p>

</body>

شوف في المثال ده إزاي <h4> جت "جوه" الـ <h3> (بتاع الجافاسكريبت)، وإزاي كل الـ <h3> جت جوه الـ <h2>. ده اسمه "التداخل السليم" (Proper Nesting) للعناوين.

الخطأ الأكبر: استخدام العناوين لتكبير الخط

هنرجع نأكد على النقطة دي تاني لأنها أهم غلطة بيقع فيها المبتدئين.

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

ليه ده غلط؟
لأنه بكده "بوظ" الهيكل. هو قال للمتصفح إن "الملحوظة" دي هي "عنوان فرعي" للمقالة (أو رئيس قسم في الشركة)، في حين إنها مجرد "ملحوظة" (موظف عادي).

إيه الصح؟

لو عايز تلفت النظر لنص معين، أو تكبر خطه، أو تخليه تخين (Bold):

اكتبه جوه الوسم العادي بتاعه (في الغالب <p> للفقرة).
بعدين، لما نتعلم CSS، هنروح لملف الـ CSS ونقوله "خلي الفقرة دي بالذات" (هنديها "كلاس" أو "أي دي") شكلها كبير وتخين.

القاعدة: HTML للهيكل والمعنى. CSS للشكل والجمال. أوعى تخلطهم ببعض. استخدم <h1> لـ <h6> "فقط" لما تكون بتكتب "عنوان" حقيقي.

ملحوظة عن محركات البحث (SEO)

إنت غالبًا هتسمع كتير إن وسوم العناوين (خصوصًا <h1> و <h2>) "مهمة جدًا لمحركات البحث" زي جوجل (أو ما يُعرف بالـ SEO).

الكلام ده صح 100%.

جوجل بيبص على العناوين دي (خصوصًا <h1>) عشان يفهم بسرعة الصفحة دي بتتكلم عن إيه. لما إنت بتستخدم الهيكل الهرمي (H1, H2, H3) بشكل مظبوط، إنت كأنك بتقدم لجوجل "ملخص" للمقالة بتاعتك، وده بيساعده إنه يظهر موقعك للناس الصح.

لكن، إحنا مش هنشرح بالتفصيل إزاي ده بيحصل أو إزاي نكتبها عشان الـ SEO بالظبط. دي قصة لوحدها وهندخل فيها في دروس متقدمة جدًا في المستقبل.

كل اللي محتاجك تعرفه "دلوقتي" هو: لو استخدمت العناوين صح عشان "تنظم المحتوى" بتاعك للزائر، إنت كده "تلقائيًا" بتساعد جوجل. ركز بس إنك تبني هيكل منطقي، والـ SEO هييجي لوحده في المرحلة دي.

(خلاصة الدرس):
1. العناوين من <h1> لـ <h6> مكانها "دايمًا" جوه الـ <body>.
2. وظيفتها "الهيكلة" و "تحديد الأهمية"، مش "التصميم".
3. استخدم <h1> "مرة واحدة بس" في الصفحة للعنوان الرئيسي.
4. استخدم <h2> و <h3> عشان تقسم الموضوع لأقسام فرعية.
5. "أوعى تنط" (لازم تلتزم بالترتيب 1 ثم 2 ثم 3).
6. "أوعى تستخدمهم" عشان بس تكبر خط أو تخليه تخين.

شرح العناوين H | تعلم HTML