DOCTYPE

تعریف DOCTYPE  تو HTML5 خیلی سادس

<!DOCTYPE html>

این یک html tag نیست، در واقع دستورالعملی برای مرورگر است که بدونه از چه ورژنی از html داره استفاده میشه.

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

برای بررسی اعتبار کد html تون میتونید از W3C markup validation استفاده کنید.


بطور خلاصه document type definition یک سری markup declaration هایی هستن که نوع داکیومنت رو به SGML- family markup language مثل SGML,XML,HTML تعریف میکند.

یک DTD ساختار قانونی بلاک ها رو تو دایکومنت های XML تعریف میکند. مثل یک لیستی از المنت ها و اتربیوت هایی که به اجازه داری ازشون استفاده کنی.


تو نسخه html4، تعریف  <!DOCTYPE> به یک DTD اشاره داشت، چون html4 بر اساس SGML بود و DTD مشخص کننده قوانین اون markup language بود.

برعکس HTML5 براساس SGML نیست و پس نیازی به DTD نداره و پس ما به تعریف کردن انواع DTD تو داکیومنت نمیپردازیم. ( common dctype declarations in html4 )


SUPPORT

مشکلی با مرورگر های مدرن نداریم ولی همه مرورگرا چه قدیمی چه جدید المنت های شناخته نشده رو به عنوان inline element میخونن، بخاطر همین میشه خودمون به مرورگر توضیحش بدیم.
میتونیم به همه Semantic element های html5 استایل display block بدیم تا حداقل رفتار مرورگر باهاش تغییر نکنه.
راه دیگه اینکه المنت های جدیدو به html اضافه کنیم. مثلا ساخت المنتی به نام <getShitDone> 
<head>
    <script>document.createElement("getShitDone")</script>
    <style>
        getShitDone {
            display: block;
        }
    </style>
</head>
<body>
<getShitDone>please get shit done</getShitDone>
</body>
document.createElement رو برای IE9 به پایین نیاز به نوشتن داریم.
مشکلی که به وجود میاد تو IE8 است! کلا IE8 به پایین استایل دهی به المنت هایی که نامشخص هستن رو اجازه نمیده. 
اینجا از HTML5Shiv که یک راه حل javascript است استفاده میکنیم.

سینتکس HTML5Shiv در head و در تگ script نوشته میشه و وقتی ازش استفاده میکنیم که المنت هایی مثل article, section, aside, nav, footer استفاده میکنیم.
میتونیم از گیت هاب دانلودش کنیم یا لینک ورژنشو مستقیم بزاریم.
<head>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
</head>


NEW ELEMENTS

تگ ها و form element ها و input type ها و تگ های graphic و media های جدید رو میتونید از اینجا کامل با مثال بخونید. توضیح تمام تگ ها در این لینک.

Semantic Elements
به المنت هایی که معناشونو هم به مرورگر و هم به برنامه نویس میدهند میگویند. 
مثالی از non-semantic element:
  • <div>
  • <span>
مثالی از semantic element:
  • <form>
  • <table>
  • <article>
خیلی از وب سایت ها محتواشونو با کد هایی مانند <"div id="nav> یا <"div class="header> دسته بندی میکنند ولی html5 المنت های معناداری را پیشنهاد میدهد که به search engine ها کمک میکند تا محتوای صحیح را در صفحه تشخیص دهند.

نکته استفاده تو در تو از semantic element ها این است که اشکالی نداره یک section حاوی تعدادی article باشه یا برعکس.
لیست کامل semantic element ها.

STYLE GUIDE

  • چون امکان داره در آینده xml reader ها فایلتونو بخونن بهتره از اسم های lower case برای element ها و attribute هاتون استفاده کنید.
  • با اینکه اشکالی برای نبستن html element ها یا html element های خالی نیست ولی باز بخاطر xml reader ها بهتره که المنت هارو ببندید و المنت های خالی رو با یک / ببندید.
  • از quote اطراف مقدار های attribute هاتون استفاده کنید با اینکه استفاده نکردنش اشکالی نداره.
  • از alt در image attribute استفاده کنید.
  • یکی کردن تگ های html با body یا یکی کردن html با head اشکالی نداره ولی بهتره این کارو نکنیم. با این حال که کلا مرورگرها کد های قبل از تگ body رو به عنوان head در نظر میگیرن.
  • نیازی به نوشتن type تو آدرس دهی style sheet یا javascript نیست.