فهم تخطيط HTML والعناصر المتعلقة

العناصر المخططة (Layout Elements)

العناصر المخططة هي جزء من HTML5 وهي تعطي المطورين طريقة أكثر وضوحًا لتحديد أجزاء مختلفة من صفحة الويب. يمكنك استخدام هذه العناصر لتحديد الرأس (header)، والقائمة (nav)، والأقسام الرئيسية (section)، والمقالات (article)، والعناصر الجانبية (aside)، والتذييل (footer)، وغيرها. ببساطة، تعتبر العناصر المخططة هي الأساس الذي يمكنك من تنظيم وتحديد مكان الأجزاء المختلفة من محتوى صفحة الويب.

أمثلة على العناصر المخططة في HTML5 تشمل:

• <header>: يستخدم لتحديد الرأس للمستند أو القسم.
• <nav>: يستخدم لتحديد قسم التنقل في الموقع.
• <section>: يستخدم لتحديد قسم في المستند.
• <article>: يستخدم لتحديد المحتوى الذي يمكن أن يكون مستقلاً عن بقية المحتوى في الموقع.
• <aside>: يستخدم لتحديد المحتوى الذي يكون جانبيًا للمحتوى الرئيسي.
• <footer>: يستخدم لتحديد تذييل المستند أو القسم.
• <details>: يستخدم لتحديد التفاصيل التي يمكن للمستخدم عرضها أو إخفائها.
• <summary>: يستخدم لتحديد العنوان القابل للتوسع / القابل للطي للعنصر <details>.
• <figure>: يستخدم لتحديد المحتوى ذات الصلة، مثل الرسومات أو الرسوم البيانية أو الصور أو الأكواد، الخ.
• <main>: يستخدم لتحديد المحتوى الرئيسي في المستند.

في الأقسام التالية، سنناقش كل من هذه العناصر بشكل تفصيلي.

الوسم <header>

يعتبر الوسم <header> (Header) واحدًا من عناصر HTML التي تم تقديمها في HTML5 ويُستخدم لتحديد الرأس لصفحة الويب أو القسم. يمكن أن يحتوي هذا الرأس على عناوين ووصلات للتنقل وغيرها من العناصر التي تشترك في توفير معلومات أولية أو توجيهية.

بشكل عام، يكون الرأس هو المكان الذي تُعرض فيه معلومات مثل اسم الشركة والشعار والقوائم الرئيسية للموقع.

مثال على كيفية استخدام الوسم <header>:

<header>
   <h1>العنوان الرئيسي للموقع</h1>
   <nav>
      <ul>
         <li><a href="#home">الرئيسية</a></li>
         <li><a href="#about">عنا</a></li>
         <li><a href="#contact">تواصل معنا</a></li>
      </ul>
   </nav>
</header>

في المثال أعلاه، يتم استخدام الوسم <header> لتحديد الرأس الرئيسي للصفحة، الذي يحتوي على العنوان الرئيسي (باستخدام وسم <h1>) ووسم التنقل <nav> الذي يحتوي على الروابط للقسم الرئيسي في الموقع.

الوسم <nav>

الوسم <nav> (Navigation) هو وسم HTML يُستخدم لتحديد قسم من صفحة الويب يحتوي على روابط التنقل الرئيسية. يمكن أن تتضمن هذه الروابط الروابط الأساسية للموقع، مثل الصفحة الرئيسية، صفحة الاتصال، الأخبار، الأسئلة الشائعة، وغيرها.

الهدف الرئيسي لوسم <nav> هو توفير روابط سهلة الوصول للمستخدمين للانتقال بين صفحات الموقع.

مثال على كيفية استخدام الوسم <nav>:

<nav>
  <ul>
    <li><a href="#home">الرئيسية</a></li>
    <li><a href="#about">عنا</a></li>
    <li><a href="#services">خدماتنا</a></li>
    <li><a href="#contact">تواصل معنا</a></li>
  </ul>
</nav>

في المثال أعلاه، يتم استخدام الوسم <nav> لتحديد قائمة من الروابط التي تنقل المستخدم إلى القسم المرغوب في الموقع. يتم استخدام القائمة <ul> والقائمة الفرعية <li> لتنظيم الروابط، والوسم <a> لتحديد الروابط نفسها.

الوسم <section>

الوسم <section> (Section) هو وسم HTML يُستخدم لتحديد قسم معين في المحتوى. يجب أن يحتوي كل وسم <section> على عنوان.

يمكن استخدامه لتجميع المعلومات ذات الصلة تحت عنوان واحد، مثل فصل في كتاب أو قسم من صفحة الويب. لاحظ أنه ينبغي استخدام الوسم <section> فقط عندما يكون هناك عنوان يصف المحتوى الذي يتم تجميعه.

مثال على كيفية استخدام الوسم <section>:

<section>
   <h2>الفصل الأول</h2>
   <p>هذا النص هو جزء من الفصل الأول.</p>
</section>

<section>
   <h2>الفصل الثاني</h2>
   <p>هذا النص هو جزء من الفصل الثاني.</p>
</section>

في المثال أعلاه، يتم استخدام الوسم <section> لتحديد قسمين من المحتوى، كل منهما يحتوي على عنوان معين (باستخدام الوسم <h2>) وفقرة من النص (باستخدام الوسم <p>).

الوسم <article>

الوسم <article> هو وسم HTML يُستخدم لتحديد قسم مستقل في المستند، ويجب أن يكون يمكن فهمه بشكل مستقل عن بقية الموقع. هذا يمكن أن يكون مقال في صحيفة، مدونة أو منتدى، تعليق من المستخدم، أو أي محتوى مستقل آخر.

في حالة صفحات الويب التي تحتوي على عدة عناصر HTML <article>، يجب أن يكون كل وسم <article> متميزاً ومستقلاً عن الآخرين.

مثال على كيفية استخدام الوسم <article>:

<article>
  <h2>العنوان الرئيسي للمقالة</h2>
  <p>هذا هو الفقرة الأولى من المقالة.</p>
  <p>وهذه هي الفقرة الثانية.</p>
</article>

في المثال أعلاه، يتم استخدام الوسم <article> لتحديد قسم من المحتوى يتكون من عنوان (باستخدام الوسم <h2>) واثنتين من الفقرات (باستخدام الوسم <p>).

الوسم <aside>

الوسم <aside> هو وسم HTML يُستخدم لتحديد المحتوى الذي يتم وضعه جانبًا من المحتوى الرئيسي ويمثل المعلومات التكميلية. إنه يعمل كمربع جانبي للمحتوى الرئيسي ويمكن أن يكون غير ضروري بالنسبة لفهم المحتوى الرئيسي.

المحتوى الذي يُوضع في الوسم <aside> يمكن أن يكون متعلقًا بالمحتوى الرئيسي، لكنه يمكن قراءته بشكل منفصل. في حالة استخدامه داخل الوسم <article>, يجب أن يكون المحتوى ذو صلة بالمحتوى المحيط به.

مثال على كيفية استخدام الوسم <aside>:

<article>
  <h2>العنوان الرئيسي للمقالة</h2>
  <p>هذا هو الفقرة الأولى من المقالة.</p>
  <p>وهذه هي الفقرة الثانية.</p>
</article>

<aside>
  <h3>معلومات إضافية</h3>
  <p>هذا هو مربع جانبي يحتوي على معلومات إضافية ذات صلة بالمقالة.</p>
</aside>

في المثال أعلاه، يتم استخدام الوسم <aside> لتحديد مربع جانبي يحتوي على معلومات تكميلية للمقالة.

الوسم <footer>

الوسم <footer> هو وسم HTML يُستخدم لتحديد القسم السفلي أو “تذييل الصفحة” من المستند أو قسم من المستند. يمكن أن يحتوي على معلومات مثل المؤلف، حقوق النشر، الروابط إلى الشروط والأحكام، روابط المعلومات الأساسية، والمزيد.

يمكن استخدام الوسم <footer> أكثر من مرة في الصفحة الواحدة، بناءً على الحاجة والمحتوى الذي يجب عرضه.

مثال على كيفية استخدام الوسم <footer>:

<footer>
  <p>حقوق النشر © 2023. جميع الحقوق محفوظة.</p>
</footer>

في المثال أعلاه، يتم استخدام الوسم <footer> لتحديد تذييل الصفحة الذي يحتوي على بيان حقوق النشر.

الوسم <details>

الوسم <details> في HTML يُستخدم لإنشاء عنصر يحتوي على المعلومات التي يمكن أن يراها المستخدم أو يخفيها حسب الحاجة. هذا الوسم يتيح إمكانية الكشف عن التفاصيل أو إخفائها بنقرة واحدة.

هذا الوسم يتضمن عنصر <summary> الذي يحدد العنوان المرئي للعنصر <details>. النص الذي يتم كتابته داخل الوسم <details> (ولكن خارج الوسم <summary>) سيكون مخفيا حتى يقوم المستخدم بالنقر على العنوان.

مثال على كيفية استخدام الوسم <details>:

<details>
  <summary>معلومات إضافية</summary>
  <p>هنا يمكنك وضع المعلومات التفصيلية التي يمكن للمستخدمين الاطلاع عليها إذا اختاروا القيام بذلك.</p>
</details>

في المثال أعلاه، يتم استخدام الوسم <details> لإنشاء عنصر يحتوي على معلومات إضافية. بشكل افتراضي، ستكون هذه المعلومات مخفية ولكن يمكن للمستخدم الكشف عنها بالنقر على العنوان “معلومات إضافية”.

الوسم <summary>

الوسم <summary> هو وسم HTML يُستخدم بالتعاون مع الوسم <details> لتحديد العنوان المرئي للمحتوى الذي يمكن توسيعه وتقليصه في الوسم <details>.

يجب أن يكون هذا الوسم داخل الوسم <details>, والمحتوى الذي يتم كتابته داخل الوسم <summary> هو الذي يظهر كعنوان للمحتوى القابل للتوسيع والتقليص.

مثال على كيفية استخدام الوسم <summary>:

<details>
  <summary>عنوان المحتوى</summary>
  <p>هذا هو المحتوى الذي يمكن أن يتم توسيعه وتقليصه.</p>
</details>

في المثال أعلاه، يتم استخدام الوسم <summary> لتحديد “عنوان المحتوى” كعنوان للمحتوى الذي يمكن توسيعه وتقليصه في الوسم <details>.

الوسم <figure>

الوسم <figure> في HTML يُستخدم للإشارة إلى المحتوى الذي يكون ذو صلة بالمحتوى الرئيسي للصفحة، لكن يمكن فصله عن السياق الرئيسي بدون فقدان تدفق المعنى. يمكن أن يحتوي هذا الوسم على عدة عناصر مثل الصور، الرسوم البيانية، الرسوم الكاريكاتورية، الأكواد، إلخ.

الوسم <figure> يمكن أن يتضمن أيضا وسم <figcaption> الذي يوفر الشرح أو التعليق على العناصر الموجودة في الوسم <figure>.

مثال على كيفية استخدام الوسم <figure>:

<figure>
  <img src="image.jpg" alt="صورة جميلة">
  <figcaption>هذه هي الشرح للصورة المذهلة أعلاه.</figcaption>
</figure>

في المثال أعلاه، يتم استخدام الوسم <figure> للإشارة إلى عنصر الصورة وشرحه. هذا العنصر يمكن فصله عن المحتوى الرئيسي للصفحة بدون فقدان تدفق المعنى.

الوسم <main>

الوسم <main> في HTML يُستخدم للإشارة إلى المحتوى الرئيسي للوثيقة أو التطبيق. يجب أن يكون هذا الوسم فريدًا ولا يجب أن يظهر أكثر من مرة في الصفحة. يجب أن يحتوي على المحتوى الذي يتعلق بالموضوع الرئيسي للصفحة أو ما تتعامل معه الصفحة.

المحتوى الذي يتضمنه الوسم <main> يجب أن يكون فريدًا ولا ينبغي تضمينه في أي جزء آخر من الموقع، مثل الشريط الجانبي، الرأس، التذييل، أو أي مناطق التنقل.

مثال على كيفية استخدام الوسم <main>:

<main>
  <h1>العنوان الرئيسي للصفحة</h1>
  <p>هذا هو المحتوى الرئيسي للصفحة. ينبغي أن يكون فريدًا ومميزًا بالنسبة لهذه الصفحة.</p>
</main>

في المثال أعلاه، يتم استخدام الوسم <main> لتحديد المحتوى الرئيسي للصفحة. هذا المحتوى هو المحتوى الفريد الذي يتعلق بالموضوع الرئيسي للصفحة.

الخاتمة

معرفة كيفية استخدام العناصر التخطيطية في HTML مثل <header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>, <figure>, و <main> هو جزء أساسي من تصميم صفحات الويب. كل من هذه العناصر لديها دور معين في تحديد البنية العامة للصفحة وتنظيم المحتوى بطريقة منطقية ومتسقة.

تعلم البناء السليم لتخطيط HTML يمكن أن يجعل عملية تصميم موقع الويب أسهل بكثير وأكثر كفاءة، ويمكن أن يضمن أيضاً أن صفحات الويب الخاصة بك متوافقة مع معايير الويب الحالية وأنها سهلة الوصول لجميع الأشخاص، بغض النظر عن الأجهزة التي يستخدمونها لتصفح الإنترنت.

الأسئلة المتكررة (FAQ)