الرئيسية | HTML

العناوين والفقرات في HTML: شرح h1 إلى h6 ووسم p

بعد أن تعرّفنا في الدرس السابق على بنية صفحة HTML وفهمنا دور وسوم html و head و body، ننتقل الآن إلى أهم عناصر المحتوى داخل الصفحة، وهي العناوين والفقرات. هذه العناصر هي أساس أي مقال أو صفحة ويب، ومن دونها لا يمكن تنظيم النص بشكل مفهوم للمستخدم ولا لمحركات البحث.

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

العناوين في HTML تُستخدم لتنظيم المحتوى وتقسيمه إلى أقسام واضحة. تمامًا مثل عناوين الكتب أو المقالات، فهي تساعد القارئ على فهم الموضوع بسرعة، كما تساعد محركات البحث على تحليل الصفحة. العناوين تُكتب باستخدام الوسوم h1 إلى h6.

الفرق بين h1 و h2 و h3

وسم h1 هو العنوان الرئيسي للصفحة، ويجب استخدامه مرة واحدة فقط في كل صفحة. غالبًا يكون هو عنوان المقال الذي يظهر في نتائج البحث. بعده يأتي h2 للعناوين الفرعية، ثم h3 للعناوين داخل القسم، وهكذا إلى h6. كلما زاد الرقم، كلما قلّ حجم وأهمية العنوان.

مثال على استخدام العناوين

<h1> تعلم HTML من الصفر </h1>
<h2> ما هي HTML؟ </h3>
<h2> تعريف HTML ؟  </h3>

هذا التنظيم يجعل الصفحة واضحة وسهلة القراءة، كما أنه مهم جدًا لتحسين SEO.

أهمية العناوين لمحركات البحث

محركات البحث مثل Google تعتمد على العناوين لفهم محتوى الصفحة. عندما تستخدم العناوين بشكل صحيح، فأنت تساعد محرك البحث على معرفة أهم الأفكار في المقال. لهذا السبب يُنصح دائمًا باستعمال h1 واحد فقط، وترتيب باقي العناوين بشكل منطقي.

ما هو وسم p؟

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

مثال على الفقرات

<p>HTML هي لغة ترميز تُستخدم لإنشاء صفحات الويب.</p>
<p>تُعتبر الخطوة الأولى في تعلم تطوير المواقع.</p>

كل فقرة تكون مستقلة عن الأخرى، وهذا يسهل قراءة المقال خصوصًا على الهاتف.

أخطاء شائعة عند استخدام العناوين

من الأخطاء الشائعة استخدام أكثر من h1 في الصفحة، أو القفز من h1 مباشرة إلى h4، أو استعمال العناوين فقط لتكبير الخط. هذه الأخطاء تؤثر سلبًا على ترتيب الموقع في نتائج البحث. العناوين يجب أن تُستخدم للتنظيم وليس للتنسيق.

العلاقة بين HTML و CSS في العناوين

HTML مسؤولة عن بنية المحتوى، بينما CSS مسؤولة عن الشكل. يمكنك تغيير حجم أو لون العناوين باستخدام CSS، لكن لا يجب استخدام العناوين بدل CSS. لكل لغة دورها، واحترام هذا التقسيم يجعل الكود نظيفًا واحترافيًا.

خلاصة

العناوين والفقرات هي العمود الفقري لأي صفحة HTML. باستعمال h1 إلى h6 بشكل صحيح، ووسم p للفقرات، ستتمكن من إنشاء محتوى منظم، سهل القراءة، ومحبوب من طرف محركات البحث. في الدرس القادم سنتعرف على الروابط والصور في HTML وكيفية استعمالها بطريقة صحيحة.

⬅️ العودة إلى الصفحة الرئيسية | الـتالي ←