تگ label در HTML + ویدیو آموزشی
تگ label در html برای راهنمایی کاربر در فرم ها استفاده می شود. علاوه بر آن، می توان لیبل را به المان مربوط به آن متصل کرد که کاربرد آن در ادامه مطلب توضیح داده می شود. تگ label در html در سئو نیز بسیار مفید است که روش بهره گیری از آن را نیز شرح خواهیم داد.
⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐
تگ label در HTML
در زیر کاربردهای تگ لیبل را مرور می کنیم:
- تگ <label> کاربران را برای پر کردن فرم راهنمایی می کند.
- تگ <label> برای ارتباط دادن توضیحات به المانهای فرم مورد استفاده قرار میگیرد. (این مورد برای موتورهای جستجو و همچنین زمانی که کاربر برای کلیک روی نقاط کوچک مشکل دارد، مانند چک باکس در html کاربرد دارد)
- تگ <label> به موتورهای جستجو اجازه میدهد تا محتوای وبسایت را بهتر فهمیده و درک کنند.
نحوه استفاده از تگ label
برای استفاده از تگ label در HTML، ابتدا باید برچسب مربوط به المان فرم را تعریف کرده و سپس آن را با تگ label ارتباط داد.
برای مثال، فرض کنید یک المان فرم با نام “نام” وجود دارد. در این صورت، برچسب زیر برای این المان فرم تعریف خواهد شد:
خروجی:
در این کد مراحل زیر طی شده است:
1- برچسب label با ویژگی for برای المان input تعریف شده است.
2- برای input نیز ویژگی id تعریف شده است.
3- مقدار اختصاص داده شده به id و for باید یکسان باشد تا المان به لیبل متصل شود.
نکته: وقتی لیبل را به تگ input متصل کنیم، کاربر با کلیک روی لیبل، می تواند آن آیتم را فعال کند. اگر اتصال را ایجاد نکنیم با کلیک کاربر بر روی «نام» هیچ اتفاقی نمی افتد و برای وارد کردن اطلاعات حتما باید روی باکس کلیک کند.
مثال:
خروجی:
سوال: در مثال بالا اگر label را به input متصل نکنیم چه اتفاقی می افتد؟
⇐پاسخ: کاربر برای انتخاب هر مهارت مجبور است روی دایره کوچک جلو هر گزینه کلیک کند. ولی حالا اگر روی لیبل (نام مهارت) هم کلیک کند آن گزینه انتخاب می شود.
اصل اساسی سئو: استفاده از تگ label
استفاده از تگ label به عنوان یک اصل اساسی سئو میتواند بهبود قابل توجهی در رتبهبندی سایت شما در موتورهای جستجوی اینترنتی داشته باشد. این برچسبها به موتورهای جستجو اجازه میدهند تا محتوای وبسایت را بهتر فهمیده و درک کنند. با استفاده از تگ label، موتورهای جستجو میتوانند متوجه شودند که برچسبها و المانهای فرم شما با چه محتوایی در ارتباط هستند و به همین دلیل، این تگ به افزایش رتبه سئو وبسایت شما کمک میکند. (همچنین بخوانید : تگ در html چیست؟)
استفاده درست از تگ label برای بهبود سئو
برای بهینهسازی سئو با استفاده از تگ label، میتوانید راهکارهای زیر را انجام دهید:
1- توضیح کامل درباره المان با تگ label
با استفاده از برچسب label، بهتر است که توضیحات کاملی در مورد المانهای فرم درج شود. به این ترتیب، موتورهای جستجو قادر خواهند بود بهترین تصمیمگیری را درباره محتوای صفحه بگیرند و رتبهبندی را بهبود دهند.
3- استفاده از متن مناسب برای تگ label
بهتر است برای برچسب label، متن مناسبی انتخاب کنید. متن باید برای کاربران معنی داشته باشد و باید با المان فرم مرتبط باشد. با انتخاب متن مناسب، میتوانید بهترین استفاده را از برچسبهای label داشته باشید.
4- استفاده از تگ label برای المانهای فرم همراه با placeholder
استفاده از تگ label برای المانهای فرم همراه با placeholder، به موتورهای جستجو کمک میکند تا محتوای وبسایت شما را بهتر درک کنند. این کار به افزایش رتبهبندی وبسایت شما کمک میکند.
نتیجهگیری
تگ label در HTML یک ابزار قدرتمند برای بهبود فرم ها است. با استفاده از این تگ می توانید کاربران را برای انتخاب گزینه مناسب راهنمایی کنید. همچنین با اتصال برچسب به المان مربوطه می توانید انتخاب گزینه را راحت تر کنید و از همه مهمتر به موتورهای جستجو برای درک صفحه کمک کنید. بنابراین سعی کنید طبق توضیحات داده شده از این تگ کاملترین بهره را ببرید.
نظرات :