آشنایی با برخی تگ‌های مهم html
تگ‌های html اهمیت زیادی دارند که در شروع باید با برخی از تگ‌های مهم آشنا باشید که وبسایت نیوسان‌وب توسط این مقاله توضیحات لازم را ارائه می دهد.
اهمیت تگ‌ها در html
در مقاله قبلی در خصوص html و نصب نرم‌افزار visual studio code توضیحات لازم را ارائه کردیم. در این مقاله قصد داریم تا شما را بیشتر با تگ‌ها آشنا کنیم و مهمترین این تگ‌ها و پر کاربردترین آنها را معرفی کنیم. تگ در واقع به مرورگر می‌گوید که هر عنصر موجود در کدهای html معرف چه چیز است. اگر بخواهید دقیقا منظور از تگ را بدانید باید گفت که عنوان‌ها، تیترها، پاراگراف‌ها، حروف برجسته و ایتالیک، خطوط، جداول، لینک‌ها و سایر عناصر موجود در صفحه کد html همان تگ‌ها هستند. زبان نشانه‌گذاری html توسط یک سری کد که در ادامه بیشتر شما را با آنها آشنا خواهیم کرد، به مرورگر می‌فهماند که هر عنصر روی صفحه چیست یا چه ماهیتی دارد.
تگ‌های html را چگونه نشان می‌دهند؟
تگ‌های html با حروف انگلیسی نشان داده می‌شوند و عموما در داخل علامت‌های < و > قرار می‌گیرند. برای مثال تگ‌های <body>، <head>، <html>، <DOCTYPE> و … البته دقت کنید که بسیاری از تگ‌ها دو بخشی هستند. یعنی یک تگ بسته نیز دارند که بسته شدن تگ را با یک علامت اسلش (/) که قبل از نام تگ قرار می‌گیرند نشان می‌دهند؛ مثلا <body/>. حال می‌خواهیم به صورت عملی مواردی که خدمت شما گفتیم را نشان دهیم.
ابتدا یک فولدر به نام 002 ایجاد کنید. ویژوال استودیو کد را باز کنید و این فولدر را انتخاب کنید. یک فایل جدید به نام Index.html ایجاد کنید و به داخل ویرایشگر بروید. در این قسمت باید تگ‌ها و نوشته‌ها و … را وارد کنیم. برای راحتی کار visual studio code یک سری میانبر و انتلیسنس (Intelligent code completion) دارد که در واقع اگر حروفی را بنویسید، به شما کمک می کند تا باقی آن را بدون اینکه کامل تایپ کنید، به صفحه اضافه کنید. در مقاله قبل گفتیم که برای شروع به تگ doctype نیاز داریم. در ویژوال ستودیو کد کافی است doct را تایپ کنید، از کلمات ظاهر شده، DCOCTYPE را انتخاب کنید و نوع آن را html معرفی کنید. در ادامه تایپ کنید doc و یک tab بزنید. به این ترتیب تگ‌هایی نمایان می‌شوند که در هر فایل html همیشه باید آنها را داشته باشید. در واقع به این روش می‌توانید اشتباهات خود را کاهش دهید و مهمترین تگ‌های پیش‌نیاز را داشته باشید. تاگنون باید چیزی مشابه کدهای زیر را داشته باشید. در ادامه هر یک را بیشتر توضیح می‌دهیم.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
اگر به کدهای بالا نگاهی بیندازید، چندین تگ مهم در آن مشاهده می‌شود که عبارتند از:
تگ DOCTYPE
این تگ اولین تگ است و قبلا هم گفتیم که نوع فایل را به مرورگر مشخص می کند که در اینجا کلمه روبروی آن نشان می‌دهد که از نوع html است. دقت کنید که اجباری در بزرگ بودن حروف آن وجود ندارد اما توصیه می‌شود به همین شکل نوشته شود. توجه شود که این تگ، تک بخشی است و تگ بسته شدن مجرایی ندارد.
تگ html
این تگ بزرگترین تگ یک صفحه وب است و در انتها با یک تگ بسته <html/> پایان می‌یابد. همه تگ‌های دیگر باید بین این دو تگ باز و بسته html قرار بگیرند.
تگ head
این تگ اولین تگی است که در داخل تگ html ظاهر می‌شود و شامل یک سری تگ‌هایی است که در بدنه مرورگر نمایش داده نمی‌شوند و اطلاعاتی به مرورگر می‌دهد، ارجاعاتی به نیازمندی‌های هر صفحه می‌دهد یا اینکه اطلاعاتی را در اختیار ربات‌های خرنده قرار می‌دهد. همانطور که درست حدس زده‌اید این تگ در سئوی سایت کاربرد زیادی دارد. این تگ نیز در انتها بسته می‌شود تا محدوده ای که در بر می‌گیرد را نشان بدهد. متاتگ‌ها و تگ عنوان یا title هم در داخل تگ head قرار می‌گیرند که در انتهای مقاله در خصوص متاتگ‌های بالا و تگ عنوان توضیح می‌دهیم.
تگ body
این تگ همان چیزی است که در مرورگر نمایش داده می‌شود. همه متن، تصویر، باکس‌ها، چک‌باکس‌ها، دکمه‌ها، پارگراف‌ها، تیترهای داخل متن و … باید داخل این تگ قرار گیرند.
تگ title
همانطور که مشخص است، این تگ به عنوان صفحه اشاره دارد. در واقع محتویات این تگ روی سربرگ مرورگر نشان داده می‌شوند. این تگ همان عنوانی است که در هنگام سرچ در گوگل یا موتورهای جستجو نیز در صفحه جستجو نشان داده می‌شود.
تگ meta
تگ‌های متا یا meta، در داخل head قرار می‌گیرند و توسط مرورگر قابل نمایش نیستند بلکه اطلاعات خاصی را به مرورگر در خصوص صفحه جاری می‌دهند. همینطور اطلاعاتی که لازم است به ربات‌ها و موتورهای جستجو هم داده شود، توسط این متاتگ‌ها و انواع مختلفی که دارند به آنها داده می‌شود. تگ‌های سئو هم از این طریق به ربات‌ها داده می‌شود.
جمع‌بندی و سخن پایانی
ما در این مقاله آموزشی برای مبتدی ها یا کسانی که در صدد یادگیری html هستند، نکاتی بسیار مهم و پایه‌ای را ارائه کردیم. اولین پروژه را توسط visual studio code ایجاد کردیم و به معرفی تگ های مهم آن مانند DOCTYPE، html، head، body، title و meta پرداختیم. کاربرد هر تگ را به شکل کلی گفتیم تا اینکه بتوانیم با شروع جدی کدنویسی در مقاله آموزشی بعدی، به شکل بهتری سراغ آنها برویم. پس با نیوسان‌وب همچنان همراه باشید.
لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.