تعلّم HTML من الصفرالدرس 3 من 8
العناوين والفقرات وتنسيق النص في HTML
درس العناوين h1 إلى h6 والفقرات p، والنص العريض strong والمائل em، والسطر الجديد br، والاقتباس blockquote، والكود code، والترتيب الصحيح للعناوين.
النص هو قلب أي صفحة. في هذا الدرس تتعلم كيف ترتبه بعناوين وفقرات، وتبرز الكلمات المهمة.
العناوين: من h1 إلى h6
HTML فيها ستة مستويات للعناوين:
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
قواعد مهمة
- h1 واحد فقط في الصفحة: عنوانها الرئيسي.
- لا تقفز المستويات: بعد h2 يأتي h3، لا h5.
- لا تختر العنوان لحجمه: اختره لمعناه في الترتيب. الحجم تغيره CSS.
محركات البحث وقارئات الشاشة تفهم الصفحة من ترتيب عناوينها، مثل فهرس الكتاب.
الفقرات
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
<br> و<hr> من الوسوم الفارغة: لا محتوى لها ولا وسم إغلاق.
إبراز الكلمات
| الوسم | الاستخدام |
|---|---|
<strong> |
كلمة مهمة، تظهر عريضة |
<em> |
تأكيد في النطق، يظهر مائلًا |
<mark> |
نص مظلل |
<small> |
ملاحظة جانبية صغيرة |
<code> |
كود أو أمر داخل النص |
<kbd> |
مفتاح لوحة مفاتيح |
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
الاقتباس
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
الأسئلة الشائعة
كيف أكبّر الخط دون تغيير العنوان؟
بـ CSS، كما ستتعلم في دورة CSS. لا تستخدم h1 لمجرد تكبير الخط.
هل أستخدم br لعمل مسافات كبيرة؟
لا. المسافات بين العناصر مهمة CSS عبر margin.
الخلاصة
- h1 واحد للصفحة، والعناوين بترتيب منطقي دون قفز.
- p للفقرات، وbr لسطر جديد داخلها، وhr للفصل.
- strong وem لهما معنى، لا شكل فقط.