كتير بنسمع مصطلح Semantic HTML، وازاي ليها تأثير كبير على الـSEO وبتساعد في تنظيم الصفحة، إمكانية اصلاحها مستقبلًا بشكل أسهل وبتبقى مترتبة بترتيب منطقي مناسب للزوار
بس عمرك سألت نفسك إيه الـSemantic HTML؟ خليني أشرحلك
الـSemantic HTML هو استخدام عناصر ذات معنى بتدل على المحتوى اللي جواها، يعني في الطبيعي لما بتحب تعمل الـNavigation Bar بتحط العناصر بتاعته في Div، ولما تعمل Header تحط العناصر في Div، ولو حبيت تضيف عنوان أو رقم تليفون بتحطهم في Span وهكذا
فكرة إستخدام عناصر Nameless بدون معاني هي فكرة مزعجة، وبما إن المشكلة وُجدت، إذا لازم نعرف الحل، والحل يا صديقي بيكمن في الـSemantic HTML.
يعني بدل ما تستخدم Div عشان تعمل Navigation Bar أو Header، استخدم عناصر الـnav والـheader، بدل ما تستخدم الـSpan عشان تكتب العنوان في خانة لوحده، استخدم address، بدل ما تحط المقالة بتاعتك جوة Div وخلاص، حطها جوة Article
بتبدأ قسم جديد في الموقع؟ ضيف القسم ده جوة Section، وهكذا، بنسخدم عناصر ذات معنى بتعبر عن المحتوى اللي جواها، بالتأكيد في عناصر أكتر تقدر تستخدمها وهسيبلك لينك في أول كومنت بقايمة فيها كل العناصر اللي تعوضك عن إستخدام الـDiv
وخليك فاكر، الـDiv خليه أخر خيار بتلجأله لما تغلب، غير كدة حاول تستخدم الـSemantic HTML Elements عشان تحقق الشكل اللي انت عاوزه، هتفيدك جدًا في الـSEO، وفي نفس الوقت هتسهل عليك تحسين كود الموقع فيما بعد.
وبس كدة، ده كان الموضوع ببساطة.
الجينيص
HTML5 Notes
الجينيص