HTML

HTML Headings
عناوين صفحة HTML

سنتعلم في هذا الدرس أول العناصر المرئية التي تظهر للمستخدمين في صفحة الويب [وتحديدًا داخل عنصر body]، وهي عناصر العناوين "HTML heading elements"، والتي تحدد العنوان الرئيسي للصفحة والعناوين الفرعية لها.

التاريخ

25 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

4487

المواضيع

12
الشروحات chevron_left HTML Headings chevron_left HTML

HTML Headings
عناوين صفحة HTML

</> HTML Headings
عناوين صفحة HTML

لكل صفحة ويب عنوان رئيسي واحد فقط وهو أكبر عنصر في الصفحة، ولكن لا يعني ذلك أنه الأكبر من حيث الحجم وإنما العنوان الرئيسي هو الأكثر أهمية.
 أكبر عنوان في الصفحة هو مستوى أول "level 1"، حيث يوجد في لغة HTML ست مستويات للعناوين، يتفرع كل مستوى منها عن المستوى الذي يسبقه أي أن: h2 يتفرع عن h1 وh3 يتفرع عن h2، وهكذا...

العنوان الرئيسي لصفحة HTML:

  • هو أكبر عنوان في الصفحة، وهو المستوى الأول في العناوين.
  • يكون العنوان الرئيسي أول عنصر داخل صفحة HTML ويُكتب في عنصر body.
  • جميع عناصر عناوين صفحة HTML تبدأ بحرف h وذلك اختصار لكلمة عنوان "heading".
  • عدد مستويات العناوين 6 مستويات، تبدأ من h1 وتنتهي بـ h6.
  • العناوين "headings" من نوع العناصر المُتداخلة" nested elements".
ملاحظة
  • HTML headings هي عناصر تستخدم إذا كنت بحاجة لوضع عناوين رئيسية أو فرعية في صفحة الويب. حيث يمكنك استخدم العناصر headings من h1 إلى h6 حسب أهمية العنوان.
  • HTML headings عناصر العناوين مختلفة تمامًا عن عنصر head -الذي يسبق عنصر body-، فلاحظ كيف تختلف حروف وكتابة عنصر <head> عن حروف وكتابة عنصر <h1>.

</> "HTML main heading element "h1
عنصر العنوان الرئيسي "h1" في لغة HTML

يصف عنصر h1 العنوان الرئيسي لصفحة الويب، وهو عنصر بالغ الأهمية لأنه المسؤول عن جذب الزوار إلى موقعك لتكملة قراءة محتوى صفحة الويب.

أين يُكتب عنصر العنوان الرئيسي <h1>؟

  • يُكتب دائمًا في عنصر body أو الـ body element.
  • ليس من الضروري أن يكون عنصر <h1> هو العنصر الأول المكتوب داخل عنصر body أو الـ body element فمن الممكن أن يسبقه عناصر أخرى.


وظيفة عنصر <h1>:

  • إنشاء عنوان رئيسي لصفحة الويب HTML؛ لكي يُحدد الزائر ما إذا كان هذا الموضوع مهم بالنسبة له أم لا.
  • يعد العنصر <h1> مكونًا أساسيًا لأي صفحة ويب، حيث إنه لا يحدد العنوان الرئيسي للصفحة فحسب، بل يؤثر أيضًا على مظهرها وإمكانية اكتشافها في محركات البحث.




استخدام عنصر h1 بطريقة صحيحة:
لكي تستخدم عنصر العنوان الرئيسي "h1" في صفحة الويب بطريقة صحيحة عليك مراعاة الأمور التالية:

  • يجب استخدام عنصر واحد h1 فقط في صفحة HTML.
  • إذا كان لديك أكثر من عنوان رئيسي داخل صفحة الويب، قم بوضعهم على شكل عنصرين <h2> مُتفرعين عن <h1>.
  • لا تستخدم h1 لتكبر أحجام النصوص، فليس الهدف من ترقيم العناوين هو تكبير حجم النصوص بل الهدف زيادة الأهمية.
  • استخدم دومًا تسلسل العناوين بدءًا من h1 ثم h2 ثم h3 ثم h4 ثم h5 ثم 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"، داخل عنصر <h1> واحد فقط.

Use multiple h1

لا يمكن تكرار عنصر <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-h2-h3-h4-h5-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>
ملاحظة
يضع المتصفح تلقائيًا كل عنصر من عناصر العناوين "heading" على سطر جديد، كما يمكن التحكم بطريقة عرضهم وتغييرها باستخدام لغة CSS.

</> HTML heading navigation
التنقل بين العناوين الرئيسية والعناوين الفرعية في لغة HTML

من تقنيات التنقل الشائعة بين مستخدمي العناوين "headings" هو القفز من عنوان إلى عنوان آخر؛ لتحديد محتوى الصفحة وتحديد العناصر الرئيسية والفرعية.

لهذا السبب، من المهم عدم تخطي أي مستوى من مستويات العناوين.

فقد يؤدي القيام بذلك إلى حدوث ارتباك عند المستخدم، وجعله يتساءل عن مكان العنوان المفقود عند قراءة محتوى صفحة الويب، لذلك يجب أن نلتزم بالترتيب في العناوين.

Using h1 then h3 then h4

يجب عدم تخطي الترتيب في العناوين أي عدم القفز عند التنقل بين مستويات العناوين الرئيسية والفرعية.

<h1>Heading 1</h1>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
Use heading by levels

الطريقة الصحية هي عدم تخطي الترتيب في العناوين، حيث يجب أي تكون العناوين متسلسلة ومتتالية في HTML.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
Nested Headings

الطريقة الصحيحة لترتيب العناوين وترتيب تداخلهم وتفرعهم، تكون على الشكل التالي:

<h1>FullStck Web Development Course</h1>
    <h2>Front-End</h2>
        <h3>INTERNET</h3>
        <h3>HTML5</h3>
            <h4>HTML Headings</h4>
            <h4>HTML Paragraphs</h4>
        <h3>CSS3</h3>
        <h3>JavaScript</h3>
        <h3>JQUERY</h3>
        <h3>BOOTSTRAP</h3>
        <h3>ANGULAR</h3>
    <h2>Back-End</h2>
        <h3>PHP</h3>
            <h4>PHP SYNTAX</h4>
            <h4>PHP ECHO</h4>
        <h3>MYSQL</h3>
        <h3>Laravel</h3>

</> (SEO) Headings and Search Engine Optimization
العناوين وتحسين المواقع في محركات البحث

تؤثر العناوين على ترتيب الموقع في محركات البحث بشكل كبير. حيث تعتبر من أهم الأمور التي تساهم في تحسين ترتيبه وظهوره.


يجب مراعاة النقاط التالية لتحسين ترتيب موقعك في محركات البحث:

  • يجب استخدام عنوان رئيسي h1 لكل صفحة من صفحات الموقع؛ لكي تتعرف محركات البحث على المحتوى وتقارنه مع ما يبحث عنه مستخدمي هذه المحركات.
  • تتعرف محركات البحث على أي صفحة ويب من خلال العناوين "headings"؛ لذلك فعناصر العناوين مهمة جدًا من أجل أرشفة صفحات الويب في محركات البحث.
  • يتم عرض صفحات موقعك في المحركات، ويصل موقعك لكل شخص مهتم بالمحتوى الذي تقدمه، إذا كُنت تراعي الاستخدام الصحيح لعدّة أشياء، والتي منها عناصر الـheadings.
  • الأهمية تكون لعنصر h1 ثم h2 ثم h3 وهكذا حتى h6.
ملاحظة
يجب اختيار عنوان رئيسي له علاقة بمحتوى الصفحة دون خداع الزوار والمستخدمين، وذلك لأن محركات البحث لا تقوم بتحسين صفحات الويب التي تخدع الزوار ولن تجعلها في مقدمة النتائج البحثية.
مصطلحات الدرس
HTML Headings
HTML Headings

عناوين HTML

Headings
Headings

عناوين

Nested Element
Nested Element

عنصر متداخل

Tag Name
Tag Name

اسم العلامة

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
h1
h1

Heading level one

عنوان مستوي أول
h2
h2

Heading level Two

عنوان مستوي ثاني
h3
h3

Heading level Three

عنوان مستوي ثالث
h4
h4

Heading level Four

عنوان مستوي رابع
h5
h5

Heading level Five

عنوان مستوي خامس
h6
h6

Heading level Six

عنوان مستوي سادس
SEO
SEO

Search Engine Optimization

تحسين محركات البحث
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.