Attribute ها در زبان HTML

با سلام و احترام خدمت شما همراهان روکسو، امروز می خواهیم در رابطه با Attribute ها و نحوه ی کار آن ها صحبت کنیم.

Attribute ها چه کار می کنند؟

همانطور که می دانید هر عنصر HTML می تواند Attribute هایی (به معنی «ویژگی») داشته باشد. کار این Attribute ها ارائه ی اطلاعات بیشتر به این عناصر است و همیشه در تگ آغازین حاضر می شوند. در اکثر مواقع این Attribute ها دارای جفت های “name=”value هستند که در ادامه با مهم ترین آن ها آشنا می شویم.

ویژگیrel="nofollow" href

لینک ها در زبان HTML با تگ <a> تعریف می شوند و برای آدرس دهی این لینک ها از Attribute ای به نام href استفاده می شود. مثال:

 



1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<body>
 
<h2>The href Attribute</h2>
<p>HTML links are defined with theatag.The link address isspecified inthe href attribute:</p>
 
<ahref="https://roxo.ir/plus">Thisisalink</a>
 
</body>
</html>

همانطور که می بینید آدرس لینک را توسطrel="nofollow" href به تگ <a> داده ایم. در مورد لینک ها و تگ <a> بعدا به شکل مفصل صحبت خواهیم کرد.

ویژگی src

تصاویر در زبان HTML با تگ <img> تعریف می شوند اما این تگ تنها تعریف کننده ی یک تصویر است. اینکه کدام تصویر به نمایش در بیاید به عهده ی src می باشد. این Attribute آدرس فایل تصویری مورد نظر را به تگ <img> می دهد. به مثال زیر توجه کنید:

 



1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<body>
 
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag,andthe filename of the image source isspecified inthe src attribute:</p>
 
<img src="https://www.roxo.ir/wp-content/uploads/2019/03/HTML-define-element.jpg"width="800"height="500">
 
</body>
</html>

مشاهده ی خروجی این کد در JSBin

اگر به مثال بالا دقت کنید، دو Attribute دیگر نیز می بینید؛ width (به معنی «عرض») و height («طول»). در واقع اینها دو Attribute دیگر هستند که در واحد پیکسل نوشته می شوند بنابراین در تصویر بالا که “width=”800 است منظور این است که عرض تصویر 800 پیکسل باشد.

در مورد تصاویر و Attribute هایشان بعدا به صورت مفصل صحبت خواهیم کرد و اینجا تنها قصد آشنایی با Attribute ها را داریم.

ویژگی alt

alt متنی را مشخص می کند تا اگر به هر دلیلی تصویر ما به کاربر نمایش داده نشد (مانند حذف شدن تصویر از سرور ما، تحریم شدن تصویر در ایران، ناسازگار بودن مرورگر کاربر با سایت ما و …) به جای آن متنی نمایش داده شود تا کاربر بداند آن عکس چه بوده است. همچنین این نوشته می تواند توسط screen reader ها خوانده شود (دستگاه هایی که محتوای صفحه را برای افراد نابینا می خوانند) تا افراد نابینا یا کسانی که نمی توانند صفحه را ببینند بتوانند آن را بخوانند.

از دیگر فایده های این Attribute کمک کردن به طراحی سایت است. تصور کنید در src آدرس اشتباه یک تصویر را بدهید. زمانی که سایتتان بالا می آید دیگر تصویری در کار نیست و اگر برایش alt تعریف نکرده باشید، ممکن است یادتان رفته باشد که این تصویر چه بوده است. حالا باید بگردید و ببینید این تصویر مربوط به چه پست یا مطلبی بوده اما با alt می توانید به راحتی بفهمید کدام تصویر مد نظر بوده است.

منبع

عناصر پایه ای HTML

آشنایی با زبان HTML

ساختار و سبک نوشتاری عناصر در HTML

عناوین و تیترها در زبان HTML

Attribute ها در زبان HTML

پاراگراف ها در زبان HTML

ویژگی Style در زبان HTML