HTML Headings
عناوين صفحة HTML
سنتعلم في هذا الدرس أول العناصر المرئية التي تظهر للمستخدمين في صفحة الويب [وتحديدًا داخل عنصر body]، وهي عناصر العناوين [HTML headings elements]، والتي تحدد العنوان الرئيسي للصفحة والعناوين الفرعية لها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Headings
عناوين صفحة HTML
</>
HTML Headings
عناوين صفحة HTML
العنوان الرئيسي [1 Heading] لصفحة HTML:
- هو أكبر عنوان في الصفحة من حيث الأهمية، ويمثل المستوى الأول من العناوين.
- يكون العنوان الرئيسي أول عنصر داخل صفحة HTML ويُكتب في عنصر <body>.
- تبدأ جميع عناصر العناوين في HTML بالحرف [h]، وهو اختصار لكلمة [heading].
- تتكون العناوين من ستة مستويات للعناوين، تبدأ من <h1> وتنتهي بـ <h6>.
- تُعد العناوين [headings] من العناصر المتداخلة [nested elements].
ملاحظة
- تُستخدم عناصر العنوان في HTML عندما تحتاج إلى إضافة عناوين رئيسية أو فرعية في صفحة الويب، حيث يمكن استخدام العناصر من <h1> إلى <h6> وفقًا لأهمية العنوان.
- تختلف عناصر العناوين في HTML عن عنصر <head>، الذي يسبق عنصر <body>. لاحظ الاختلاف في تركيب وكتابة العنصر <head> مقارنة مع <h1>.
</>
HTML Main Heading Element h1
عنصر العنوان الرئيسي h1 في لغة HTML
يصف عنصر <h1> العنوان الرئيسي لصفحة الويب، وهو عنصر بالغ الأهمية، حيث يُعتبر مسؤولًا عن جذب الزوار لموقعك والاستمرار في قراءة محتوى صفحة الويب. يعد استخدامه بشكل صحيح مهمًا لتحسين تجربة المستخدم وتعزيز ترتيب الموقع في محركات البحث.
أين يُكتب عنصر العنوان الرئيسي <h1>؟
يُكتب دائمًا داخل عنصر <body>. ليس من الضروري أن يكون <h1> هو أول عنصر مكتوب داخل <body>, حيث يمكن أن يسبقه عناصر أخرى.
وظيفة عنصر <h1>:
- إنشاء عنوان رئيسي لصفحة الويب HTML بحيث يُساعد الزائر في تحديد مدى أهمية الموضوع بالنسبة له.
- يُعتبر <h1> مكونًا أساسيًا لأي صفحة ويب، فهو لا يحدد العنوان الرئيسي للصفحة فحسب، بل يؤثر أيضًا على مظهرها وإمكانية اكتشافها في محركات البحث.
الاستخدام الصحيح لعنصر <h1>:
لكي تستخدم عنصر العنوان الرئيسي <h1> في صفحة الويب بطريقة صحيحة، عليك مراعاة الأمور التالية:
- يجب استخدام عنصر <h1> واحد فقط في صفحة HTML.
- إذا كان لديك أكثر من عنوان رئيسي داخل صفحة الويب، استخدم عناصر <h2> لتكون متفرعة من <h1>.
- لا تستخدم <h1> فقط لزيادة حجم النصوص؛ الهدف من تنظيم العناوين هو توضيح الأهمية والتسلسل الهرمي للمحتوى.
- استخدم دومًا تسلسل العناوين بدءًا من <h1> ثم <h2> ثم <h3> وصولًا إلى <h6>.
- إذا كان هناك عناوين متفرعة من <h1>, استخدم <h2>, وإذا كان هناك عناوين متفرعة من <h2>, استخدم <h3>, وهكذا.
Heading level 1 syntax
العنوان الرئيسي في صفحة HTML يُعبّر عن أعلى مستوى من الأولوية، ويُحدد باستخدام علامة <h1>. يكون أول ما يلاحظه الزائر عند زيارة الصفحة.
<h1>CloseTag HTML Headings</h1>
هام
- ليس الهدف من استخدام العناوين الكبيرة والصغيرة هو التحكم في حجم الخط، بل هو تحديد مستوى الأهمية. لذلك، يجب ألا يُستخدم وسم <h1> لتغيير أو تكبير حجم الخط.
- لا يمكن أن تحتوي صفحة HTML أو صفحة الويب على أكثر من عنوان رئيسي واحد؛ أي أن وسم <h1> لا ينبغي أن يتكرر في صفحة الويب أكثر من مرة.
</>
Multiple h1 Elements In One HTML Page
تعدد عناصر h1 في صفحة HTML واحدة
لا يمكن استخدام أكثر من عنوان رئيسي <h1> في نفس الصفحة، حيث تتطلب قواعد HTML أن يكون هناك عنصر <h1> واحد فقط في صفحة الويب. يمكن إضافة عناصر أخرى داخل هذا العنصر بطريقة العناصر المتداخلة [nested elements]، ولكن يجب أن يكون هناك عنوان رئيسي واحد فقط.
Use Multiple h1
تجنب تكرار عنصر <h1> في صفحة الويب لأن ذلك يؤثر سلبًا على تحسين محركات البحث وتجربة المستخدم، لذلك، تجنب كتابة أكثر من عنصر <h1> في نفس صفحة الويب.
<h1>HTML5 Course </h1> <h1>CloseTag HTML Headings</h1>
Use More Than Main Heading In The Web Page
لعمل أكثر من عنوان رئيسي في صفحة الويب، يمكنك استخدام أي عنصر بداخل عنصر h1، لكن تأكد أن يكون عنصر h1 واحد فقط في الصفحة.
<h1>
<h2>HTML5 Course </h2>
<h2>CloseTag HTML Headings</h2>
</h1>
ملاحظة
استخدم عنصر <h1> مرة واحدة فقط للعنوان الرئيسي للصفحة. إذا كنت تحتاج إلى عناوين رئيسية إضافية، فاستخدم عناصر أخرى مثل <h2> للعناوين الفرعية.
</>
HTML Heading Elements
عناصر العناوين في لغة HTML
تبدأ عناصر العناوين من <h1> وتنتهي بـ <h6>، حيث يدل كل رقم على مستوى الأهمية والدرجة الهرمية للعناوين. فمثلًا، العنصر <h1> هو العنوان الرئيسي، يليه <h2> و<h3> كوحدات فرعية، وهكذا حتى <h6>.
Headings
يمكن استخدام عناصر العناوين [<h1> إلى <h6>] في لغة HTML لتحديد مستويات مختلفة من الأهمية للعناوين.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
ملاحظة
يضع المتصفح تلقائيًا كل عنصر من عناصر العناوين [headings] على سطر جديد، كما يمكن التحكم بطريقة عرضهم وتغييرها باستخدام لغة CSS.
</>
[SEO] Headings And Search Engine Optimization
العناوين وتحسين المواقع في محركات البحث
تؤثر العناوين بشكل كبير على ترتيب الموقع في محركات البحث، حيث تعتبر من أهم العوامل التي تساهم في تحسين ظهوره وتقدمه في النتائج.
لتحسين ترتيب موقعك في محركات البحث، يُنصح بمراعاة النقاط التالية:
- استخدام عنوان رئيسي واحد <h1> لكل صفحة من صفحات الموقع؛ ليساعد محركات البحث في التعرف على المحتوى وتحليل مدى مطابقته لطلبات البحث.
- تعتبر محركات البحث العناوين [headings] عنصرًا أساسيًا في فهرسة صفحات الويب، لذا فهي مهمة جدًا من أجل أرشفة صفحات الويب في محركات البحث.
- سيتم عرض صفحات موقعك في المحركات بشكل أفضل عندما تراعي الاستخدام الصحيح لمجموعة من العناصر، منها عناصر العناوين [headings].
- تترتب الأهمية بشكل هرمي من <h1>, ثم <h2>, يتبعها <h3>, وهكذا وصولًا إلى <h6>.
ملاحظة
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
