معرفی HTML5 و نحوه استفاده از تگ های جدید

این نسخه از HTML در سال 2008 ارائه شد که با قابلیت های متنوع تحول عظیمی در ساخت صفحات وب ایجاد نمود. مهمترین هدف HTML5 ساخت صفحات بصورت مفهومی تر می باشد. برای مثال فرض کنید قصد دارید یک قالب برای یک صفحه وب طراحی نمایید. در این قالب طبیعتا برای تفکیک بخش های مختلف از div استفاده می شود و به علت تعدد آنها موتورهای جستجو نمی توانند بخش های مختلف سایت را از یکدیگر تفکیک کنند، زیر همه بخش ها توسط یک تگ مشترک ایجاد شده است. HTML5 در اولین قدم این مشکل را برطرف نموده است.

تگ های طراحی Layout

منظور از Layout همان قالب سایت می باشد. در HTML5 برای ساخت Layout سایت، تگ های مخصوصی تعیین شده است که استفاده از آنها باعث تفکیک بخش های مختلف Layout می شود که درک بهتری از قسمت های مختلف هم به طراح سایت و هم به موتورهای جستجو می دهد.

قالب سایت - html5

همانطور که در تصویر مشاهده می کنید در HTML4 برای هر بخش یک div قرار داده و برای هریک از آنها id تعیین میشد اما در HTML5 برای هریک از آنها تگ مخصوص قابل استفاده می باشد.

Header: بخش بالایی سایت که می تواند حاوی منو، بنر، آیکن شبکه های اجتماعی و ... را قرار داد.

Nav: قرار دادن منوی سایت.

Aside: نوار کناری سایت که می تواند در سمت چپ، راست یا هر دو طرف باشد.

Article: محتوای اصلی سایت.

Section: بخش های مختلف محتوای اصلی سایت.

Footer: قسمت پایین صفحه که می تواند حاوی خلاصه منوها، قوانین و مقررات، کپی رایت و ... باشد.

نمایش تصویر به همراه توضیحات

تصاویر استفاده شده در بسیاری از وبسایت ها همراه با توضیحات مختصری می باشد که به آن Caption گفته می شود و استفاده از آن به قدری مرسوم است که در HTML5 تگ مخصوصی برای نمایش این گونه تصاویر در نظر گرفته شده است.

<figure>
  <img src="image/wallpaper.jpg" >
  <figcaption>
    توضیحات مربوط به تصویر
  </figcaption>
</figure>

استفاده از figure نه تنها باعث کاهش نامگذاری ها در صفحات می شود بلکه درک بهتری از محتوای صفحه نیز برای موتورهای جستجو فراهم خواهد کرد.

نمایش ویدئو

قبل از ظهور HTML5 استفاده از ویدئو در صفحات وب کار چندان آسانی نبود اما با اضافه شدن تگ <video> استفاده از ویدئو در صفحات وب با سهولت هرچه تمامتر قابل انجام است.

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
</video> 

دو attribute مهم این تگ به شرح زیر می باشند:

  • controls: با ذکر این attribute دکمه های کنترلی مانند Play/Pause و ... فعال می شود.
  • autoplay: باعث نمایش اتوماتیک ویدئو به محض اجرای صفحه می شود.

درون این تگ، از تگ source برای تعیین آدرس و نوع فایل استفاده می شود. فرمت های ویدئویی قابل استفاده توسط عبارتند از:

  • MP4
  • WebM
  • Ogg

پخش فایل های صوتی

همانند تگ <video> تگ مشابهی به نام <audio> برای پخش فایل های صوتی در صفحات وب وجود دارد.

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio> 

فرمت های قابل استفاده برای فایل های صوتی عبارتند از:

  • MP3
  • Ogg
  • WAV

SVG

بدون شک یکی از تغییرات بزرگ در HTML افزوده شدن طرح های وکتوری (برداری) بود که جلوه بصری زیبایی به صفحات می بخشد و در بسیاری از موارد جایگزین تصاویر در صفحات وب می شود.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> 

آموزش های مربوط به SVG در بخش جداگانه ای در سایت قرار خواهد گرفت.

Canvas

Canvas یکی دیگر از قابلیت های گرافیکی اضافه شده در HTML5 می باشد که توسط آن می توان عناصر گرافیکی مختلف را رسم نمود. رسم اشکال گرافیکی در Canvas با دستورات جاوا اسکریپت امکان پذیر است.

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
</canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
</script>

برای آموزش Canvas نیز بخش جداگانه ای در سایت در نظر گرفته شده است.