العناوين والفقرات وتنسيق النص — أساسيات HTML

العناوين والفقرات وتنسيق النص

العناوين h1 إلى h6

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

<h1>دليل الطبخ</h1>
<h2>المقبلات</h2>
<h3>الحمص</h3>
<h3>المتبل</h3>
<h2>الأطباق الرئيسية</h2>

قواعد مهمة:

- <h1> واحد يصف موضوع الصفحة.

- لا تقفز مستويات: بعد h2 يأتي h3 لا h5. قارئات الشاشة يستخدمها المكفوفون للتنقل بين العناوين، ومحركات البحث تفهم الصفحة منها.

- لا تستخدم العنوان لتكبير الخط. الحجم من مسؤولية CSS؛ العنوان يعني "هذا عنوان قسم".

الفقرات والمسافات

<p>هذه فقرة.     المسافات   المتعددة
تُختصر إلى مسافة واحدة، وكذلك أسطر الكود الجديدة.</p>
<p>سطر أول<br>سطر ثانٍ في نفس الفقرة</p>

- المتصفح يختصر المسافات والأسطر الجديدة إلى مسافة واحدة.

-   سطر جديد داخل نفس الفقرة (عنوان بريدي، أبيات شعر). لا تستخدمه لإضافة مسافات بين الفقرات — هذا عمل CSS.

- <hr> فاصل موضوعي بين أجزاء المحتوى.

التأكيد: strong و em

<p><strong>تحذير:</strong> لا تشارك كلمة المرور.</p>
<p>أنا <em>حقاً</em> أحب البرمجة.</p>

| العنصر | المعنى | المظهر الافتراضي |

|---|---|---|

|  | أهمية قوية | عريض |

|  | تشديد في النطق | مائل |

|  /  | مظهر فقط بلا معنى إضافي | عريض / مائل |

|  | نص مميّز (كالقلم الفسفوري) | خلفية صفراء |

|  | ملاحظة جانبية (حقوق، شروط) | خط أصغر |

اختر العنصر حسب المعنى، لا حسب الشكل.

الاقتباس والكود

<blockquote cite="https://example.com/source">
    <p>البساطة هي أقصى درجات التطور.</p>
</blockquote>
<p>اكتب الأمر <code>git status</code> في الطرفية.</p>
<pre><code>function hello() {
    console.log("مرحباً");
}</code></pre>

- <blockquote> اقتباس كتلة، و <q> اقتباس قصير داخل السطر.

- <code> كود داخل السطر.

- <pre> يحافظ على المسافات والأسطر كما هي — مثالي لعرض الكود.

الرموز الخاصة (Entities)

تمرين

اكتب صفحة "وصفة" بعنوان h1 لاسم الطبق، وh2 لـ"المكونات" و"الطريقة"، مع ملاحظة مهمة بـ strong، وتعليق HTML يذكر مصدر الوصفة. تحقق أن مستويات العناوين متسلسلة.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>وصفة الحمص</title>
</head>
<body>
    <h1>وصفة الحمص</h1>
    <p>طبق شامي <em>سهل</em> ولذيذ، يكفي <strong>4 أشخاص</strong>.</p>

    <h2>المكونات</h2>
    <p>كوب حمص مسلوق<br>ربع كوب طحينة<br>عصير ليمونة</p>

    <h2>الطريقة</h2>
    <p>اخلط المكونات حتى يصبح القوام ناعماً.</p>
    <p><strong>ملاحظة:</strong> أضف الماء البارد تدريجياً.</p>

    <hr>
    <blockquote>
        <p>الطبخ فن، والمكونات الجيدة نصف النجاح.</p>
    </blockquote>
    <!-- المصدر: مطبخ العائلة -->
    <p><small>&copy; 2026 مطبخ Kodax</small></p>
</body>
</html>

اختبر فهمك

العناوين والفقرات وتنسيق النص — أساسيات HTML