مقاله آموزشی برنامه نویسی: سیر تکامل HTML و ورژن های مختلف HTML

سفر HTML: از آغاز فروتنانه تا حضوری پویا

زبان نشانه‌گذاری فرامتن (HTML) از زمان پیدایش خود دستخوش تحولات چشمگیری شده است و هر نسل بر نقاط قوت نسل قبلی بنا نهاده و محدودیت‌های آن را برطرف کرده است. این پیشرفت‌ها نقش بسزایی در شکل‌دهی به تجربه اینترنتی که امروزه می‌شناسیم داشته‌اند و از اسناد ایستا به برنامه‌های کاربردی غنی و تعاملی حرکت کرده‌اند.

HTML 1.0: گام‌های بنیادین (اوایل دهه 1990)

اولین نسخه HTML، پایه‌های ساختاربندی و پیوند دادن اسناد در شبکه جهانی وب را بنا نهاد. این نسخه ساده اما انقلابی بود و تگ‌های اساسی برای ایجاد عناوین (<h1> تا <h6>)، پاراگراف‌ها (<p>)، فهرست‌ها (<ul>, <ol>, <li>)، قالب‌بندی متن پایه (<b>, <i>) و مهم‌تر از همه، ابرپیوندها (<a>) را معرفی کرد که به کاربران امکان می‌داد بین صفحات مختلف وب حرکت کنند.

ویژگی‌های کلیدی:

ساختار متن پایه: ارائه عناصر برای سازماندهی محتوا به صورت عناوین، پاراگراف‌ها و فهرست‌ها.
ابرپیوندسازی: معرفی تگ <a> که امکان ایجاد پیوند به اسناد دیگر را فراهم می‌کرد، سنگ بنای وب.
تصاویر درون‌خطی: امکان جاسازی تصاویر با استفاده از تگ <img>.
قالب‌بندی ساده: ارائه گزینه‌های اولیه برای استایل دادن به متن مانند bold و italic.

مثال:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 1.0//EN">
<html>
<head>
  <title>اولین صفحه وب من</title>
</head>
<body>
  <h1>خوش آمدید!</h1>
  <p>این یک پاراگراف ساده از متن است.</p>
  <ul>
    <li>مورد 1</li>
    <li>مورد 2</li>
  </ul>
  <a href="صفحه_دیگر.html">برو به صفحه دیگر</a>
  <img src="تصویر.gif" alt="یک تصویر ساده">
</body>
</html>

HTML 1.0 در قابلیت‌های خود محدود بود و فاقد ویژگی‌هایی برای طرح‌بندی‌های پیچیده یا محتوای پویا بود. با این حال، این یک گام اساسی اولیه بود که راه را برای نسخه‌های پیشرفته‌تر هموار کرد.

HTML 2.0: معرفی تعامل (1995)

HTML 2.0 بر پایه HTML 1.0 بنا نهاده شد و ویژگی‌هایی را معرفی کرد که امکان تعامل اولیه کاربر را فراهم می‌کرد. مهم‌ترین افزودنی، تگ <form> بود که امکان ایجاد فرم‌هایی برای جمع‌آوری ورودی کاربر را فراهم می‌کرد.

ویژگی‌های کلیدی (علاوه بر HTML 1.0):

فرم‌ها: عنصر <form> به همراه انواع ورودی مانند <input type="text">، <input type="radio">، <input type="checkbox"> و <textarea> امکان ایجاد عناصر تعاملی برای ارسال داده‌ها را فراهم کرد.
اسکریپت‌نویسی سمت سرور: در حالی که HTML 2.0 خود شامل قابلیت‌های اسکریپت‌نویسی نبود، معرفی فرم‌ها زمینه را برای تعامل با اسکریپت‌های سمت سرور (مانند CGI) برای پردازش ورودی کاربر فراهم کرد.

مثال:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
  <title>فرم ساده</title>
</head>
<body>
  <h2>تماس با ما</h2>
  <form method="post" action="/cgi-bin/process_form.cgi">
    <p>نام: <input type="text" name="name"></p>
    <p>ایمیل: <input type="email" name="email"></p>
    <p>پیام: <textarea name="message"></textarea></p>
    <input type="submit" value="ارسال">
  </form>
</body>
</html>

HTML 2.0 یک گام مهم به سوی یک وب پویاتر بود و به کاربران امکان می‌داد به جای مصرف منفعلانه اطلاعات، فعالانه مشارکت کنند.

HTML 3.2: افزودن ساختار و استایل (1997)

HTML 3.2، اولین توصیه کنسرسیوم وب جهان‌گستر (W3C)، پیشرفت‌های چشمگیری در زمینه گزینه‌های طرح‌بندی و کنترل استایل به ارمغان آورد. این نسخه ویژگی‌هایی مانند جداول را معرفی کرد که امکان ارائه ساختاریافته‌تر داده‌ها را فراهم می‌کرد، و همچنین تگ <style>، اگرچه CSS هنوز در مراحل ابتدایی خود بود.

ویژگی‌های کلیدی (علاوه بر HTML 2.0):

جداول: تگ‌های <table>، <tr>، <td> و <th> امکان ایجاد طرح‌بندی‌های داده‌ای جدولی را فراهم کردند.
اپلت‌ها: تگ <applet> امکان جاسازی اپلت‌های جاوا برای محتوای تعاملی را فراهم می‌کرد (اگرچه این تا حد زیادی جای خود را به فناوری‌های دیگر داده است).
استایل‌دهی پایه: تگ <style> امکان استایل‌دهی درون‌خطی ابتدایی را فراهم می‌کرد، اگرچه به اندازه شیوه‌نامه‌های خارجی قدرتمند یا انعطاف‌پذیر نبود.
جریان متن در اطراف تصاویر: ویژگی‌هایی مانند align برای تگ <img> کنترل اولیه بر نحوه جریان متن در اطراف تصاویر را فراهم می‌کرد.

مثال:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
  <title>مثال HTML 3.2</title>
</head>
<body>
  <h2>یک جدول ساده</h2>
  <table>
    <tr>
      <th>نام</th>
      <th>سن</th>
    </tr>
    <tr>
      <td>جان دو</td>
      <td>30</td>
    </tr>
    <tr>
      <td>جین اسمیت</td>
      <td>25</td>
    </tr>
  </table>

  <p><img src="تصویر_کوچک.gif" align="left" alt="تصویر کوچک">این متن در اطراف تصویر جریان خواهد یافت.</p>
</body>
</html>

HTML 3.2 یک جهش قابل توجه در زمینه قابلیت‌های ارائه بود و به توسعه‌دهندگان وب امکان می‌داد محتوای بصری جذاب‌تر و ساختاریافته‌تری ایجاد کنند.

HTML 4.01: استانداردسازی و تفکیک دغدغه‌ها (1999)

HTML 4.01 به یک استاندارد پرکاربرد تبدیل شد و مفاهیم مهمی مانند تفکیک ساختار (HTML)، ارائه (CSS) و رفتار (JavaScript) را معرفی کرد. این نسخه بسیاری از عناصر نمایشی را به نفع CSS منسوخ کرد و کدنویسی تمیزتر و قابل نگهداری‌تری را ترویج داد.

ویژگی‌های کلیدی (علاوه بر HTML 3.2):

شیوه‌نامه‌های آبشاری (CSS): در حالی که قبلاً معرفی شده بود، HTML 4.01 به شدت از استفاده از فایل‌های CSS خارجی برای مدیریت ارائه صفحات وب حمایت کرد که منجر به سازماندهی و سازگاری بهتر شد.
تعاریف نوع سند (DTDs): اعلان <!DOCTYPE> اجباری شد و نسخه HTML را مشخص می‌کرد و به مرورگرها اجازه می‌داد صفحات را مطابق با استانداردها رندر کنند.
عناصر معنایی (تا حدودی محدود): اگرچه به اندازه نسخه‌های بعدی گسترده نبود، HTML 4.01 برخی عناصر معنایی مانند <abbr> و <code> را برای ارائه معنای بیشتر به محتوا معرفی کرد.
فریم‌ها و آی‌فریم‌ها: تگ‌های <frame> و <iframe> امکان جاسازی محتوا از منابع دیگر را در یک صفحه وب فراهم می‌کردند (اگرچه فریم‌ها اکنون تا حد زیادی منسوخ شده‌اند).
ملاحظات دسترسی‌پذیری: HTML 4.01 بر اهمیت دسترسی‌پذیری از طریق ویژگی‌هایی مانند alt برای تصاویر و تگ <label> برای عناصر فرم تأکید کرد.

مثال (نشان دادن CSS):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>HTML 4.01 با CSS</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1 class="main-heading">به وب‌سایت من خوش آمدید</h1>
  <p class="intro-paragraph">این یک پاراگراف است که با CSS استایل داده شده است.</p>
</body>
</html>

CSS (styles.css):

.main-heading {
  color: blue;
  text-align: center;
}

.intro-paragraph {
  font-family: sans-serif;
  font-size: 16px;
}

HTML 4.01 یک نسخه محوری بود که بر استانداردهای وب و تفکیک دغدغه‌ها تأکید داشت و منجر به وب‌سایت‌های سازمان‌یافته‌تر، در دسترس‌تر و قابل نگهداری‌تر شد.

XHTML 1.0: رویکردی سخت‌گیرانه‌تر (2000)

زبان نشانه‌گذاری فرامتن توسعه‌پذیر (XHTML) 1.0 اساساً بازنویسی HTML 4.01 به عنوان یک برنامه کاربردی XML بود. هدف اصلی ایجاد یک زبان نشانه‌گذاری دقیق‌تر و خوش‌ساختارتر بود که قوانین نحوی سخت‌گیرانه‌تری را اعمال می‌کرد.

تفاوت‌های کلیدی با HTML 4.01:

نحو XML: XHTML مستلزم آن بود که اسناد XML خوش‌ساختار باشند، به این معنی که:
- همه تگ‌ها باید به درستی تودرتو باشند.
  همه تگ‌ها باید بسته شوند (مثلاً <br /> به جای <br>).
  نام‌های ویژگی باید با حروف کوچک باشند.
  مقادیر ویژگی باید در داخل نقل قول قرار بگیرند.
  یک عنصر ریشه <html> اجباری است.
DOCTYPE سخت‌گیرانه‌تر: XHTML دارای اعلانات DOCTYPE خاص و سخت‌گیرانه‌تری بود.

مثال:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>مثال XHTML 1.0</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
  <h1 class="main-heading">به وب‌سایت من خوش آمدید</h1>
  <p class="intro-paragraph">این یک پاراگراف است که با CSS استایل داده شده است.</p>
  <br />
  <img src="تصویر.jpg" alt="یک تصویر" />
</body>
</html>

در حالی که هدف XHTML آوردن مزایای XML به توسعه وب بود، الزامات نحوی سخت‌گیرانه آن اغلب توسط توسعه‌دهندگان دست و پا گیر تلقی می‌شد. در نهایت، به اندازه HTML5 که مسیر آینده توسعه وب به سمت آن تغییر کرد، به طور گسترده مورد استقبال قرار نگرفت.

HTML5: استاندارد مدرن وب (2014 - تاکنون)

HTML5 آخرین نسخه اصلی HTML است و تغییرات اساسی در توسعه وب ایجاد کرده است. این نسخه ویژگی‌هایی را که قبلاً به افزونه‌ها (مانند Flash) متکی بودند، ادغام می‌کند، مجموعه وسیعی از عناصر معنایی جدید را معرفی می‌کند، کنترل‌های فرم را بهبود می‌بخشد و پشتیبانی بومی برای چندرسانه‌ای و گرافیک ارائه می‌دهد.

ویژگی‌های کلیدی (علاوه بر نسخه‌های قبلی):

عناصر معنایی: عناصری مانند <article>، <aside>، <nav>، <header>، <footer>، <section> را برای ارائه معنای بیشتر به ساختار یک صفحه وب معرفی می‌کند و SEO و دسترسی‌پذیری را بهبود می‌بخشد.
پشتیبانی از چندرسانه‌ای: پشتیبانی بومی از عناصر <audio> و <video>، که نیاز به افزونه‌های شخص ثالث برای جاسازی صدا و تصویر را از بین می‌برد.
Canvas و SVG: عنصر <canvas> یک API برای ترسیم گرافیک‌های دو بعدی پویا ارائه می‌دهد، در حالی که گرافیک‌های برداری مقیاس‌پذیر (SVG) امکان جاسازی گرافیک‌های برداری را فراهم می‌کند.
فرم‌های پیشرفته: انواع ورودی جدید (مانند email، date، number، range)، ویژگی‌ها (مانند required، placeholder) و ویژگی‌های اعتبارسنجی فرم.
ذخیره‌سازی وب: Local Storage و Session Storage مکانیسم‌هایی برای ذخیره داده‌ها مستقیماً در مرورگر کاربر فراهم می‌کنند و عملکرد و قابلیت‌های آفلاین را بهبود می‌بخشند.
کارگران وب (Web Workers): امکان اجرای جاوااسکریپت در پس‌زمینه بدون مسدود کردن رشته اصلی را فراهم می‌کند و پاسخگویی برنامه را بهبود می‌بخشد.
موقعیت جغرافیایی: یک API برای دسترسی به موقعیت جغرافیایی کاربر ارائه می‌دهد.
کشیدن و رها کردن: پشتیبانی بومی از قابلیت کشیدن و رها کردن.
ساده‌سازی DOCTYPE: اعلان <!DOCTYPE html> به طور قابل توجهی ساده‌تر است.
سازگاری با نسخه‌های قبلی: به گونه‌ای طراحی شده است که تا حد زیادی با مرورگرهای قدیمی سازگار باشد.

مثال (نشان دادن عناصر معنایی و ویدیو):

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>مثال HTML5</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>وب‌سایت فوق‌العاده من</h1>
    <nav>
      <ul>
        <li><a href="#">صفحه اصلی</a></li>
        <li><a href="#">درباره ما</a></li>
        <li><a href="#">خدمات</a></li>
        <li><a href="#">تماس</a></li>
      </ul>
    </nav>
  </header>

  <article>
    <section>
      <h2>مقدمه</h2>
      <p>این محتوای اصلی مقاله است.</p>
    </section>
    <section>
      <h2>نمایش ویدیویی</h2>
      <video controls width="640" height="360">
        <source src="ویدیو_من.mp4" type="video/mp4">
        مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
      </video>
    </section>
  </article>

  <aside>
    <h3>پیوندهای مرتبط</h3>
    <ul>
      <li><a href="#">پیوند 1</a></li>
      <li><a href="#">پیوند 2</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2023 وب‌سایت فوق‌العاده من</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

HTML5 با ارائه یک زبان رسا‌تر، غنی‌تر از نظر ویژگی‌ها و از نظر معنایی بامعنی‌تر، توسعه وب را متحول کرده است. این نسخه راه را برای توسعه برنامه‌های کاربردی وب مدرن هموار کرده است و همچنان با ویژگی‌ها و بهبودهای جدید در حال تکامل است.

لینک استاندارد شده: JWN79HEG