صفات (attributes) در HTML اطلاعات اضافی را برای عناصر ارائه می دهند. در این فصل از آموزش HTML به بررسی برخی از این صفات می پردازیم.


صفات در HTML

  • تمام عناصر HTML می توانند دارای صفات باشند
  • صفات اطلاعات اضافی را درباره یک عنصر فراهم می کندد
  • صفات همیشه در تگ شروع قرار می گیرند
  • صفات معمولا به صورت نام/مقدار تعریف می شوند، به این صورت: "name="value

صفت href

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

مثال

<a href="https://www.w3schools.com">This is a link</a>

در آموزش های بعدی درباره ای لینک ها و تگ <a> بیشتر یاد خواهید گرفت.


صفت src

عکس ها در HTML با تگ <img> تعریف می شوند.

نام فایل منبع تصویر در صفت src مشخص می شود:

مثال

<img src="img_girl.jpg">

صفات عرض (width) و ارتفاع (height)

عکس ها در HTML همچنین دارای صفات width و height هستند، که عرض و ارتفاع تصاویر را مشخص می کند:

مثال

<img src="img_girl.jpg" width="500" height="600">

صفات عرض و ارتفاع به صورت پیشفرض با واحد پیکسل مقدار دهی می شوند، بنابراین "width="500 به معنای عرض 500 پیکسل است.

شما درباره تصاویر در فصل های بعدی بیشتر یاد خواهید گرفت.


صفت alt

اگر تصویر به هر دلیلی قابل نمایش نباشد، صفت alt یک متن جایگزین را به جای عکس نمایش می دهد.

همچنین ارزش صفت alt برای اسکرین ریدرزها (نرم افزارهای خوانند متن) قابل خواندن است. به این ترتیب، فردی که به متن صفحات وب گوش میکند (برای مثال فرد دچار اختلال بینایی) می تواند محتوای این عنصر را بشنود.

مثال

<img src="img_girl.jpg" alt="Girl with a jacket">

صفت alt همچنین برای زمانی که تصویر ما قابل نمایش نباشد نیز مفیداست (مثلا وقتی که تصویر وجود نداشته باشد).

مثال

در مثال زیر می توانید مشاهده کنید که اگر سعی کنیم تصویری را که وجودخارجی ندارد نشان دهیم چه اتفاقی می افتد:

<img src="img_typo.jpg" alt="Girl with a jacket">

صفت style

صفت style برای مشخص کردن ظاهر یک عنصر در مواردی همچون رنگ، فونت، اندازه و غیره استفاده می شود.

مثال

<p style="color:red">This is a paragraph.</p>

صفت lang

زبان سند را میتوان در تگ <html> مشخص کرد.

زبان با صفت lang مشخص می شود.

مشخص کردن زبان برای موتورهای جستجو و اسکرین ریدرز اهمیت فراوانی دارد.

<!DOCTYPE html>
<html lang="en-US">
<body>

.

</body>
</html>

دو حرف اول، زبان (en) را مشخص می کند. اگر گویش خاصی مد نظرتان است دو حرف دیگر اضافه کنید (us).


صفت title

 در اینجا صفت title به عنصر <p> اضافه شده است. مقدار صفت title وقتی که موس روی پاراگراف قرار بگیرد در یک تول تیپ (tooltip) کوچک نمایش داده می شود:

مثال

<p title="I'm a tooltip">
This is a paragraph.
</p>

پیشنهاد ما: صفات را با حروف کوچک تایپ کنید

در HTML5 استفاده از حروف کوچک برای نوشتن نام صفات اجباری نیست.

برای مثال نوشتن تگ title به دو صورت title و TILTLE صحیح است.

W3C استفاده از حروف کوچک را توصیه می کند.


پیشنهاد ما: ارزش (value) صفات را داخل نقل قول ("") قرار دهید

در HTML5 اجباری به استفاده از  نقل قول ("") در اطراف ارزش (value) صفات وجود ندارد.

صفت href  که در مثال های بالا استفاده شده بود می تواند بدون نقل قول ("") نوشته شود:

بد

<a href=https://www.w3schools.com>

خوب

<a href="https://www.w3schools.com">

با این حال W3C پیشنهاد می کند که از نقل قول ("") استفاده کنید.

گاهی لازم است که از نقل قول ("") استفاده شود، مثلا زمانی که بین دو کلمه از ارزش یک صفت فضای خالی (space) وجود دارد. مثال زیر ارزش صفت title را به درستی نشان نمی دهد زیرا دارای یک فضای خالی (space) است.

مثال

<p title=About W3Schools>

استفاده از نقل قول یدونه ای (' ') یا دو تایی (" ")؟

استفاده از نقل قول دوتایی (" ") در اطراف ارزش صفات در HTML شایع تر است، اما نقل قول تکی (' ') نیز می تواند مورد استفاده قرار گیرد.

در بعضی موارد که ارزش صفت خود شامل نقل قول دوتایی (" ") است، استفاده از نقل قول تکی به صورت زیر ضروری است:

<p title='John "ShotGun" Nelson'>

یا برعکس:

<p title="John 'ShotGun' Nelson">

خلاصه ی فصل

  • تمام عناصر HTML می توانند دارای صفات باشند
  • صفت title محتوای تول تیپ (tooltip) را مشخص میکند
  • صفت href آدرس لینک را مشخص می کند/li>
  • صفات width و height اندازه عکس را تعیین می کنند
  • صفت alt متنی جایگزین را به جای عکس مشخص می کند
  • برای نوشتن صفات استفاده از حروف کوچک توصیه می شود
  • توضیه می شود که ارزش صفات را داخل نقل قول قرار دهید.

مشخصات

آخرین ارسال ها

آخرین جستجو ها