تگ های HTML چیست و چه کاربردی دارد؟
💡آشنایی با ساختار صفحه
تگ های HTML اجزای پایه ای هستند که برای نشانه گذاری محتوای صفحات وب به کار می روند. مرورگر با کمک این نشانه ها تشخیص می دهد کدام بخش عنوان، پاراگراف، تصویر، پیوند یا بخش دیگری از صفحه است. بنابراین، HTML فقط متن را نمایش نمی دهد؛ بلکه به آن ساختار و معنا می بخشد. در فرایند
طراحی سایت، شناخت تگ ها به ساخت صفحه هایی منظم، قابل فهم و سازگار با مرورگرها کمک می کند.
🧩اجزای یک تگ
بسیاری از تگ های HTML از یک تگ آغازین و یک تگ پایانی تشکیل می شوند. محتوایی که میان این دو قرار می گیرد، محتوای همان عنصر است. تگ آغازین محل شروع عنصر را مشخص می کند و تگ پایانی نشان می دهد که آن عنصر در کجا به پایان می رسد. نام هر دو تگ معمولا یکسان است؛ اما تگ پایانی با یک ممیز رو به جلو پیش از نام تگ نوشته می شود.
نمونه ساختار یک تگ جفتی
<p>محتوای پاراگراف</p>
📘قواعد بسته شدن تگ
هر
تگ HTML جفتی باید در جای مناسب بسته شود تا مرورگر مرز محتوای آن را درست تشخیص دهد. اگر تگی بسته نشود یا ترتیب باز و بسته شدن عناصر رعایت نشود، ممکن است بخشی از صفحه متفاوت از انتظار نمایش داده شود. در نمونه بالا، تگ
<p> آغاز پاراگراف و تگ
</p> پایان آن را مشخص می کند. محتوای میان آنها، متن پاراگراف است.
انواع تگ های HTML
🗂️دسته بندی تگ ها
تگ ها را می توان بر اساس شکل و کاربردشان به چند گروه تقسیم کرد. این دسته بندی کمک می کند هنگام نوشتن کد، بدانید هر عنصر به تگ پایانی نیاز دارد یا نه و ویژگی های آن را کجا باید وارد کنید. شکل کلی تگ ها یکسان نیست، اما همه آنها برای توصیف ساختار یا رفتار محتوای صفحه استفاده می شوند.
۱
تگ های یکه: این تگ ها معمولا محتوایی میان تگ آغازین و پایانی ندارند و به تنهایی یک عنصر را ایجاد می کنند. تگ <hr> نمونه ای از این گروه است و برای نمایش یک خط جداکننده به کار می رود. در اسناد HTML جدید، تگ هایی مانند <img> و <br> نیز در همین دسته قرار می گیرند.
۲
تگ های جفتی: این تگ ها یک بخش را با تگ آغازین باز می کنند و با تگ پایانی می بندند. تگ های <head> و </head> نمونه ای از یک جفت تگ هستند. عنوان ها، پاراگراف ها، فهرست ها و بخش های صفحه نیز معمولا با تگ های جفتی نوشته می شوند.
۳
تگ های دارای ویژگی: بسیاری از تگ ها می توانند ویژگی یا attribute داشته باشند. ویژگی ها اطلاعات بیشتری درباره عنصر می دهند؛ برای نمونه، ویژگی href در پیوند، مقصد کلیک را مشخص می کند. ویژگی ها معمولا در تگ آغازین می آیند و از نام ویژگی، علامت مساوی و مقدار آن تشکیل می شوند.
نمونه تگ پیوند همراه ویژگی
<a href="https://www.w3.org">متن پیوند</a>
✅ویژگی های HTML چه کاری انجام می دهند؟
ویژگی ها رفتار یا اطلاعات یک تگ را دقیق تر می کنند. در مثال بالا، href نام ویژگی و نشانی اینترنتی مقدار آن است. متن «متن پیوند» همان بخشی است که کاربر می بیند و با انتخاب آن به مقصد تعیین شده می رود. ویژگی های دیگری مانند id، class و title نیز برای شناسایی، گروه بندی یا ارائه اطلاعات تکمیلی عناصر کاربرد دارند.
روش نوشتن تگ های HTML و ویژگی ها
🛠️نوشتن ویژگی در تگ آغازین
هر تگ اچ تی ام ال می تواند مجموعه ای از ویژگی ها داشته باشد که مشخصات عنصر را تعیین می کنند. ویژگی ها درون تگ آغازین نوشته می شوند و مقدار هر ویژگی معمولا داخل علامت نقل قول قرار می گیرد. در کد زیر، تگ p یک پاراگراف ایجاد می کند و ویژگی title اطلاعاتی تکمیلی برای آن در نظر می گیرد.
نمونه پاراگراف دارای ویژگی
<p title="توضیح پاراگراف">متن پاراگراف</p>
🧠استفاده از چند ویژگی
اگر یک تگ به چند ویژگی نیاز داشته باشد، ویژگی ها را با فاصله از هم جدا می کنند. ترتیب ویژگی ها در بیشتر موارد اهمیتی ندارد؛ با این حال، نوشتن کد منظم و خوانا، پیدا کردن خطاها و نگهداری صفحه را ساده تر می کند. نام ویژگی باید درست نوشته شود و مقدار آن نیز در جای مناسب قرار بگیرد.
نمونه استفاده از چند ویژگی
<p id="intro" class="note" title="متن معرفی">متن پاراگراف</p>
🔎مثال ویژگی border در تگ پاراگراف
در نمونه زیر، یک پاراگراف با مقدار مشخصی برای ویژگی border نوشته شده است. این مثال برای آشنایی با شکل کلی نوشتن ویژگی هاست؛ برای طراحی حاشیه در صفحات امروزی، معمولا از CSS استفاده می شود. جدا کردن ساختار HTML از ظاهر صفحه، مدیریت و تغییر طراحی را آسان تر می کند.
نمونه کد تگ دارای ویژگی
<p border="1">متن پاراگراف</p>
نکات مهم درباره تگ های HTML
⚠️نکته درباره تگ های یکه
در منابع آموزشی ممکن است برای تگ های یکه دو شکل نوشتاری ببینید. برای نمونه، شکل <hr> و شکل <hr /> هر دو برای خط جداکننده استفاده شده اند. در HTML5، شکل بدون ممیز برای بسیاری از این عناصر رایج است. بهتر است در هر پروژه از یک شیوه ثابت و مطابق استانداردهای مورد استفاده همان پروژه پیروی کنید.
🔤حروف بزرگ و کوچک
نام تگ های HTML در مرورگر نسبت به بزرگ یا کوچک بودن حروف حساس نیست؛ بنابراین، در HTML می توان نوشتارهایی مانند <b> و <B> را معادل دانست. با وجود این، استفاده از حروف کوچک شیوه رایج تر و خواناتری است و به یکدست ماندن کد کمک می کند.
✍️تاثیر تگ بر محتوای داخل آن
هر تگ، محتوای قرار گرفته در محدوده خود را به شکل مشخصی معرفی می کند. برای مثال، تگ <b> متن درون خود را به صورت پررنگ نمایش می دهد. با این حال، برای تاکید معنایی بهتر است در موقعیت مناسب از تگ <strong> استفاده شود؛ زیرا این تگ علاوه بر ظاهر، اهمیت محتوای خود را نیز مشخص می کند.
🧱ترتیب درست تگ های تو در تو
گاهی یک تگ داخل تگ دیگری قرار می گیرد؛ در این حالت باید تگ داخلی پیش از تگ بیرونی بسته شود. رعایت این ترتیب، ساختار درختی سند را سالم نگه می دارد و مانع بروز خطاهای ناخواسته در نمایش صفحه می شود. برای نمونه، اگر یک بخش پررنگ داخل پاراگراف دارید، ابتدا تگ پررنگ و سپس تگ پاراگراف را می بندید.
نمونه تگ های تو در تو
<p>این یک متن <strong>مهم</strong> است.</p>
| نوع تگ |
ساختار نمونه |
کاربرد |
| تگ جفتی |
<p>...</p> |
مشخص کردن محدوده پاراگراف |
| تگ یکه |
<hr> |
ایجاد خط جداکننده |
| تگ دارای ویژگی |
<a href="...">...</a> |
ساخت پیوند به مقصد دلخواه |
نمونه های پرکاربرد تگ HTML
🧭پاراگراف، پیوند و تصویر
برای ساخت صفحه، تگ های گوناگونی در اختیار دارید. تگ <p> برای پاراگراف، تگ <a> برای پیوند و تگ <img> برای افزودن تصویر به کار می رود. هر عنصر ویژگی های مناسب خود را دارد؛ برای نمونه، پیوند به ویژگی href و تصویر به ویژگی هایی مانند src و alt نیاز دارد.
♿اهمیت ویژگی alt برای تصویر
ویژگی alt توضیح متنی تصویر را فراهم می کند. این متن در صورت بارگذاری نشدن تصویر می تواند به کاربر کمک کند و برای فناوری های کمکی نیز مفید است. نوشتن توضیح روشن و مرتبط برای تصویر، بخشی از ساخت محتوای دسترس پذیر و باکیفیت به شمار می رود. نام فایل تصویر و متن جایگزین باید تا حد امکان دقیق و هماهنگ با محتوای واقعی آن باشند.
روش یادگیری و تمرین تگ های HTML
🚀از مثال های کوچک شروع کنید
برای یادگیری بهتر، ابتدا یک صفحه ساده بسازید و تگ های پایه مانند عنوان، پاراگراف، پیوند و تصویر را در آن به کار ببرید. پس از نوشتن هر بخش، فایل را در مرورگر باز کنید و نتیجه را با کد خود مقایسه کنید. این کار کمک می کند رابطه میان ساختار HTML و چیزی که روی صفحه نمایش داده می شود، روشن تر شود.
🧹کد خوانا بنویسید
تورفتگی مناسب، نام گذاری روشن برای کلاس ها و بستن درست تگ ها، خواندن و ویرایش کد را ساده می کند. اگر خطایی در خروجی دیدید، ابتدا ترتیب تگ های باز و بسته را بررسی کنید؛ سپس نام ویژگی ها و مقدارهای آنها را کنترل کنید. نوشتن کد مرتب به ویژه زمانی اهمیت دارد که صفحه بزرگ تر می شود یا چند نفر روی یک پروژه کار می کنند.
🧪خروجی را در مرورگر آزمایش کنید
مرورگرها در بسیاری از موارد تلاش می کنند خطاهای ساده HTML را اصلاح کنند؛ اما نباید به این رفتار تکیه کرد. ساختار نادرست ممکن است در مرورگرهای مختلف نتیجه های متفاوتی داشته باشد یا برای ابزارهای کمکی مشکل ایجاد کند. بررسی صفحه در چند اندازه نمایش و استفاده از ابزارهای اعتبارسنجی، به یافتن ایرادهای ساختاری کمک می کند.
جمع بندی
⭐آنچه باید به خاطر بسپارید
تگ ها ساختار اصلی محتوای صفحات وب را می سازند و به مرورگر می گویند هر بخش چه معنایی دارد. برای نوشتن کد درست، تفاوت تگ های جفتی و یکه را بشناسید، ویژگی ها را در تگ آغازین قرار دهید و ترتیب تگ های تو در تو را رعایت کنید. با تمرین و بررسی خروجی در مرورگر، استفاده از تگ های HTML ساده تر می شود و می توانید صفحه هایی منظم، کاربردی و قابل دسترس بسازید.
سوالات متداول تگ های HTML
تگ HTML چیست؟
تگ HTML نشانه ای در کد صفحه است که نوع و ساختار یک بخش از محتوا را برای مرورگر مشخص می کند؛ برای نمونه، تگ پاراگراف متن را به عنوان یک پاراگراف معرفی می کند.
تفاوت تگ آغازین و تگ پایانی چیست؟
تگ آغازین شروع یک عنصر را نشان می دهد و تگ پایانی محدوده آن را می بندد. تگ پایانی معمولا با ممیز رو به جلو پیش از نام تگ نوشته می شود.
آیا همه تگ های HTML به تگ پایانی نیاز دارند؟
خیر. بعضی تگ ها مانند تگ تصویر و خط جداکننده محتوای درونی ندارند و به شکل تگ های یکه استفاده می شوند؛ بسیاری از عناصر دیگر، مانند پاراگراف، تگ آغازین و پایانی دارند.
ویژگی در تگ HTML چه کاربردی دارد؟
ویژگی اطلاعات یا مشخصات بیشتری به عنصر اضافه می کند و در تگ آغازین نوشته می شود. برای مثال، ویژگی href مقصد یک پیوند را مشخص می کند.
آیا تگ های HTML به حروف بزرگ و کوچک حساس هستند؟
در HTML نام تگ ها به بزرگ یا کوچک بودن حروف حساس نیست؛ با این حال، برای خوانایی و رعایت شیوه رایج بهتر است نام تگ ها را با حروف کوچک بنویسید.