HTML Headings
عناوين صفحة HTML
سنتعلم في هذا الدرس أول العناصر المرئية التي تظهر للمستخدمين في صفحة الويب [وتحديدًا داخل عنصر body]، وهي عناصر العناوين "HTML heading elements"، والتي تحدد العنوان الرئيسي للصفحة والعناوين الفرعية لها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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>
ملاحظة
</>
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>
ملاحظة
</>
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.
ملاحظة
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنتHeading level one
عنوان مستوي أولHeading level Two
عنوان مستوي ثانيHeading level Three
عنوان مستوي ثالثHeading level Four
عنوان مستوي رابعHeading level Five
عنوان مستوي خامسHeading level Six
عنوان مستوي سادسSearch Engine Optimization
تحسين محركات البحث
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
