HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌دانند و تمامی زبان‌های برنامه‌نویسی برای طراحی سایت، به شکلی به HTML وابسته هستند. با استفاده از این زبان و CSS و جاوا اسکریپت، تکنولوژی‌های بنیادین برای شبکه جهانی وب تشکیل می‌شود. مرورگرها اسناد HTML را از وب سرور یا مخزن لوکال (Local) دریافت کرده و آن‌ها را به صفحات وب چند رسانه‌ای تبدیل می‌کنند. در واقع HTML ساختار معنایی صفحات وب را تعریف کرده و شامل مشخصات ظاهری سند است.

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

مولفه های HTML از طریق تگ‌های قرار گرفته در پرانتز شکسته مشخص می‌شوند. تگ‌هایی مانند </  img> و </  input> محتوا را به صورت مستقیم به صفحه معرفی می‌کنند. سایر تگ‌ها مانند <p>...<p/>   اطلاعات مربوط به متن سند را ارائه داده و می‌توانند سایر تگ‌ها را به عنوان مولفه‌های فرعی در خود جای دهند. مرورگرها تگ‌های HTML را نمایش نمی‌دهند بلکه از آن‌ها برای تفسیر محتوای صفحه بهره می‌برند. 

HTML می‌تواند برنامه‌های نوشته شده به زبان اسکریپتی مانند جاوا اسکریپت را که بر رفتار و محتوای صفحات وب تاثیر می‌گذارند در خود جای دهد. استفاده از CSS ظاهر و آرایش محتوا را تعریف می‌کند. کنسرسیوم جهانی وب که استانداردهای HTML و CSS را تعریف می‌کند، از سال ۱۹۹۷ استفاده از CSS را روی HTML ظاهری توصیه کرده است.

تاریخچه پیدایش HTML

در سال ۱۹۸۰، فیزیکدان «تیم برنرز لی» (Tim Berners-Lee)، یکی از پیمانکاران CERN، سیستم ENQUIRE را پیشنهاد کرد. این سیستم برای محققان CERN ایجاد شده بود تا از آن برای استفاده و اشتراک‌گذاری اسناد استفاده کنند. در سال ۱۹۸۹، برنرز لی یادداشتی نوشت و در آن یک سیستم اینترنتی ابر متن (Hypertext) را پیشنهاد داد. «برنرز لی» HTML را مشخص کرد و نرم افزار مرورگر و سرور را در اواخر ۱۹۹۰ نوشت. در آن سال، برنرز لی و مهندس دیتا سیستم‌های CERN، به صورت مشترک درخواست بودجه کردند اما آن پروژه به صورت رسمی توسط CERN پذیرفته نشد.

 

اولین توصیف عمومی از HTML سندی به نام «HTML Tags» بود که ابتدا توسط تیم برنرز لی در اواخر ۱۹۹۱ در اینترنت قرار گرفت. این سند ۱۸ مولفه تشکیل‌دهنده طرح اولیه و نسبتا ساده از HTML بود. HTML یک زبان نشانه‌گذاری است که مرورگرهای وب از آن بر تفسیر و ایجاد متن، تصویر و دیگر متریال‌ها به صفحات وب تصویری و صوتی استفاده می‌کنند. ویژگی‌های پیش‌فرض هر یک از آیتم‌های HTML در مرورگر تعریف شده و می‌توان با استفاده از CSS توسط طراح صفحات وب، آن‌ها را تغییر داده یا ارتقا بخشید. HTML نشانه‌گذاری از چندین مولفه کلیدی شامل تگ‌ها تشکیل شده‌ است. تگ‌های HTML معمولا به صورت جفت‌هایی مانند <h1> و <h1/>  هستند. گرچه برخی از‌ آن‌ها مانند <img>  نشان‌دهنده عناصر خالی بوده و جفت ندارند. اولین تگ در این جفت را تگ آغازین و تگ دوم را تگ پایانی می‌نامند. در زیر یک نمونه از برنامه‌ی کلاسیک «Hello World!» را می‌بینید که یک آزمایش رایج برای مقایسه زبان‌های برنامه‌نویسی، اسکریپت و نشانه‌گذاری است. این نمونه با استفاده از ۹ خط کد منبع نوشته شده است:

متن میان <html> و <html/>  در واقع صفحه وب را تعریف کرده و متن بین <body> و <body/>  محتوای قابل مشاهده متن است. متن نشانه‌گذاری <title>This is a title</title> عنوان صفحه مرورگر را تعریف می‌کند. 

تکامل HTML به مرور زمان

HTML زبانی است که طی زمان برای ایجاد وب سایت‌های زیباتر و کارآمدتر دچار تحول شد. HTML 1.0 اولین نسخه منتشر شده در جهان بود. در آن زمان تعداد برنامه نویس وب چندان زیاد نبود و این زبان هم تا حدودی محدود کننده به نظر می‌رسید. تنها کاری که می‌شد با نسخه اولیه HTML انجام داد، قرار دادن متن ساده در وب بود. پس از آن نسخه HTML 2.0 به بازار معرفی شد که تمام ویژگی‌های نسخه اول به علاوه چند ویژگی جدید را با خود داشت. این نسخه تا ژانویه ۱۹۹۷ و تعریف ویژگی‌های کلیدی برای HTML، به عنوان استانداردی برای طراحی سایت در نظر گرفته می‌شد.

تولد HTML 3.0

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

HTML 3.2

کمی بعدتر کنسرسیوم وب جهانی اولین کار خود را به بازار ارائه کرد که به HTML 3.2 معروف ‌شد و تغییرات اندکی نسبت به نسخه  پیشین داشت و بسیاری از مراحل بزرگ را به نسخه‌های بعدی موکول کرده بود. بسیاری از تگ‌های قبلی در این نسخه و استانداردهای جدید به چشم نمی‌خورد. اما خیلی زود در ژانویه ۱۹۹۷ به نسخه استاندارد تبدیل شد و امروزه تمام مرورگرها از ویژگی‌های آن به طور کامل پشتیبانی می‌کنند.

HTML 4.01؛ تحول بزرگ

نسخه HTML 4.01 تحول بزرگی نسبت به استانداردهای اولیه HTML در نظر گرفته می‌شد؛ بیشتر کارایی‌های جدیدی که در این نسخه آورده شده بود، در واقع ارتقا و پیشرفتی از نسخه HTML 3.0 به علاوه چندین ویژگی جدید و پیشرفته بود. این نسخه در دسامبر ۱۹۹۷ توسط کنسرسیوم وب جهانی پیشنهاد شد و در آوریل ۱۹۹۸ به استاندارد رسمی طراحی سایت تبدیل شد. پشتیبانی مرورگر از این زبان جدید و تقریبا بیشتر تگ‌ها و خصوصیات توسط مایکروسافت در مرورگر محبوب IE5 صورت گرفت.

ورود XHTML

در ابتدای قرن ۲۱، کنسرسیوم وب جهانی XHTML 1.0 را به بازار پیشنهاد کرد. از ۲۶ ژانویه ۲۰۰۰ این زبان به عنوان استاندارد مشترک با HTML 4.01 در طراحی سایت به کار می‌رود، با این تفاوت‌ که کدها باید در آن طبق قانون نوشته شده و برنامه‌نویس حق تغییر در ترتیب نوشتن کدها را ندارد. پس از این دو نسخه، HTML 5 به بازار عرضه شد که زبانی برای طراحی فعلی و آینده وب سایت‌ها تعریف شده است. برنامه نویسان وب معتقدند ویژگی‌های تعبیه شده در این نسخه تا ده سال آینده پاسخگوی نیازهای وب خواهد بود. بسیاری از بخش‌های آن برای کاربران قبلی HTML آشنا و بسیاری دیگر جدید و ناشناخته است.

معرفی HTML5

طی سال‌ها پس از ظهور زبان HTML به دنیای برنامه‌نویسی، نسخه‌های متعددی به بازار عرضه شد که کاستی‌ها و نواقص زبان اولیه را رفع می‌کرد. اولین پیش‌نویس HTML5 در سال ۲۰۰۸ و نسخه‌ی کامل آن در سال ۲۰۱۴ به بازار معرفی شده و قابلیت‌های فراوانی را در خود گنجانده و حجم زیادی از کارها را از دوش برنامه نویسان وب برداشته است. نسخه HTML5.1 در ۲۱ ژوئن ۲۰۱۶ منتشر شد.

از جمله موارد جدیدی که در HTML5 رخ داده ساده بودن عبارت DOCTYPE است:

عبارت رمزگذاری کاراکتر (charset) بسیار ساده است:

نمونه‌ای از کد HTML5 را در زیر مشاهده می‌کنید:

روش پیش‌فرض رمزگذاری کاراکتر در HTML5 به صورت UTF-8 است.

عناصر جدید در HTML5

جالب‌ترین عناصر جدیدی که به HTML5 اضافه شده، شامل موارد زیر است:

  • عناصر معنایی مانند <header>، <footer>، <article> و <section>
  • خصوصیات جدید برای عناصر فرم مانند عدد، تاریخ، زمان، تقویم و دامنه
  • عناصر گرافیکی جدید مانند <svg> و <canvas>
  • عناصر چند رسانه‌ای مانند <audio> و <video>

در بخش‌های بعدی آموزش HTML5 یاد می‌گیرید که چطور به مرورگرهای قدیمی اجرای عناصر جدید و ناشناخته HTML5 را بیاموزید.

API (رابط برنامه نویسی اپلیکیشن) جدید در HTML5

جالب‌ترین API‌های جدید که به HTML5 افزوده شده شامل موارد زیر است:

  • HTML Geolocation (موقعیت جغرافیایی)
  • HTML drag & drop
  • HTML Local Storage (جایگزینی قدرتمند برای کوکی‌ها)
  • HTML Application Cache
  • HTML Web Worker
  • HTML SSE

عناصر حذف شده در HTML5

عناصر HTML4 که در جدول زیر آمده‌اند در نسخه پنجم HTML یعنی HTML5، حذف شد‌ه‌اند:

پشتیبانی مرورگر‌ ها از HTML5

تمامی مرورگرهای جدید و پیشرفته از HTML5 پشتیبانی می‌کنند. علاوه بر این، تمامی مرورگرهای جدید و قدیمی به طور خودکار عناصر ناشناخته را به عنوان عناصر inline (یعنی عناصر که در یک خط و کنار هم قرار گرفته و به اندازه محتوای خود فضا اشغال می‌کنند) اجرا می‌کند. به همین دلیل شما می‌توانید به مرورگرهای قدیمی بیاموزید که چگونه عناصر ناشناخته HTML را اجرا کنند.

تعریف عناصر معنایی به عنوان عناصر Block

در HTML5 هشت عنصر معنایی جدید تعریف شده است که تمامی آن‌ها عناصر block-level هستند (یعنی عناصر در کنار یکدیگر قرار نگرفته و محتوای هر یک از آن‌ها یک خط کامل را اشغال می‌کند و محتوای عنصر بعدی باید در خط بعدی قرار بگیرد). برای این که از رفتار صحیح مرورگرها قدیمی نسبت به عناصر جدید مطمئن شوید می‌توانید ویژگی display در CSS را برای آن دسته از عناصر HTML به صورت block تنظیم کنید:

افزودن عناصر جدید به HTML

شما هم می‌توانید عناصر جدیدی را با استفاده از ترفندهای مرورگر به یک صفحه HTML اضافه کنید. در مثال زیر یک عنصر جدید به نام <myHero> به صفحه HTML اضافه شده و یک استایل برای آن تعریف می‌شود:

عبارت جاوا اسکریپتی ("document.createElement("myHero برای ایجاد یک عنصر جدید در اینترنت اکسپلورر ۹ و نسخه‌های قدیمی‌تر، لازم است.

مشکلات موجود در اینترنت اکسپلورر 8 برای HTML5

شما می‌توانید از راه حلی که در بالا گفته شد، برای تمامی عناصر جدید HTML5 استفاده کنید. البته اینترنت اکسپلورر 8 و نسخه‌های قدیمی‌تر، اجازه تعریف استایل برای عناصر ناشناخته را نمی‌دهند. اما روشی به نام HTML5Shiv ابداع شد که یک راه حل جاوا اسکریپتی برای ایجاد امکان استایل دادن به عناصر HTML5 در نسخه‌های قبل از اینترنت اکسپلورر ۹ است.

نحوه کدنویسی برای HTML5Shiv

HTML5Shiv یک فایل جاوا اسکریپتی است که در یک تگ <script> رفرنس داده شده و داخل تگ <head> قرار داده می‌شود. شما باید در زمان استفاده از عناصر جدید HTML5 مانند <article>، <section>، <aside>، <nav> و <footer> از HTML5Shiv استفاده کنید:

نمونه استفاده از HTML5Shiv

اگر نمی‌خواهید HTML5Shiv را روی سایت خود دانلود و ذخیره کنید، می‌توانید به نسخه موجود روی سایت CDN مراجعه کنید. کد HTMl5Shiv باید پس از هرگونه شیوه‌نامه‌ای (stylesheet)، داخل عنصر <head> قرار بگیرد:

HTML5 با قابلیت‌ها و ساختار جدید خود کمک زیادی به برنامه نویسان می‌کند. از نمونه قابلیت‌ها و ویژگی‌های خوب HTML5 می‌توان به پشتیبانی از ویدیو و فایل صوتی با استفاده از تگ‌های <video> و <audio>، کدهای تمیز و خوانا، ذخیره هوشمندانه با استفاده از Local Storage، تعامل بهتر کابر با سایت با استفاده از عناصری مانند Drag & Drop، امکان نوشتن بازی با استفاده از تگ <canvas> و امکان طراحی سایت بهتر برای نسخه موبایل اشاره کرد.