وسوم في الـ HTML ضرورية لا تستخدمها إلا نادراً ?
نعلم ان الـ HTML ليس لغة برمجة، يعتبر الـ HTML و هو إختصار لعبارة HyperText Markup Language لغة تنسيق و بناء وتركيب او Markup كما جاء في إسمه، إذ يفتقر للمقومات الرئيسية التي تجعله لغة برمجة، و مع تطور تقنيات التطوير و ظهور محركات (Preprocessors) قوية أصبح بإمكاننا إستعمال الـ HTML كلغة برمجة عن طريق عديدة قوالب (Templates) حديثة مثل Pug او Jade و غيرها، التي تسمح لنا بكتابة شفرة HTML بإستعمال أساسيات البرمجة الأساسية مثل الاختلافات، الشرط، الحلقات التكرارية و غيرها.
رغم هذا، لن نسعى في هذا الموضوع الى مسعى إقناع القلة باللغة و قوتها، و إنما سنستعرض على مستخدمي اللغة ( و بالطبع أي مطور ويب الآن يستخدمها ) مجموعة من الوسوم في الـ HTML التي نادراً ما يتم إستعمالها رغم قوتها و إحترافيتها، فقد كنت - أنا شخصيا - ساذجاً بشكل كبير عندما كنت اصمم صفحات ويب دون الإعتماد عليها، و قد أدركت الخطأ جيداً خصوصا ان تلك الوسوم تعاون مواقع البحث في الإنترنت على فهم أسلوب عمل موقعك أنت أيضاً و أرشفته بسرعة. فلا تقم بنفس الخطأ و إعرف مجموعة وسوم في الـ HTML عليك البدئ في إستعمالها .
ليس باستمرار الـ div ... وسوم في الـ 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 في حين الوسوم الأخرى وسطه.
الجواب هو وسم 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 .
في وسم 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 المتكرر .
في ذلك المقال حاولنا تجنب الوسوم التي يمكن لإستخدامها الا يكون إجباريا مثل keyb او abbr او frame و غيرها، بحيث تلك الوسوم لا يمكن إستخدامها الا ان اقتضت الحاجة، بينما الوسوم بالأعلى إستعمالها يكون لازم في بعض الأحيان في صفحات الويب و يمكن ان يؤثر كثيرا على بناء وتركيب صفحتك، كما ستقيك أكثر من إستخدام الـ div المتكرر .
Aucun commentaire:
Enregistrer un commentaire