شرح العناوين (Headings) في HTML وأهميتها لمحركات البحث والزوار
أهلاً بيكم يا شباب، يارب تكونوا بخير وفي أحسن حال. في درس النهاردة هنتكلم عن موضوع مهم جدًا لأي حد بيبدأ في إنشاء موقع إلكتروني باستخدام HTML، وهو العناوين أو الـ Headings.
إيه هي العناوين في HTML وليه بنستخدمها؟
العناوين في HTML بتستخدم علشان توضح هيكل الصفحة وتنظم المحتوى، سواء لمحركات البحث أو للزائر. يعني مثلًا، لما حد يدخل على موقعك، بيشوف أول حاجة العنوان الرئيسي، وبعدها العناوين الفرعية، وهكذا.
بالنسبة لمحركات البحث، العناوين بتساعدها إنها تفهم الموضوع الأساسي للصفحة، وتحدد إذا كانت الصفحة دي بتتكلم عن موضوع رئيسي ولا فرعي. يعني باختصار كده، العناوين بتأثر بشكل مباشر على فهرسة الصفحة وترتيبها في نتائج البحث.
أما الزائر، فالعناوين بتساعده إنه يتنقل بين أجزاء الصفحة بسهولة ويفهم محتواها بسرعة من غير ما يقرأ كل كلمة فيها.
ازاي نكتب العناوين في HTML؟
دلوقتي هنفتح محرر الأكواد (VS Code) ونبدأ نكتب كود HTML بسيط.
أول حاجة، زي ما اتعلمنا قبل كده، لازم نكتب الهيكل الأساسي لأي صفحة HTML، اللي بيشمل:
-
تعريف نوع المستند (
<!DOCTYPE html>) -
وسم
<html> -
وسم
<head>وفيه العنوان<title> -
وسم
<body>وده اللي بنكتب فيه المحتوى اللي بيظهر في المتصفح
في VS Code، فيه اختصار حلو جدًا بيوفر علينا كتابة الهيكل ده كله. كل اللي
علينا نعمله إننا نكتب علامة التعجب ! وندوس Enter،
وهيظهر قدامنا الهيكل كامل.
إضافة عنوان رئيسي باستخدام Heading Tags
علشان نضيف عنوان في الصفحة، بنستخدم الوسوم الخاصة بالعناوين في HTML، وهي:
-
<h1>: أكبر وأهم عنوان -
<h2>: عنوان فرعي من h1 -
<h3>: عنوان فرعي من h2 -
<h4>،<h5>،<h6>: عناوين فرعية بدرجات أقل من الأهمية
مثلًا:
<h1>ده عنوان رئيسي</h1>
<h2>ده عنوان فرعي</h2>
<h3>ده عنوان فرعي من h2</h3>كل عنصر من العناصر دي بيكون ليه حجم وتنسيق افتراضي مختلف، وده حسب المتصفح اللي بتستخدمه. ودي حاجة اسمها Default CSS Styling، يعني تنسيقات جاهزة العنوان بياخدها من المتصفح.
لو جينا فتحنا الموقع في المتصفح ودوّسنا كليك يمين > Inspect، هنشوف كل عنصر واخد تنسيقات CSS مختلفة تلقائيًا.
هل نستخدم العناوين بس علشان نخلي الخط كبير وغامق؟
لا طبعًا، ودي غلطة شائعة. العناوين في HTML مش معمولة علشان نكبر أو نغمّق النص. دي ليها وظيفة هيكلية، يعني علشان تنظم الصفحة وتدي معنى للنصوص، مش مجرد شكل.
لو انت عايز تكبر النص أو تغيّر لونه أو تخليه Bold، ساعتها هتستخدم CSS. وده إن شاء الله هنتعلمه بالتفصيل في كورس CSS الجاي.
مثال عملي من الصفحة
خلينا نكتب كود ونشوف الفرق بين كتابة نص عادي، وكتابة نفس النص داخل وسم
<h1>:
<p>ده نص عادي</p>
<h1>ده عنوان رئيسي</h1>لو فتحت الصفحة دي في المتصفح، هتلاحظ إن العنوان باين أكتر وكبير، لكن ده مش معناه إنك تستخدمه لتكبير أي نص، لأن كل وسم ليه معنى معين في الصفحة.
ترتيب استخدام العناوين
من الأفضل إنك تستخدم العناوين بالترتيب المنطقي:
-
استخدم
<h1>مرة واحدة في الصفحة، وده بيكون اسم الموقع أو عنوان المقال الرئيسي. -
بعد كده، استخدم
<h2>للعناوين الفرعية. -
ولو فيه تقسيمات جوه العنوان الفرعي، استخدم
<h3>وهكذا لحد<h6>.
ومثال على كده:
<h1>موقع تعليمي عن HTML</h1>
<h2>مقدمة</h2>
<p>هنا بنشرح مقدمة عن لغة HTML...</p>
<h2>أنواع العناصر في HTML</h2>
<h3>العناصر الهيكلية</h3>
<h3>عناصر التنسيق</h3>أهمية العناوين لمحركات البحث (SEO)
محركات البحث بتستخدم العناوين علشان تفهم هيكل الصفحة. مثلًا:
-
<h1>بتقول لجوجل "ده الموضوع الرئيسي" -
<h2>بتوضح الفروع الأساسية في الموضوع -
<h3>توضح عناصر تفصيلية أكتر وهكذا
يعني ترتيب العناوين الصح بيساعد جوجل والزائر يفهموا الصفحة أسرع.
استخدام الأدوات الذكية في المحرر
لو بتستخدم محرر Visual Studio Code، هتلاقي اختصارات حلوة جدًا بتسهل عليك كتابة الأكواد.
مثلًا:
-
لما تكتب
<h1>وبعدين تدوس Enter، بيقفل الوسم تلقائيًا ويكتب</h1> -
كمان لو عايز تكرر العنصر، ممكن تدوس
Alt + Shift + ↓وده بيكرر السطر كله.
فيه كمان إضافات زي "Auto Rename Tag" بتخلي لو غيرت وسم الفتح يتغير معاه وسم الإغلاق تلقائيًا.
خلاصة الدرس
-
العناوين في HTML مهمة جدًا لتنظيم الصفحة ولتحسين ترتيب موقعك في محركات البحث.
-
عندنا 6 مستويات من العناوين: من
<h1>لحد<h6>. -
لازم تستخدم العناوين بشكل منطقي ومرتب، مش علشان الشكل.
-
التنسيقات دي بتتغير بعد كده باستخدام CSS، اللي هنتعلمه في دروس لاحقة.
-
العناوين مش بس عشان تكبير النص، لكنها عناصر هيكلية بتساعدك في بناء صفحة منظمة.