20 تا از پرکاربردترین تگ‌های HTML

در این مقاله می‌خواهیم تا پرکاربردترین تگ‌های HTML را معرفی کنیم. تگ‌هایی مانند پاراگراف <p>، عنوان <title>، تصویر <img> و موارد بسیاری دیگری که محبوب‌ترین وب سایت‌ها در اینترنت از آنها استفاده می‌کنند. توجه داشته باشید که اولین نسخه HTML تنها دارای 18 تگ بود، اما به مرور زمان تگ‌های جدید با هر نسخه HTML اضافه شد و هم اکنون بیش از 130 تگ HTML وجود دارد و یادگیری و به خاطر سپردن آن‌ها کاری بسیار سخت و زمانبر است. پس با خواندن این مقاله می‌توانید چندین گام از سایر توسعه دهندگان وب پیش باشید.

HTML چیست؟

HTML مخفف Hyper Text Markup Language بوده و در فارسی به آن زبان نشانه‌ گذاری ابرمتن می‌گویند. دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشان‌گذاری یا Markup language به حساب می‌آید. HTML از المانهای مختلفی مانند تگ‌ها، ویژگی‌ها و عناصر ساخته شده است. کدنویسی با HTML قدم گذاشتن در جای پای بزرگان وب و شروع ساخت سایت‌های شگفت‌انگیز است. اگر عاشق طراحی سایت هستید و برای ورود به این حوزه برنامه جدی دارید، آموزش HTML اولین قدم شما در این مسیرخواهد بود. اگر می‌خواهید با مراحل شروع یادگیری طراحی سایت بیشتر آشنا شوید، دوره متخصص طراحی وب را از دست ندهید. همچنین برای آشنایی بیشتر می‌توانید مقاله HTML چیست و چه کاربردی دارد را مطالعه کنید.

تگ HTML چیست؟

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

تگ‌های بلند که شروع و پایان دارند مانند تگ div
تگ‌های کوتاه که شروع و پایان ندارند مانند تگ img

سرورها تگ‌های HTML را از بالا به پایین می‌خوانند و هیچ محدودیتی در تعداد تگ‌های HTML که یک صفحه وب باید داشته باشد وجود ندارد. تمام تگ‌های HTML در داخل علامت <> نوشته شده، بیشترشان باز <tag>و بسته می‌شوند</tag> و هر تگ HTML عملکرد متفاوتی را انجام می‌دهد.

تفاوت تگ HTML با عنصر HTML و ویژگی‌ها

اغلب برنامه نویسان تازه وارد در حوزه وب و فرانت اند، از اصطلاحات تگ و عناصر HTML به جای یکدیگر استفاده می‌کنند. اما آیا این دو مفهوم یکسان هستند؟ باید بدانید که از نظر فنی، عناصر HTML و تگ‌های HTML متفاوت هستند. این تگ‌های HTML هستند که عناصر HTML را تعریف می‌کنند. برای رسیدن به این هدف، محتوا با استفاده از تگ باز و بسته تعریف می‌شود. برای مثال تگ <p> نمونه‌ای از تگ HTML است که با کمک آن می‌توان یک پاراگراف یا بند را در متن ایجاد کرد:

<p> This is a paragraph </p>

ویژگی‌های HTML امکانات بیشتری برای شخصی سازی عناصر HTML در اختیار شما قرار می‌دهد. هر عنصری ویژگی‌های مخصوص خود را دارد و با کمک آنها می‌توانید صفحه موردنظر خود را طراحی کنید. برای مثال ویژگی استایل (style) موجود در عناصر HTML به شما اجازه می‌دهد تا خصوصیات ظاهری مانند رنگ، فونت، حاشیه و... را مدیریت کرده و به دلخواه خود تعیین کنید:

<p style=”background-color:blue”> This is a paragraph </p>

تگ‌های اصلی HTML

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

تگ <html>: با استفاده از این تگ می‌توانید مشخص کنید که فایل یا سندی که در حال کار بر آن هستید، از نوع HTML است. تنها سندهایی که از این نوع باشند می‌توانند به عنوان یک صفحه وب استفاده شوند.
تگ <title>: تگ title که با تگ عنوان نیز شناخته می‌شود، برای نام گذاری یک صفحه استفاده می‌شود.
تگ <head>: این تگ برای قرار دادن اطلاعات کلیدی استفاده شده در صفحه به کار می‌رود.
تگ <body>: بدنه اصلی یک صفحه از وب سایت است که تمامی عناصر اعم از دکمه‌ها، متن‌ها، تصاویر و... درون آن قرار می‌گیرد.

متا تگ چیست؟

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

تگ‌های پرکاربرد HTML در طراحی سایت

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

نام تگ	کاربرد تگ
<!–…–>	تعریف و قرار دادن توضیحات
<!DOCTYPE>	مشخص کردن نوع سند
<a> یا تگ لینک	قرار دادن لینک ها
<article>	تعریف مقاله یا مطالب
<b>	پررنگ کردن، برجسته سازی یا به اصطلاح بولدکردن متن که در مباحث سئو سایت از اهمیت بالایی برخوردار است
<area>	تعریف ناحیه‌های قابل کلیک در یک نقشه تصویری
<br>	شکستن متن و رفتن به سطر بعدی
<button>	ایجاد یک دکمه قابل کلیک
<div>	ایجاد بخش برای قرار دادن سایر تگ‌های HTML
<footer>	تعریف متن برای بخش پایین صفحه
<h1> – <h6>	تعریف عنوان برای یک بخش خاص یا کل صفحه که مهمترین تگ در سئو است
<i>	کج یا شکسته کردن متن (ایتالیک کردن)
<label>	تعریف برچسب یا لیبل
<form>	ایجاد فرم
<input>	قرار دادن اینپوت‌ها در فرم
<li>	آیتمهای لیست
<ul>	ایجاد یک لیست نامرتب
<ol>	ایجاد یک لیست مرتب شده
<table>	ساخت جدول
<code>	قرار دادن نمونه کد ( مثلا دستورات html )

جمع بندی

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