خصوصیات html5

در این مقاله قصد داریم با ویژگی های جدید html5 و تفاوت آن با ورژن های قبلی صحبت کنیم.

Doctype

حتما Doctype html4 (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">)را به یاد میاورید .یک خط طولانی که به یاد سپردن آن کمی سخت و غیر ممکن بود. در html5 کافیست با نوشتن یک عبارت کوتاه Doctype سند را مشخص کنید.

<!DOCTYPE html>

به همین راحتی !

با نوشتن این عبارت به مرورگر میفهمانید که شما از html5 استفاده کرده اید.

حذف ویژگی type برای تگ های script و link

برای اضاافه کردن فایل های جاوا اسکریپت و css از تگ های script و link به صورت زیر استفاده میکنیم:

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />

<script type="text/javascript" src="path/to/script.js"></script>

جالب است بدانید که در html5 نیازی به نوشتن شناسه type برای این تگ ها وجود ندارد.این تگ ها را به صورت زیر با حذف این شناسه هم میتوان نوشت.

<link rel="stylesheet" href="path/to/stylesheet.css" />

<script src="path/to/script.js"></script>

حذف علامت "" از شناسه های تگ

در html5 نیازی به قراردادن ''' برای نوشتن شناسه ها نیست.

<p class=myClass id=someId>

ولی برای احتیاط بهتر است علامت "" را بگذارید.چون برخی مرورگرهای قدیمی html5 را ساپورت نمیکنند.

یک محتوای قابل ویرایش بسازید

مرورگرهای جدید قابلیت جدیدی دارند که آن را میتوان به یک المان اضافه کرد ، این ویژگی جدید contenteditable نام دارد با استفاده ازاین ویژگی میتوان یک متن قابل ویرایش در صفحه وب خود ایجاد کنیم.با اعمال این ویژگی به یک تگ میتوان فرزندان آن تگ را ویرایش کرد.

به طور مثال ما با استفاده از این ویژگی میتوانیم یک لیست برای کارهایی که قرار است انجام شود ایجاد کنیم که قابل ویرایش است.

<!DOCTYPE html>

 

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>untitled</title>

</head>

<body>

    <h2> To-Do List </h2>

     <ul contenteditable="true">

        <li> Break mechanical cab driver. </li>

        <li> Drive to abandoned factory

        <li> Watch video of self </li>

     </ul>

</body>

</html>

خروجی : (متن زیر را میتوانید ویرایش کنید)

Break mechanical cab driver.
Drive to abandoned factory
Watch video of self

سیستم اعتبارسنجی فرم

مرورگرهای جدید دارای سیستم اعتبارسنجی هستند که اگر از شناسه و تگ های جدید مربوط به فرم ها استفاده کنید میتوان فرم را اعتبار سنجی کنید.الیته لازم به ذکر است که این ویژگی زیاد مورد اطمینان نیست زیرا برخی مرورگرهای قدیمی این ویژگی ها را پشتیبانی نمیکنند .اگر میخواهید راجع به این ویژگی ها بیشتر بدانید میتوانید مقاله های شناسه های تگهای input و شناسه تگ فرم (قسمت دوم) را مطالعه کنید.

تگ های semantic (با معنی )

تگ های معنایی یا به عبارتی semantic tags مولفه هایی هستند که معنای آنها هم برای مرورگر و هم برای برنامه نویس به طور کاملا واضح است برای مثال تگ های <table >,<header>, <footer> و… مشخص است که شامل چه محتوایی هستند اما تگ هایی مثل <p>, <span>, <pre> به هیچ عنوان مشخص نیست که چه محتوایی در آنها قرار خواهد گرفت.

به عبارتی میتوان گفت تگ های معنایی ,ساختار وب سایت را مشخص میکنند که همین باعث بالا رفتن سئو سایت نیز میشود.

در HTML4 برنامه نویسان از کلاس ها و ای دی های ساخته خود برای طراحی عناصر صفحات وب استفاده میکردند که مشخصا موتور های جستجو قادر به تشخیص محتوی آنها براساس نام تعیین شده توسط کاربر نبودند بنابراین با ارائه تگ های معنایی یا semantic Tags در html5 کمک شایانی هم به برنامه نویسان و همه به موتور های شده است بدین صورت که موتور های جستجو به راحتی با بررسی Semantic tags که برنامه نویس برای ساختار صفحه وب خود استفاده کرده محتویات را شناسایی میکنند.

در مقاله های بعد به طور مفصل راجع به این تگ ها و کاربردشان صحبت خواهیم کرد.

اینترنت اکسپلورر و html5

متاسفانه مرورگر اینترنت اکسپلوررخیلی از ویژگی های html5 را پشتیبانی نمیکند.البته برخی روشهای جایگزین برای فهماندن تگ های جدید به اینترنت اکسپلورر وجود دارد.

تمام تگ های جدید html مثل header, footer, article, section, nav به عنوان تگ inline-level شناخته میشوند برای اطمینان بهتر است در ابتدای کار همه این تگ ها را با display:block مشخص کنید.

header, footer, article, section, nav, menu {
   display: block;
}

متاسفانه اینترنت ااکسپلورر در برخی موارد تگ های بالا را اصلا نمیشناسد که بخواهد display انها را عوض کند.برای حل این مشکل ما از جاوااسکریپت کمک میگیریم و این تگ ها را به آن اضافه میکنیم.

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");

همچنین میتوان با استفاده از برخی کتابخانه های آماده مثل کد زیر که برای این کار نوشته شده اند برخی مشکلات را رفع کرد

<!—[if IE]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]

متاسفانه این کتابخانه در کشور ما فیلتر است.

ساپورت audio

یکی از تگ های جدید در html5 تگ audio میباشد. قبلا برای این کار از پلاگین های خاصی که برای این کار وجود داشت استفاده میشد.ولی امروزه با استفاده از تگ مخصوص خود امکان ایجاد audio وجود دارد.

ساپورت video

تگ <video> هم مثل تگ audio، استفاده میشود.

شناسه data

ما میتوانیم برای تگهای html خود یک شناسه منحصر بفرد تعریف کنیم.بهتر است نام این شناسه با data- شروع بشود. مقادیری که برای این شناسه در نظر میگیریم معمولا در کدهای جاوا اسکریپت کاربرد دارد.

مثال

<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

کامنت جدید ...

Sort by:

نمایش مقاله

Text/HTML