14 الفصل السادس: HTML5 المتقدم

الفصل السادس: HTML5 المتقدم

1. وسوم جديدة في HTML5

HTML5 قدم العديد من الوسوم الجديدة التي ساعدت في تحسين هيكل صفحات الويب وتجربة المستخدم. هذه الوسوم تُستخدم لتعريف الأقسام المختلفة للصفحة وتنظيم المحتوى بطريقة أكثر منطقية وسهلة الفهم لكل من المستخدمين ومحركات البحث.

سنتعرف في هذا الجزء على الوسوم الأساسية التي تم إضافتها في HTML5 مثل <article>, <section>, <nav>, و <footer>.

1.1. وسم <article>

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

مثال:

<article>
    <h2>عنوان المقال</h2>
    <p>هذا هو نص المقال الذي يتناول موضوع معين. يمكن أن يتضمن محتوى غني مثل النصوص، الصور، أو الفيديوهات.</p>
</article>

في هذا المثال:

• <article> يُستخدم لتحديد المقال أو الوحدة المستقلة التي يمكن عرضها أو إعادة نشرها.
• <h2> و <p> يحتويان على محتوى المقال.

1.2. وسم <section>

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

مثال:

<section>
    <h2>العنوان الرئيسي للقسم</h2>
    <p>هذا النص ينتمي إلى القسم الأول من المحتوى. يمكن أن يحتوي على تفاصيل ومعلومات متعلقة بهذا الموضوع المحدد.</p>
</section>

في هذا المثال:

• <section> يُستخدم لتقسيم الصفحة إلى قسم خاص به.
• يمكن استخدام <section> لعدة أغراض داخل الصفحة مثل تعريف الأقسام ذات الصلة بمحتوى معين.

1.3. وسم <nav>

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

مثال:

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

في هذا المثال:

• <nav> يُستخدم لتحديد قسم التنقل في الصفحة.
• يتم وضع <ul> و <li> و <a> داخل <nav> لإنشاء قائمة روابط للتنقل بين أقسام الصفحة أو الموقع.

1.4. وسم <footer>

• يُستخدم وسم <footer> لتحديد التذييل أو أسفل الصفحة. عادةً ما يحتوي <footer> على معلومات مثل حقوق الملكية، روابط إضافية، معلومات الاتصال، أو أي محتوى آخر يتم وضعه في أسفل الصفحة.
• يمكن أن يحتوي <footer> أيضًا على معلومات تتعلق بالكاتب أو مصدر المحتوى.

مثال:

<footer>
    <p>&copy; 2024 جميع الحقوق محفوظة.</p>
    <p><a href="#privacy-policy">سياسة الخصوصية</a></p>
</footer>

في هذا المثال:

• <footer> يحتوي على نص خاص بحقوق الملكية.
• يتضمن أيضًا رابطًا إلى صفحة سياسة الخصوصية.

ملخص الفصل السادس: وسوم جديدة في HTML5

في هذا الفصل تعلمنا عن بعض الوسوم الجديدة التي قدمها HTML5 والتي تهدف إلى تحسين هيكلية وتنظيم المحتوى على الويب:

1. <article>: لتحديد وحدة مستقلة من المحتوى مثل مقال أو منشور مدونة.
2. <section>: لتقسيم الصفحة إلى أقسام منطقية.
3. <nav>: لتحديد جزء التنقل أو الروابط الرئيسية في الصفحة.
4. <footer>: لتحديد التذييل أو أسفل الصفحة، والذي يحتوي عادةً على حقوق الملكية أو روابط إضافية.

هذه الوسوم تجعل HTML أكثر وضوحًا، قابلة للقراءة، وسهلة الفهم لمحركات البحث، مما يسهم في تحسين السيو (SEO) وتجربة المستخدم.

إذا كان لديك أي استفسار أو تريد مزيد من الأمثلة، لا تتردد في سؤالي! 😊