قواعد نوشتاری و سینتکس HTML5
همانطور که میدانیم، HTML5 در برخی از قوانین سختگیر نیست. به این دلیل که سازندگان HTML5 می خواستند این زبان به طور دقیق تری منعکس کننده واقعیت های یک مرورگر وب باشد ، به عبارت دیگر، آنها می خواستند شکاف بین “صفحات وبی که کار میکنند ” و ” صفحات وبی که با توجه به استاندارد، معتبر شناخته میشوند” را کاهش دهند . در این بخش ، به بررسی دقیق تر این تغییرات خواهیم پرداخت.
البته هنوز هم تعدادی از شیوه های منسوخ وجود دارند که مرورگرها از آنها پشتیبانی می کنند اما استاندارد HTML5 استفاده از آنها را به شدت منع میکند.
زبان HTML5 دارای یک قواعد نوشتاری و سینتکس “سفارشی است که با اسناد HTML4 و XHTML1 منتشر شده بر روی وب، سازگار می باشد، اما با ویژگی های رمزی SGML در HTML4 سازگار نیست.
قواعد نوشتاری HTML5 از قوانین XHTML پیروی نمیکند و با انعطاف پذیری زیاد موارد زیر تحت پوشش قرار میدهد:
۱ .استفاده از حروف بزرگ برای نام تگ
HTML5 حروف بزرگ را نادیده می گیرد و اجازه می دهد تا شما عناصر را به شکل زیر ارسال کنید :
<P>Capital and lowercase letters <EM>don't matter</eM> in tag names.</p>.
2 .استفاده اختیاری از نقل قول برای خاصیت ها
HTML5 قوانین خاصیت ها را نیز تغییر میدهد. تا زمانی که مقادیر خاصیت شامل یک کاراکتر محدود شده (مانند >، =، و یا یک فاصله) نباشد ، دیگر به علامت نقل قول نیازی نیست. در اینجا مثالی از یک عنصر <img> که از این ویژگی استفاده میکند را مشاهده میکنید:
<img alt="Horsehead Nebula" src=Horsehead01.jpg>
3 .درج اختیاری مقادیر خاصیت ها
استفاده از خاصیت ها بدون مقدار، مجاز می باشد و شما میتوانید روش حداقل سازی مقادیر HTML 4.01 را بار دیگر احیا کنید .
<input type="checkbox" checked="checked" /><input type="checkbox" checked>
4 . بستن اختیاری عناصر خالی
HTML5 همچنین به شما امکان حذف اسلش که برای بستن یک عنصر خالی مورد استفاده قرار میگیرد را میدهد . عناصری مانند تگ <br> (شکست خط)، و یا <hr> (خط افقی).
در مثال زیر سه راه برای اضافه کردن یک شکست خط را مشاهده می کنید:
I cannot<br /> move backward<br> or forward.<br/> I am caught
DOCTYPE:
DOCTYPE های نسخه های قدیمی تر HTML طولانی تر بودند زیرا زبان HTML مبتنی بر SGML است و از اینرو باید به یک DTD ارجاع داده شود .
نویسندگان HTML5 از قواعد نوشتاری ساده ای برای مشخص کردن DOCTYPE استفاده می کنند که به بزرگ و کوچک بودن حروف حساس نیست :
<!DOCTYPE html>
کدبندی کاراکترها (Character Encoding)
نویسندگان HTML5 می توانند از قواعد نوشتاری ساده ای برای تعیین اینکدینگ کارکترها استفاده کنند:
<meta charset="UTF-8">
تگ <script> :
معمولا برای اضافه کردن یک نوع خاصیت به عناصر script با مقدار ” text/javascript” به شکل زیر عمل می کنند:
<script type="text/javascript" src="scriptfile.js"></script>
اما HTMl5 سایر اطلاعات مورد نیاز را حذف کرده و شما می توانید به سادگی از سینتکس زیر استفاده کنید:
<script src="scriptfile.js"></script>
تگ <link> :
تا کنون شما <link> را به صورت زیر می نوشتید:
<link rel="stylesheet" type="text/css" href="stylefile.css">
HTML5 سایر اطلاعات مورد نیاز را حذف کرده و شما می توانید به سادگی از سینتکس زیر استفاده کنید:
<link rel="stylesheet" href="stylefile.css">
عناصر در HTML5:
عناصر HTML5 با تگ شروع و تگ پایان احاطه شده اند . در زیر نمونه ای از یک عنصر HTML5 را مشاهده میکنید:
<p>...</p>
عناصر HTML5 به بزرگ یا کوچک بودن حروف حساس نیست . بنابراین میتوان از حروف بزرگ و یا ترکیبی از حروف بزرگ و کوچک در تمامی عناصر استفاده کرد، اگر چه رایج ترین حالت، استفاده از حروف کوچک است.
بسیاری از عناصر که محتوایی را در برمیگیرند مانند <P> … </ p> ، شامل تگ شروع و پایان هستند . اما برخی از عناصر، دربرگیرنده محتوایی نیستند و به عنوان عناصر خالی شناخته شده اند. به عنوان مثال، تگ br، hr، link ، meta و …
خاصیت ها در HTML5:
عناصر ممکن است برای تعیین خواص مختلف دارای خاصیت هایی باشند.
برخی از خاصیت های تعریف شده می توانند برای هر عنصری مورد استفاده قرار بگیرند، در حالی که برخی دیگر فقط برای عناصر خاصی تعریف شده اند. تمام ویژگی ها، همانطور که در مثال زیر مشاهده میکنید ، دارای یک نام و مقدار هستند :
<div class="example">...</div>
خاصیت ها را فقط می توان در تگ های شروع، مشخص کرد و هرگز نباید در تگهای پایانی مورد استفاده قرار گیرند.
خاصیت های HTML5 به بزرگ یا کوچک بودن حروف حساس نیست . بنابراین میتوان از حروف بزرگ و یا ترکیبی از حروف بزرگ و کوچک در تمامی عناصر استفاده کرد، اگر چه رایج ترین حالت استفاده از حروف کوچک است.
اسناد HTML5:
تگ های زیر جهت داشتن ساختاری بهتر معرفی شده اند:
<section> – ترکیب نحوی جدید و مهمی است، که با استفاده از آن می توانید هر نوع بخشی را در سند خود را تعریف کنید. این برچسب نشاندهنده یک سند عمومی یا یک بخش کاربردی است که می تواند برای نشان دادن ساختار سند همراه با تگ H1-H6 مورد استفاده قرار بگیرد. این تگ تقریبا مانند یک div عمل کرده و بخش های مختلف را از هم جدا میکند.
<article> – این تگ یک مقاله، یک کاربر یا یک نوشته را تعریف میکند، بنابراین یک آیتم مستقل از محتوای یک سند می باشد مانند مقاله های وبلاگ یا روزنامه
<aside> – تگ aside نشاندهنده محتوایی جدا از محتوای صفحه است به عنوان مثال یک نوار جانبی که فقط کمی با صفحه های دیگر در ارتباط می باشد .
< dialog> – از این تگ برای نشانه گذاری یک مکالمه می توان استفاده کرد .
<Figure> – این برچسب می تواند به صورت یک عنوان یا زیر نویس همراه با یک محتوای گرافیکی یا ویدیو مورد استفاده قرار گیرد.
<header> <footer> – شما نیازی ندارید که به صورت دستی برای Header وFooter نام شناسه وارد کنید. اکنون یک تگ از پیش تعریف شده برای آنها در اختیار دارید. <header> نشاندهنده سر صفحه و <footer> نشاندهنده پا صفحه برای یک بخش می باشد که شامل اطلاعاتی در مورد نویسنده، اطلاعات کپی رایت، و … است.
<nav> – ناوبری هم اکنون می تواند در نشانه گذاری بین تگ nav قرار بگیرد. این تگ مجموعه ای از لینک ها را در کنار یکدیگر قرار میدهد .
<audio> <video> – این دو به وضوح محتوای صدا و یا ویدئو را نشانه گذاری میکنند، که در حال حاضر راحت تر توسط دستگاه ها اجرا خواهند شد.
<embed> – این تگ جدید یک قسمت برای محتوای تعاملی (پلاگین) و یا نرم افزار های خارجی تعریف می کند.
تصور نکنید که اگر قبلا از تگ های جدید HTML5 استفاده شده ، دیگر قابل استفاده نیستند . به عنوان مثال تگ header و footer نه تنها علامت شروع و پایان یک صفحه است، بلکه در آغاز و پایان هر بخش نیز مورد استفاده قرار میگیرد. این بدان معناست که این دو تگ به احتمال زیاد بیش از یک بار در تمام صفحه استفاده می شوند. در تصویر زیر می توانید مشاهده کنید :
یک سند HTM 5 مانند زیر خواهد بود :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
