درک هر تگ HTML یک مرحله بسیار مهم برای پیاده سازی کدهای HTML است. این مطلب به عنوان مرجعی برای تگ‌های استاندارد HTML و نحوه استفاده از آنها برای شما است که هر زمان اراده کنید می‌توانید تگ مورد نظر خود را از آن برداشته و داخل کدهای خود بگذارید.
تگ HTML چیست؟
به زبان ساده تگ‌های HTML دستورالعمل‌های ساده ای هستند که به مرورگر وب نحوه قالب بندی متن را توضیح می‌دهند. به عبارت دیگر، HTML زبان صفحات وب است.
صفحات وب چگونه تگ‌های HTML را می‌خوانند؟
سرورها کد HTML را برای درک و ارائه محتوا می‌خوانند. HTML را از بالا به پایین درست مانند نحوه خواندن این مطلب می‌خواند. برای قالب بندی محتوا می‌توانید از هر چند تگی که دوست دارید استفاده کنید. با این حال، چند تگ و قوانین ضروری HTML وجود دارد که باید آنها را جدی بگیرید.
یک تگ HTML باید شامل سه قسمت باشد:
- تگ باز: که با علامت <> شروع می‌شود.
- محتوا: دستورالعمل‌های کوتاه در مورد نحوه نمایش عنصر روی صفحه
- تگ بسته: که با علامت </> پایان می‌یابد.
در نظر داشته باشید که برخی از تگ‌های HTML می‌توانند خود بسته شوند. این بدان معناست که تگ HTML نیازی به بستن با </> ندارد. شما معمولاً از تگ‌های بسته برای متادیتاها یا خطوط استفاده می‌کنید.
تفاوت بین ویژگی‌ها (Attributes) و تگ‌های HTML چیست؟
اگرچه این مطلب تماما در مورد تگ‌های HTML است، اما مهم است که تفاوت بین تگ‌ها، عناصر و ویژگیهای HTML را بدانید. عنصر HTML یک مورد در صفحه و بخشی از محتوای صفحه وب است. یک تگ HTML بر نحوه ظاهر شدن یک عنصر HTML تأثیر می‌گذارد. در واقع یک ویژگی یا همان اتربیوت HTML ویژگیهای آن عنصر را توصیف می‌کند.
در ادامه نحوه عملکرد عناصر، تگ‌ها و ویژگی‌ها با هم شرح داده شده است:
- تگ‌های HTML حاوی دستورالعمل‌هایی برای نمایش عنصر روی صفحه هستند. آنها با < شروع می‌شوند و با a> خاتمه می‌یابند و محتوای عنصر را دنبال می‌کنند. برای مثال: (e.g <b> Bold Tag </b>)
- عناصر HTML محتوای درون صفحه ای هستند که درون تگ‌ها قرار گرفته اند. برای مثال: (<b> Bold Tag </b>)
- ویژگیهای HTML اطلاعات بیشتری در مورد عناصر HTML ارائه می‌دهد و در داخل تگ HTML ظاهر می‌شود (به عنوان مثال: (e.g. <html lang=”en-US”>).
| نوع | تگ HTML | عناصر HTML | HTML Attributes |
| Contains | دستورالعمل نحوه نمایش عنصر روی صفحه | محتوای روی صفحه نمایش داده می شود | اطلاعات اضافی در مورد عناصر روی صفحه |
| Appearance | با <شروع می شود و با> خاتمه می یابد | در برچسب HTML قرار داده شده است | قبل از هر عنصری در برچسب قرار می‌گیرد |
نمونه‌هایی از تگ‌های HTML
<p> Paragraph Tag </p>
این تگ برای متن روی صفحه است. این تگ هر متنی را بین تگ <p> باز و بسته </p> به عنوان پاراگراف استاندارد یا متن اصلی قالب بندی می‌کند.
<h2> Heading Tag </h2>
این تگ برای هدینگ یا تیتر هر صفحه است. با استفاده از این تگ، هر متنی بین تگ <h2> باز و بسته </h2> به عنوان h2 (نوعی زیر عنوان) دسته‌بندی می‌شود.
<b> Bold Tag </b>
این تگ برای بولد کردن یا پررنگ کردن قسمتی از متن صفحه است. این تگ هر متنی بین تگ <b> باز و بسته </b> را بصورت پررنگ قالب بندی می‌کند.
<i> Italic Tag </i>
این تگ برای ایتالیک کردن متن صفحه است. این تگ هر متنی بین تگ <i> باز و بسته </i> را به صورت ایتالیک قالب بندی می‌کند.
<u> Underline Tag</u>
این تگ برای خط کشیدن زیر متن انتخابی صفحه است. این تگ هر متنی را بین تگ <u> باز و بسته </u> به صورت زیرخط قالب بندی می‌کند.
رایج ترین تگ‌های HTML
تقریباً ۱۰۰ نوع مختلف تگ HTML وجود دارد که می‌توانید برای صفحات وب خود استفاده کنید. در ادامه لیستی از رایج ترین تگ‌های HTML قرار داده‌ایم:
| تگ | نوع تگ | کارایی تگ |
| <p> | تگ متنی html | پاراگراف |
| <h1> | تگ متنی html | تیتر ۱ |
| <h2> | تگ متنی html | تیتر ۲ |
| <h3> | تگ متنی html | تیتر ۳ |
| <h4> | تگ متنی html | تیتر ۴ |
| <h5> | تگ متنی html | تیتر ۵ |
| <h6> | تگ متنی html | تیتر ۶ |
| <strong> | تگ متنی html | بولد یا استرانگ |
| <em> | تگ متنی html | تاکید |
| <abbr> | تگ متنی html | اختصار |
| <address> | تگ متنی html | اطلاعات تماس یا آدرس |
| <bdo> | تگ متنی html | نادیده گرفتن متن |
| <blockquote> | تگ متنی html | نقل قول از منبع دیگر |
| <cite> | تگ متنی html | عنوان اثر ، کتاب ، وب سایت |
| <q> | تگ متنی html | نقل قول داخلی |
| <code> | تگ متنی html | نمایش بخشی از کد برنامه نویسی |
| <ins> | تگ متنی html | متن درج شده |
| <del> | تگ متنی html | متن حذف شده از متن |
| <dfn> | تگ متنی html | اصطلاح تعریف شده در یک جمله/عبارت |
| <kbd> | تگ متنی html | ورودی صفحه کلید یا کیبورد |
| <pre> | تگ متنی html | متن پیش فرمت |
| <samp> | تگ متنی html | نمونه خروجی یک برنامه کامپیوتری |
| <var> | تگ متنی html | نام متغیر مورد استفاده در زمینه ریاضی یا برنامه نویسی |
| <br> | تگ متنی html | فاصله یک خطی |
| <div> | تگ متنی html | تقسیم بندی یا فاصله |
| <a> | تگ لینک html | انکرتکست تگ برای یک لینک |
| <base> | تگ لینک html | یک url برای همه urlها |
| <img> | تگ عکس و آبجکت html | عکس |
| <area> | تگ عکس و آبجکت html | محدوده عکس در مپ |
| <map> | تگ عکس و آبجکت html | عکس نقشه |
| <param> | تگ عکس و آبجکت html | پارامتر برای عنصر <Object> |
| <object> | تگ عکس و آبجکت html | قراردادن یک شیء |
| <ul> | تگ لیست html | لیست نامرتب |
| <ol> | تگ لیست html | لیست مرتب |
| <li> | تگ لیست html | لیست |
| <dl> | تگ لیست html | لیست توضیحات |
| <dt> | تگ لیست html | عبارتی در لیست توضیحات |
| <dd> | تگ لیست html | تعریف/شرح اصطلاح در فهرست توضیحات |
چگونه تگ‌های HTML سایت خود را بررسی کنید
اگر در حال حاضر تگ‌های HTML در صفحات وب خود دارید و می‌خواهید بررسی کنید که آیا آنها به درستی استفاده می‌شوند یا خیر، می‌توانید این کار را با مشاهده HTML صفحه خود انجام دهید. برای انجام این کار، تنها چیزی که نیاز دارید مرورگر وب شما است.
برای مشاهده HTML صفحه وب خود، باید:
- در صفحه وب خود در Google Chrome راست کلیک کنید.
- روی ‘inspect’ کلیک کنید.
- کد HTML را در یک کادر در کنار یا پایین صفحه خود مشاهده خواهید کرد.
- از Ctrl + F برای پیدا کردن تگ‌ها یا عناصر خاص مورد نظر خود استفاده کنید.
برای بررسی اینکه آیا وب سایت شما از تگ‌های HTML به درستی استفاده می‌کند یا خیر، می‌توانید تک تک کدهای سایت خود را بررسی کرده و هر مورد که اضافی است را حذف کنید. ابزارهایی هستند که می‌توانند بررسی کنند که آیا تگ‌ها و ویژگیهای اصلی HTML شما صحیح هستند یا خیر.
پرسش و پاسخ تکمیلی