العناوين في HTML

العناوين في HTML

يا هلا والله بالجميع! اليوم بنتكلم عن شيء أساسي ومهم في أي صفحة ويب: العناوين (Headings). الموضوع بسيط وما يحتاج تعقيد.

وش هي العناوين في HTML؟

باختصار، العناوين هي اللي تحدد لك الأجزاء الرئيسية والفرعية في صفحتك. تخيلها زي رؤوس الأقلام في كتاب أو مقال. عندك عنوان كبير للموضوع، وتحته عناوين أصغر للأقسام، وهكذا.

في HTML، عندنا 6 مستويات للعناوين، تبدأ من

وهو الأكبر والأهم، وتنتهي بـ
وهو الأصغر والأقل أهمية.

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

  • للمستخدم: تساعد الزائر يفهم بنية الصفحة بسرعة، ويقدر يتصفحها بسهولة.
  • لمحركات البحث (SEO): قوقل وغيره يستخدمون العناوين عشان يفهمون محتوى صفحتك ويعرفون وش هي الكلمات المفتاحية المهمة. العنوان

    يعتبر الأهم لمحركات البحث.

  • للوصولية (Accessibility): تساعد قارئات الشاشة (Screen Readers) إنها تفهم محتوى الصفحة وتقرأه للمستخدمين اللي عندهم صعوبات بصرية.

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

كل عنوان له وسم خاص فيه. أهم شيء هنا هو الترتيب الهرمي. يعني ما يصير تستخدم

قبل

مثلاً، إلا إذا كان

يتبع مباشرة

كعنوان فرعي له.

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

هذي أمثلة على كل مستوى من مستويات العناوين:

<h1>هذا عنوان رئيسي للمقالة (الأهم)</h1>
<h2>هذا عنوان قسم فرعي</h2>
<h3>هذا عنوان فرعي لـ H2</h3>
<h4>هذا عنوان فرعي لـ H3</h4>
<h5>هذا عنوان فرعي لـ H4</h5>
<h6>هذا عنوان فرعي لـ H5 (الأقل أهمية)</h6>

تذكر دائماً: صفحتك لازم تحتوي على عنوان

واحد فقط، لأنه يمثل العنوان الرئيسي لمحتوى الصفحة بأكملها. باقي العناوين تقدر تستخدمها أكثر من مرة حسب الحاجة.

مثال عملي:

لو عندك صفحة عن "وصفة كبسة"، ممكن تكون كذا:

<!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>
    <ul>
        <li>دجاجة كاملة</li>
        <li>أرز بسمتي</li>
        <li>بصل، طماطم، بهارات</li>
    </ul>

    <h2>طريقة التحضير</h2>
    <h3>الخطوة الأولى: تجهيز الدجاج</h3>
    <p>نقطع الدجاج ونغسله جيداً.</p>

    <h3>الخطوة الثانية: طبخ الأرز</h3>
    <p>نضيف الأرز بعد تحمير البصل والطماطم.</p>

    <h2>نصائح إضافية</h2>
    <p>للحصول على أفضل نكهة، استخدم بهارات طازجة.</p>

</body>
</html>

شفت كيف الترتيب؟

للعنوان الرئيسي،

للأقسام الرئيسية (المكونات، طريقة التحضير)، و

للخطوات الفرعية داخل طريقة التحضير.

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