در این آموزش 10 مورد از پرکاربردترین عناصر موجود در HTML5 را معرفی خواهم کرد.

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

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

1 – نحوه جدید معرفی سند HTML توسط تگ DOCTYPE

اگر شما هم با HTML4 کار کرده باشید، نحوه استفاده از تگ DOCTYPE را با این فرمت طولانی و زشت به یاد دارید:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

اکنون می توانید این تگ دوست داشتنی را در HTML5 بسیار ساده با ساختار زیر استفاده کرده و بخاطر بسپارید:

<!DOCTYPE html>

2- عدم نیاز به استفاده از صفت type برای تگ های script و link

در زیر فرمت ساختاری تگ script و link در html4 ملاحظه میکنید :

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>

در html5 نیازی به تعریف صفات type برای تگ های script و link نمی باشد چرا که بطور پیش فرض این صفات برابر با type=text/javascript و type=text/css می باشد. بنابراین شما می توانید به سادگی ساختار زیر از این دو تگ استفاده کنید:

<link rel="stylesheet" href="style.css" />
<script src="script.js"/></script/>

3- ساختار معنایی header، footer و nav

پیشتر ما برای نوشتن کدهای html که دارای ساختار معنایی نیز باشند از خصیصه id و class با مقادیر مرتبط با کاربرد آن توسط تگ div استفاده می کردیم. یعنی برای اینکه از نظر معنایی مشخص شود که div استفاده شده برای چه موضوعی می باشد، در خصیصه id و class آن div، نامی استفاده میکردیم که کاربرد آن را نشان دهد، مثل :

<div id="header">
   ...
</div>
<div id="nav">
   <ul>...</ul>
</div>
<div id="footer">
   ...
</div>

اکنون html5 به ما کمک می کند تا ساختار معنایی بهتری در صفحات وب خود داشته باشیم. در html5 سه تگ header، nav و footer می تواند جایگزین کد بالا شده و به ساختار ما معنا ببخشد :

<header>
   ...
</header>
<nav>
   <ul>...</ul>
</nav>
<footer>
   ...
</footer>

4- ساختارهای معنایی section و article

Html5 توسط دو تگ جدید section و article به ما در داشتن ساختار معنایی بهتر کمک میکند.

<section>
   ...
</section>

توسط تگ section شما میتوانید قسمت های مختلفی مانند footer، header و ... را کدهای html در صورتی که به هم مرتبط هستند بخش بندی کنید.

<article>
   ...
</article>

زمانی که شما میخواهید یک محتوای منحصربفرد در بخشی از صفحه که به صورت مستقل عمل میکند داشته باشید، باید از تگ article استفاده کنید. نکته مهم در استفاده از این تگ این است که نمی توانید از یک تگ article در داخل article دیگر استفاده کنید. هر تگ article می تواند شامل section و header، nav و ... باشد. به عنوان مثال می توانید در بخش مقالات وبلاگ از این تگ استفاده کنید.

5- فرم های ورود اطلاعات با امکانات جدید HTML5

13 نوع جدید از فیلدهای ورود اطلاعات و چندین صفت جدید در HTML5 برای from و input معرفی شده است. هرچند هنوز برخی از مرورگرها بطور کامل از این صفات و نوع های جدید پشتیبانی نمی کنند، اما ممکن است شما بخواهید برخی از آنها را در فرم های صفحات وب خود داشته باشید.

<form id="myform">
   Name: <input name="name" required placeholder="Your name" pattern="[A-z]{7}" />
   <br/>
   Email: <input type="email" name="email" required placeholder="email@inwebson.com"/>
   <br/>
   URL: <input type="url" name="url" placeholder="Homepage URL"/>
   <br/>
   Age: <input type="number" name="age" min="18" max="99" />
   <br/>
   Description: <textarea name="desc" placeholder="Describe yourself here..."></textarea>
   <br/>
   <input type="submit" value="Submit" />
</form>

در فرم بالا بدون هیچگونه کد و اسکریپت دیگری، مقادیر فیلدهای ورود اطلاعات برای راهنمایی کاربر با pattern تعریف شده قبل از ورود اطلاعات نشان داده میشود. همچنین فیلد ورود سن بازه ای بین 18 تا 99 را برای انتخاب به کاربر نشان میدهد. تا پیش از ظهور html5 اینگونه فیلدها توسط اسکریپت و یا عناصر داینامیک قابل پیاده سازی بود.

6- تگ Canvas

Html5 قابلیت رسم تصاویر دو بعدی را با کمک گرفتن از جاوااسکریپ فراهم ساخته است. همچنین شما میتوانید توسط تگ canvas در html5 انیمیشن بسازید. تکه کد زیر طریقه ساخت یک مستطیل آبی رنگ را توسط تگ canvas و کدهای جاوااسکریپت نشان میدهد:

<canvas id="myCanvas" width="200" height="200"></canvas>
 
<script>
   var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");
   ctx.fillStyle="#0000FF";
   ctx.fillRect(0,0,150,150);
</script>

7- پشتیبانی HTML5 از Video و Audio

تا پیش از ظهور HTML5 برای نشان دادن ویدئوها و پخش صداها در صفحات وب می بایست از تگ ها object و embed استفاده می کردیم. نقص بزرگ این تگ ها نیاز به نصب پلاگین های اضافی مانند flash بر روی مرورگر بود و در صورتی که پلاگین مورد نظر بر روی مرورگر نصب نبود، دستور مربوطه قابل اجرا نبود:

<object width="400" height="300">
   <param name="movie" value="video.mp4" />
   ...
   <embed src="video.mp4" type="application/x-shockwave-flash" ... ></embed>
</object>

html5 راهی جدید برای پخش ویدئوها و صداها توسط تگ های video و audio معرفی کرد. با html5 شما دیگر نگران مشکلات نصب پلاگین بر روی مرورگرها نخواهید بود. تمامی مرورگرها از این دو تگ پشتیبانی نمی کنند اما ورژن های اخیر مرورگرها این دو تگ را پوشش داده اند:

<audio controls="controls">
   <source src="audio.mp3" type="audio/mp3" />
   <source src="audio.ogg" type="audio/ogg" />
   Your browser does not support the <audio> tag.
</audio>
<video controls="controls" width="400" height="300">
   <source src="movie.mp4" type="audio/mp4" />
   <source src="media.ogg" type="audio/ogg" />
   Your browser does not support the <video> tag.
</ video >

8- عناصری که قابلیت ویرایش در صفحه وب را دارند

Html5 یک قابلیت بسیار جذاب را با خود به همراه دارد. توسط خصیصه contenteditable شما میتوانید هر عنصری در صفحه وب خود را قابل ویرایش کنید! به عنوان مثال توسط دستور زیر شما میتوانید متن داخل عنصر div را در صفحه وب خود ویرایش کرده و تغییر دهید:

<div contenteditable="true">
   Any content here will be editable...
</div>

9- قابلیت ذخیره کردن مقادیر و متغیرها در مرورگر کاربران

دیگر نیازی به استفاده از cooki برای نگهداری اطلاعات در مرورگر بازدیدکننده نیست (بسته به نیاز شما). شما میتوانید توسط دو متد معرفی شده در HTML5 داده های مورد نیاز خود را در مرورگر کاربران ذخیره کنید:

<script>
   localStorage.variableName = "value";
   alert(localStorage.variableName);
   localStorage.removeItem("variableName");
   alert(localStorage.variableName);
</script>

توسط localStorage شما میتوانید داده های خود را بدون محدودیت زمانی در کامپیوتر کاربر ذخیره کنید. این یعنی هر زمان که کاربر بین تب های مختلف حرکت کند و یا مرورگر خود را ببندد، باز هم این اطلاعات وجود دارند و با ریستارت شدن مرورگر قابل دسترسی هستند.

<script>
   sessionStorage.variableName = "value";
   alert(sessionStorage.variableName);
   sessionStorage.removeItem("variableName");
   alert(sessionStorage.variableName);
</script>

داده های ذخیره شده توسط متد sessionStorage تنها تا زمانی که مرورگر کاربر باز است معتبر هستند و با بسته شدن مرورگر از بین میروند.

10- مقادیر و صفات دلخواه در تگ ها توسط صفت –data

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

<div id="div1" class="style" time="3" order="1"></div>
<div id="div1" class="style" time="5" order="3"></div>
<div id="div1" class="style" time="2" order="2"></div>

اما html5 این مشکل را توسط صفت –data حل کرده است. یعنی شما میتوانید هر داده دلخواه را که به آن نیاز دارید، در این صفت قرار دهید و به آن دسترسی داشته باشید بدون اینکه کد عنصر مورد نظر از حالت معتبر و استاندارد خارج شود:

<div id="div1" class="style" data-time="3" data-order="1"></div>
<div id="div1" class="style" data-time="5" data-order="3"></div>
<div id="div1" class="style" data-time="2" data-order="2"></div>

چطور مشکل اینترنت اکسپلورر را برای اجرای دستورات HTML5 حل کنیم؟

اینترنت اکسپلورر تا نسخه 8.0 نمی تواند کدهای HTML5 را بخواند و شما نمی توانید عناصر HTML5 را استایل دهی کنید. توسط کد زیر این مشکل حل خواهد شد:

<!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

کافیست آن را در تگ header سایت خود قرار دهید تا بتوانید عناصر HTML5 را برای IE نیز استایل دهی کنید.

منبع : وبسایتها