العناوين في HTML

يا هلا والله! اليوم بنتكلم عن شيء أساسي ومهم في أي صفحة ويب: العناوين (Headings). هذي يا طويل العمر مو بس عشان تخلي شكل النص حلو، لا، هذي لها دور كبير في تنظيم المحتوى وفهم محركات البحث لصفحتك.

إيش هي العناوين؟

بكل بساطة، العناوين هي عناصر HTML نستخدمها لتعريف أقسام ومواضيع مختلفة في صفحتك. تخيلها زي رؤوس الفصول في كتاب. عندنا ست مستويات من العناوين، تبدأ من <h1> (الأكبر والأكثر أهمية) وتنتهي بـ <h6> (الأصغر والأقل أهمية).

ليش العناوين مهمة؟

للتنظيم: تخلي محتوى صفحتك مرتب وسهل القراءة والفهم للزوار.
للوصولية (Accessibility): تساعد المستخدمين اللي يستخدمون برامج قراءة الشاشة (Screen Readers) إنهم يتنقلون بين أقسام الصفحة بسهولة.
لمحركات البحث (SEO): محركات البحث زي جوجل تستخدم العناوين عشان تفهم عن إيش تتكلم صفحتك، وهذا يساعد في ظهور صفحتك في نتائج البحث.

كيف تستخدم العناوين؟

الاستخدام سهل جداً. كل عنوان له وسم فتح ووسم إغلاق، والمحتوى يكون بينهم. أهم شيء إنك تستخدمها بالترتيب الصحيح، يعني تبدأ بـ <h1> كعنوان رئيسي لصفحتك، وبعدين <h2> للأقسام الرئيسية، وهكذا.

ملاحظة مهمة: لا تستخدم العناوين عشان تتحكم في حجم الخط بس! استخدمها عشان تحدد أهمية المحتوى وهيكليته. لو تبي تغير حجم الخط، استخدم CSS.

مثال عملي

شف كيف ممكن نرتب صفحة بسيطة باستخدام العناوين:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة عن الرياض</title>
</head>
<body>

    <h1>الرياض: قلب المملكة النابض</h1>
    <p>الرياض هي عاصمة المملكة العربية السعودية وأكبر مدنها.</p>

    <h2>تاريخ الرياض</h2>
    <p>تتمتع الرياض بتاريخ عريق يمتد لقرون طويلة.</p>

    <h3>تأسيس الدولة السعودية الأولى</h3>
    <p>كانت الدرعية، القريبة من الرياض، مركز انطلاق الدولة السعودية الأولى.</p>

    <h3>التوسع والتطور</h3>
    <p>شهدت الرياض تطوراً هائلاً في العصر الحديث.</p>

    <h2>معالم الرياض</h2>
    <p>تضم الرياض العديد من المعالم السياحية والتاريخية.</p>

    <h3>برج المملكة</h3>
    <p>أحد أبرز الرموز المعمارية في الرياض.</p>

    <h3>مركز الملك عبدالله المالي</h3>
    <p>مشروع ضخم يهدف ليكون مركزاً مالياً عالمياً.</p>

</body>
</html>

زي ما تشوف في المثال، <h1> هو العنوان الرئيسي للصفحة كلها. <h2> للأقسام الكبيرة زي "تاريخ الرياض" و "معالم الرياض". وبعدين <h3> للأقسام الفرعية داخل هذي الأقسام. هذا هو الاستخدام الصحيح والمنظم.

نصيحة أخيرة

تذكر دائماً: صفحة الويب الواحدة لازم يكون فيها <h1> واحد فقط. هذا هو أهم عنوان في الصفحة. باقي العناوين (<h2> إلى <h6>) تقدر تستخدمها أكثر من مرة حسب الحاجة.

كذا نكون خلصنا درسنا عن العناوين في HTML. طبقها صح وشوف كيف محتواك بيصير أحسن وأكثر احترافية. موفق!

← السابق الفهرس التالي →