div-itis کۆتاییهێنان بە دیاردەی
یەکێک لە باوترین هەڵەکان لە کاتی فێربوونی گەشەپێدانی وێبدا، بەکارهێنانی بێسنووری تاکی <div>ـە بۆ هەموو شتێک. زۆرجار کاتێک سەیری کۆدی لاپەڕەیەکی وێب دەکەین، دەبینین هەموو بەشەکانی وەک header، footer و ناوەڕۆک لەناو <div>ـی تێکەڵ و پێبەکەڵدا دانراون. ئەم شێوازە نەک تەنها خوێندنەوەی کۆدەکە ئەستەم دەکات، بەڵکو زیانێکی گەورەش بە SEO و دەستڕاگەیشتوویی (Accessibility) دەگەیەنێت.
بۆچی div تەنها container-ێکی بێ مانا و واتایە؟
لە ڕووی تەکنیکییەوە، <div> تەنها بۆ گرووپکردنی تاگەکان بەکاردێت و هیچ زانیارییەکی زیادە (Semantic Meaning) بە براوسەر یان بۆتەکانی گەڕان نادات. کاتێک تۆ <div class="header"> بەکاردەهێنیت، بۆ مرۆڤ ڕوونە کە ئەمە سەرپەڕەیە، بەڵام بۆ Google یان خوێنەرەوەکانی شاشە (Screen Readers)، ئەمە تەنها بۆکسێکی بێ ناوەڕۆکە، بۆیە پێویستە تاگە راستەکان لە شوێنی خۆیان دا بەکاربێن،
Semantic HTML چییە و بۆچی گرنگە؟
بە بەکارهێنانی Semantic HTML، ئێمە پێناسەی دروستی بەشەکانی لاپەڕەکە دەکەین. کاتێک <header>، <nav>، <main>، و <footer> بەکاردەهێنین، براوسەرەکە تێدەگات کە ئەم بەشە چییە و ئەرکی چییە.
نموونەی خراپ (بەکارێنانی زۆری div):
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>نموونەی باش (Semantic HTML):
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer></footer>سوودەکانی وازهێنان لە div-itis
- باشترکردنی SEO: بۆتەکانی گەڕان وەک Google باشتر پێکهاتەی لاپەڕەکەت دەناسنەوە، ئەمەش دەبێتە هۆی ئەوەی لە ئەنجامەکانی گەڕاندا باشتر دەربکەویت.
- دەستڕاگەیشتوویی (Accessibility): ئەو کەسانەی کێشەی بینینیان هەیە و یان نابینان، بە Screen Reader لاپەڕەکان دەخوێننەوە، بە ئاسانی دەتوانن بە ناو لاپەڕەکەدا بسووڕێنەوە کاتێک تاگی دروست بەکاردەهێنیت.
- خوێندنەوەی کۆد: بۆ خۆت و تیمەکەت، کۆدەکە ڕێک و پێک دەبێت و بە ئاسانی دەزانن هەر بەشێک چییە.
کەی div بەکاربهێنین؟
مانای ئەوە نییە <div> خراپە! بە پێچەوانەوە، <div> زۆر بەسوودە کاتێک هیچ تاگێکی تری Semantic گونجاو نییە بۆ کارەکەت. بۆ نموونە، کاتێک دەتەوێت چەند توخمێک پێکەوە کۆبکەیتەوە تەنها بۆ مەبەستی CSS و، <div> باشترین بژاردەیە.
کۆتایی
وەک گەشەپێدەرێکی وێب لە Ferkar، ئامانجمان ئەوەیە کۆدی پاک و ستاندارد بنووسین. کاتێک دەتەوێت تاگی نوێ دابنێیت، سەرەتا لە خۆت بپرسە: "ئایا تاگی Semantic هەیە کە ئەم کارە بکات؟". ئەگەر هەبوو، بێگومان بەکاری بهێنە و <div> بۆ کاتێک بهێڵەرەوە کە هیچ بژاردەیەکی ترت نییە.