ویژگی ها (یا Attributes) در HTML
ویژگی ها (Attributes) بخش‌هایی هستند که اطلاعات اضافه‌ای در مورد المان های 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
1 – هر المان در اچ‌تی‌ام‌ال می‌تواند یک یا چند ویژگی داشته باشد.
2 – برای جدا کردن ویژگی و نام تگ یا المان از یک فاصله استفاده می‌شود. اگر یک المان چند ویژگی داشته باشد بین ویژگی ها هم یک فاصله قرار می‌گیرد. نمونه این حالت را می‌توانید در مثال دوم (المان <a>) برای ویژگی‌های href و title مشاهده کنید.
3 – همانطور که در مورد نام المان ها یا تگ های HTML حساسیتی نسبت به بزرگی و کوچکی حروف وجود ندارد نام ویژگی ها را هم می‌توانید با حروف کوچک یا بزرگ بنویسید. برای مثال تفاوتی بین title یا TITLE به عنوان نام ویژگی وجود ندارد. با این حال پیشنهاد می‌کنیم همیشه از حروف کوچک استفاده کنید.
4 – ویژگی های بولی بدون مقدار هم ظاهر می‌شوند. وجود نام ویژگی بولی به معنای داشتن مقدار صحیح و عدم وجود آن معادل با مقدار نادرست برای این نوع ویژگی هاست. با این حال اگر می‌خواهید برای ویژگی های بولی مقدار درج کنید لازم است بدانید این ویژگی ها تنها می‌توانند همان نام ویژگی یا یک رشته خالی را به عنوان مقدار داشته باشند. (فراموش نکنید استفاده از مقادیر دیگر از جمله 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>فراموش نکنید نمی‌توانید از همان علامت نقل قولی که مقدار ویژگی را در برگرفته به صورت مستقیم داخل مقدار ویژگی استفاده کنید. برای مثال قطعه کد زیر نتیجه نادرستی خواهد داشت:
<a href="https://example.com" title='I'm a simple hyperlink'>Click here!</a>در این حالت به جای استفاده مستقیم از علامت ' داخل مقدار ویژگی می‌توانید از موجودیت های اچ‌تی‌ام‌ال (یا HTML Entity ها) کمک بگیرید. با این موجودیت‌ها که جایگزین کاراکترهای رزرو شده در HTML می‌شوند در قسمت‌های آتی بیشتر آشنا می‌شوید. در اینجا کافیست بدانید موجودیت HTML معادل با ' به صورت ' و موجودیت معادل با " به صورت " می‌باشد. بنابراین المان فوق را می‌توانید به صورت صحیح زیر بازنویسی کنید:
<a href="https://example.com" title='I'm a simple hyperlink'>Click here!</a>