انواع تگ های کاربردی HTML چیست و چه خصوصیت های دارند
رضا ذوالعلی
آبان 1, 1401
تگ‌های html یکی از عوامل مؤثر در طراحی سایت به‌حساب می‌آیند. درحقیقت ساختار بدنهٔ صفحه وب‌سایت و اسکلت آن، توسط تگ‌های html ساخته می‌شوند. باتوجه‌به اهمیت بالایی که این تگ‌ها دارند، ضروری است که افراد با تگ‌های html آشنایی کامل داشته باشند؛ زیرا دانستن آن، یکی از مهم‌ترین اصطلاحات طراحی سایت برای ورود به دنیای طراحی سایت و همچنین برنامه‌نویسی به شمار می‌آید.
رویال کد در کنار شماست تا کاربردی‌ترین تگ‌های html را برای شما عزیزان شرح دهد.
تگ html چیست ؟
ترجمهٔ واژهٔ تگ (tag) در فرهنگ لغت انگلیسی، به معنای برچسب است. درواقع تگ‌ها در زبان html که زبان نشانه‌گذاری ابر متن است، نقش مهمی دارند.
چراکه تگ‌های html نشانه‌های دستوری از پیش تعریف شده، در زبان html هستند که نقش نشانه‌گذاری محتویات نوشته شده در زبان html را برعهده دارند.
هرکدام از این تگ‌ها مفهوم و معنای خاصی را دارند که اصولاً به‌صورت دوقسمتی، به کار می‌روند.
با کمک تگ‌های html است که مرورگرها می‌توانند تشخیص دهند هر بخش از صفحه وب‌سایت، چه نوع عنصری است و چگونه باید نمایش داده شوند.
برای آشنایی کامل با زبان html می‌توانید مقاله html چیست و چه کاربردی دارد را، مطالعه کنید.
انواع تگ html
به‌طورکلی دودسته تگ را می‌توانیم در ساختار html مشاهده کنیم که عبارت‌اند از:
تگ‌های باز (Opening Tag):
تگ شروع یا opening tag با قرار داده شدن در بین علامت کوچک‌تر و بزرگ‌تر شروع می‌شود برای مثال تگ باز <html>.
تگ‌های بسته (Closing Tag):
تگ انتها یا Closing Tag نیز همانند تگ باز است، با این تفاوت که در ابتدای نام تگ از علامت </> (slash) استفاده می‌شود<html/>.
اولین دسته تگ‌هایی که می‌توانیم مشاهده کنیم، تگ‌های باز هستند و دومین دسته، تگ‌های اند که فقط تگ‌های ابتدایی را دارند که به آن‌ها self-closing تگ نیز گفته می‌شود.
برخی از عناصر برای اینکه در صفحات وب‌سایت، نمایش داده شوند به هر دو تگ احتیاج دارند؛ اما برخی دیگر برای نمایش داده شدن فقط به تگ‌های باز یا همان یا opening نیاز دارند.
تگ‌های html چه کاربردی دارند؟
تگ‌های html این قابلیت را دارند که بتوانید با استفاده از آن‌ها، نحوهٔ نمایش هر بخش را تعیین کنید، به این صورت که می‌توانید بخش‌های مختلفی را مانند عکس، متن و.. را متمایز کنید.
در مرورگرها، همهٔ تگ‌های html نمایش داده نمی‌شوند به طور مثال، مانند اطلاعاتی که در تگ head یک صفحه قرار دارد که شامل متا دیتا و.. است، توسط مرورگر نمایش داده نمی‌شود.
نحوه نوشتن تگ HTML چگونه است؟
همان‌طور که در بالا گفته شد، اکثر تگ‌های html برای نمایش عناصر در صفحه، از دو بخش تگ باز و تگ بسته، تشکیل شده‌اند که هر دو بخش با یکدیگر هم‌نام هستند.
ظاهر اولیه و کلی نحوه نوشتن تگ html به شکل زیر است:
<تگ انتهایی/> محتویات تگ HTML <تگ ابتدایی>
مهم‌ترین تگ‌های html
مهم‌ترین تگ‌های html آن دسته تگ‌هایی هستند که با استفاده از آن‌ها می‌توانید ساختار کلی یک فایل html را تشکیل دهید. درحقیقت با استفاده از این تگ‌ها است که می‌توانید پایه کدنویسی و طراحی سایت خود را با html شروع کنید.
که مهم‌ترین تگ‌های html عبارت‌اند از:
تگ Doctype
تگ <Doctype> از ابتدایی‌ترین تگ‌ها در زبان HTML به‌حساب می‌آید که به‌طورکلی نقش آن به‌عنوان یک راهنما برای مرورگرها است و همچنین می‌تواند نوع سند html را نیز مشخص کند.
درواقع تگ <DOCTYPE> به کمک مرورگرها می‌آید تا صفحات وب، به‌درستی نمایش داده شود و همچنین متوجه شوند، تگ‌هایی که نوشته شده است ۱۰۰% HTML بوده تا بتوانند نسخهٔ html استفاده شده را، در نظر بگیرند.
البته توجه داشته باشید که با نوشتن این تگ، هیچ دستوری به html ارجاع داده نمی‌شود و فقط برای نمایش درست در مرورگر است.
تگ HTML
تگ html از بزرگ‌ترین تگ‌ها در زبان html به‌حساب می‌آید. در واقع بقیهٔ تگ‌های مهم، در داخل این تگ، قرار دارند و جز آن دسته از تگ‌هایی است که قابلیت هر دو تگ باز و بسته را دارد.
تگ html نقش مشخص‌کنندهٔ شروع و پایان یک سند در html، به مرورگر وب‌ها را دارد.
این تگ، با تگ باز <html> شروع می‌شود و سایر کدها و تگ‌ها را در خود جای می‌دهد و در پایان با تگ بسته <html/> بسته می‌شود و در آخر سند Html را به پایان می‌رساند.
همچنین در نظر داشته باشید که تمام تگ‌های HTML باید داخل این تگ قرار بگیرند تا به‌عنوان زبان HTML شناخته شوند.
البته توجه داشته باشید، چون تگ html به مرورگر نشان می‌دهد که سند موجود html است، فقط دستورات داخل این تگ و متن‌ها در طراحی سایت نمایش داده می‌شود، درواقع خود تگ دیده نمی‌شود.
تگ head
تگ head نیز همانند تگ HTML از دو تگ باز و بسته تشکیل شده است و تگ head جز اولین تگ در دنیای تگ‌های html است که بلافاصله بعد از تگ باز <html> و در بدنهٔ تگ html نوشته می‌شود.
این تگ یکسری اطلاعات را برای مرورگرها به همراه دارد، به‌عنوان‌مثال اطلاعاتی مانند: کلمات کلیدی، جاوا اسکریپت‌های خارجی، آیکون صفحه عنوان صفحه، توضیحاتی راجع به سازنده، استایل‌های خارجی و داخلی و.. را نمایش می‌دهد که برای مرورگرها و ایندکس کردن توسط جستجوگرهای وب مانند یاهو و گوگل، اهمیت بالایی دارد.
تگ‌های قابل‌استفاده در داخل این تگ شامل موارد زیر است:
<title>, <meta>, <link>, <script>, <style>
تگ Head وظایفی مانند تعامل با فایل‌های css، javascript، تعامل با موتور جستجو و… را بر عهده دارد که درواقع از آن به‌عنوان مغز متفکر صفحات وب، نام برده می‌شود.
توجه داشته باشید که در تگ Head، همهٔ مواردی که نوشته می‌شوند، قابلیت نمایش داده شدن را ندارند و فقط تگ‌های زیر قابل نمایش هستند:
Base,Link,Meta,Title,Style,Script
برای آشنایی کامل با زبان javascript می‌توانید مقاله javscript چیست و چه کاربردی دارد را مطالعه نمایید.
تگ body
تگ body همان‌طور که از نام آن مشخص است، بدنهٔ صفحه وب را تشکیل می‌دهد و جز مهم‌ترین تگ‌های html به‌حساب می‌آید.
این تگ بعد از تگ بسته <head/> نوشته می‌شود. درحقیقت تگ body، تمامی محتویاتی که باید توسط مرورگر نمایش داده شود را بین دو تگ باز و بسته خود، قرار می‌دهد؛ چراکه اطلاعاتی مانند عکس و متن که باید در قالب یک سند، به کاربران توسط مرورگرهای وب نمایش داده شود، در این قسمت نوشته می‌شود.
با استفاده از تگ body است که می‌توانید رنگ قلم، سایز قلم و دیگر مواردی که در صفحات وب، نمایش داده می‌شود را تغییر دهید.
البته توجه داشته باشید که تمامی عناصری که مربوط به‌ظاهر صفحه وب‌سایت هستند، باید در تگ body قرار بگیرند؛ زیرا در غیر این صورت نمایش داده نمی‌شوند.
کاربردی‌ترین تگ‌های html
در قسمت قبل مهم‌ترین تگ‌های html را بررسی کردیم که پایه و اساس ساختار وب را تشکیل می‌دهند. در ادامه می‌خواهیم تگ‌های کاربردی html را توضیح دهیم.
همان‌طور که در قسمت بالا اشاره شد، شما می‌توانید از تگ‌های تودرتو برای کدنویسی html کمک بگیرید که این تگ‌ها، همان مهم‌ترین تگ‌های html هستند که در بالا به آن‌ها پرداختیم.
اما این تگ‌ها می‌توانند در داخل خود، تعداد زیادی تگ html دیگر را نیز داشته باشند که هرکدام از این تگ‌ها می‌توانند باتوجه‌به نیاز، در داخل خود برخی تگ‌های html دیگر را جای دهند.
کاربردی‌ترین تگ‌های html عبارت‌اند از:
متا تگ
تگ متا از جمله کاربردی‌ترین تگ‌های html به شمار می‌آید و برگرفته از کلمهٔ metadata است. همچنین این تگ، در تگ Head قرار دارد.
با استفاده از تگ متا می‌توانید یکسری اطلاعات را که در قالب برخی صفت‌های خاص هستند را به موتورهای جستجو، نمایش دهید. درواقع این اطلاعات برای سئو و بهینه‌سازی یک صفحه وب‌سایت، از اهمیت بالایی برخوردار هستند.
البته تمام محتویات و اطلاعات تگ متا، برای کاربران قابل‌مشاهده نیست، اما این اطلاعات توسط موتورهای جستجوگر و مرورگرها تجزیه‌وتحلیل می‌شوند و برای هرچه بهتر نمایش دادن یک وب‌سایت، در موتورهای جستجوگر و مرورگرها، کمک بسیاری می‌کنند.
از جمله مهم‌ترین اتریبیوت تگ متا، charset نام دارد که مقدار آن UTF-8 است که نقش مهمی در مشخص‌کردن نوع کارکترهای استفاده شده در وب‌سایت را دارد.
تگ title
تگ title جز کاربردی‌ترین تگ‌های html است چرا که این تگ دو وظیفه مهم دارد که با کمک این وظایف، می‌توانید در بهینه‌سازی و سئو صفحات وب، تأثیر بسیاری بگذارید.
این دو وظیفهٔ مهم عبارت‌اند از:
- امکان نمایش صفحه وب در مرورگرها برای مشاهدهٔ کاربران
- امکان نمایش عنوان صفحهٔ وب‌سایت به ربات‌های موتورهای جستجوگر برای رتبه‌بندی در نتایج جستجوی کاربران
توجه داشته باشید که امکان نوشتن فقط یک‌بار از تگ title در هر صفحه وب‌سایت، وجود دارد.
تگ style
تگ style به‌عنوان تگ تودرتو در میان تگ head قرار می‌گیرد، همچنین از چندین تگ استایل در میان تگ head نیز استفاده می‌شود. با کمک تگ style است که می‌توانید برای صفحات وب‌سایت، استایل موردنظر را تعریف و ایجاد کنید.
درواقع می‌توان گفت برای css دهی داخلی صفحهٔ یک وب‌سایت، از تگ style استفاده می‌شود و با کمک این تگ، می‌توانید مشخص کنید که عناصر html چگونه و با چه استایلی در مرورگر، نمایش داده شوند.
منظور از استایل دهی به یک سایت این است که می‌توانید به یک صفحه از سایت، جلوه دهید و ظاهر آن را جذاب و کاربرپسند کنید. به‌طورکلی می‌توان گفت؛ هر کاری که در ظاهر سایت بتوانید تغییر یا ایجاد کنید را استایل دهی می‌گویند.
تگ link
در کدنویسی html برای اینکه بتوانید فایل‌های خارجی را به سند html اتصال دهید، باید از تگ لینک استفاده کنید؛ چراکه تگ لینک، تگی است که با کمک‌گرفتن از آن می‌توانید یک لینک را بین سند html و یک فایل css ایجاد کنید. همچنین می‌توانید از چندین تگ link به‌صورت هم‌زمان در داخل تگ html استفاده کرد.
تگ لینک نیز همانند تگ style بیت تگ‌های باز و بستهٔ head قرار می‌گیرد.
یکی از قابلیت‌های این تگ که می‌توان به آن اشاره کرد، امکان نمایش آیکون صفحه یا فاوایکون در html است.
البته توجه داشته باشید که برای اتصال فایل‌های css خارجی به سند html باید از تگ link و اتریبیوت‌های وابسته به آن، استفاده کرد.
برای مطالعهٔ بیشتر دربارهٔ زبان css می‌توانید مقالهٔ css چیست و چه کاربردی دارد را مطالعه کنید.
تگ h
با کمک تگ H در html است که می‌توان، عنوان یا سر تیتر را ایجاد کرد.
تگ h یا به آن تگ‌های هدینگ (heading) نیز گفته می‌شود، بر اساس درجهٔ اهمیت به 6 سایز تقسیم می‌شوند که عبارت‌اند از:
(h1 , h2 , h3 , h4 , h5 , h6)
درجهٔ اهمیت آن‌ها از h1 به h6 کاهش پیدا می‌کند به‌طوری‌که تگ h1 بیشترین و تگ h6 کمترین اهمیت را از دید موتورهای جستجو دارد.
در طراحی وب‌سایت اگر به سئوسازی محتویات خود اهمیت می‌دهید، باید در استفاده از تگ‌های h ،دقت بالایی به خرج دهید، چراکه تگ‌های h1 تا h6 در بهینه‌سازی و سئو سایت، اهمیت بسیار زیادی دارند. درواقع برای اینکه موتورهای جستجو متوجه شوند کدام قسمت‌های سایت، مهم هستند، از این تگ‌های h، استفاده می‌کنند.
تگ p
از تگ p یا به آن تگ پاراگراف نیز می‌گویند، می‌توان به‌عنوان مهم‌ترین تگ‌های html و نیز به‌عنوان کاربردی‌ترین تگ‌های html نام برد. چراکه این تگ معرفی‌کننده عنصر پاراگراف در صفحات وب است. تگ p با دو تگ باز و بسته خود، بین تگ body قرار می‌گیرد.
تگ p جز دسته تگ‌های بلاکی (تگ‌های block-level) قرار دارد و تمامی عرض سطر را به خودش اختصاص می‌دهد.
هنگامی که شما برای نمایش یک پاراگراف از تگ p استفاده می‌کنید، مرورگرها به‌صورت خودکار یک فضای خالی در پایین و بالای پاراگراف اختصاص می‌دهند. البته در نظر داشته باشید که با استفاده از کدهای css می‌توانید، میزان فضای خالی را تغییر دهید یا همچنین امکان حذف فضای نیز، وجود دارد.
تگ br
تگ br برگرفته از کلمهٔ Break است و به تگ پایانی نیاز ندارد. درواقع می‌توانید از آن به‌صورت <br> در بین متن‌های پاراگراف استفاده کنید.
تگ br همراه تگ p استفاده می‌شود. در html با کمک تگ br است که می‌توانید خط و شکستگی ایجاد کرده و به سطر بعدی نیز بروید. درحقیقت تگ <br> یک خط جدیدی را ایجاد می‌کند، و ادامهٔ متن را به خط بعدی، منتقل می‌کند.
برای نوشتن آدرس و یا اشعار در بین متون می‌توانید از تگ br استفاده کنید. درواقع این تگ وظیفهٔ دکمه Enter را در مقاله انجام می‌دهد.
تگ b
تگ b جز کاربردی‌ترین تگ‌های html به شمار می‌آید و این تگ از کلمهٔ Bold گرفته شده است.
با استفاده از تگ b است که محتویات قرار گرفته شده در بین تگ باز و بسته به‌صورت توپر، برجسته یا به‌اصطلاح بولد bold نمایش داده می‌شود.
تگ b نیز همانند بسیاری از مهم‌ترین تگ‌های html دارای یک تگ باز ( opening tag ) و یک تگ بسته (closing tag ) است که درون تگ باز و بسته می‌توانید محتواهایی که می‌خواهید در سند html برجسته کنید را قرار دهید.
تگ b در دسته‌بندی تگ‌های قالب‌بندی یا فرمت‌بندی متن‌های html قرار می‌گیرد.
با استفاده از تگ‌های فرمت‌بندی یا قالب‌بندی می‌توانید به‌اصطلاح فرمت یک صفحه را تغییر دهید به‌گونه‌ای که می‌توانید زیر یک متن خط بکشید، قالب یک متن را کج کنید و…
تگ strong
تگ strong نیز عملکردی همانند تگ b دارد؛ اما یک تفاوت میان آن‌ها وجود دارد و این است که تگ strong یکی از کاربردی‌ترین تگ‌های html در سئو سایت نیز به شمار می‌رود.
همان گونه که گفتیم عملکرد این دو تگ مشابه یکدیگر است به‌طوری‌که هر دو برای ضخیم شدن محتواهای قرار گرفته شده بین تگ باز و بسته، به کار می‌روند. اما تفاوتی که گفتیم وجود دارد این است، اگر بخواهیم به موتورهای جستجوگر نشان دهیم که کدام محتوای ضخیم شده جز محتواهای مهم به‌حساب می‌آید، از تگ strong استفاده می‌کنیم .
تگ i
تگ i از کلمهٔ italic گرفته شده است و جز تگ‌های قالب‌بندی و فرمت‌بندی در بین تگ‌های html به شمار می‌رود. با استفاده از این تگ می‌توانید، محتواهایی که بین تگ باز و بسته قرار گرفته‌اند را به شکل کج یا مورب نمایش دهید.
تگ em
این تگ از کلمهٔ emphasize گرفته شده و ترجمهٔ آن در فرهنگ لغت فارسی به معنای تأکید است و جز دستهٔ تگ‌های عبارتی به شمار می‌رود.
تگ em نیز عملکردی همانند تگ i دارد؛ اما یک تفاوت میان آن‌ها وجود دارد و این است که معنای تگ em برای موتورهای جستجوگر و مرورگرها مهم‌تر است.
هنگامی که بخواهید روی یک محتوا تأکید کنید، می‌توانید از تگ em استفاده کنید.
تگ u
تگ u از کلمهٔ Underline گرفته شده که در فرهنگ لغت انگلیسی بقه معنای زیرخط است.
با استفاده از تگ u است که می‌توانید زیر یک عبارت یا کلمهٔ خاص، خط بکشید و با انجام این کار محتوا یا متن موردنظر را از دیگر محتوا یا متن جدا کنید یا به‌طورکلی، می‌توانید یک متن را متفاوت‌تر نمایش دهید.
تگ ins
تگ ins مخفف کلمهٔ Inserted است. عملکرد تگ ins همانند تگ i است؛ اما یک تفاوت میان آن‌ها وجود دارد و آن تفاوت این است که محتوا داخل تگ باز و بستهٔ ins، برای موتورهای جستجوگر و مرورگرها نسبت به تگ i، از اهمیت بیشتری برخوردار است.
در حقیقت تگ u می‌تواند فقط یک خط ساده زیر محتواها بکشد و تغییراتی را که ایجاد می‌کند برای موتورهای جستجوگر، ارزش زیادی ندارند؛ اما در تگ ins با کمک صفت‌هایی که می‌پذیرد، می‌تواند زمان عمل و آدرس انجام شده را برای موتورهای جستجوگر مشخص کند. درواقع این تگ برای موتورهای جستجوگر، تگ با ارزشی به‌حساب می‌آید.
تگ ins قابلیت‌های بسیاری دارد؛ اما مهم‌ترین آن این است که می‌توانید با استفاده از آن در یک صفحه، تغییرات و به‌روزرسانی‌هایی را ایجاد کنید.
سخن آخر
در این مقاله سعی کردیم مهم‌ترین و کاربردی‌ترین تگ‌های html را برای شما همراهان عزیز، شرح دهیم.
امیدواریم این مقاله برای شما مفید واقع شده باشد. اگر سؤالی دربارهٔ تگ‌های html داشتید در قسمت دیدگاه برای ما درج کنید تا تیم رویال کد، پاسخگوی شما عزیزان باشد.
خلاصه مقاله
تگ‌های html یکی از عوامل مؤثر در طراحی سایت به‌حساب می‌آیند. درحقیقت ساختار بدنهٔ صفحه وب‌سایت و اسکلت آن، توسط تگ‌های html ساخته می‌شوند. باتوجه‌به اهمیت بالایی که این تگ‌ها دارند، ضروری است که افراد با تگ‌های html آشنایی کامل داشته باشند؛ زیرا دانستن آن، یکی از مهم‌ترین اصطلاحات طراحی سایت برای ورود به دنیای طراحی […]
آدرس ایمیل شما منتشر نخواهد شد
