ما الفرق بين HTML5 و HTML4 ؟ و ما هي مميزات HTML5؟

الموضوع هنا مش هيبقى مخصوص عن لغة الـ HTML أكتر ما هنتكلم هنا عن ايه الجديد في HTML5  ، وكمان هنتكلم بالخصوص في حاجة اسمها Semantic Web.

 في البداية … ايه هي لغة الـHTML5؟

إيه الجديد في HTML5 ؟ ، وإيه فرقه عن HTML4 ؟

"الفرق وإيه الجديد" ، دا سؤال مشهور جدا لأي حد بيشتغل ويب جديد ، لغة الـ HTML  دي اول لغة المفروض اي حد داخل في مجال الويب يتعلمها ،  في البداية لغة الـ HTML دي مش لغة برمجة خالص ، دي إسمها Layout Language ، أو بالعربي لغة توصيف ، وبالعامية يعني هي اللغة المسئولة عن وضع وترتيب البوكسات جوا صفحة الويب ، وهي اللغة الوحيدة اللي بيتعمل بيها شكل صفحات الويب ، ومفيش أي صفحة في الدنيا هتشتغل على البراوزر الا لو كانت مكتوبة بالـ HTML ، وشوية التحابيش اللي معاها.

على العموم لغاية HTML4 ، دا كان دور لغة الـ HTML انها تعمل ترتيب لأجزاء الصفحة ، بالإضافة طبعا إنها تعمل فونت الكلام وحجم الكلام ، زي مثلا لو عايز تعمل  Bold للكلام هتحطه جوا تاج b ولو عايز تعمل جدول هتستخدم table تاج ، وهكذا.

وبالطبع كان في الماضي الناس كلها فاكرة إن الـ HTML Tags ، دورها الاساسي علشان تظهر المحتوى بشكل معين ، يعني مثلاً لو إنت تعمل بداية موضوع بخط كبير أوي كنت هتحطه جوا H1 تاج ، ولو اصغر شوية هتحطه جوا H2 تاج ، الكلمتين دول بالظبط بيشرحوا HTML4 ، طب ايه يا عم الجديد في HTML5

الفرق بين HTML5 و HTML4

بعكس معظم لغات البرمجة او البرامج عموماً ، أي تحديث بينزل للغة برمجة بيبقى نازل علشان يزود functions عليها ، أو هيعدل شوية في اسلوب كتابة الـ functions القديمة ، ولو كان برنامج فبيبقى في تحديث في الـ features اللي بيقدمها ، هنا الـ  HTML5 نازل مخصوص علشان يغير نظرة الناس اللي شايفه صفحات الويب من برا ، لحاجة تكون ذكية ومفهومة ، وده اللي بقى اسمه الـ semantic web

تعالوا نلخص الحاجات اللي نزلت مع HTML5 في ثلاث حاجات

* زودوا حاجة جديدة إسمها Semantic Web ، وبقى التاجات ليها معنى ومفهوم بالنسبة لمحركات البحث ، وكمان مواقع السوشيال ميديا.

* إضافة تاجات جديدة هتخلي صفحات الويب شكلها أحسن وأقدر أرسم عليها.

* مقياس جديد علشان كل الـ browsers المخلتفة هتظهر شكل الويب بشكل واحد للكل.

نبدأ بأول مفهوم اللي هو Semantic  Web

في HTML5 تاج الـ b بقت strong وتاج الـ i بقت em ، إحنا استفدنا ايه كده :) ، لأ التاجات الجديدة دي بقى ليها معنى ، مش مجرد اظهار خط عريض ومايل ، لأ دلوقتي لما حد زي محركات البحث يدخل ويعمل analysis للصفحة دي هيفهم معنى التاجات دي.

الموضوع مش كده وبس ، في تاجات جديدة اضافت مكنتش موجودة زي article, section, header, aside, nav ، التاجات دي كلها بتطلع نفس الشكل وكلهم اصلا شبه تاج الـ div بالظبط ، بس ظهورهم دلوقتي بيخلي الويب ليه معنى ، واهم هدف ليهم هو ان الـ Search Engine لما يدخلوا عندك هيعرفوا ان الجزء ده خاص بمقال ، والجزء ده هو الهيدر بتاع الموقع ، والجزء ده هيكون في القائمة بتاعة الموقع ، كل ده علشان يظهرك عنده بالشكل اللي يليق بيك ، مش أحيانا كده بتعمل بحث في جوجل عن كلمة dailynewsegypt كمثال هتلاقي في ضمن نتائج البحث ، اسم الموقع والوصف بتاعه ، وشوية لينكات داخليه جوجل قراها من الـ nav عندك علشان يقدر يعرضها ويسهل وصول الناس ليك.

علشان نبسط الامور شوية ، تاج زي article ده ، ملهوش أي لازمة في الشكل خالص ، بس الفكرة ان محركات البحث لما تدخل على صفحتك ، هيعرفوا إن الجزء ده بيمثل مقال ، مش كده وبس ، لأ وجود h1 في بدايته دا معناه إن ده الـ title بتاع المقال ده . فهيظهر بالشكل ده في محركات البحث ، وكمثال لمواقع هتستخدم التاج دي زي المنتديات والبلوجات ومواقع الاخبار والكومنتات.

واحدة من ضمن التاجات بردوا المهمة اوي تاج الـ header ، خدوا بالكوا في فرق ما بين تاج الـ header وتاج الـ head بتاع زمان ، التاج الجديد ده دوره كله انه هيكون جزء يحتوي على رأس الموضوع او الموقع ، بالإضافة انه يحتوي على لينكات الموقع او القائمة الرئيسية ، فهو لازم يحتوي على واحدة او اكتر من h1-h6 ، لوجو او ايكون.

التاجات الأساسية اللي ممكن تتحط في الهيدر ده هو nav, ul, li, a, div, section, span, input, label

الخلاصة هنا ، إنت لو بتعمل موقع وخلاص ، فإنت لازم تستخدم تاجات الـ html5 الجديدة علشان تهيكل الصفحة بتاعة وتقول لمحركات البحث تعالوا عندي وهتشوف الداتا منظمة بشكل كويس، الصورة دى هتشوفها

لو انت منزل chrome extension من اللينك ده HTML5 Outerliner علشان تشوف بيه محركات البحث شايفاك ازاى.

الموضوع ده مش بس موجه للناس اللي بتعمل native development للويب ، لأ دا كمان موجه للناس بتعمل component based development زي اللي شغال ADF Faces أو اللي شغال asp dot net ، البرامج الكبيرة دي ، بتريح اوي من كتابة الـ HTML وبتكتبه مكانك ، بس الفكرة إنه لازم تواكب التطور السريع في الويب للحاجات دي ، الحاجات دي بتخليك تستخدم components جاهزة ، الـ components  دي مع كل تطور للـtechnology لازم تواكب التحديث بتاع HTML5 ، علشان كده لو في تحديث نزل جديد للـ Technologies  ، فأكيد التحديث ده هيكون من ضمنه التحديث للتاجات الجديدة بتاعة الـ HTML5 فإنت كمان لازم تواكب التحديث ده ، وإلا هتضيع.

لو عايز تكمل وتعرف اكتر انت ممكن تدور على الانترنت وتبحث عن الكلمات دي (semantic web, html5 structure, html5 and seo, html4 vs html5)