اگر بهتازگی یادگیری HTML را شروع کرده باشید، خیلی زود با عبارتهایی مانند href، src، alt، class و id روبهرو میشوید. این عبارتها تگ جدیدی نیستند؛ بلکه اطلاعاتی را به عناصر HTML اضافه میکنند و به مرورگر میگویند هر عنصر باید چگونه عمل کند یا چه مشخصاتی داشته باشد.
به این اطلاعات تکمیلی اتریبیوت HTML یا همان ویژگی HTML گفته میشود. اتریبیوتها داخل تگ آغازین نوشته میشوند و معمولاً از یک نام و مقدار تشکیل شدهاند. برای مثال، در کد زیر href نام اتریبیوت و “/courses/” مقدار آن است:
<a href="/courses/">مشاهده دورهها</a>
در ادامه یاد میگیرید اتریبیوت دقیقاً کجای کد قرار میگیرد، چه تفاوتی با تگ و عنصر دارد، اتریبیوتهای عمومی و بولی چگونه کار میکنند و از چه روشی میتوان ویژگی معتبر هر عنصر را پیدا و بررسی کرد.
اتریبیوت HTML چیست و چه کاری انجام میدهد؟
اتریبیوت HTML یا همان ویژگی HTML، اطلاعات یا تنظیمات تکمیلی یک عنصر را مشخص میکند. با استفاده از اتریبیوتها میتوان به مرورگر گفت یک لینک به چه نشانی برود، تصویر از کدام فایل بارگذاری شود یا یک عنصر با چه شناسهای قابل شناسایی باشد.
برای نمونه، تگ a بهتنهایی نشان میدهد که با یک لینک سروکار داریم؛ اما مقصد لینک را اتریبیوت href تعیین میکند:
<a href="/courses">مشاهده دورهها</a>
در این کد، href یک اتریبیوت است و مقدار “/courses” مقصد لینک را مشخص میکند. عبارت «مشاهده دورهها» نیز متنی است که کاربر در صفحه میبیند.
در تعریف Attribute در MDN، اتریبیوت بخشی معرفی میشود که یک عنصر HTML را گسترش میدهد و میتواند رفتار آن را تغییر دهد یا اطلاعات تکمیلی درباره آن فراهم کند. بنابراین اتریبیوت یک عنصر جدید نمیسازد؛ بلکه جزئیات بیشتری درباره همان عنصر موجود در اختیار مرورگر قرار میدهد.
اتریبیوت کجای کد HTML قرار میگیرد؟
اتریبیوتها داخل تگ آغازین عنصر و پس از نام تگ نوشته میشوند. در مثال قبل، تگ آغازین از <a شروع میشود و با > پایان مییابد؛ بنابراین اتریبیوت href نیز داخل همین قسمت قرار گرفته است:
<a href="/courses">
استاندارد جهانی HTML نیز اتریبیوتهای یک عنصر را بخشی از تگ آغازین آن تعریف میکند. اگر چند اتریبیوت وجود داشته باشد، همگی پس از نام تگ و پیش از علامت > قرار میگیرند.
برای دیدن جای هر بخش، دوباره مثال کامل را بررسی کنید:
<a href="/courses">مشاهده دورهها</a>
در این ساختار:
- a نام تگ است؛
- href نام اتریبیوت است؛
- “/courses” مقدار اتریبیوت است؛
- «مشاهده دورهها» محتوای عنصر است؛
- </a> تگ پایانی عنصر است.
اتریبیوت را نباید بیرون از تگ آغازین یا میان محتوای عنصر نوشت. کد زیر برای تعیین مقصد لینک درست نیست:
<a>href="/courses" مشاهده دورهها</a>
در این حالت، مرورگر عبارت href=”/courses” را بخشی از متن لینک در نظر میگیرد، نه تنظیمات آن. در نتیجه لینک مقصدی نخواهد داشت.
شناخت اتریبیوت زمانی آسانتر میشود که ساختار کلی عنصر را بشناسید. در راهنمای HTML چیست میتوانید ارتباط میان تگ، عنصر و محتوای صفحه را با جزئیات بیشتری مرور کنید.
یک مثال ساده با اتریبیوت href
اتریبیوت href مقصد یک لینک را مشخص میکند. در کد زیر، کاربر عبارت «ورود به حساب کاربری» را میبیند و با انتخاب آن به مسیر /login هدایت میشود:
<a href="/login">ورود به حساب کاربری</a>
برای بررسی عملکرد مثال، آن را داخل بدنه یک فایل HTML قرار دهید:
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<title>مثال اتریبیوت href</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.owl-carousel .owl-video-play-icon{--wpr-bg-a0224545-498f-4466-a719-700c8642eef9: url('https://bitamooz.com/wp-content/themes/studiare/assets/css/owl.video.play.png');}.site-footer.footer-color-light a i.fab.fa-apart:before,.light a i.fab.fa-apart:before{--wpr-bg-3d6c1679-e996-4215-ae68-db78ddbd268a: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat-light.png');}i.fab.fa-apart:before,.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-59766fcc-8598-42f6-8273-df232d09d86b: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat.png');}.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-0c50513a-61e5-413c-a01f-7d97fa99069c: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat-light.png');}.commentlist .comment .star-rating{--wpr-bg-4a7449e2-7d31-4c15-b19b-f796d8708095: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.commentlist .comment .star-rating>span{--wpr-bg-558a35ac-04cb-48ae-9a03-becee1311302: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.commentlist .review .star-rating{--wpr-bg-fbc71b9a-1960-4abd-8fd5-de15928dfae6: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.commentlist .review .star-rating>span{--wpr-bg-39783664-e2b1-447c-9f00-7baf97bdd4f0: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.admin_vc_addon{--wpr-bg-4862ee30-8eca-4e24-9ec5-741ae061fa1e: url('https://bitamooz.com/wp-content/themes/studiare/assets/css/assets/images/icons/favicon.png');}.page-title{--wpr-bg-ca45e3e6-6d88-4331-a909-8d01a3e4b234: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/icon-back-OWL.png');}.average-rating .avareage-rating-inner .average-rating-stars .star-rating{--wpr-bg-00506cbe-148c-4467-9037-a6dc9c3f43d4: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.average-rating .avareage-rating-inner .average-rating-stars .star-rating>span{--wpr-bg-2dcb7b4a-3783-44d3-b202-dc3ec517f95e: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.sale-perc{--wpr-bg-f0692478-92d1-44a6-b056-7d355543ae9a: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/discont_badge.png');}.sale-perc.sc_coming_soon_badge{--wpr-bg-ba27dfcc-19e9-430e-b353-adff8be567f9: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/comibg-soon-1.png');}.sale-perc.sc_full_capacity_badge{--wpr-bg-5e9c4dc4-b050-4cd4-9bbd-351be60071e1: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/full-capacity-bg.png');}span.sc-toman-cur{--wpr-bg-6f005b09-3998-4abf-95fd-9d859f8a343c: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/toman.svg');}.teacher-item .teacher-item-inner .teacher-bg{--wpr-bg-4d06819a-0e1b-4680-b0b7-2744617358f7: url('http://localhost/wpdev/studiare/wp-content/uploads/sites/8/2014/01/spectacles.gif');}.product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot{--wpr-bg-28865b02-521b-4f41-8ab8-5a0050a61a5e: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/icon-back-OWL.png');}.rll-youtube-player .play{--wpr-bg-2eecfeb0-1eed-4fb9-952c-f34f8d641148: url('https://bitamooz.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".owl-carousel .owl-video-play-icon","style":".owl-carousel .owl-video-play-icon{--wpr-bg-a0224545-498f-4466-a719-700c8642eef9: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/owl.video.play.png');}","hash":"a0224545-498f-4466-a719-700c8642eef9","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/owl.video.play.png"},{"selector":".site-footer.footer-color-light a i.fab.fa-apart,.light a i.fab.fa-apart","style":".site-footer.footer-color-light a i.fab.fa-apart:before,.light a i.fab.fa-apart:before{--wpr-bg-3d6c1679-e996-4215-ae68-db78ddbd268a: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png');}","hash":"3d6c1679-e996-4215-ae68-db78ddbd268a","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png"},{"selector":"i.fab.fa-apart,.site-footer.footer-color-light a i.fab.fa-apart","style":"i.fab.fa-apart:before,.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-59766fcc-8598-42f6-8273-df232d09d86b: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat.png');}","hash":"59766fcc-8598-42f6-8273-df232d09d86b","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat.png"},{"selector":".site-footer.footer-color-light a i.fab.fa-apart","style":".site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-0c50513a-61e5-413c-a01f-7d97fa99069c: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png');}","hash":"0c50513a-61e5-413c-a01f-7d97fa99069c","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png"},{"selector":".commentlist .comment .star-rating","style":".commentlist .comment .star-rating{--wpr-bg-4a7449e2-7d31-4c15-b19b-f796d8708095: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"4a7449e2-7d31-4c15-b19b-f796d8708095","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".commentlist .comment .star-rating>span","style":".commentlist .comment .star-rating>span{--wpr-bg-558a35ac-04cb-48ae-9a03-becee1311302: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"558a35ac-04cb-48ae-9a03-becee1311302","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".commentlist .review .star-rating","style":".commentlist .review .star-rating{--wpr-bg-fbc71b9a-1960-4abd-8fd5-de15928dfae6: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"fbc71b9a-1960-4abd-8fd5-de15928dfae6","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".commentlist .review .star-rating>span","style":".commentlist .review .star-rating>span{--wpr-bg-39783664-e2b1-447c-9f00-7baf97bdd4f0: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"39783664-e2b1-447c-9f00-7baf97bdd4f0","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".admin_vc_addon","style":".admin_vc_addon{--wpr-bg-4862ee30-8eca-4e24-9ec5-741ae061fa1e: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/assets\/images\/icons\/favicon.png');}","hash":"4862ee30-8eca-4e24-9ec5-741ae061fa1e","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/assets\/images\/icons\/favicon.png"},{"selector":".page-title","style":".page-title{--wpr-bg-ca45e3e6-6d88-4331-a909-8d01a3e4b234: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png');}","hash":"ca45e3e6-6d88-4331-a909-8d01a3e4b234","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png"},{"selector":".average-rating .avareage-rating-inner .average-rating-stars .star-rating","style":".average-rating .avareage-rating-inner .average-rating-stars .star-rating{--wpr-bg-00506cbe-148c-4467-9037-a6dc9c3f43d4: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"00506cbe-148c-4467-9037-a6dc9c3f43d4","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".average-rating .avareage-rating-inner .average-rating-stars .star-rating>span","style":".average-rating .avareage-rating-inner .average-rating-stars .star-rating>span{--wpr-bg-2dcb7b4a-3783-44d3-b202-dc3ec517f95e: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"2dcb7b4a-3783-44d3-b202-dc3ec517f95e","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".sale-perc","style":".sale-perc{--wpr-bg-f0692478-92d1-44a6-b056-7d355543ae9a: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/discont_badge.png');}","hash":"f0692478-92d1-44a6-b056-7d355543ae9a","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/discont_badge.png"},{"selector":".sale-perc.sc_coming_soon_badge","style":".sale-perc.sc_coming_soon_badge{--wpr-bg-ba27dfcc-19e9-430e-b353-adff8be567f9: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/comibg-soon-1.png');}","hash":"ba27dfcc-19e9-430e-b353-adff8be567f9","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/comibg-soon-1.png"},{"selector":".sale-perc.sc_full_capacity_badge","style":".sale-perc.sc_full_capacity_badge{--wpr-bg-5e9c4dc4-b050-4cd4-9bbd-351be60071e1: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/full-capacity-bg.png');}","hash":"5e9c4dc4-b050-4cd4-9bbd-351be60071e1","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/full-capacity-bg.png"},{"selector":"span.sc-toman-cur","style":"span.sc-toman-cur{--wpr-bg-6f005b09-3998-4abf-95fd-9d859f8a343c: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/toman.svg');}","hash":"6f005b09-3998-4abf-95fd-9d859f8a343c","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/toman.svg"},{"selector":".teacher-item .teacher-item-inner .teacher-bg","style":".teacher-item .teacher-item-inner .teacher-bg{--wpr-bg-4d06819a-0e1b-4680-b0b7-2744617358f7: url('http:\/\/localhost\/wpdev\/studiare\/wp-content\/uploads\/sites\/8\/2014\/01\/spectacles.gif');}","hash":"4d06819a-0e1b-4680-b0b7-2744617358f7","url":"http:\/\/localhost\/wpdev\/studiare\/wp-content\/uploads\/sites\/8\/2014\/01\/spectacles.gif"},{"selector":".product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot","style":".product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot{--wpr-bg-28865b02-521b-4f41-8ab8-5a0050a61a5e: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png');}","hash":"28865b02-521b-4f41-8ab8-5a0050a61a5e","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-2eecfeb0-1eed-4fb9-952c-f34f8d641148: url('https:\/\/bitamooz.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"2eecfeb0-1eed-4fb9-952c-f34f8d641148","url":"https:\/\/bitamooz.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<a href="/login">ورود به حساب کاربری</a>
</body>
</html>
پس از بازکردن فایل در مرورگر باید یک متن قابل کلیک مشاهده کنید. با کلیک روی آن، مرورگر تلاش میکند مسیر /login را در همان دامنه باز کند. از آنجا که این نشانی در مثال فرضی است، ممکن است در محیط آزمایشی با صفحه پیدا نشد مواجه شوید؛ بااینحال قابل کلیکشدن متن نشان میدهد اتریبیوت href توسط مرورگر تشخیص داده شده است.
نکته اصلی این مثال آن است که تگ a نوع عنصر را تعیین میکند و اتریبیوت href جزئیات عملکرد آن را میسازد. در بخش بعدی، اجزای اتریبیوت را دقیقتر بررسی میکنیم تا بتوانید نام، مقدار و چند اتریبیوت را با سینتکس درست بنویسید.
ساختار اتریبیوت در HTML چگونه نوشته میشود؟
رایجترین شکل نوشتن اتریبیوت در HTML از سه بخش تشکیل میشود: نام اتریبیوت، علامت مساوی و مقدار اتریبیوت.
نام-اتریبیوت=”مقدار”
برای مثال، در عنصر زیر اتریبیوت href مقصد لینک را تعیین میکند:
<a href="/about">درباره ما</a>
در این کد:
- href نام اتریبیوت است؛
- = نام اتریبیوت را به مقدار آن متصل میکند؛
- “/about” مقدار اتریبیوت است.
این ساختار به مرورگر میگوید ویژگی href عنصر a باید مقدار /about را داشته باشد. استاندارد HTML نیز اتریبیوتها را داخل تگ آغازین قرار میدهد و در حالت معمول، نام و مقدار را با علامت مساوی از یکدیگر جدا میکند.
نام اتریبیوت و مقدار آن چیست؟
نام اتریبیوت مشخص میکند چه ویژگیای تنظیم میشود و مقدار اتریبیوت تنظیم دقیق آن ویژگی را تعیین میکند.
برای نمونه، در کد زیر از اتریبیوت lang برای مشخصکردن زبان محتوای صفحه استفاده شده است:
<html lang="fa">
در این مثال:
- نام اتریبیوت: lang
- مقدار اتریبیوت: “fa”
نام اتریبیوت بهتنهایی کافی نیست؛ باید بدانیم آن اتریبیوت چه نوع مقداری میپذیرد. مقدار بعضی اتریبیوتها یک نشانی است، بعضی یک نام یا شناسهاند و بعضی فقط چند مقدار مشخص و ازپیشتعریفشده را قبول میکنند.
مثلاً مقدار href معمولاً یک نشانی یا مسیر است:
<a href="/contact">تماس با ما</a>
مقدار class میتواند نام یک یا چند کلاس باشد:
<p class="intro highlighted">متن معرفی</p>
مقدار width در بعضی عناصر میتواند یک عدد باشد:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%200'%3E%3C/svg%3E" alt="بنر معرفی دوره" width="800" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال" data-lazy-src="http://banner.jpg"><noscript><img decoding="async" src="banner.jpg" alt="بنر معرفی دوره" width="800" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال"></noscript>
بنابراین از روی شکل ظاهری مقدار نمیتوان درباره درستبودن آن تصمیم گرفت. نوع مقدار مجاز را تعریف همان اتریبیوت و عنصری که اتریبیوت روی آن قرار گرفته است مشخص میکند.
یک نام اتریبیوت را نباید دو بار داخل یک تگ آغازین تکرار کرد. کد زیر صحیح نیست:
<a href="/about" href="/contact">مشاهده صفحه</a>
در این وضعیت، دو مقدار متفاوت برای یک اتریبیوت همنام نوشته شدهاند و نتیجهای که مرورگر ایجاد میکند نباید مبنای کدنویسی قرار گیرد. استاندارد HTML وجود دو اتریبیوت همنام در یک تگ آغازین را مجاز نمیداند.
شکل درست این است که فقط یک مقصد مشخص شود:
<a href="/contact">تماس با ما</a>
چرا مقدار اتریبیوت را داخل کوتیشن مینویسیم؟
در مثالهای این مقاله، مقدار اتریبیوتها را داخل دابلکوتیشن مینویسیم:
<a href="/products">محصولات</a>
HTML در شرایط مشخص اجازه میدهد بعضی مقدارها بدون کوتیشن نوشته شوند. برای مثال، کد زیر از نظر نحوی میتواند پذیرفته شود:
<a href=/products>محصولات</a>
اما مقدار بدون کوتیشن نمیتواند شامل فاصله یا تعدادی از نویسههای خاص مانند “, ‘, `, =, < و > باشد. به همین دلیل، حذف کوتیشن با پیچیدهترشدن مقدار میتواند خواندن و ویرایش کد را دشوارتر کند.
نمونه زیر بدون کوتیشن درست عمل نمیکند، زیرا مقدار class شامل فاصله است:
<p class=intro highlighted>متن معرفی</p>
مرورگر ممکن است intro را مقدار class و highlighted را یک اتریبیوت جداگانه در نظر بگیرد. شکل روشن و صحیح برای این منظور چنین است:
<p class="intro highlighted">متن معرفی</p>
مقدار اتریبیوت را میتوان با کوتیشن تکی نیز نوشت:
<a href='/products'>محصولات</a>
هر دو شکل تکی و دوتایی در HTML معتبرند؛ اما استفاده ثابت از دابلکوتیشن باعث میشود مثالها یکدستتر باشند و احتمال فراموشکردن کوتیشن در مقدارهای دارای فاصله کاهش یابد. راهنمای مقدماتی MDN نیز کوتیشنگذاری مقدارها و حفظ یک الگوی ثابت را برای کدهای آموزشی توصیه میکند.
هنگامی که خود مقدار شامل کوتیشن است، باید نوع کوتیشن بیرونی را با توجه به محتوای مقدار انتخاب کنید. در مثال زیر، مقدار title با دابلکوتیشن احاطه شده و نقلقول داخل آن با کوتیشن تکی نوشته شده است:
<button title="برای شروع روی 'ثبتنام' کلیک کنید">
راهنمای ثبتنام
</button>
میتوان ترتیب را نیز برعکس کرد:
<button title='برای شروع روی "ثبتنام" کلیک کنید'>
راهنمای ثبتنام
</button>
برای شروع، این قاعده عملی را به خاطر بسپارید: مقدار اتریبیوت را همیشه داخل دابلکوتیشن بنویسید، مگر اینکه محتوای مقدار دلیل مشخصی برای انتخاب کوتیشن تکی ایجاد کند.
چگونه چند اتریبیوت را روی یک عنصر قرار دهیم؟
یک عنصر میتواند چند اتریبیوت مختلف داشته باشد. هر اتریبیوت پس از نام تگ نوشته میشود و با فاصله از اتریبیوت بعدی جدا میشود:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%200'%3E%3C/svg%3E" alt="تصویر پروفایل کاربر" width="240" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال" data-lazy-src="http://profile.jpg"><noscript><img decoding="async" src="profile.jpg" alt="تصویر پروفایل کاربر" width="240" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال"></noscript>
این عنصر سه اتریبیوت دارد:
- src مسیر فایل تصویر را مشخص میکند؛
- alt متن جایگزین تصویر را در اختیار صفحه قرار میدهد؛
- width عرض تصویر را تعیین میکند.
برای جداکردن اتریبیوتها از ویرگول یا نقطهویرگول استفاده نمیشود. یک فاصله معمولی میان آنها کافی است:
<input type="email" name="email" autocomplete="email">
چسباندن دو اتریبیوت به یکدیگر ساختار را خراب میکند:
<input type="email"name="email">
بین پایان مقدار type و شروع اتریبیوت name باید فاصله وجود داشته باشد:
<input type="email" name="email">
استاندارد HTML برای جداکردن اتریبیوتهای متوالی به فاصله ASCII نیاز دارد. این فاصله به تجزیهکننده مرورگر نشان میدهد که اتریبیوت قبلی تمام شده و نام اتریبیوت بعدی آغاز شده است.
ترتیب اتریبیوتها معمولاً معنای عنصر را تغییر نمیدهد؛ برای مثال، دو کد زیر اطلاعات یکسانی دارند:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%200'%3E%3C/svg%3E" alt="لوگوی بیتآموز" width="160" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال" data-lazy-src="http://logo.png"><noscript><img decoding="async" src="logo.png" alt="لوگوی بیتآموز" width="160" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال"></noscript>
<img decoding="async" width="160" alt="لوگوی بیتآموز" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%200'%3E%3C/svg%3E" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال" data-lazy-src="http://logo.png"><noscript><img decoding="async" width="160" alt="لوگوی بیتآموز" src="logo.png" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال"></noscript>
بااینحال، بهتر است در یک پروژه از ترتیب ثابتی استفاده کنید تا کد سریعتر خوانده شود. برای مثال، در تصاویر میتوان ابتدا src، سپس alt و بعد تنظیمات تکمیلی را نوشت. این یک قرارداد خوانایی است، نه قاعدهای که مرورگر تحمیل کرده باشد.
در پایان، برای نوشتن چند اتریبیوت این الگو را دنبال کنید:
<tag attribute-one="value" attribute-two="value">
پیش از ادامه مقاله، باید بتوانید اجزای کد زیر را تشخیص دهید:
<a href="/courses" class="primary-link" title="مشاهده دورهها">
مشاهده دورهها
</a>
در این عنصر:
- href، class و title سه نام اتریبیوت متفاوتاند؛
- هر اتریبیوت فقط یک بار نوشته شده است؛
- هر نام با = به مقدار خود متصل شده است؛
- مقدارها داخل دابلکوتیشن قرار گرفتهاند؛
- اتریبیوتها با فاصله از یکدیگر جدا شدهاند.
اگر این بخشها را تشخیص میدهید، اکنون میتوانید ساختار یک اتریبیوت را بخوانید و چند اتریبیوت ساده را با سینتکس منظم روی یک عنصر قرار دهید.
تفاوت تگ، عنصر و اتریبیوت چیست؟
تگ، عنصر و اتریبیوت سه مفهوم مرتبط اما متفاوت در HTML هستند. تگ نشانهای است که در کد مینویسیم، عنصر واحدی است که مرورگر از آن ساختار میسازد و اتریبیوت اطلاعات تکمیلی همان عنصر را مشخص میکند.
برای مقایسه، این خط را در نظر بگیرید:
<a href="/courses" class="primary-link">مشاهده دورهها</a>
در این مثال:
- <a href=”/courses” class=”primary-link”> تگ آغازین است؛
- </a> تگ پایانی است؛
- ساختار کامل از تگ آغازین تا تگ پایانی، عنصر a را تشکیل میدهد؛
- href و class اتریبیوتهای عنصر هستند؛
- «مشاهده دورهها» محتوای متنی عنصر است.
استاندارد HTML سند را مجموعهای از عنصرها و متنها توصیف میکند. هر عنصر معمولاً در کد منبع با یک تگ آغازین و یک تگ پایانی نمایش داده میشود و اتریبیوتهای آن در تگ آغازین قرار میگیرند.
تجزیه یک خط HTML به بخشهای مختلف
برای اینکه تفاوت این مفاهیم روشنتر شود، همان کد را بخشبهبخش بررسی میکنیم:
<a href="/courses" class="primary-link">مشاهده دورهها</a>
۱. نام عنصر
در این مثال، a نام عنصر است. عنصر a در HTML برای ایجاد لینک به کار میرود.
نام عنصر در تگ آغازین و تگ پایانی تکرار شده است:
<a>...</a>
در تگ پایانی، پیش از نام عنصر یک اسلش / قرار میگیرد تا پایان عنصر مشخص شود.
۲. تگ آغازین
این قسمت تگ آغازین عنصر است:
<a href="/courses" class="primary-link">
تگ آغازین محل معرفی عنصر و ثبت اتریبیوتهای آن است. این تگ با < شروع میشود، نام عنصر را در خود دارد و با > پایان مییابد.
اصطلاح «تگ باز» نیز در آموزشهای فارسی رایج است، اما «تگ آغازین» تعبیر دقیقتری محسوب میشود؛ زیرا این بخش شروع عنصر را در کد مشخص میکند.
۳. اتریبیوتها
درون تگ آغازین دو اتریبیوت قرار گرفته است:
href=”/courses”
class=”primary-link”
اتریبیوتها تگ جداگانهای نیستند و بیرون از عنصر نیز قرار ندارند. آنها اطلاعات تکمیلی عنصر a هستند:
- href مقصد لینک را تعیین میکند؛
- class نامی در اختیار عنصر قرار میدهد که میتوان از آن در CSS یا JavaScript استفاده کرد.
به بیان دقیقتر، اتریبیوت عنصر را گسترش میدهد و میتواند رفتار آن را تغییر دهد یا اطلاعات بیشتری درباره آن فراهم کند.
۴. محتوای عنصر
متن زیر محتوای عنصر است:
«مشاهده دورهها»
این همان عبارتی است که کاربر در صفحه مشاهده میکند. محتوا میان تگ آغازین و تگ پایانی قرار گرفته است.
محتوای یک عنصر همیشه متن ساده نیست؛ بعضی عناصر میتوانند عنصرهای دیگری را نیز درون خود داشته باشند. این مقاله فعلاً روی ساختار ساده تمرکز دارد تا تفاوت اتریبیوت با سایر اجزای کد روشن بماند.
۵. تگ پایانی
این قسمت تگ پایانی است:
</a>
تگ پایانی نشان میدهد محدوده عنصر a در کد به پایان رسیده است. اتریبیوتها در تگ پایانی نوشته نمیشوند؛ بنابراین ساختار زیر نادرست است:
<a>مشاهده دورهها</a href="/courses">
اتریبیوت href باید در تگ آغازین قرار گیرد:
<a href="/courses">مشاهده دورهها</a>
۶. عنصر کامل
کل ساختار زیر یک عنصر HTML است:
<a href="/courses" class="primary-link">مشاهده دورهها</a>
پس عنصر فقط <a> نیست. در این مثال، عنصر شامل تگ آغازین، اتریبیوتها، محتوا و تگ پایانی است.
البته این الگو درباره همه عناصر یکسان نیست. عناصر خالی یا Void مانند img محتوای داخلی و تگ پایانی ندارند:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="لوگوی بیتآموز" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال" data-lazy-src="http://logo.png"><noscript><img decoding="async" src="logo.png" alt="لوگوی بیتآموز" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال"></noscript>
این کد همچنان یک عنصر HTML ایجاد میکند، اما نباید برای آن تگ پایانی </img> نوشت. بنابراین تعریف «عنصر همیشه از دو تگ تشکیل میشود» دقیق نیست.
برای آموزش کاملتر ساختار و انواع تگها میتوانید راهنمای تگ در HTML چیست؟ را بخوانید.
جدول مقایسه تگ، عنصر و اتریبیوت
جدول زیر مرز این سه مفهوم را در یک نگاه نشان میدهد:
| مفهوم | نمونه | نقش |
|---|---|---|
| تگ آغازین | <a href=”/courses”> | شروع عنصر و محل قرارگیری اتریبیوتها |
| تگ پایانی | </a> | مشخصکردن پایان عنصر |
| عنصر | <a href=”/courses”>دورهها</a> | واحد کامل و معنادار ساختهشده در HTML |
| اتریبیوت | href=”/courses” | افزودن اطلاعات یا تنظیمات به عنصر |
| نام اتریبیوت | href | مشخصکردن نوع ویژگی |
| مقدار اتریبیوت | “/courses” | تعیین مقدار دقیق آن ویژگی |
| محتوا | دورهها | متن یا ساختاری که داخل عنصر قرار میگیرد |
برای تشخیص این مفاهیم، کد زیر را بررسی کنید:
<p class="intro">آموزش HTML را شروع کنید.</p>
پاسخ درست چنین است:
- p نام عنصر است؛
- <p class=”intro”> تگ آغازین است؛
- </p> تگ پایانی است؛
- class=”intro” اتریبیوت است؛
- class نام اتریبیوت است؛
- “intro” مقدار اتریبیوت است؛
- «آموزش HTML را شروع کنید.» محتوای عنصر است؛
- کل خط یک عنصر p را تشکیل میدهد.
قاعدهای که باید از این بخش به خاطر بسپارید این است: تگ بخشی از سینتکس کد است، عنصر ساختار کامل HTML است و اتریبیوت جزئیات همان عنصر را تعیین میکند.
اتریبیوتهای عمومی و اختصاصی چه تفاوتی دارند؟
همه اتریبیوتها روی همه عناصر کاربرد ندارند. بعضی ویژگیها مانند class و id عمومی هستند و امکان استفاده از آنها روی همه عناصر HTML وجود دارد؛ بعضی دیگر فقط برای عناصر مشخصی تعریف شدهاند.
در این مقاله، برای گروه دوم از عبارت «اتریبیوت اختصاصی» استفاده میکنیم؛ یعنی ویژگیای که کاربرد آن به یک عنصر یا گروه مشخصی از عناصر وابسته است.
اتریبیوت عمومی یا Global چیست؟
اتریبیوتهای عمومی میان همه عناصر HTML مشترکاند. class، id، lang و dir نمونههایی از این گروه هستند. بااینحال، عمومیبودن یک اتریبیوت تضمین نمیکند که در هر موقعیت اثر مفیدی داشته باشد.
برای مثال، class را میتوان روی عناصر مختلف قرار داد:
<p class="intro">متن مقدمه</p>
<a href="/courses/" class="primary-link">
مشاهده دورهها
</a>
<img decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
alt="لوگوی بیتآموز"
class="site-logo"
data-lazy-src="http://logo.png"
><noscript><img decoding="async"
src="logo.png"
alt="لوگوی بیتآموز"
class="site-logo"
></noscript>
مقدار class میتواند شامل یک یا چند نام باشد که با فاصله از هم جدا شدهاند.
اتریبیوت id نیز عمومی است:
<section id="attribute-examples">
مثالهای اتریبیوت
</section>
مقدار id برای شناسایی یک عنصر مشخص استفاده میشود و باید میان شناسههای همان سند یکتا باشد.
استفاده از یک اتریبیوت عمومی زمانی مفید است که هدف مشخصی داشته باشد. افزودن کلاسها یا شناسههای بیاستفاده فقط کد را شلوغتر میکند.
اتریبیوت اختصاصی یک عنصر چیست؟
بعضی اتریبیوتها فقط برای عناصر مشخصی تعریف شدهاند. برای نمونه، href مقصد لینک را روی عنصر a مشخص میکند:
<a href="/about/">درباره ما</a>
اما قراردادن آن روی یک پاراگراف، پاراگراف را به لینک تبدیل نمیکند:
<p href="/about/">درباره ما</p>
در این حالت، نام href شناختهشده است، اما برای عنصر p تعریف نشده است.
همین موضوع درباره src نیز صدق میکند:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="کاور دوره HTML" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال" data-lazy-src="http://course-cover.jpg"><noscript><img decoding="async" src="course-cover.jpg" alt="کاور دوره HTML" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال"></noscript>
عنصر img از src برای معرفی منبع تصویر استفاده میکند، اما نوشتن src روی یک پاراگراف باعث بارگذاری تصویر نمیشود:
<p src="course-cover.jpg">معرفی دوره</p>
برای شناخت درست یک اتریبیوت باید سه موضوع را همزمان بررسی کنید:
- روی چه عناصری مجاز است؟
- چه نوع مقداری میپذیرد؟
- در زمینه آن عنصر چه رفتاری ایجاد میکند؟
مرجع اتریبیوتهای HTML نیز اتریبیوتها را همراه با عناصر پشتیبانیکننده و توضیح عملکرد آنها معرفی میکند.
مقایسه class، id، href، src و alt
| اتریبیوت | نوع | کاربرد |
|---|---|---|
| class | عمومی | قراردادن عنصر در یک یا چند گروه نامگذاریشده |
| id | عمومی | مشخصکردن شناسه یکتای عنصر |
| href | وابسته به عناصر مشخص | تعیین مقصد یا منبع مرتبط با عنصر |
| src | وابسته به عناصر مشخص | معرفی نشانی یک منبع خارجی |
| alt | وابسته به عناصر مشخص | ارائه متن جایگزین متناسب با عنصر |
کد زیر هر دو گروه را کنار هم نشان میدهد:
<a href="https://bitamooz.com/course/master-html/" id="html-course-link" class="primary-link">
مشاهده دوره HTML
</a>
href به عملکرد لینک مربوط است؛ id عنصر را بهصورت یکتا شناسایی میکند و class آن را در یک گروه قرار میدهد.
قاعده عملی: اتریبیوت عمومی را نیز باید هدفمند استفاده کرد و اتریبیوت اختصاصی را فقط روی عناصر تعریفشده و با مقدار معتبر نوشت.
اتریبیوت بولی چیست و چگونه کار میکند؟
اتریبیوت بولی با حضور یا نبودن خود یک حالت را مشخص میکند. حضور اتریبیوت به معنی true و نبود آن به معنی false است.
برای مثال، اتریبیوت disabled در تگ button، دکمه زیر را غیرفعال میکند:
<button disabled>ثبت سفارش</button>
برای فعالشدن دکمه باید خود اتریبیوت حذف شود:
<button>ثبت سفارش</button>
حضور یا نبودن اتریبیوت چه معنایی دارد؟
در اتریبیوتهای معمولی، مقدار بخش مهمی از معناست:
<a href="/courses/">مشاهده دورهها</a>
مقدار href مقصد لینک را مشخص میکند.
در اتریبیوت بولی، وجود خود نام ویژگی تعیینکننده است:
<input type="email" required>
وجود required یعنی کاربر باید پیش از ارسال معتبر فرم، مقدار مناسبی وارد کند.
اتریبیوت بولی میتواند به چند شکل نوشته شود:
<button disabled>ذخیره</button>
<button disabled="">ذخیره</button>
<button disabled="disabled">ذخیره</button>
هر سه نمونه حضور disabled را نشان میدهند. شکل اول برای کدهای مقدماتی کوتاهتر و روشنتر است. طبق استاندارد، در صورت نوشتهشدن مقدار، مقدار معتبر اتریبیوت بولی باید رشته خالی یا نام رسمی همان اتریبیوت باشد.
مثال با disabled، checked و required
اتریبیوت disabled یک کنترل پشتیبانیشده فرم را غیرفعال میکند:
<button type="submit" disabled>
ثبت سفارش
</button>
اتریبیوت checked وضعیت اولیه چکباکس یا دکمه رادیویی را مشخص میکند:
<label>عضویت در خبرنامه</label>
<input type="checkbox" name="newsletter" checked>
اتریبیوت required تکمیل یک کنترل پشتیبانیشده را برای ارسال معتبر فرم الزامی میکند:
<label for="email">ایمیل</label>
<input
type="email"
id="email"
name="email"
required
>
قواعد عنصر input مشخص میکنند که اتریبیوتهایی مانند checked و required فقط در حالتهای پشتیبانیشده کاربرد دارند.
برای آزمایش این ویژگیها:
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<title>اتریبیوتهای بولی</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.owl-carousel .owl-video-play-icon{--wpr-bg-a0224545-498f-4466-a719-700c8642eef9: url('https://bitamooz.com/wp-content/themes/studiare/assets/css/owl.video.play.png');}.site-footer.footer-color-light a i.fab.fa-apart:before,.light a i.fab.fa-apart:before{--wpr-bg-3d6c1679-e996-4215-ae68-db78ddbd268a: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat-light.png');}i.fab.fa-apart:before,.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-59766fcc-8598-42f6-8273-df232d09d86b: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat.png');}.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-0c50513a-61e5-413c-a01f-7d97fa99069c: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat-light.png');}.commentlist .comment .star-rating{--wpr-bg-4a7449e2-7d31-4c15-b19b-f796d8708095: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.commentlist .comment .star-rating>span{--wpr-bg-558a35ac-04cb-48ae-9a03-becee1311302: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.commentlist .review .star-rating{--wpr-bg-fbc71b9a-1960-4abd-8fd5-de15928dfae6: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.commentlist .review .star-rating>span{--wpr-bg-39783664-e2b1-447c-9f00-7baf97bdd4f0: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.admin_vc_addon{--wpr-bg-4862ee30-8eca-4e24-9ec5-741ae061fa1e: url('https://bitamooz.com/wp-content/themes/studiare/assets/css/assets/images/icons/favicon.png');}.page-title{--wpr-bg-ca45e3e6-6d88-4331-a909-8d01a3e4b234: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/icon-back-OWL.png');}.average-rating .avareage-rating-inner .average-rating-stars .star-rating{--wpr-bg-00506cbe-148c-4467-9037-a6dc9c3f43d4: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.average-rating .avareage-rating-inner .average-rating-stars .star-rating>span{--wpr-bg-2dcb7b4a-3783-44d3-b202-dc3ec517f95e: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.sale-perc{--wpr-bg-f0692478-92d1-44a6-b056-7d355543ae9a: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/discont_badge.png');}.sale-perc.sc_coming_soon_badge{--wpr-bg-ba27dfcc-19e9-430e-b353-adff8be567f9: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/comibg-soon-1.png');}.sale-perc.sc_full_capacity_badge{--wpr-bg-5e9c4dc4-b050-4cd4-9bbd-351be60071e1: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/full-capacity-bg.png');}span.sc-toman-cur{--wpr-bg-6f005b09-3998-4abf-95fd-9d859f8a343c: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/toman.svg');}.teacher-item .teacher-item-inner .teacher-bg{--wpr-bg-4d06819a-0e1b-4680-b0b7-2744617358f7: url('http://localhost/wpdev/studiare/wp-content/uploads/sites/8/2014/01/spectacles.gif');}.product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot{--wpr-bg-28865b02-521b-4f41-8ab8-5a0050a61a5e: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/icon-back-OWL.png');}.rll-youtube-player .play{--wpr-bg-2eecfeb0-1eed-4fb9-952c-f34f8d641148: url('https://bitamooz.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".owl-carousel .owl-video-play-icon","style":".owl-carousel .owl-video-play-icon{--wpr-bg-a0224545-498f-4466-a719-700c8642eef9: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/owl.video.play.png');}","hash":"a0224545-498f-4466-a719-700c8642eef9","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/owl.video.play.png"},{"selector":".site-footer.footer-color-light a i.fab.fa-apart,.light a i.fab.fa-apart","style":".site-footer.footer-color-light a i.fab.fa-apart:before,.light a i.fab.fa-apart:before{--wpr-bg-3d6c1679-e996-4215-ae68-db78ddbd268a: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png');}","hash":"3d6c1679-e996-4215-ae68-db78ddbd268a","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png"},{"selector":"i.fab.fa-apart,.site-footer.footer-color-light a i.fab.fa-apart","style":"i.fab.fa-apart:before,.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-59766fcc-8598-42f6-8273-df232d09d86b: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat.png');}","hash":"59766fcc-8598-42f6-8273-df232d09d86b","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat.png"},{"selector":".site-footer.footer-color-light a i.fab.fa-apart","style":".site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-0c50513a-61e5-413c-a01f-7d97fa99069c: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png');}","hash":"0c50513a-61e5-413c-a01f-7d97fa99069c","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png"},{"selector":".commentlist .comment .star-rating","style":".commentlist .comment .star-rating{--wpr-bg-4a7449e2-7d31-4c15-b19b-f796d8708095: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"4a7449e2-7d31-4c15-b19b-f796d8708095","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".commentlist .comment .star-rating>span","style":".commentlist .comment .star-rating>span{--wpr-bg-558a35ac-04cb-48ae-9a03-becee1311302: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"558a35ac-04cb-48ae-9a03-becee1311302","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".commentlist .review .star-rating","style":".commentlist .review .star-rating{--wpr-bg-fbc71b9a-1960-4abd-8fd5-de15928dfae6: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"fbc71b9a-1960-4abd-8fd5-de15928dfae6","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".commentlist .review .star-rating>span","style":".commentlist .review .star-rating>span{--wpr-bg-39783664-e2b1-447c-9f00-7baf97bdd4f0: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"39783664-e2b1-447c-9f00-7baf97bdd4f0","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".admin_vc_addon","style":".admin_vc_addon{--wpr-bg-4862ee30-8eca-4e24-9ec5-741ae061fa1e: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/assets\/images\/icons\/favicon.png');}","hash":"4862ee30-8eca-4e24-9ec5-741ae061fa1e","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/assets\/images\/icons\/favicon.png"},{"selector":".page-title","style":".page-title{--wpr-bg-ca45e3e6-6d88-4331-a909-8d01a3e4b234: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png');}","hash":"ca45e3e6-6d88-4331-a909-8d01a3e4b234","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png"},{"selector":".average-rating .avareage-rating-inner .average-rating-stars .star-rating","style":".average-rating .avareage-rating-inner .average-rating-stars .star-rating{--wpr-bg-00506cbe-148c-4467-9037-a6dc9c3f43d4: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"00506cbe-148c-4467-9037-a6dc9c3f43d4","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".average-rating .avareage-rating-inner .average-rating-stars .star-rating>span","style":".average-rating .avareage-rating-inner .average-rating-stars .star-rating>span{--wpr-bg-2dcb7b4a-3783-44d3-b202-dc3ec517f95e: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"2dcb7b4a-3783-44d3-b202-dc3ec517f95e","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".sale-perc","style":".sale-perc{--wpr-bg-f0692478-92d1-44a6-b056-7d355543ae9a: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/discont_badge.png');}","hash":"f0692478-92d1-44a6-b056-7d355543ae9a","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/discont_badge.png"},{"selector":".sale-perc.sc_coming_soon_badge","style":".sale-perc.sc_coming_soon_badge{--wpr-bg-ba27dfcc-19e9-430e-b353-adff8be567f9: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/comibg-soon-1.png');}","hash":"ba27dfcc-19e9-430e-b353-adff8be567f9","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/comibg-soon-1.png"},{"selector":".sale-perc.sc_full_capacity_badge","style":".sale-perc.sc_full_capacity_badge{--wpr-bg-5e9c4dc4-b050-4cd4-9bbd-351be60071e1: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/full-capacity-bg.png');}","hash":"5e9c4dc4-b050-4cd4-9bbd-351be60071e1","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/full-capacity-bg.png"},{"selector":"span.sc-toman-cur","style":"span.sc-toman-cur{--wpr-bg-6f005b09-3998-4abf-95fd-9d859f8a343c: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/toman.svg');}","hash":"6f005b09-3998-4abf-95fd-9d859f8a343c","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/toman.svg"},{"selector":".teacher-item .teacher-item-inner .teacher-bg","style":".teacher-item .teacher-item-inner .teacher-bg{--wpr-bg-4d06819a-0e1b-4680-b0b7-2744617358f7: url('http:\/\/localhost\/wpdev\/studiare\/wp-content\/uploads\/sites\/8\/2014\/01\/spectacles.gif');}","hash":"4d06819a-0e1b-4680-b0b7-2744617358f7","url":"http:\/\/localhost\/wpdev\/studiare\/wp-content\/uploads\/sites\/8\/2014\/01\/spectacles.gif"},{"selector":".product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot","style":".product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot{--wpr-bg-28865b02-521b-4f41-8ab8-5a0050a61a5e: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png');}","hash":"28865b02-521b-4f41-8ab8-5a0050a61a5e","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-2eecfeb0-1eed-4fb9-952c-f34f8d641148: url('https:\/\/bitamooz.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"2eecfeb0-1eed-4fb9-952c-f34f8d641148","url":"https:\/\/bitamooz.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<form>
<label for="email">ایمیل</label>
<input
type="email"
id="email"
name="email"
required
>
<label>
<input type="checkbox" name="terms" checked>
قوانین را خواندهام
</label>
<button type="submit" disabled>
ثبتنام
</button>
</form>
</body>
</html>
ابتدا وضعیت اولیه سه کنترل را مشاهده کنید. سپس disabled را از دکمه حذف کنید و فرم خالی را ارسال کنید تا اثر required دیده شود. در مرحله بعد، checked و required را جداگانه حذف و نتیجه را مقایسه کنید.
چرا disabled=”false” عنصر را فعال نمیکند؟
مقدار متنی “false” اتریبیوت بولی را خاموش نمیکند. تا زمانی که خود اتریبیوت در تگ حضور دارد، حالت آن فعال است.
کد زیر دکمه را فعال نمیکند:
<button disabled="false">ثبت سفارش</button>
وجود disabled برای غیرفعالشدن دکمه کافی است و مقدار “false” نیز مقدار معتبر این اتریبیوت بولی نیست. همین موضوع درباره نمونه زیر نیز صدق میکند:
<input type="checkbox" checked="false">
این چکباکس همچنان در وضعیت اولیه انتخابشده است.
برای خاموشکردن حالت، اتریبیوت را حذف کنید:
<button>ثبت سفارش</button>
<input type="checkbox">
قاعدهای که باید به خاطر بسپارید:
وجود اتریبیوت بولی = true
نبودن اتریبیوت بولی = false
چند مثال کاربردی از اتریبیوتهای HTML
در این بخش، سه کاربرد متفاوت را بررسی میکنیم: تعیین مقصد لینک، معرفی تصویر و شناسایی عناصر. هدف، دیدن نتیجه عملی هر اتریبیوت است؛ نه تکرار ساختار نام و مقدار.
تعیین مقصد لینک با href
اتریبیوت href مقصد تگ a را مشخص میکند. مقدار آن میتواند یک نشانی کامل، مسیر نسبی یا شناسه بخشی از صفحه باشد.
مسیر نسبی:
<a href="/courses/">مشاهده دورهها</a>
لینک به بخش مشخصی از همان صفحه:
<a href="#attribute-examples">رفتن به مثالها</a>
<h2 id="attribute-examples">مثالهای اتریبیوت</h2>
با انتخاب لینک، مرورگر بخش دارای id=”attribute-examples” را هدف میگیرد.
برای بررسی نتیجه:
- پیش از عنوان چند پاراگراف آزمایشی قرار دهید.
- فایل را در مرورگر باز کنید.
- لینک «رفتن به مثالها» را انتخاب کنید.
- بررسی کنید که مرورگر به بخش مقصد منتقل میشود.
مقدارهای href و id باید دقیقاً با یکدیگر هماهنگ باشند.
تعیین تصویر و متن جایگزین با src و alt
در عنصر img، اتریبیوت src منبع تصویر را مشخص میکند و alt محتوای متنی جایگزین آن را ارائه میدهد:
<img decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
alt="اجزای اتریبیوت href در تگ آغازین لینک"
data-lazy-src="http://html-attribute-diagram.png"
><noscript><img decoding="async"
src="html-attribute-diagram.png"
alt="اجزای اتریبیوت href در تگ آغازین لینک"
></noscript>
استاندارد HTML، مقدار src را نشانی منبع تصویر و alt را محتوای جایگزین برای شرایطی میداند که تصویر قابل پردازش یا نمایش نیست.
اگر فایل تصویر کنار سند HTML باشد، ساختار پوشه میتواند چنین باشد:
project/
├── index.html
└── html-attribute-diagram.png
اگر تصویر داخل پوشه images باشد، مسیر نیز باید تغییر کند:
<img decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
alt="اجزای اتریبیوت href در تگ آغازین لینک"
data-lazy-src="http://images/html-attribute-diagram.png"
><noscript><img decoding="async"
src="images/html-attribute-diagram.png"
alt="اجزای اتریبیوت href در تگ آغازین لینک"
></noscript>
project/
├── index.html
└── images/
└── html-attribute-diagram.png
متن alt باید نقش تصویر را در همان صفحه منتقل کند. مقدار عمومی زیر اطلاعات مفیدی ارائه نمیدهد:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="تصویر" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال" data-lazy-src="http://html-attribute-diagram.png"><noscript><img decoding="async" src="html-attribute-diagram.png" alt="تصویر" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال"></noscript>
مقدار روشنتر:
<img decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
alt="اجزای اتریبیوت href در تگ آغازین لینک"
data-lazy-src="http://html-attribute-diagram.png"
><noscript><img decoding="async"
src="html-attribute-diagram.png"
alt="اجزای اتریبیوت href در تگ آغازین لینک"
></noscript>
اگر تصویر صرفاً تزئینی است و اطلاعات مستقلی منتقل نمیکند، مقدار alt خالی نوشته میشود:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="decorative pattern" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال" data-lazy-src="http://decorative-pattern.png"><noscript><img decoding="async" src="decorative-pattern.png" alt="decorative pattern" title="اتریبیوت چیست؟ (اتریبیوت در HTML) آموزش ویژگیها با مثال"></noscript>
شناسایی عناصر با class و id
class برای گروهبندی چند عنصر مناسب است:
<p class="lesson-note">
مقدار اتریبیوت معمولاً داخل کوتیشن نوشته میشود.
</p>
<p class="lesson-note">
اتریبیوتها در تگ آغازین قرار میگیرند.
</p>
هر دو پاراگراف عضو کلاس lesson-note هستند.
یک عنصر میتواند چند کلاس داشته باشد:
<p class="lesson-note important">
اتریبیوت بولی با حضور یا نبودن خود کار میکند.
</p>
نام کلاسها با فاصله جدا میشوند، نه با ویرگول. مقدار class طبق استاندارد فهرستی از توکنهای جداشده با فاصله است.
id برای شناسایی یک عنصر مشخص استفاده میشود:
<section id="image-attribute-example">
مثال اتریبیوتهای src و alt
</section>
نباید یک مقدار id را روی دو عنصر تکرار کنید:
<section id="attribute-example">مثال اول</section>
<section id="attribute-example">مثال دوم</section>
شکل درست:
<section id="link-attribute-example">
مثال اتریبیوت href
</section>
<section id="image-attribute-example">
مثال اتریبیوتهای src و alt
</section>
در نتیجه:
- class میتواند میان چند عنصر مشترک باشد؛
- یک عنصر میتواند چند کلاس داشته باشد؛
- id باید یک عنصر مشخص را در سند شناسایی کند.
چگونه اتریبیوت مناسب را پیدا و کد را بررسی کنیم؟
لازم نیست نام و قواعد تمام اتریبیوتها را حفظ کنید. روش مطمئنتر این است که ابتدا عنصر و نتیجه موردنظر را مشخص کنید و سپس در یک مرجع معتبر بررسی کنید چه اتریبیوتی برای آن عنصر تعریف شده است.
فرض کنید میخواهید یک فیلد ایمیل اجباری بسازید که مرورگر بتواند مقدار آن را بهصورت خودکار تکمیل کند:
<input
type="email"
name="email"
autocomplete="email"
required
>
پیش از استفاده باید بررسی شود که name، autocomplete و required در این حالت برای عنصر input کاربرد دارند و هرکدام چه مقداری میپذیرند.
بررسی اتریبیوتهای مجاز هر عنصر
برای انتخاب اتریبیوت، این مسیر را طی کنید:
- عنصر موردنظر را مشخص کنید.
- نتیجه یا رفتاری را که میخواهید بنویسید.
- مستندات همان عنصر را باز کنید.
- اتریبیوتهای مجاز را بررسی کنید.
- نوع و قالب مقدار را بخوانید.
- یک مثال حداقلی در مرورگر آزمایش کنید.
- سند نهایی را با HTML Checker بررسی کنید.
هنگام مطالعه مرجع، فقط نام اتریبیوت را پیدا نکنید. این پرسشها نیز مهماند:
- آیا اتریبیوت برای این عنصر تعریف شده است؟
- عمومی است یا به عناصر مشخصی وابسته است؟
- مقدار آن چه قالبی دارد؟
- آیا بولی است؟
- در صورت حذف، رفتار پیشفرض عنصر چیست؟
- آیا محدودیت یا شرط دیگری دارد؟
استفاده از صفحه مرجع اتریبیوتهای HTML
برای پیداکردن سریع نام ویژگیها و دستهبندی آنها میتوانید از صفحه «اتریبیوتهای HTML؛ لیست ویژگیهای HTML» بیتآموز استفاده کنید.
نقش دو صفحه متفاوت است:
- این مقاله مفهوم اتریبیوت و روش استفاده از آن را آموزش میدهد؛
- صفحه مرجع برای جستوجوی نام اتریبیوتها و مشاهده فهرست آنهاست.
صفحه مرجع نقطه شروع مناسبی است؛ اما تصمیم فنی نهایی باید بر اساس تعریف همان عنصر و اتریبیوت انجام شود.
پیدا کردن خطا با HTML Checker
پس از نوشتن کد، سند را با W3C HTML Checker بررسی کنید. این ابزار برای بررسی انطباق نشانهگذاری HTML با قواعد زبان استفاده میشود. مستندات W3C نیز Nu HTML Checker را ابزار مناسب بررسی اسناد مدرن HTML معرفی میکنند.
برای نمونه، کد زیر نامعتبر است:
<p href="/about/">درباره ما</p>
زیرا href برای عنصر p تعریف نشده است. شکل درست:
<p>
برای اطلاعات بیشتر،
<a href="/about/">درباره ما</a>
را بخوانید.
</p>
نمونه دیگر، تکرار یک اتریبیوت است:
<a href="/about/" href="/contact/">
ارتباط با ما
</a>
شکل درست:
<a href="/contact/">
ارتباط با ما
</a>
عبور کد از اعتبارسنجی به معنی مناسببودن تمام جنبههای صفحه نیست. ابزار میتواند مشکلات نشانهگذاری را پیدا کند، اما برای مثال تشخیص نمیدهد که متن alt واقعاً تصویر را بهخوبی جایگزین کرده است یا مقصد یک لینک هنوز وجود دارد.
بررسی نهایی را در سه مرحله انجام دهید:
- مرجع: اتریبیوت برای عنصر و هدف موردنظر تعریف شده باشد.
- اعتبارسنجی: ساختار کد با قواعد HTML ناسازگار نباشد.
- آزمایش عملی: رفتار عنصر در مرورگر مطابق انتظار باشد.
جمع بندی
اتریبیوت HTML اطلاعات یا تنظیمات تکمیلی یک عنصر را مشخص میکند. نام اتریبیوت نشان میدهد چه ویژگیای تنظیم میشود و مقدار آن، جزئیات همان تنظیم را تعیین میکند.
برای استفاده صحیح از اتریبیوتها فقط شناخت نام آنها کافی نیست. باید بررسی کنید ویژگی موردنظر برای کدام عناصر تعریف شده، چه نوع مقداری میپذیرد و در مرورگر چه رفتاری ایجاد میکند. اتریبیوتهای بولی نیز قاعده متفاوتی دارند: حضور آنها حالت را فعال میکند و برای غیرفعالشدن باید خود اتریبیوت حذف شود.
هنگام نوشتن کد این سه مرحله را فراموش نکنید:
- اتریبیوت مناسب را در مرجع همان عنصر پیدا کنید.
- ساختار سند را با HTML Checker بررسی کنید.
- نتیجه واقعی را در مرورگر آزمایش کنید.
اگر میخواهید این مفاهیم را در قالب یک مسیر منظمتر همراه با سایر مباحث پایه تمرین کنید، دوره HTML ادامه مناسبی برای یادگیری مرحلهبهمرحله HTML است.
سوالات متداول
خیر. بسیاری از عناصر بدون اتریبیوت نیز معتبر و قابل استفادهاند. اتریبیوت زمانی اضافه میشود که عنصر به اطلاعات یا تنظیمات بیشتری نیاز داشته باشد.
البته در بعضی موقعیتها نبودن یک اتریبیوت، معنا یا عملکرد مورد انتظار را از بین میبرد. برای مثال، عنصر a بدون href مقصدی برای دنبالکردن ندارد و عنصر img معمولاً برای ارائه متن جایگزین مناسب به اتریبیوت alt نیاز دارد.
اتریبیوت در کد HTML نوشته میشود و معمولاً مقدار یا حالت اولیه عنصر را مشخص میکند. Property ویژگی متناظر همان عنصر در DOM است و JavaScript میتواند مقدار فعلی آن را بخواند یا تغییر دهد.
این دو در بسیاری از موارد با یکدیگر ارتباط دارند، اما همیشه دقیقاً یک چیز نیستند. برای مثال، اتریبیوت checked وضعیت اولیه یک چکباکس را مشخص میکند؛ اما Property به نام checked وضعیت فعلی آن را پس از تعامل کاربر نشان میدهد.
<input type=”checkbox” checked>
در این کد، وجود اتریبیوت checked باعث میشود چکباکس در شروع انتخابشده باشد. اگر کاربر بعداً آن را غیرفعال کند، اتریبیوت موجود در کد منبع تغییر نکرده است، اما Property فعلی عنصر میتواند مقدار false داشته باشد.
هنوز دیدگاهی ثبت نشده است.