ليس دائما الـ div … وسوم في الـ HTML ضرورية لا تستخدمها إلا نادراً

بواسطة Rida أبريل 21, 2019 8 دقائق قراءة 0 تعليقات

نعلم ان الـ HTML ليس لغة برمجة، يعتبر الـ HTML و هو إختصار لعبارة HyperText Markup Language لغة تنسيق و هيكلة او Markup كما جاء في إسمه، إذ يفتقر للمقومات الأساسية التي تجعله لغة برمجة، و مع تطور تقنيات التطوير و ظهور محركات (Preprocessors) قوية أصبح بإمكاننا إستخدام الـ HTML كلغة برمجة عن طريق عدة قوالب (Templates) حديثة مثل Pug او Jade و غيرها، التي تسمح لنا بكتابة شفرة HTML بإستخدام أساسيات البرمجة الرئيسية مثل المتغيرات، الشرط، الحلقات التكرارية و غيرها.

رغم ذلك، لن نسعى في هذا الموضوع الى محاولة إقناع البعض باللغة و قوتها، و إنما سنستعرض على مستخدمي اللغة ( و بالطبع أي مطور ويب الآن يستخدمها ) مجموعة من الوسوم في الـ HTML التي نادراً ما يتم إستخدامها رغم قوتها و إحترافيتها، فقد كنت – أنا شخصيا – ساذجاً جدا عندما كنت اصمم صفحات ويب دون الإعتماد عليها، و قد أدركت الخطأ جيداً خصوصا ان هذه الوسوم تساعد محركات البحث على فهم طريقة عمل موقعك أنت أيضا و أرشفته بسرعة. فلا تقم بنفس الخطأ و تعرف على مجموعة وسوم في الـ HTML عليك البدئ في إستخدامها .

ليس دائما الـ div ... وسوم في الـ HTML ضرورية لا تستخدمها إلا نادراً

– وسم Main :

وسم <main></main> ، هو وسم يحدد المنطقة الرئيسية في صفحة الويب، تتكون صفحة الويب بشكل عام من head ثم hody، في الـ head نقوم بإدراج كل معلومات الصفحة التي لن تظهر للمستخدم و إنما يستطيع فقط روبوتات الزحف و محرك صفحة الويب ( اي المتصفح ) قرائتها و الإطلاع عليها مثل معرفة عنوان الصفحة، او نوع التشفير، او وصف الصفحة، بينما في الـ body نكتب المحتوى الذي سيكون لنا صفحة الويب، ان قمنا بالتدقيق في محتوى الـ body سنجده هو الآخر يتكون من مجموعة من الأقسام مثل الـ navbar او القوائم العلوية، و الـ footer او القائمة السفلية ثم المحتوى الوسطي، لكن ما الوسم المناسب للمحتوى الوسطي (Content) ؟

الجواب هو وسم main، بحيث يسمح لنا بلم المحتوى الوسطي في وسم واحد من اجل التحكم فيه و تنظيمه و عزله على كل من محتوى navbar و محتوى footer، بدل إستخدام div يحمل id = content، يمكنك إستخدام وسم main لفعل ذلك.

وسم main يجب ان يكون وحيداً في الصفحة اي لا يجب ان يكون اي وسم اخر main في صفحة الويب، أيضا لا يجب ان يكون وسم main داخل اي وسم اخر مثل section او article، بل يجب ان يكون main هو الـ Parent بينما الوسوم الأخرى وسطه.

– وسم Section :

وسم <section></section>، ماذا لو اردت وسط وسم main إعادة تقسيم المحتوى لأقسام ؟ قد يكون خيارك الأول تقسيم كل قسم عن طريق div محدد ثم إعطاء id محدد لكل div و حلت المشكلة، قد تكون كذلك لكن الصفحة ليست مهيكلة بتلك الإحترافية، هنا سنطرح عليك وسم section الذي يؤدي وظيفة إعادة تقسيم المحتوى الى عدة اقسام (Sections)، فوسم main لا يمكن تكراره عدة مرات في الصفحة لكن وسم section يمكننا إعادة كتابته أكثر من مرة حتى نقوم بتقسيم المحتوى بشكل مناسب لنا.

في وسم section سنجد ان هناك جزئين من القسم : الجزء الضروري ثم الجزء الثانوي، و من أجل تقسيم الجزء الضروري في الوسم على الجزء الثانوي، سنستخدم وسماً آخر نادر الإستخدام و هو وسم aside .

– وسم Aside :

وسم <aside></aside>، يساعدنا هذا الوسم في إضافة محتوى ثانوي للمحتوى الرئيسي وسط اي عنصر يجمع عدة مكونات ( سواء كان div او كان section كما اشرنا سابقا ) لنفترض مثلا ان عنصر جزئي في الصفحة يحتوي على عنوان و وصف للعنوان ثم أردت إضافة بعض النصوص الأخرى المتعلقة بذلك العنصر الرئيسي، و تريد إضافتها في وسم لوحده، قد تفكر إما في إضافته على شكل div او فقط رميه مباشرة في وسم مثل <p></p>، هيكلة الصفحة في هذه الحالة قد تكون سيئة، لذلك إستخدم aside كوسم إضافي من أجل تعريف اي معلومة ثانوية في صفحة ويب داخل عنصر محدد.

– وسم Figure :

وسم <figure></figure> وفي نسخ سابقة من الـ HTML كان يتم إستخدام وسم <figcaption></figcaption> و هو وسم يتم إستخدامه في صفحة الويب من أجل التنبيه الى وجود محتوى مرئي وسط الصفحة، فنحن في الغالب نضيف الصور مثلا في صفحة الويب عن طريق وسم img، لكنه ليس الوسم الوحيد لإضافة الصور، يمكننا مثلا إستخدام وسم svg لرسم محتوى مرئي، او إضافة فيديو بإستخدام وسم video لإضافة محتوى فيديو، من الصعب على محركات البحث و كذلك محرك الويب ( اي المتصفح ) ان يفهم ادراج المحتوى المرئي وسط الصفحة و قد يقرأها أحيانا على شكل نص ( مثل المحتوى وسط svg )، لننبهه على اننا سنضيف محتوى مرئي وسط الصفحة نستخدم وسم figure الذي نضيف وسطه حينها المحتوى المرئي الخاص بنا.

– وسم Details :

وسم <details><summary></summary></details>، هذا الوسم جد مفيد و نادر الإستخدام حقاً فلا نجده كثيراً في صفحات الويب رغم أنه هذا الوسم سيلخص علينا معاناة كبيرة، لصناعة عنصر عبارة عن Collapse اي يظهر عناوين كبيرة ثم عند النقر عليه يظهر المزيد من التفاصيل حول تلك العملية، او تخيلها على شكل Tabs إن تم تهيئتها أفقيا، لفعل ذلك اعتقد انه عليك اللجوء لخاصية Toggle في الجافاسكربت من أجل تنفيذها، لكن تباً يوجد وسم في الـ html يمكننا من القيام بذلك و هو وسم details، على وسم details ان يتضمن وسم summary في وسطه و هو الوسم الذي يتضمن عنوان الـ details بينما يمكن وضع اي وسوم اخرى داخله الا انه لن يتم الكشف عنها حتى يتم النقر على العنوان الذي تم إدراجه في وسم summary وسط وسم details .

– وسم Map & Area :

وسم <map><area></area></map>، وسم اخر نادر الإستخدام لكنه مهم جدا خصوصا إن كنت بصدد صناعة بعض الأنفوجرافيك على شاكلة ويب، يمكنك توفير العمل بإستخدام هذين الوسمين و سيعوضان إستخدام وسم Canva في حالة كانت صناعة الصور سهلة، ببساطة يساعدنا وسم map على إضافة صورة قابلة للنقر يمكنها ان تكون أي صورة، ثم وسط هذه الصورة نجد مجموعة عناصر اخرى يتم تعريفها على شكل area، لنفترض انه لديك صورة لشخصيات مسلسل Game of Thrones، في وسط الصورة يوجد ” جون سنو “، ثم ” داينيريس تارغاريان ” و أيضا ” أريا ستارك “، يتم تعريف هذه الصورة داخل وسم map بينما الشخصيات الثلاث داخل وسم area مع تحديد ابعاد العنصر، يمكن ايضا تلفيق رابط للصور بحيث عند النقر على ” جون سنو ” سيأخذنا الى رابط في ويكيبيديا تعريفي لجون سنو.

– وسم Article :

وسم <article></article>، يمكن لصفحة الويب ان تختلف حسب ما يريده المستخدم، يوجد صفحات ويب عبارة فقط عن صفحات الهبوط، او صفحات الويب عبارة عن بورتفوليو و غيرها، لكن يوجد صفحات ويب عبارة عن مقالات، خصوصا في المدونات كما الحال بالنسبة لأكوا ويب، من أجل تهيئة الصفحة على شكل مقال و إعلام أيضا روبوتات الزحف الخاصة بمحركات البحث و كذلك محرك الويب ان الصفحة التالية عبارة عن مقال نقوم بإستخدام وسم article، يمكن لوسم article ان يتضمن وسطه أي وسوم اخرى ما عدا الوسوم الرئيسية ( مثل main مثلا ) و هو مفيد جدا في الأرشفة و تسريع ظهور مقالك في محركات البحث .

– وسم Header :

وسم <header></head>، نعم يخلط الكثيرون بين وسم head و وسم header و هما وسمين مختلفين كلياً، يمكن لوسم header ان يكون داخل وسم article او خارجه أحيانا، و يساعدنا وسم header في فهم ترويسة الصفحة سواء بالنسبة لمحركات البحث او بالنسبة لنا كذلك، في منصة الووردبريس مثلا، يمكنك إضافة عنوان الصفحة / المقال في الأعلى و يمكنك أسفله ان تضيف لمحة صغيرة تسمى بالـ Excerpt في بداية الصفحة ثم بعدها الإنتقال الى المقال و قرائته، من أجل إعلام المحركات ان عنوان الصفحة و الوصف الصغير الخاص بها هو في ترويسة او المقطع الرئيسي الذي يضم عنوان و وصف المقال نقوم بإضافة كل من العنوان و الوصف في وسم header، بعده يمكننا إضافة مقالنا بشكل عادي، هذه الخاصية تفصل الترويسات على المحتوى الأصلي، تذكر أيضا ان تكون الوسوم وسط header هي وسوم الـ h، مثل h1 او h2 حسب تصنيف الأهمية.

في هذا المقال حاولنا تجنب الوسوم التي يمكن لإستخدامها الا يكون إجباريا مثل keyb او abbr او frame و غيرها، بحيث هذه الوسوم لا يمكن إستخدامها الا ان اقتضت الحاجة، بينما الوسوم أعلاه إستخدامها يكون ضروري أحيانا في صفحات الويب و يمكن ان يؤثر كثيرا على هيكلة صفحتك، كما ستقيك أكثر من إستخدام الـ div المتكرر .

المحرر: Rida

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

تبرع لصاحب المقال: بايبال