اگر به دنبال پاسخ این سوال هستید که HTML چیست و چه کاربردهایی می‌تواند داشته باشد، دقیقاً جای درستی آمده‌اید. ما در این مقاله قصد داریم ابتدا درباره کاربرد زبان HTML با شما صحبت کنیم، سپس به برخی از معایب و مزایای آن اشاراتی داشته باشیم و برخی از مهم‌ترین تگ‌های آن را به شما معرفی کنیم. شما همچنین با خواندن این مقاله، رابطه بین این زبان با زبان‌هایی مثل CSS و JS را درک خواهید کرد و با HTML5 آشنا خواهید شد.
HTML چیست؟
HTML مخفف Hyper Text Markup Languageاست. این عبارت در فارسی به زبان نشانه‌گذاری فرامتن (فوق متن یا ابرمتن) ترجمه شده است. فرامتن در این ترجمه به این معناست که در ازای متنی که نوشته می‌شود، به ما یک تصویر، لینک یا چیزهای دیگر نمایش داده خواهد شد. همان‌طور که از این ترجمه بر می‌آید، HTML یک زبان نشانه‌گذاری است و زبان برنامه‌نویسی محسوب نمی‌شود.
زبان HTML به‌عنوان اسکلت صفحات وب شناخته می‌شود. اگر یک ساختمان در حال ساخت را در نظر بگیرید، قبل از هر چیز نیاز به یک اسکلت فلزی دارد. این اسکلت را باید در مراحل بعد کامل کرد تا به یک ساختمان قابل سکونت تبدیل شود.
عملکرد زبان HTML چگونه است؟
اگر تا به حال از خودتان پرسیده باشید که اولین قدم برای ورود به دنیای برنامه نویسی چیست، باید به شما بگوییم که ابتدایی‌ترین کار این است که HTML و CSS را یاد بگیرید. HTML را می‌توان زبان استاندارد صفحات وب نامید. این زبان توسط مرورگر، ترجمه و به کاربر نمایش داده می‌شود. دستورالعمل‌های این زبان را TAGیا برچسب می‌نامند. در واقع همه چیز در این زبان در قالب این تگ‌ها ارائه می‌شود. این تگ‌ها بخش‌های مختلف را از هم جدا می‌کنند. با استفاده از آن‌ها، صفحات وب اسکلت‌بندی می‌شوند و در نهایت به نمایش گذاشته خواهند شد. هر المانی که در یک صفحه وب موجود است، با این تگ‌ها نشانه‌گذاری می‌شود. هر کدام از این برچسب‌ها، ویژگی‌ها و کاربردهای مخصوص به خود را دارند. مرورگرها طبق این تگ‌ها، متوجه رفتار ساختار صفحه وب می‌شوند. در حقیقت، این تگ‌ها به مرورگرها می‌فهمانند که عناصر تشکیل‌دهنده صفحه وب موردنظر چیست و باید چگونه نشان داده شود.
اگر بخواهیم به زبان ساده توضیح دهیم، باید بگوییم که در صفحات HTML، کدهایی به صورت متنی نوشته می‌شوند؛ یعنی برای تصویر، جدول یا هر چیز دیگر، باید کد مربوط به آن نوشته شود. وقتی موتورهای جستجو با این کدها و تگ‌ها برخورد می‌کنند، المنت مربوط را نمایش خواهند داد.
بنابراین در این زبان، مفاهیم خاصی وجود دارند که در نهایت، روی محتوا تاثیر می‌گذارند. این تاثیرات به واسطه تگ‌های HTML روی محتوا اعمال می‌شوند. برای مثال، این تگ‌ها می‌توانند متن را پررنگ یا ایتالیک کنند یا اینکه لینک‌دهی انجام دهند.
معایب و مزایای زبان HTML چیست؟
تا اینجا به شما توضیح دادیم HTML چیست و چه کاربردی دارد، حال در این بخش می‌خواهیم برخی از معایب و مزایای آن را برای شما شرح دهیم.
مزایای HTML چیست؟
- یادگیری آن راحت و سریع است
- کسب درآمد از آن آسان است
- HTML یکی از پرکاربردترین زبان‌ها در زمینه طراحی Front-End است
- یک فایل HTML را می‌توان با یک ویرایشگر متنی ساده ساخت
- HTML یک زبان آفلاین و کم‌هزینه است
- در تمام مرورگرها قابل اجراست
- متن باز و رایگان است
- با زبان‌های سمت سرور مثل php به‌آسانی ادغام می‌شود
- تقریباً هر فرد یا سازمانی که وب‌سایت دارد، به انجام پروژه HTML CSS نیاز خواهد داشت، بنابراین بازار کار خوبی دارد
معایب HTML چیست؟
- استاتیک است و برای تعامل با کاربر به زبان‌های سمت سرور وابستگی دارد
- برای پشتیبانی از مرورگرهای قدیمی، ضعف دارد
- به دلیل نبود قواعد منطقی برنامه‌نویسی، به طراحی جداگانه هر صفحه نیاز است
پراستفاده‌ترین تگ‌های HTML چیست؟
کوچک‌ترین عنصر در HTML، تگ نام دارد. تگ‌ها بین دو علامت کوچک‌تر و بزرگ‌تر قرار می‌گیرند و معمولاً به صورت دوتایی هستند؛ یعنی یک تگ آغازین و یک تگ پایانی وجود دارد. با این حال بعضی از تگ‌ها، تگ پایانی ندارند.
این تگ‌ها هستند که انجام هر عملی در اچ‌تی‌ام‌ال را امکان‌پذیر می‌کنند. در یک صفحه HTML می‌توان عناصر مختلفی را قرار داد. برای مثال می‌توان عکس، لیست، جدول، متن، تیتر، لینک و … را گذاشت. هر یک از این عناصر، تگ مربوط به خودشان را دارند. مرورگرها به این تگ‌ها و ویژگی‌های مربوط به آن‌ها فراخوان می‌دهند و به این ترتیب، این امکان را فراهم می‌کنند تا این کدها به صورت تصویری نمایش داده شوند. هر یک از تگ‌های HTML معنای مخصوص به خود را دارند و تاثیر به‌خصوصی روی محتوا می‌گذارند.
همه تگ‌ها باید بین علامت کوچک‌تر و بزرگ‌تر قرار گیرند. برای مثال، همه صفحات وب با تگ <html> شروع می‌شوند و با تگ اچ‌تی‌ام‌ال بسته یعنی <html/> خاتمه پیدا می‌کنند. هر کاری که قرار است در صفحه وب انجام شود، باید بین این تگ باز و بسته قرار گیرد. تگ‌هایی که تگ باز و بسته مجزایی دارند، تگ زوج یا المنت نامیده می‌شوند و تگ‌های فرد، آن‌هایی هستند که تگ بسته مجزا ندارند.
تعداد این تگ‌ها بسیار زیاد است و نیازی نیست که برای طراحی وب‌سایت، همه تگ‌ها را بشناسید. در ادامه به معرفی چند نمونه از معروف‌ترین تگ‌های HTML می‌پردازیم.
تگ html چیست؟
اولین کاری که یک برنامه نویس باید انجام دهد، ایجاد تگ html است. این تگ بیس کار است و قرار است همه چیز داخل آن نوشته شود. در واقع بعد از آن که تگ باز و بسته html نوشته شد، باید به سراغ سایر تگ‌ها رفت. تگ باز و بسته html به یک نان ساندویچی شبیه است. تگ باز html، نان بالایی است و تگ بسته آن، نان پایین ساندویچ خواهد بود. سایر تگ‌ها در این بین قرار می‌گیرند.
<html>
.
.
.
</html>
تگ head در زبان HTML چیست؟
برچسبی که بلافاصله بعد از تگ باز <html> قرار می‌گیرد، تگ head است. بسیاری از عناصری که در این بخش وجود دارند، در صفحه وب نمایش داده نمی‌شوند. برخی از برچسب‌هایی که در این تگ قابل استفاده هستند، شامل این موارد می‌شوند: <title>، <meta>، <link>، <script>، <style>
تگ body در زبان HTML چیست؟
بعد از بسته شدن تگ head، این تگ نوشته می‌شود. این برچسب هم از اهمیت زیادی برخوردار است. هر چیزی که به کاربر نشان داده می‌شود و هرگونه آیتم بصری را باید در این قسمت قرار داد. این تگ شامل محتویاتی مثل تصاویر، جداول، لینک‌ها، متن و… است.
بیس هر سند اچ‌تی‌ام‌ال شامل این سه تگ html، head و body است.
<html>
<head>
</head>
<body>
</body>
</html>
تگ title
یکی از مهم‌ترین تگ‌ها در HTML، تگ Title است. متنی که در این تگ قرار می‌گیرد، همان عنوان صفحه خواهد بود.
<title>عنوان صفحه در مرورگرها</title>
تگ meta
این تگ اطلاعاتی را درباره یک صفحه وب به موتورهای جستجو می‌دهد که توسط کاربران دیده نمی‌شوند؛ اما موتورهای جستجو می‌توانند آن‌ها را تجزیه‌وتحلیل کنند. متاتگ در بخش تگ head قرار می‌گیرد.
تگ style
تگ بعدی که در قسمت head قرار می‌گیرد، استایل است. با استفاده از این برچسب، می‌توان دستورات CSS را در صفحه تعریف کرد. با استفاده از این تگ، مشخص می‌شود که عناصر HTML در مرورگر با چه استایلی نمایش داده شوند.
تگ link
با استفاده از این تگ، می‌توان فایل‌های CSS خارجی را وارد صفحه کرد. این برچسب، تگ پایانی ندارد.
تگ h
از این تگ برای ایجاد عنوان استفاده می‌کنند. hها براساس درجه اهمیت، شماره‌گذاری می‌شوند. یعنی تگ h1 از بیشترین اهمیت برخوردار است و تگ h6 کمترین اهمیت را دارد.
تگ p
با استفاده از این تگ، یک پاراگراف تعریف می‌شود. این برچسب، هم تگ باز و هم تگ بسته دارد.
تگ br
با استفاده از این برچسب، می‌توان سطر را شکسته و به سطر جدید رفت. br از کلمه break گرفته شده است.
تگ b
این تگ که از کلمه bold گرفته شده است، متن را پررنگ می‌کند.
تگ strong
این تگ مانند تگ b عمل می‌کند؛ اما زمانی که می‌خواهید به موتورهای جستجو بگویید که محتوای ضخیم شده اهمیت زیادی دارد، باید از این تگ استفاده کنید.
تگ i
شما با استفاده از این تگ، می‌توانید یک متن را به صورت کج یا همان italic در بیاورید.
تگ em
این تگ کار تگ i را انجام می‌دهد. با این تفاوت که این تگ روی متن تاکید می‌کند و این‌گونه، موتورهای جستجوگر به آن توجه می‌کنند.
تگ u
این تگ که مخفف کلمه underline است، زیر کلمه یا عبارت مورد نظر خط می‌کشد.
تگ ins
این تگ همانند تگ u، زیر متن یک خط ایجاد می‌کند. متنی که از این تگ استفاده می‌کند، برای موتورهای جستجو اهمیت بیشتری خواهد داشت.
تگ a
با استفاده از این تگ، می‌توان یک لینک را در صفحه وب ایجاد کرد.
رابطه زبان‌های CSS و Javascriptبا HTML چیست؟
HTML به همراه CSS و Javascript هسته اصلی یک وب‌سایت را شکل می‌دهند. اگرچه HTML یک زبان مهم محسوب می‌شود؛ اما صفحات HTML به‌تنهایی ارزش زیادی برای انتشار ندارند. اگر بخواهید خروجی HTML یک سایت را به صورت جداگانه بگیرید، آنچه که مشاهده خواهید کرد، مجموعه‌ای از لینک‌ها، تصاویری که خیلی خوب نمایش داده نمی‌شوند، مطالبی که جای‌شان خیلی مشخص نیست و مواردی این‌چنینی خواهد بود. در خروجی HTML می‌توانید تیترها، لینک‌ها، پاراگراف‌ها، تصاویر و… را تشخیص دهید؛ اما برای زیبایی وب‌سایت‌ها به CSS و Javascriptنیاز دارید.
شما با استفاده از زبان HTML، ساختار اصلی صفحات وب را می‌سازید و به کمک زبان CSS، جذابیت‌های ظاهری مثل رنگ‌ها را اضافه می‌کنید؛ اما CSS چیست؟ CSS یکی از رایج‌ترین ابزارهای طراحی برای صفحات وب‌سایتی است که توسط HTML نوشته شده باشند.
CSS نحوه نمایش عناصر HTML را در مرورگرهای مختلف توصیف می‌کند. این زبان به شما کمک می‌کند تا ظاهر وب‌سایت خود را به هر شکلی که دوست دارید، در بیاورید. شما به کمک CSS می‌توانید برخی از نقاط ضعف HTML را برطرف کنید؛ چرا که HTML برای زیباسازی صفحات وب، خلاهای زیادی دارد. در واقع بعد از ایجاد ساختمان اصلی وب‌سایت خود با HTML، نیاز دارید که با CSS ظاهر آن را زیبا کنید.
با کمک Javascript یا JS نیز قادر خواهید بود تا صفحات وب خود را به صورت داینامیک طراحی کنید. با استفاده از JS، صفحات استاتیک وب‌سایت شما به صفحاتی تعاملی و زیبا تبدیل می‌شوند. اگر HTML را ساختار یک ساختمان بدانیم، CSS طراحی ساختمان است و JS کارکردی است که ساختمان برای کاربران خواهد داشت.
تفاوت HTML5 با HTML چیست؟
نسخه‌های مختلفی از HTML وجود دارند. عملکرد کلی این نسخه‌ها به‌خصوص در سطح ابتدایی، یکسان است. HTML5 جدید‌ترین ورژن HTML بوده و امکانات پیشرفته‌ای به آن اضافه شده است. این نسخه از HTML، در زمینه‌های مولتی‌مدیا، امکانات بهبودیافته‌ای را در اختیار کاربران و برنامه‌نویس‌ها قرار می‌دهد. به عنوان مثال در HTML5 تگ‌هایی با نام audio و video وجود دارند که برای قرار دادن محتویات مولتی‌مدیا، مورد استفاده قرار می‌گیرند. هدف HTML5، بیشتر روی Semantic Web یا وب مفهومی است که در مبحث سئو اهمیت زیادی دارد.
کلام پایانی
همان‌طور که اشاره کردیم، HTML یک زبان نشانه‌گذاری است که بخش کوچکی از Front-End سایت را برعهده دارد (Front End چیست؟) و اسکلت صفحات وب به حساب می‌آید. این اسکلت در وب‌سایت‌ها، توسط کدهای HTML ایجاد می‌شود. این زبان، بخش‌های مختلفی را شامل می‌شود که به آن تگ یا برچسب می‌گویند. هر برچسب، کاربرد مخصوص به خودش را دارد. مرورگرها به کمک این تگ‌ها متوجه می‌شوند که عنصر موجود در هر بخش از صفحه، از چه نوعی است و باید چگونه نمایش داده شود.