HTML چیست؟ آشنایی با اجزا ، کاربردها و تگ های زبان نشانه گذاری HTML

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

HTML چیست؟

HTML یک زبان پایه برای ایجاد صفحات وب محسوب می‌شود و به‌عنوان چارچوب ساختاری، امکان نمایش محتوای سایت را برای شما فراهم می‌کند. این زبان نشانه‌گذاری، عناصر و تگ‌های مختلفی را شامل می‌شود که ساختار، چیدمان و نمایش داکیومنت‌های وب را تعریف خواهد کرد. HTML به‌صورت رایگان در دسترس قرار دارد. در حقیقت، هر صفحه وبی که مشاهده می‌کنید، متشکل از کدهای HTML بسیاری است. در هر صفحه وب، اگر کلید‌های Ctrl + U را فشار دهید، می‌‌توانید HTML آن صفحه را مشاهده کنید.

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

تاریخچه HTML چیست؟

در این بخش، نحوه تکامل HTML از یک زبان نشانه‌گذاری ساده تا تبدیل آن به ستون اصلی توسعه وب مدرن بررسی می‌‌شود.

۱- پیدایش HTML

در سال ۱۹۸۹ میلادی، مفهوم سیستم ابرمتن جهانی پیشنهاد شد و به‌واسطه آن، زمینه‌ای برای World Wide Web فراهم شد. در ادامه، در سال ۱۹۹۱ میلادی، اولین ورژن HTML ایجاد شد که در آن، Tag های نشانه‌گذاری به‌منظور ساختاردهی و قالب‌بندی اسناد وب معرفی شدند.

۲- توسعه اولیه

در سال ۱۹۹۵ میلادی، HTML 2.0 با تعریف عناصر اساسی مانند Heading، پاراگراف و لیست، استانداردسازی شد. با انتشار HTML 3.0 در سال ۱۹۹۵ میلادی، Cascading Style Sheets یا همان CSS معرفی شد و بدین طریق، ساختار از نمایش تمایز پیدا کرد. این موضوع کنترل بیشتری بر ظاهر صفحات وب ایجاد می‌کرد.

۳- رقابت مرورگرها و عرضه HTML 4.0

در اواخر دهه ۱۹۹۰، رقابت بین Netscape Navigator و Internet Explorer، نقشی محوری در پیشبرد نوآوری در HTML و تکنولوژی‌های وب داشت. به‌طوریکه این دوره مرورگر، Feature ها و افزونه‌هایی را به هدف جذب کاربران و توسعه‌دهندگان معرفی می‌کردند. در سال ۱۹۹۷ میلادی، HTML 4.0 به‌همراه امکاناتی همچون پشتیبانی از زبان‌های اسکریپتی، Mulitmedia Embedding و فرم‌های بهبودیافته گسترش داد.

۴- XHTML و تحول XML

XHTML 1.0 در سال ۲۰۰۰ میلادی به‌منظور بهبود هرچه بیشتر HTML و به‌عنوان کاربردی از XML (زبان نشانه گذاری قابل توسعه) ایجاد شد. این ورژن، سینتکس سخت‌گیرانه‌تری داشته و با ابزارهای مبتنی‌بر XML سازگاری بیشتری دارد. با وجود تحولات مربوط به XML، نسخه HTML5 در ۲۰۰۸ میلادی به هدف رسیدگی به محدودیت‌های XHTML عرضه شد؛ چراکه نیاز به یک استاندارد وب انعطاف‌پذیرتر و سازگار با چندرسانه‌ای احساس می‌شد.

۵- استانداردسازی HTML5

در سال ۲۰۱۴، HTML5 نهایی شد. در این ورژن، Feature های جدید و API هایی برای مالتی‌مدیا، گرافیک، ذخیره‌سازی آفلاین و موارد دیگر معرفی شدند و بدین شیوه، تحولی در توسعه وب ایجاد شد. HTML5 به وب سایت این امکان را داد که با دستگاه‌ها و اندازه‌های مختلف صفحه نمایش سازگار شوند. اگر علاقه‌مند به آشنایی با این نسخه هستید، پیشنهاد می‌کنیم مقاله Html5 چیست و چه فرقی با html دارد را مطالعه نمایید.

۶- چشم انداز آینده

با تلاش‌های مداوم برای بهبود دسترسی، امنیت، عملکرد و همچنین اکتشاف فناوری‌های پیشرو مانند WebAssembly و Web Components، مسیر تکامل HTML ادامه دارد.

نسخه های مختلف HTML

در بخش قبلی، تاریخچه HTML و پیدایش ورژن‌های مختلف آن را بررسی کردیم. به‌صورت کلی، نسخه‌های اصلی HTML عبارتند از: 

• HTML 1.0
• HTML 2.0
• HTML 3.2
• HTML 4.0
• XHTML 1.0
• HTML5

اجزای مختلف HTML چیست؟

HTML از اجزای گوناگونی تشکیل شده است که در کنار یکدیگر، محتوا را در وب سازماندهی کرده و نمایش می‌دهند. اجزای اصلی HTML به شرح زیر است:

• عناصر (Elements): اسناد HTML با استفاده از عناصر ایجاد می‌شوند. این عناصر، ساختار و محتوای صفحه وب را تعریف می‌کنند و می‌توانند مواردی همچون عناوین، پاراگراف‌ها، تصاویر، لینک‌ها، لیست‌ها و موارد دیگر را شامل شوند.
• تگ‌ها (Tags): تگ‌ها برای علامت‌گذاری ابتدا و انتهای عناصر HTML استفاده می‌شوند و محتوا را دربرمی‌گیرند. تگ‌ها از یک تگ Opening، سپس محتوا و یک تگ Closing تشکیل شده‌اند. به‌عنوان مثال، <p> تگ بازکننده برای یک Element از نوع پاراگراف است و </p> تگ موردنیاز برای بستن آن است.
• صفات (Attributes): صفات، اطلاعات اضافه‌ای درخصوص عناصر HTML به شما ارائه می‌دهند و رفتار یا ظاهر آن‌ها را تغییر خواهند داد. صفات به Opening Tag یک عنصر اضافه می‌شوند و از یک «نام» و یک «مقدار» تشکیل شده‌اند. به‌عنوان مثال، در <img src=”image.jpg”> ، صفت src می‌تواند URL سورسِ یک المنت تصویر را مشخص کند. 
• ساختار سند (Document Structure): داکیومنت‌های HTML از یک ساختار سلسله‌مراتبی (Hierarchical Structure) تحت عنوان مدل شی سند (DOM) پیروی می‌کنند. ساختار سند متشکل از عناصر تودرتو یا اصطلاحاً Nested است و یک نمای سلسله‌مراتبی درختی را ایجاد می‌کند که در آن، هر عنصر یک گره (Node) است. توجه کنید که عنصر <html> ، ریشه سند است و تمامی ساختار سند را دربرمی‌گیرد.
• بخش Head: سکشنِ <head> یک سند HTML ، متادیتاها و لینک‌هایی به سورس‌های خارجی مانند استایل شیت‌ها، اسکریپت‌ها و اعلامیه‌های کدگذاری کاراکتر را شامل می‌شود. <title>, <meta>, <link> و <script> از عناصر رایج Head Section محسوب می‌شوند.
• بخش Body: بخش <body> از سند HTML ، محتوای اصلی صفحه وب، شامل متن، تصاویر، لینک‌ها، عناصر مالتی‌مدیا و سایر عناصر HTML را دربرمی‌گیرد. بخش body جایی است که محتوای قابل مشاهده صفحه در آن ارائه می شود و به کاربران نمایش داده می‌شود.
• محتوای متنی: HTML از انواع مختلفی از محتوای متنی، ازجمله عناوین (h1-h6)، پاراگراف‌ها (<p>)، لیست‌ها ( <ul> و <ol>)، عناصر Inline ( یعنی <span> و <a>) و سایر موارد پشتیبانی می‌کند.
• لینک‌ها و Anchor ها: با استفاده از المنت <a> ، امکان ایجاد Hyperlink فراهم می‌شود و به‌واسطه آن، کاربران می‌توانند بین صفحات وب مختلف یا بخش‌هایی از همان صفحه پیمایش کرده و جابه‌جا شوند. لینک‌ها با استفاده از صفت href تعریف می‌شوند و در آن، URL مقصد مشخص خواهد شد.
• تصاویر: برای نمایش تصاویر در صفحات وب، می‌توانید از عنصر <img> استفاده کنید. توجه کنید که URL فایل تصویر ازطریق صفت src تعیین می‌شود. علاوه‌براین، می‌توانید از alt برای تعیین متن جایگزین و width/height به هدف کنترل ابعاد تصویر بهره‌مند شوید.
• فرم‌ها: HTML با ارائه المنت‌های فرم، شامل <form>، <input>، <textarea>، <select> و غیره، امکان ساختن وب‌فرم‌های تعاملی را دارید. در چنین فرم‌هایی می‌توان داده‌ها را وارد و برای پردازش به سرور، ارسال کرد. المنت‌های فرم، ورودی کاربر را ازطریق انواع ورودی دریافت می‌کنند و می‌توانند با به‌کارگیری CSS و جاوا اسکریپت، سبک‌بندی و اعتبارسنجی شوند.

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

کاربردهای HTML چیست؟

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

مزایای HTML

مزیت‌های HTML عبارتند از:

• سادگی یادگیری زبان HTML و قابل دسترس بودن آن برای کاربران مبتدی و غیرفنی
• تطبیق‌پذیری و امکان استفاده از آن برای ایجاد صفحات وب ساده و وب اپلیکیشن‌های پیچیده
• پشتیبانی از رایج‌ترین مرورگرها و Rendering تطبیق‌پذیر آن در پلتفرم‌ها و دستگاه‌های مختلف
• امکان بهبود رتبه‌بندی ماشین جستجو و SEO-Friendly بودن آن
• حاوی انواع فیچرها و Attirbute ها برای بهبود دسترسی به وب
• قابل یکپارچه‌سازی با سایر تکنولوژی‌های وب مانند CSS و جاوا اسکریپت
• مقرون‌به‌صرفه و دارای کامیونیتی فعال از توسعه‌دهندگان

معایب HTML

موارد زیر از کاستی‌های HTML به‌شمار می‌روند:

• وجود دغدغه‌های امنیتی و احتمال آسیب‌پذیری به تهدیداتی مانند حملات XSS
• محدودیت در گزینه‌های استایل‌دهی و یکپارچه‌سازی Multimedia
• سربار (Overhead) مربوط به نگهداری کدبیس گسترده HTML
• استفاده از آن غالباً برای ایجاد صفحات وب ایستا (Static)

مهم ترین تگ های HTML چیست؟

برخی از مهم‌ترین تگ های HTML به‌همراه توضیحات آن‌ها در ادامه فهرست شده‌‌اند:

• <html>: ریشه سند HTML است. این تگ، کل کد HTML را دربرمی‌گیرد و نشان‌دهنده شروع و پایان آن است.
• <head>: متادیتایی درمورد سند HTML دارا است. این اطلاعات در صفحه وب قابل مشاهده نیستند اما برای مرورگرها و Search Engine ها حائز اهمیت هستند.
• <title>: عنوان صفحه HTML را که در تب یا نوار عنوان مرورگر نشان داده می‌شود را تعریف می‌کند.
• <body>: محتوای قابل مشاهده صفحه وب، مانند متن، تصاویر و سایر عناصر را شامل می‌شود.
• <h1> تا <h6>: امکان تعریف عنوان‌ها با اندازه‌های مختلف را فراهم می‌کنند. <h1> بزرگترین و برجسته‌ترین و <h6> کوچک‌ترین عنوان محسوب می‌شوند.
• <p>: به‌واسطه تگ P، یک پاراگراف متن ایجاد می‌شود.
• <a>: پیوند یا لینک ازطریق تگ <a> تعریف می‌شود.
• <img>: با استفاده از این تگ در HTML ، می‌توانید تصویر را در صفحه وب قرار دهید.
• <ul>: این Tag، یک لیست بدون ترتیب ایجاد می‌کند که معمولاً با بولت‌های مشکی نمایش داده می‌شود.
• <ol>: برای ایجاد یک لیست با ترتیب، که معمولاً با شماره نمایش داده خواهد شد، از این تگ استفاده می‌شود.
• <li>: یک آیتم، در لیستِ بدون ترتیب یا لیست باترتیب تعریف خواهد کرد.
• <div>: تگ div نشان‌دهنده یک بخش یا تقسیم‌بندی کلی در صفحه وب است و در بیشتر موارد، به‌منظور گروه‌بندی عناصر و اعمال استایل به کار می‌رود.
• <span>: یک عنصر درون‌خطی (Inline) را تعریف می‌کند که برای اعمال استایل به بخش خاصی از متن یا گروه‌بندی المنت‌های درون‌خطی استفاده می‌شود.
• <table>: یک ساختار جدول برای سازماندهی داده‌ها در قالب سطرها و ستون‌ها ایجاد خواهد کرد.
• <form>: فرمی را برای به‌دست‌آوردن ورودی کاربر، شامل فیلدهای متن، کادرهای تأیید و دکمه‌ها تعریف می‌کند.
• <input>: در داخل فرم، یک فیلد ورودی ایجاد می‌کند که برای مواردی همچون ورود متن، رمز عبور، کادر تأیید و… استفاده می‌شود.
• <textarea>: یک فیلد ورودی متنِ چندخطی را در درون فرم تعریف خواهد کرد.

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

رابطه HTML با CSS و JavaScript

HTML ساختار و کانتنت صفحه وب را تعریف می‌کند؛ درصورتیکه CSS وظیفه تعیین ظاهر آن، شامل رنگ‌ها، فونت‌ها و چیدمان صفحه را برعهده دارد. جاوا اسکریپت با فعال‌کردن ویژگی‌هایی مانند انیمیشن‌ها، اعتبارسنجی فرم‌ها و دستکاری داده‌های سمت کاربر، به صفحات وب قابلیت تعامل و رفتار پویا را می‌افزاید. CSS با استفاده از Selector ها، عناصر HTML را هدف قرار می‌دهد و استایل‌هایی را به آن‌ها اعمال خواهد کرد. جاوا اسکریپت ازطریق مدل شی سند (DOM) با HTML و CSS تعامل کرده و تغییرات را به‌صورت داینامیک اعمال می‌کند. این تکنولوژی‌ها به‌صورت یکپارچه باهم کار می‌کنند تا UX تعاملی و مناسبی را در وب ایجاد کنند. برای درک بهتر این رابطه، پیشنهاد می‌کنیم نگاهی به مقاله جاوا اسکریپت در طراحی سایت داشته باشید.

ساخت یک فایل HTML

تا این بخش از مقاله احتمالاً متوجه شده‌اید که HTML چیست و چه کاربردی دارد. حال قصد داریم کارایی آن را به‌صورت عملی نشان دهیم. برای ایجاد یک فایل HTML ، کافی است کدها را به صورتی که توضیح داده شد، در Notepad قرار دهید و با فرمت HTML (پسوند html. ) ذخیره کنید. پس از آن، اگر فایل را با یک مرورگر باز کنید، جملات نوشته‌شده را به‌صورت یک صفحه وب مشاهده می‌کنید. به همین سادگی! البته هما‌طور که پیش‌تر به آن اشاره شد، این صفحه تنها شامل محتوا و چینش ساده‌ای است و برای طراحی جزئیات، باید از ابزارهای دیگری استفاده کنید.

نرم افزارهای همراه: CSS

مطابق آنچه تا به اینجا یاد گرفتید، هرچند HTML پایه صفحات را برای شما ایجاد می‌‌کند، اما به‌تنهایی نمی‌‌توانید از آن برای نمایش یک صفحه وب استفاده کرد. بنابراین، ابزارهای دیگری مثل CSS ،PHP ،Javascript ،MySQL و… در کنار آن استفاده می‌شوند. از ابتدایی‌ترینِ این ابزارها، CSS است که از آن برای طراحی ظاهر سایت و محتوایی که قبلاً توسط HTML به نمایش گذاشته شده، استفاده می‌شود. پس‌زمینه، انیمیشن‌‌ها، رنگ‌ها، چارچوب‌‌ها، فونت‌‌ها و آرایش صفحات، همگی از مواردی هستند که با CSS قابل طراحی‌اند. البته اگر قصد طراحی حرفه‌‌ای و موفق در این زمینه را دارید، یادگیری این دو به تنهایی کافی نیست؛ چون بخش بسیار کوچک و محدودی از دنیای طراحی و برنامه‌نویسی وب را تشکیل می‌دهند.

جمع بندی: HTML چیست ؟

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