جميعًا نعرف لغة HTML وانها لغة هيكلية ننشئ بها الهيكل الخاص بالموقع من نصوص و مدخلات البحث و ازرار و غيرها , وكان دور HTML مقتصر على هذا ولكن يبدو ان مطورين اللغة اردوا التوسع واعطاء ابعاد واستخدامات جديدة ل HTML , فصدرت HTML5 فى عام 2014 لتضيف الكثير من الامكانية لمصممين المواقع , اذا ف HTML5 ليست سوا اضافات وتحسينات ل HTML .
وسنحاول فى هذا المقال القاء الضوء على الاختلافات بين الاصدرين ومميزات الاصدار الجديد فى شكل اجزاء كل جزء يناقش ميزة جديدة .
محتوي المقال
مفهوم Semantic Web
من المفاهيم الجديدة التى ظهرت فى HTML5 , ولكى نفهم هذه الخاصية الجديدة نتعرف اولًا على المشكلة التى حلت بسببه , محركات البحث مثل جوجل تنشر ما يسمى بالعناكب Crawler فى كل مكان فى مواقع الويب , وظيفة هذه العناكب هى جمع المعلومات عن محتوي الصفحات التى تزورها حتى تظهر نتائج مناسبة لمن يبحث عن شئ موجود فى هذه الصفحات , كانت المشكلة ان هذه العناكب لا تفهم صفحات الويب بطريقة صحيحة بمعنى انها لا تعرف اين الهيدر الخاص بالصفحة واين المقال والفوتور واين اسم الكاتب وغيرها من المعلومات , وهذه المعلومات تفيد بالطبع فى ارشفة الصفحة واظهار النتائج بشكل صحيح لمستخدم محرك البحث .
HTML5 حلت هذه المشكلة انها اضافت وسوم ثابته لاجزء صفحة الويب لابراز دلالة كل جزء كمثال <header> </header> فحينما يدخل الزاحف إلى الصفحة ويحاول ان يأرشفها فانه سيفهم ان ما بين هاتين الوسمين هو محتوي الهيدر ومثال اخر <article></article> عندما يرى الزاحف هاتين الوسمين فسيعرف ان ما بينهم هو محتوي المقالة وبالتالى سيتهم بأرشفة محتوي المقالة لتظهر للمستخدمين فى نتائجه وهكذا .
فترسيخ فكرة الويب الدلالى لتعطى هذه الكلمات دلالة للمحتوي الذى بداخلها من اجل فهمها بصورة اعمق من محركات البحث .
وموضوع الويب الدلالى كبير ومتوسع ويمكنك قراءة مقالة مفصلة عنه هنا
الوسوم Tags الجديدة فى HTML5 التى تخدم فكرة Semantic :
- <article> : يدل على المقالة
- <aside> : يدل على الشريط الجانبى
- <details> : يدل على المزيد من المعلومات التى يمكن للمستخدم اظهارها او اخفاءها
- <figcaption> : وصف للرسوم والصورة التوضيحية
- <figure> : صور توضيحية
- <footer> : ذيل الصفحة او القطاع Section
- <header> : رأس الصفحة او القطاع Section
- <main> : يدل على المحتوي الرئيسي للصفحة
- <mark> : يدل على نص مميز فى الصفحة
- <nav> : يدل على شريط Navigation او التصفح فى الموقع
- <section> : يعرف قطاع فى الصفحة
- <summary> : يعرف الجزء الظاهر من <details>
- <time> : يعرف الوقت والتاريخ
وكل واحد من اسمه يدل على وظيفته فى ابراز ماهية ما بدخله .
الرسم عن طريق Canvas
من المميزات الرائعة التى جاءت مع HTML5 وهى تتيح لك الرسم على المتصفح , وفى الحقيقة الوسم <canvas> يحتوي فقط الرسومات , ولكن يجب عليك استخدام Javascript لكى ترسم فعليًا على الشاشة .
مثال لما يمكن فعله بهذه الخاصية الرائعة .
See the Pen Color Cascade by Nate Wiley (@natewiley) on CodePen.
وبهذه الخاصية يمكنك عمل الكثير حتى يمكنك تصميم العاب على المتصفح فهى تعتبر بديل لتقنتيات الفلاش Flash التى تمثل جزء كبير من المحتوي على الانترنت .
المدخلات او Inputs
جلبت HTML5 الكثير من المدخلات الجديدة فلم يعد الامر محصور فى نوع النص والباسورد فقط , إليك الانواع الجديدة :
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
من اسم كل نوع جديد من الخاصية يمكنك تخمين فائدتها وقم بتجربتها بنفسك لتكتشف قوة هذه الانواع .
الفيديو والصوتيات جزء من HTML 5
قبل HTML5 كان تشغيل الفيديوهات يتطلب اضافة مثل Flash ولكن HTML5 تمكنا من ادراج الفيديو فى صفحات الويب بسهولة مع الوسم <video> ويمكنك التحكم فى الفيديو عن طريق الايقاف والتشغيل وغيرها من الخصائص , كما يمكنك تعريف ملف صوتى داخل الوسم <audio>.
يوجد المزيد من الاضافات الرائعة فى HTML ولعل هذه كانت ابرزها .
مشكور اخي على المحتوى الرائع ، الله يعطيك العافية تحياتي لك من القلب ..اخوك سمير من الجزائر
شكرًا اخى سمير تحياتى لك ولكل اخواننا فى الجزائر
الله يجزيك كل خير
بس اتمنى انك تشرح الhtml5 تشرح مثال على كل وسم او مدخل علشان ماشاء الله موقعك حلو ومرتب
مقبول