Attribute در HTML چیست؟ آشنایی با خصوصیت‌های تگ‌های HTML

در درس قبل با تگ‌ها و عناصر HTML آشنا شدیم و یاد گرفتیم یک عنصر می‌تواند شامل تگ شروع، محتوا و تگ پایان باشد.

اما عناصر HTML فقط با نام تگ مشخص نمی‌شوند. در بسیاری از مواقع لازم است اطلاعات بیشتری درباره یک عنصر در اختیار مرورگر قرار دهیم. برای این کار از Attribute در HTML استفاده می‌کنیم.

Attributeها یا خصوصیت‌های HTML می‌توانند اطلاعاتی مانند آدرس یک لینک، مسیر یک تصویر، زبان صفحه، شناسه یک عنصر، کلاس آن و بسیاری از ویژگی‌های دیگر را مشخص کنند.

در این درس یاد می‌گیریم Attribute چیست، چگونه نوشته می‌شود، نام و مقدار Attribute چه مفهومی دارند و با چند نوع مهم Attribute در HTML آشنا می‌شویم.

Attribute در HTML چیست؟

Attribute یا خصوصیت، اطلاعات اضافی درباره یک عنصر HTML مشخص می‌کند.

برای مثال عنصر لینک را در نظر بگیرید:

<a href="https://example.com">مشاهده سایت</a>

در این مثال:

• a نام عنصر است.
• href یک Attribute است.
• https://example.com مقدار Attribute است.

عنصر a به‌تنهایی مشخص می‌کند که این بخش یک لینک است، اما Attribute با نام href مشخص می‌کند لینک باید کاربر را به چه آدرسی هدایت کند.

Attribute کجا نوشته می‌شود؟

Attributeها داخل تگ شروع عنصر نوشته می‌شوند.

برای مثال:

<p title="توضیح کوتاه">این یک پاراگراف است.</p>

در این ساختار:

<p title="توضیح کوتاه">

تگ شروع است و Attribute نیز داخل همین تگ قرار گرفته است.

تگ پایان:

</p>

Attribute ندارد.

ساختار Attribute در HTML چگونه است؟

بسیاری از Attributeها به شکل زیر نوشته می‌شوند:

name="value"

یعنی ابتدا نام Attribute نوشته می‌شود، سپس علامت مساوی و بعد مقدار آن قرار می‌گیرد.

مثال:

title="آموزش HTML"

در این مثال:

• title نام Attribute است.
• آموزش HTML مقدار Attribute است.

وقتی این خصوصیت را داخل یک عنصر قرار دهیم:

<p title="آموزش HTML">
    این یک پاراگراف است.
</p>

عنصر p دارای Attribute با نام title شده است.

نام و مقدار Attribute چه تفاوتی دارند؟

نام Attribute مشخص می‌کند چه نوع اطلاعاتی در حال تعریف است و مقدار آن اطلاعات واقعی را در اختیار مرورگر قرار می‌دهد.

برای مثال:

<img src="photo.jpg" alt="تصویر یک لپ‌تاپ">

در این عنصر دو Attribute داریم:

• src
• alt

مقدار src:

photo.jpg

مسیر تصویر را مشخص می‌کند.

و مقدار alt:

تصویر یک لپ‌تاپ

متن جایگزین تصویر را مشخص می‌کند.

آیا یک عنصر می‌تواند چند Attribute داشته باشد؟

بله. یک عنصر می‌تواند هم‌زمان چند Attribute داشته باشد.

مثال:

<a
    href="https://example.com"
    target="_blank"
    title="مشاهده سایت نمونه"
>
    مشاهده سایت
</a>

در این عنصر سه Attribute داریم:

• href
• target
• title

هرکدام وظیفه متفاوتی دارند.

وجود چند Attribute در یک عنصر کاملاً طبیعی است و در پروژه‌های واقعی زیاد با چنین ساختارهایی روبه‌رو می‌شویم.

Attributeها با فاصله از یکدیگر جدا می‌شوند

وقتی چند Attribute در یک تگ وجود داشته باشند، باید بین آنها فاصله قرار دهیم.

مثال صحیح:

<img src="photo.jpg" alt="تصویر محصول" width="600">

در اینجا Attributeهای src، alt و width با فاصله از یکدیگر جدا شده‌اند.

مقدار Attribute را داخل کوتیشن بنویسیم

در HTML بعضی از مقادیر Attribute در شرایط مشخص می‌توانند بدون کوتیشن نیز نوشته شوند، اما برای داشتن کدی واضح، منظم و قابل پیش‌بینی بهتر است مقادیر Attributeها را داخل کوتیشن قرار دهیم.

روش پیشنهادی ما:

<img src="photo.jpg" alt="تصویر محصول">

به جای نوشتن:

<img src=photo.jpg alt=product>

در این دوره مقادیر Attributeها را معمولاً داخل علامت کوتیشن دوگانه " " می‌نویسیم.

آیا می‌توان از کوتیشن تکی استفاده کرد؟

بله. در HTML می‌توان مقدار Attribute را با کوتیشن تکی نیز نوشت:

<p title='آموزش HTML'>
    متن پاراگراف
</p>

اما برای یکدست بودن کدهای دوره، ما بیشتر از کوتیشن دوگانه استفاده خواهیم کرد:

<p title="آموزش HTML">
    متن پاراگراف
</p>

چند نمونه از Attributeهای پرکاربرد HTML

HTML Attributeهای زیادی دارد و کاربرد هر Attribute به عنصر و هدف آن بستگی دارد.

فعلاً چند نمونه رایج را ببینیم.

Attribute با نام href

در عنصر لینک، href آدرس مقصد را مشخص می‌کند:

<a href="https://example.com">
    مشاهده سایت
</a>

Attribute با نام src

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

<img src="photo.jpg" alt="تصویر نمونه">

Attribute با نام alt

Attribute alt متن جایگزین تصویر را مشخص می‌کند:

<img src="cat.jpg" alt="گربه‌ای روی صندلی">

این Attribute به‌ویژه برای دسترس‌پذیری اهمیت زیادی دارد و در درس تصاویر آن را با جزئیات بیشتری بررسی خواهیم کرد.

Attribute با نام title

Attribute title می‌تواند اطلاعات تکمیلی درباره یک عنصر ارائه کند:

<p title="توضیح درباره این پاراگراف">
    متن پاراگراف
</p>

Attribute با نام lang

در درس ساختار سند HTML با این نمونه آشنا شدیم:

<html lang="fa">

Attribute lang زبان محتوای عنصر را مشخص می‌کند.

Attribute با نام id

Attribute id می‌تواند یک شناسه برای عنصر مشخص کند:

<section id="about">
    ...
</section>

Attribute با نام class

Attribute class برای مشخص کردن یک یا چند کلاس برای عنصر استفاده می‌شود:

<p class="intro">
    متن معرفی
</p>

id و class اهمیت زیادی در HTML، CSS و JavaScript دارند؛ به همین دلیل در درس بعد آنها را جداگانه و کامل بررسی خواهیم کرد.

Global Attribute در HTML چیست؟

بعضی Attributeها فقط برای عناصر مشخصی تعریف می‌شوند، اما گروهی دیگر را می‌توان روی انواع مختلف عناصر HTML استفاده کرد.

به این گروه Global Attributes یا خصوصیت‌های عمومی گفته می‌شود.

نمونه‌هایی از Global Attributeهای رایج عبارت‌اند از:

• id
• class
• title
• lang
• dir
• hidden
• data-*

Global Attributeها را می‌توان روی عناصر مختلف HTML استفاده کرد، هرچند ممکن است اثر یا کاربرد بعضی از آنها بسته به عنصر متفاوت باشد.

Attribute اختصاصی عناصر چیست؟

برخی Attributeها برای عناصر یا گروه مشخصی از عناصر کاربرد دارند.

برای مثال:

<a href="https://example.com">لینک</a>

Attribute href در اینجا مقصد لینک را مشخص می‌کند.

یا:

<img src="photo.jpg" alt="تصویر نمونه">

Attributeهای src و alt با کاربرد عنصر تصویر ارتباط دارند.

بنابراین نباید تصور کنیم هر Attribute را می‌توان با هر معنایی روی هر عنصر قرار داد.

در زمان یادگیری هر عنصر، Attributeهای مرتبط و مهم همان عنصر را نیز بررسی خواهیم کرد.

Boolean Attribute در HTML چیست؟

گروهی از Attributeهای HTML به نام Boolean Attributes وجود دارند.

این Attributeها معمولاً یک وضعیت دوحالته را مشخص می‌کنند.

برای مثال:

<input type="checkbox" checked>

وجود Attribute با نام checked یعنی Checkbox در حالت انتخاب‌شده قرار دارد.

مثال دیگر:

<input type="text" disabled>

وجود disabled باعث غیرفعال شدن کنترل می‌شود.

در Boolean Attributeها، وجود Attribute به معنی فعال بودن حالت و نبود آن به معنی غیرفعال بودن آن است.

آیا disabled=”false” یعنی غیرفعال نبودن؟

خیر. این نکته بسیار مهم است.

در Boolean Attributeها نوشتن:

<input disabled="false">

به معنی false شدن Attribute نیست.

چون خود Attribute در عنصر وجود دارد، حالت Boolean آن فعال محسوب می‌شود. استاندارد HTML صراحتاً مشخص می‌کند که مقدارهای متنی true و false روش تعیین حالت Boolean Attribute نیستند؛ برای false بودن باید Attribute حذف شود.

برای فعال بودن:

<input disabled>

و برای غیرفعال بودن حالت:

<input>

data-* در HTML چیست؟

HTML امکان ایجاد Attributeهای سفارشی برای نگهداری داده را نیز فراهم می‌کند.

این Attributeها با data- شروع می‌شوند:

<article data-id="125">
    محتوای مقاله
</article>

در این مثال:

data-id="125"

یک Custom Data Attribute است.

نمونه دیگر:

<button data-product-id="42">
    افزودن به سبد خرید
</button>

این نوع Attributeها برای ذخیره اطلاعات اضافی مرتبط با یک عنصر استفاده می‌شوند و JavaScript نیز می‌تواند به آنها دسترسی داشته باشد.

فعلاً همین آشنایی اولیه کافی است. هنگام رسیدن به JavaScript، کاربرد data-* را بهتر درک خواهیم کرد.

Attribute با Property چه تفاوتی دارد؟

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

این دو اصطلاح همیشه دقیقاً یک معنی ندارند.

Attribute چیزی است که در کد HTML می‌نویسیم:

<input value="Hello">

اما وقتی مرورگر HTML را پردازش می‌کند و DOM ایجاد می‌شود، عنصر مربوطه در JavaScript می‌تواند Propertyهای مختلفی داشته باشد.

در مراحل ابتدایی HTML لازم نیست وارد جزئیات تفاوت Attribute و DOM Property شویم؛ فقط مهم است بدانید این دو اصطلاح در مباحث پیشرفته‌تر دقیقاً مترادف نیستند.

ترتیب Attributeها مهم است؟

در بیشتر موارد ترتیب Attributeها در یک تگ، مفهوم اصلی عنصر را تغییر نمی‌دهد.

مثلاً:

<img src="photo.jpg" alt="تصویر محصول" width="500">

و:

<img width="500" alt="تصویر محصول" src="photo.jpg">

اطلاعات یکسانی را مشخص می‌کنند.

با این حال بهتر است در پروژه‌های خود یک سبک ثابت داشته باشیم تا کد خواناتر شود.

آیا نام Attributeها به حروف کوچک و بزرگ حساس است؟

در HTML رایج و استاندارد امروزی بهتر است نام Attributeها را با حروف کوچک انگلیسی بنویسیم.

مثلاً:

<img src="photo.jpg" alt="تصویر">

این روش را به چنین ساختاری ترجیح می‌دهیم:

<img SRC="photo.jpg" ALT="تصویر">

استفاده از حروف کوچک باعث یکدست و خواناتر شدن کد می‌شود.

آیا می‌توان یک Attribute را دوبار روی یک عنصر نوشت؟

نباید یک Attribute را با یک نام چند بار در یک تگ تکرار کنیم.

نمونه نامناسب:

<p class="intro" class="text">
    متن
</p>

اگر بخواهیم چند کلاس روی یک عنصر داشته باشیم، همه آنها را داخل یک Attribute با نام class می‌نویسیم:

<p class="intro text">
    متن
</p>

در درس مربوط به ID و Class این ساختار را دقیق‌تر بررسی خواهیم کرد.

فضای خالی در مقدار Attribute چه معنایی دارد؟

فضای خالی داخل مقدار Attribute همیشه بی‌اهمیت نیست.

برای مثال در Attribute با نام class فاصله برای جدا کردن نام چند کلاس استفاده می‌شود:

<div class="card featured large">
    ...
</div>

در این مثال عنصر سه کلاس دارد:

• card
• featured
• large

بنابراین باید هنگام نوشتن مقدار Attributeها به قواعد همان Attribute توجه کنیم.

Attributeها چه ارتباطی با CSS و JavaScript دارند؟

Attributeها فقط برای خود HTML مهم نیستند.

CSS و JavaScript نیز می‌توانند از بسیاری از Attributeهای عناصر استفاده کنند.

برای مثال:

<p class="intro">
    متن معرفی
</p>

CSS می‌تواند با استفاده از Class این عنصر را انتخاب و ظاهر آن را تغییر دهد.

همچنین JavaScript می‌تواند عناصر را براساس ID، Class یا Attributeهای دیگر پیدا کند و با آنها تعامل داشته باشد.

به همین دلیل درک صحیح Attributeها یکی از پایه‌های مهم برای ادامه مسیر طراحی وب است.

چند مثال عملی از Attributeها

لینک

<a href="https://vitrinwp.com/">
    ویترین وردپرس
</a>

href مقصد لینک را مشخص می‌کند.

تصویر

<img
    src="html-course.jpg"
    alt="آموزش HTML"
    width="800"
>

این عنصر چند Attribute مختلف دارد.

زبان سند

<html lang="fa">

lang زبان اصلی سند را مشخص می‌کند.

کلاس عنصر

<section class="course-section">
    ...
</section>

شناسه عنصر

<section id="introduction">
    ...
</section>

اشتباهات رایج هنگام نوشتن Attributeها

فراموش کردن فاصله قبل از Attribute

نمونه اشتباه:

<imgsrc="photo.jpg">

نمونه صحیح:

<img src="photo.jpg">

فراموش کردن علامت مساوی

نمونه اشتباه:

<a href"https://example.com">Link</a>

نمونه صحیح:

<a href="https://example.com">Link</a>

نبستن صحیح کوتیشن

نمونه اشتباه:

<img src="photo.jpg alt="تصویر">

نمونه صحیح:

<img src="photo.jpg" alt="تصویر">

تکرار یک Attribute

نمونه نامناسب:

<div id="one" id="two">
    ...
</div>

برای یک Attribute نباید چند مقدار مستقل با تکرار نام آن ایجاد کنیم.

استفاده اشتباه از true و false در Boolean Attribute

نمونه‌ای که ممکن است باعث برداشت اشتباه شود:

<input disabled="false">

وجود disabled همچنان حالت غیرفعال را مشخص می‌کند.

برای فعال بودن Input باید Attribute را حذف کنیم:

<input>

تمرین درس Attribute در HTML

فایل تمرینی HTML خود را باز کنید و داخل بخش body کد زیر را بنویسید:

<h1 id="page-title">
    آموزش HTML
</h1>

<p
    class="intro"
    title="مقدمه دوره HTML"
>
    در حال یادگیری Attributeهای HTML هستم.
</p>

<a
    href="https://vitrinwp.com/"
    title="ورود به ویترین وردپرس"
>
    ویترین وردپرس
</a>

سپس موارد زیر را پیدا کنید:

• نام تمام Attributeها
• مقدار هر Attribute
• عنصری که Attribute با نام id دارد
• عنصری که Attribute با نام class دارد
• عنصری که Attribute با نام href دارد

تمرین دوم: خودتان Attribute اضافه کنید

کد زیر را در نظر بگیرید:

<p>
    این یک متن آزمایشی است.
</p>

سعی کنید بدون کپی کردن مثال‌های قبلی:

• یک class برای پاراگراف تعریف کنید.
• یک id برای آن قرار دهید.
• یک Attribute با نام title اضافه کنید.

سپس کد را ذخیره کنید و ساختار تگ شروع را بررسی کنید.

در این درس چه چیزهایی یاد گرفتیم؟

در این درس با Attribute در HTML آشنا شدیم و یاد گرفتیم:

• Attribute چیست.
• Attribute در کدام قسمت تگ نوشته می‌شود.
• نام و مقدار Attribute چه معنایی دارند.
• چگونه چند Attribute روی یک عنصر قرار دهیم.
• چرا بهتر است مقدار Attribute را داخل کوتیشن بنویسیم.
• Global Attribute چیست.
• Attributeهای اختصاصی عناصر چه هستند.
• Boolean Attribute چگونه کار می‌کند.
• چرا disabled="false" به معنی false شدن Boolean Attribute نیست.
• data-* چه کاربردی دارد.
• Attributeها چه ارتباطی با CSS و JavaScript دارند.

جمع‌بندی

حالا می‌دانیم Attribute در HTML برای اضافه کردن اطلاعات و ویژگی‌های بیشتر به عناصر استفاده می‌شود.

بسیاری از Attributeها به شکل name="value" نوشته می‌شوند و داخل تگ شروع عنصر قرار می‌گیرند.

بعضی Attributeها مانند id، class، title و lang کاربرد گسترده‌ای دارند، بعضی مخصوص عناصر خاص هستند و برخی مانند disabled و checked از نوع Boolean Attribute محسوب می‌شوند.

در درس بعدی دو مورد از مهم‌ترین Attributeهای HTML یعنی id و class را بررسی می‌کنیم و یاد می‌گیریم چه تفاوتی دارند، چه زمانی باید از هرکدام استفاده کنیم و چگونه CSS و JavaScript از آنها استفاده می‌کنند.

درس قبلی: تگ و عنصر در HTML چیست؟ آشنایی با تگ باز، بسته و عناصر تو در تو

درس بعدی: ID و Class در HTML چیست؟ تفاوت و کاربرد id و class