خصوصیت یا Attribute در HTML
خصوصیت یا خاصیت (Attribute) ها در HTML بخش‌هایی هستند که اطلاعات اضافه‌ای در مورد المان ها ارائه می‌کنند. در این قسمت از مجموعه آموزشی HTML با خصوصیت ها و جزئیات آن‌ها بیشتر آشنا می‌شوید.
منظور از خصوصیت یا Attribute در اچ‌تی‌ام‌ال چیست؟
همانطور که گفتیم خصوصیت ها (خاصیت ها یا ویژگی ها) اطلاعاتی در مورد المان های HTML ارائه می‌کنند. نمونه‌ای از یک خصوصیت ساده و مقدار متناظر با آن را می‌توانید به صورت پررنگ در المان زیر مشاهده کنید (این المان، نمایانگر یک پاراگراف است):
<p class="myclass">This is a simple paragraph</p>خصوصیت class که نمونه‌ای از آن را در مثال بالا مشاهده می‌کنید امکان تخصیص کلاس به المان را فراهم می‌کند. (از کلاس ها برای اموری مانند هدف قرار دادن المان جهت تعیین استایل و دسترسی به المان با کمک جاوااسکریپت استفاده می‌شود).
بیشتر بخوانید: آشنایی با کلاس ها و خصوصیت class در HTML
به عنوان مثالی دیگر المان زیر را که برای تعریف یک پیوند استفاده می‌شود در نظر بگیرید:
<a href="https://example.com" title="This is a simple hyperlink">Click here!</a>در این المان از خصوصیت href برای تعیین مقصد پیوند و از خصوصیت title برای تعیین عنوان (که معمولا هنگام نگه داشتن نشانگر ماوس روی پیوند در قالب تولتیپ نمایش داده می‌شود) استفاده شده است.
بیشتر بخوانید: آشنایی با نحوه ایجاد پیوند یا لینک در HTML
همانطور که در مثال‌های فوق مشاهده کردید خصوصیت ها داخل تگ شروع المان مشخص می‌شوند. معمولا هر خصوصیت به صورت جفت نام خصوصیت/مقدار خصوصیت ظاهر می‌شود. بین نام خصوصیت و مقدار آن نیز یک علامت تساوی به صورت name=”value” قرار می‌گیرد. به عنوان مثال در المان پاراگراف فوق، class نام خصوصیت است و myclass که پس از علامت مساوی داخل دو علامت نقل قول دوتایی (یا ") قرار گرفته مقداری است که به این خصوصیت اختصاص داده شده است.
چند نکته در مورد خصوصیت ها در HTML
هر المان در اچ‌تی‌ام‌ال می‌تواند یک یا چند خصوصیت داشته باشد.
برای جدا کردن خصوصیت و نام تگ یا المان از یک فاصله استفاده می‌شود. اگر یک المان چند خصوصیت داشته باشد بین خصوصیت ها هم یک فاصله قرار می‌گیرد. نمونه این حالت را می‌توانید در مثال دوم (المان <a>) برای خصوصیت‌های href و title مشاهده کنید.
همانطور که در مورد نام المان ها یا تگ های HTML حساسیتی نسبت به بزرگی و کوچکی حروف وجود ندارد نام خصوصیت ها را هم می‌توانید با حروف کوچک یا بزرگ بنویسید. برای مثال تفاوتی بین title یا TITLE به عنوان نام خصوصیت وجود ندارد. با این حال پیشنهاد می‌کنیم همیشه از حروف کوچک استفاده کنید.
خصوصیت های بولی در HTML
خصوصیت های بولی در HTML تنها دو حالت دارند. این خصوصیت‌ها می‌توانند بدون مقدار هم ظاهر شوند. وجود نام خصوصیت بولی به معنای داشتن مقدار صحیح و عدم وجود آن معادل با مقدار نادرست برای این نوع خصوصیت هاست.
با این حال اگر می‌خواهید برای خصوصیت های بولی مقدار درج کنید لازم است بدانید این خصوصیت ها تنها می‌توانند همان نام خصوصیت یا یک رشته خالی را به عنوان مقدار داشته باشند. (فراموش نکنید استفاده از مقادیر دیگر از جمله true و false برای این خصوصیت‌ها پیشنهاد نمی‌شود).
به عنوان مثال برای قرار دادن یک چک باکس در حالت تیک خورده هنگام لود صفحه می‌توانید از خصوصیت بولی checked به صورت زیر استفاده کنید:
<input type="checkbox" id="drink1" name="drink1" value="coffee" checked>با توجه به آنچه گفته شد حالت فوق با حالت زیر یکسان است:
<input type="checkbox" id="drink1" name="drink1" value="coffee" checked="checked">این درحالیست که عدم درج خصوصیت checked باعث می‌شود چک باکس به صورت پیشفرض هنگام لود صفحه تیک نخورده باشد:
<input type="checkbox" id="drink1" name="drink1" value="coffee">علامت‌های نقل قول برای مقدار خاصیت
مقدار خصوصیت معمولا بین دو علامت نقل قول قرار می‌گیرد. هرچند این موضوع همیشه اجباری نیست اما به شدت توصیه می‌شود.
قرار ندادن علامت نقل قول می‌تواند در برخی موارد مشکلاتی را به وجود بیاورد. برای مثال از آنجایی که مقدار خاصیت title در مثال قبل حاوی فاصله است قرار ندادن علامت نقل قول حول این مقدار باعث می‌شود تنها واژه اول (یعنی This) به عنوان مقدار خصوصیت title محسوب شود. بنابراین قطعه کد زیر نتیجه صحیحی نخواهد داشت:
<a href="https://example.com" title=This is a simple hyperlink>Click here!</a>نکته دیگری که در مورد علامت نقل قول می‌توان گفت مربوط به نوع آنست. در واقع تفاوتی بین استفاده از علامت نقل قول تکی (یعنی ') یا علامت نقل قول دوتایی (یعنی ") برای محصور کردن مقدار خصوصیت وجود ندارد. با این حال لازم است هر دو علامت نقل قولی که مقدار خصوصیت را در برمی‌گیرند یکسان باشند. برای مثال هر دو المان زیر نتیجه یکسانی دارند:
<p class="myclass">This is a simple paragraph</p>
<p class='myclass'>This is a simple paragraph</p>البته داخل مقدار خصوصیت می‌توانید از علامت نقل قول دیگر به عنوان بخشی از رشته مقدار استفاده کنید. برای مثال اگر مقدار خصوصیت را توسط دو علامت " محصور کرده‌اید می‌توانید داخل این مقدار از علامت ' استفاده کنید.
<a href="https://example.com" title="I'm a simple hyperlink">Click here!</a>فراموش نکنید نمی‌توانید از همان علامت نقل قولی که مقدار خصوصیت را در برگرفته به صورت مستقیم داخل مقدار خصوصیت استفاده کنید. برای مثال قطعه کد زیر نتیجه نادرستی خواهد داشت. در این مثال، علامت ' دوم به عنوان پایان مقدار خصوصیت تلقی می‌شود. به این ترتیب مقدار خصوصیت title تنها به صورت 'I' خواهد بود:
<a href="https://example.com" title='I'm a simple hyperlink'>Click here!</a>استفاده از موجودیت‌های HTML برای درج نقل قول در مقدار خصوصیت
برای حل مشکلی که نمونه آن را در مثال قبل دیدید، به جای استفاده مستقیم از علامت ' داخل مقدار خصوصیت می‌توانید از موجودیت های اچ‌تی‌ام‌ال (یا HTML Entity ها) کمک بگیرید. با این موجودیت‌ها که جایگزین کاراکترهای رزرو شده در HTML می‌شوند در قسمت موجودیت های اچ‌تی‌ام‌ال بیشتر آشنا می‌شوید. در اینجا کافیست بدانید موجودیت HTML معادل با ' به صورت ' و موجودیت معادل با " به صورت " می‌باشد. بنابراین المان فوق را می‌توانید به صورت صحیح زیر بازنویسی کنید:
<a href="https://example.com" title='I'm a simple hyperlink'>Click here!</a>