انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: عناوين صفحة HTML

HTML Headings Navigation التنقل بين العناوين الرئيسية والعناوين الفرعية في لغة HTML

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

1 صفوف تعليمية
لغة HTML
11,427 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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

عدم تخطي المستويات يخص الانتقال إلى قسم أعمق؛ يمكن الرجوع من h4 إلى h2 عند بدء قسم رئيسي تالٍ.

Using h1 Then h3 Then h4

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

HTML 
<h1>Heading 1</h1>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Use Heading By Levels

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

HTML 
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
جرّب بنفسك

Nested Headings

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

HTML 
<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>
جرّب بنفسك

جميع فقرات هذا الدرس (عناوين صفحة HTML)