HTMLالوسم <aside>

تعريفه

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

معلومة تقنية

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

كما أنه بدون تغيير طريقة ظهور هذا الوسم بواسطة كود CSS فإن المحتوى الذي تضعه بداخله سيظهر على سطر جديد لا أكثر.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <aside>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإضافة وسم <aside> وضعنا فيه موضوع غير مرتبط بشكل مباشر بموضوع الصفحة الأساسي.

<article>
    <h1>Becomming a Web designer</h1>
    <p>First thing, you have to study how to think like a programmer,
    so you have to study something called Algorithms. Then you should
    learn HTML, CSS, Javascript in the same order.</p>
    <aside>C++, python, java etc.. can be used in backend.</aside>
    <p>In general, you need about a year to study all the basics and
    to do some projects.</p>
</article>

جرب الكود

في المثال التالي قمنا بتحسين تصميم الصفحة بواسطة كود CSS و يفترض أن تركز فقط على أسلوب إظهار محتوى الوسم <aside> بشكل متميز عن باقي المحتوى.

aside {
    float: right;
    max-width: 300px;
    background: #f1f1f1;
    border: 1px solid gray;
    padding: 10px;
    margin-bottom: 10px;
}

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

aside {
    display: block;
}

نصائح و ملاحظات

أنت لست مجبر على استخدام هذا الوسم لأنه لا يعطيك أي ميزة إضافية عن التي يقدمها لك الوسم <div> و هذا الأمر سبق و أشرنا إليه.

فائدة هذا الوسم هي فقط جعل كود الصفحة أسهل في القراءة قليلاً بالنسبة للمصمم حتى لا يكون أغلبها عبارة عن <div> بداخل <div> بداخل <div> إلخ..
هناك فائدة أخرى تلاحظها حين تستغل إسم الوسم <aside> في التصميم و هي أنه يجعلك تستخدم أسماء كلاسات CSS أقل.