BenoService

آکادمی بنو/آموزش HTML

نگاهی عمیق‌تر به Attributes (ویژگی‌ها) در HTML

بهنام نوبخت · ۱۴۰۵/۶/۲۸

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

در مقاله‌های قبلی با تگ‌ها و عناصر مختلف HTML آشنا شدیم.

برای مثال:

<h1>عنوان صفحه</h1>

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

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

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

اما گاهی فقط استفاده از نام تگ کافی نیست.

مثلاً اگر بخواهیم مشخص کنیم:

  • یک لینک به کجا برود

  • یک تصویر از چه فایلی خوانده شود

  • یک عنصر چه شناسه‌ای داشته باشد

  • یک عنصر چه کلاس CSSای داشته باشد

  • یک فیلد فرم غیرفعال باشد

  • یک فیلد اجباری باشد

  • وقتی کاربر روی یک عنصر قرار می‌گیرد، توضیحی نمایش داده شود

به اطلاعات بیشتری نیاز داریم.

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

Attribute چیست؟

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

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

مثلاً:

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

در اینجا:

href

یک Attribute است.

مقدار آن نیز:

https://example.com

است.

بنابراین:

href="https://example.com"

یک Attribute به همراه مقدار آن است.

ساختار Attribute

ساختار معمول یک Attribute به شکل زیر است:

attribute="value"

مثلاً:

id="main-title"

در اینجا:

  • id نام Attribute است.

  • main-title مقدار Attribute است.

یک مثال کامل:

<h1 id="main-title">صفحه اصلی</h1>

Attribute کجا قرار می‌گیرد؟

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

مثلاً:

<p class="description">
    توضیحات محصول
</p>

در اینجا:

class="description"

داخل تگ شروع <p> قرار گرفته است.

اما نباید Attribute را داخل محتوای عنصر بنویسیم.

اشتباه:

<p>
    class="description"
    توضیحات محصول
</p>

درست:

<p class="description">
    توضیحات محصول
</p>

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

محدود به یک Attribute نیستیم.

مثلاً:

<img
    src="images/logo.png"
    alt="لوگوی سایت"
    width="200"
    height="80">

این تصویر چند Attribute دارد:

  • src

  • alt

  • width

  • height

همچنین:

<input
    type="text"
    id="username"
    name="username"
    placeholder="نام کاربری"
    required>

این input نیز چند ویژگی دارد.

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

در بیشتر موارد، ترتیب Attributeها اهمیتی ندارد.

مثلاً این دو:

<input type="text" id="username">

و:

<input id="username" type="text">

از نظر نتیجه کلی یکسان هستند.

مهم این است که Attributeها به شکل صحیح نوشته شوند.

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

Attributeهای مهم HTML

HTML Attributeهای بسیار زیادی دارد.

اما لازم نیست همه آن‌ها را یکجا یاد بگیریم.

در این مقاله مهم‌ترین موارد را بررسی می‌کنیم:

  • id

  • class

  • title

  • style

  • lang

  • dir

  • hidden

  • data-*

  • disabled

  • readonly

  • required

  • placeholder

  • value

  • name

برخی از این موارد را در مقاله‌های قبلی دیده‌ایم، اما در اینجا مفهوم Attribute را دقیق‌تر بررسی می‌کنیم.

Attribute به نام id

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

مثلاً:

<h1 id="page-title">
    صفحه اصلی
</h1>

در اینجا شناسه عنصر:

page-title

است.

چرا از id استفاده می‌کنیم؟

id کاربردهای مختلفی دارد.

یکی از کاربردهای آن ایجاد ارتباط بین بخش‌های صفحه است.

مثلاً:

<h2 id="services">
    خدمات
</h2>

حالا می‌توانیم یک لینک به این بخش ایجاد کنیم:

<a href="#services">
    مشاهده خدمات
</a>

وقتی کاربر روی لینک کلیک کند، مرورگر به بخشی که id="services" دارد می‌رود.

id باید یکتا باشد

در یک صفحه بهتر است هر id فقط برای یک عنصر استفاده شود.

مثلاً:

<h1 id="title">عنوان اصلی</h1>

و سپس نباید عنصر دیگری را نیز با همین شناسه تعریف کنیم:

<p id="title">متن</p>

بهتر است هر عنصر شناسه مخصوص خودش را داشته باشد.

مثلاً:

<h1 id="page-title">عنوان اصلی</h1>

<p id="page-description">توضیحات صفحه</p>

Attribute به نام class

یکی از مهم‌ترین Attributeهای HTML، class است.

مثلاً:

<p class="description">
    این توضیحات محصول است.
</p>

class معمولاً برای گروه‌بندی عناصر و اعمال CSS استفاده می‌شود.

در ادامه دوره وقتی وارد CSS شویم، اهمیت class بسیار بیشتر مشخص خواهد شد.

چند عنصر می‌توانند Class یکسان داشته باشند

برخلاف id، می‌توان یک class را برای چند عنصر استفاده کرد.

مثلاً:

<p class="text">متن اول</p>

<p class="text">متن دوم</p>

<p class="text">متن سوم</p>

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

text

به عنوان class هستند.

این ویژگی در طراحی صفحات بسیار کاربردی است.

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

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

مثلاً:

<div class="card product-card featured">
    محصول ویژه
</div>

این عنصر سه class دارد:

card
product-card
featured

هر class می‌تواند یک مفهوم یا گروه خاص را مشخص کند.

تفاوت id و class

یکی از سؤالات رایج برای افراد تازه‌کار این است که:

چه زمانی از id استفاده کنیم و چه زمانی از class؟

به صورت ساده:

id

برای شناسایی یک عنصر مشخص و یکتا مناسب است.

<h1 id="page-title">
    عنوان صفحه
</h1>

class

برای گروه‌بندی چند عنصر مشابه مناسب است.

<p class="description">توضیح اول</p>
<p class="description">توضیح دوم</p>
<p class="description">توضیح سوم</p>

بعداً در CSS و JavaScript بیشتر با این تفاوت کار خواهیم کرد.

Attribute به نام title

ویژگی title می‌تواند یک توضیح کوتاه برای عنصر مشخص کند.

مثلاً:

<button title="ذخیره اطلاعات">
    ذخیره
</button>

وقتی کاربر نشانگر ماوس را روی عنصر قرار دهد، مرورگر معمولاً این توضیح را به شکل یک Tooltip ساده نمایش می‌دهد.

مثال:

<a
    href="#"
    title="مشاهده اطلاعات بیشتر">
    اطلاعات بیشتر
</a>

title برای توضیحات کوتاه مناسب است.

Attribute به نام style

ویژگی style اجازه می‌دهد CSS را مستقیماً روی یک عنصر بنویسیم.

مثلاً:

<p style="color: red;">
    این متن قرمز است.
</p>

یا:

<h1 style="font-size: 30px;">
    عنوان
</h1>

این روش برای مثال‌های ساده مفید است، اما در پروژه‌های بزرگ معمولاً روش مناسبی برای مدیریت CSS نیست.

در مقاله‌های CSS با روش‌های بهتر آشنا خواهیم شد.

Attribute به نام lang

ویژگی lang زبان محتوای یک عنصر یا صفحه را مشخص می‌کند.

مثلاً برای یک صفحه فارسی:

<html lang="fa">

و برای یک صفحه انگلیسی:

<html lang="en">

در صفحات فارسی معمولاً از:

<html lang="fa">

استفاده می‌کنیم.

Attribute به نام dir

dir جهت نمایش متن را مشخص می‌کند.

برای متن راست‌به‌چپ:

<html lang="fa" dir="rtl">

و برای متن چپ‌به‌راست:

<html lang="en" dir="ltr">

در صفحات فارسی استفاده از:

dir="rtl"

بسیار رایج است.

ترکیب lang و dir

برای یک صفحه فارسی می‌توانیم بنویسیم:

<html lang="fa" dir="rtl">

این یعنی:

  • زبان صفحه فارسی است.

  • جهت متن راست‌به‌چپ است.

مثلاً یک صفحه ساده:

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>صفحه فارسی</title>
</head>

<body>

    <h1>سلام</h1>

    <p>
        به سایت ما خوش آمدید.
    </p>

</body>

</html>

Attribute به نام hidden

گاهی می‌خواهیم یک عنصر در صفحه وجود داشته باشد، اما فعلاً نمایش داده نشود.

برای این کار می‌توانیم از hidden استفاده کنیم.

<p hidden>
    این متن نمایش داده نمی‌شود.
</p>

hidden یک Attribute بولی است.

یعنی معمولاً وجود یا عدم وجود آن مهم است.

مثلاً:

<input type="text" hidden>

عنصر مخفی خواهد بود.

Attributeهای بولی چیستند؟

بعضی Attributeها فقط با حضورشان فعال می‌شوند و معمولاً نیازی به مقدار ندارند.

به این‌ها Boolean Attribute گفته می‌شود.

مثلاً:

<input type="checkbox" checked>

یا:

<input type="text" required>

یا:

<button disabled>
    ارسال
</button>

در این موارد وجود Attribute نشان‌دهنده فعال بودن آن ویژگی است.

Attribute disabled

برای غیرفعال کردن یک کنترل فرم می‌توانیم از disabled استفاده کنیم.

مثلاً:

<button disabled>
    ارسال
</button>

کاربر نمی‌تواند از این دکمه استفاده کند.

برای input نیز:

<input
    type="text"
    value="غیرفعال"
    disabled>

Attribute readonly

گاهی می‌خواهیم کاربر نتواند مقدار یک فیلد را تغییر دهد، اما همچنان مقدار آن قابل مشاهده باشد.

در این حالت می‌توانیم از readonly استفاده کنیم.

<input
    type="text"
    value="شماره سفارش: 1250"
    readonly>

کاربر می‌تواند مقدار را ببیند، اما نمی‌تواند آن را ویرایش کند.

تفاوت disabled و readonly

این دو را با هم اشتباه نگیرید.

disabled

کنترل کاملاً غیرفعال می‌شود.

<input
    type="text"
    value="سلام"
    disabled>

readonly

کاربر نمی‌تواند مقدار را تغییر دهد، اما فیلد همچنان قابل مشاهده و معمولاً قابل انتخاب است.

<input
    type="text"
    value="سلام"
    readonly>

Attribute required

در مقاله قبل با required آشنا شدیم.

این ویژگی برای مشخص کردن یک فیلد اجباری استفاده می‌شود.

مثلاً:

<input
    type="text"
    name="name"
    required>

کاربر باید این فیلد را تکمیل کند تا فرم بتواند اعتبارسنجی اولیه مرورگر را انجام دهد.

Attribute placeholder

برای نمایش یک متن راهنما داخل فیلد استفاده می‌شود.

مثلاً:

<input
    type="text"
    placeholder="نام خود را وارد کنید">

وقتی کاربر شروع به تایپ کند، placeholder معمولاً ناپدید می‌شود.

Attribute value

مقدار اولیه یک کنترل را مشخص می‌کند.

مثلاً:

<input
    type="text"
    value="علی">

کاربر در ابتدا مقدار «علی» را داخل فیلد می‌بیند.

Attribute name

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

مثلاً:

<input
    type="text"
    name="username">

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

Attribute data-*

HTML اجازه می‌دهد اطلاعات سفارشی را نیز روی عناصر ذخیره کنیم.

برای این کار می‌توانیم از Attributeهایی با ساختار:

data-...

استفاده کنیم.

مثلاً:

<div
    data-product-id="125"
    data-category="software">
    
    محصول
</div>

در اینجا دو ویژگی سفارشی داریم:

data-product-id
data-category

این اطلاعات می‌توانند در JavaScript مورد استفاده قرار بگیرند.

در این مرحله فقط کافی است با مفهوم آن آشنا باشید؛ هنگام یادگیری JavaScript کاربرد آن را بیشتر بررسی خواهیم کرد.

Attribute برای لینک‌ها

در مقاله لینک‌ها با href آشنا شدیم.

مثلاً:

<a href="about.html">
    درباره ما
</a>

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

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

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

در اینجا:

  • href → مقصد لینک

  • target → نحوه باز شدن لینک

  • title → توضیح کوتاه

Attributeهای تصویر

تگ <img> نیز چند Attribute مهم دارد.

مثلاً:

<img
    src="images/logo.png"
    alt="لوگوی سایت"
    width="200"
    height="80">

در اینجا:

  • src → مسیر تصویر

  • alt → متن جایگزین

  • width → عرض

  • height → ارتفاع

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

Attributeهای فرم

فرم‌ها نیز از Attributeهای زیادی استفاده می‌کنند.

مثلاً:

<input
    type="email"
    name="email"
    id="email"
    placeholder="ایمیل خود را وارد کنید"
    required>

در این مثال:

type
name
id
placeholder
required

همگی Attribute هستند.

چند Attribute در یک عنصر

در پروژه‌های واقعی معمولاً عناصر دارای چند ویژگی هستند.

مثلاً:

<input
    type="text"
    id="username"
    class="form-control"
    name="username"
    placeholder="نام کاربری"
    maxlength="30"
    required>

اگر این کد در ابتدا کمی شلوغ به نظر می‌رسد، نگران نباشید.

با تمرین، خواندن چنین کدهایی بسیار ساده خواهد شد.

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

این تفاوت بسیار مهم است.

مثلاً:

<a href="about.html">
    درباره ما
</a>

در اینجا:

href="about.html"

یک Attribute است.

اما:

درباره ما

محتوای عنصر است.

یعنی:

Attribute → اطلاعات مربوط به عنصر
Content   → محتوای داخل عنصر

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

مثلاً:

<img src="logo.png" alt="لوگو">

در این کد:

img

نام تگ است.

و:

src
alt

Attribute هستند.

بنابراین:

<tag attribute="value">

یک الگوی ساده برای درک ساختار HTML است.

مثال کامل

حالا چند مفهوم را کنار هم قرار دهیم:

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">

    <title>فروشگاه</title>
</head>

<body>

    <h1 id="page-title" class="main-title">
        فروشگاه اینترنتی
    </h1>

    <p
        id="description"
        class="description"
        title="توضیحات فروشگاه">
        
        محصولات ما را مشاهده کنید.
    </p>

    <a
        href="products.html"
        class="button"
        title="مشاهده محصولات">
        
        مشاهده محصولات
    </a>

    <br><br>

    <input
        type="text"
        id="username"
        name="username"
        class="form-control"
        placeholder="نام کاربری"
        required>

</body>

</html>

در این مثال تعداد زیادی Attribute استفاده شده است.

یک روش ساده برای خواندن HTML

وقتی با یک عنصر HTML روبه‌رو می‌شوید، ابتدا این موارد را بررسی کنید:

۱. تگ چیست؟

مثلاً:

<input>

۲. Attributeهای آن چیستند؟

مثلاً:

type="text"
id="username"
name="username"

۳. مقدار Attributeها چیست؟

مثلاً:

type → text
id → username
name → username

با این روش، حتی اگر کد کمی بزرگ باشد، می‌توانید آن را به قسمت‌های کوچک‌تر تقسیم کنید.

اشتباهات رایج در استفاده از Attributeها

اشتباه اول: قرار دادن Attribute در تگ بسته

اشتباه:

<p>
</p class="text">

درست:

<p class="text">
</p>

Attribute باید در تگ شروع قرار بگیرد.

اشتباه دوم: فراموش کردن کوتیشن

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

<p class="description">

نه:

<p class=description>

اگرچه در بعضی شرایط HTML حالت دوم را نیز می‌پذیرد، اما استفاده از کوتیشن باعث خوانایی و سازگاری بهتر کد می‌شود.

اشتباه سوم: استفاده از id تکراری

مثلاً:

<h1 id="title">عنوان</h1>

<p id="title">توضیحات</p>

بهتر است شناسه‌ها یکتا باشند:

<h1 id="page-title">عنوان</h1>

<p id="page-description">توضیحات</p>

اشتباه چهارم: استفاده بیش از حد از style

مثلاً:

<p style="color:red;">
    متن اول
</p>

<p style="color:red;">
    متن دوم
</p>

<p style="color:red;">
    متن سوم
</p>

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

در CSS یاد خواهیم گرفت چگونه این کار را بهتر انجام دهیم.

تمرین عملی

تمرین ۱ — ID و Class

یک صفحه HTML ایجاد کنید و:

  • یک <h1> با id ایجاد کنید.

  • سه <p> با یک class یکسان ایجاد کنید.

  • یک <p> دیگر با یک class متفاوت ایجاد کنید.

مثلاً:

<h1 id="page-title">
    دوره طراحی وب
</h1>

<p class="description">
    HTML را یاد می‌گیریم.
</p>

<p class="description">
    CSS را یاد می‌گیریم.
</p>

<p class="description">
    JavaScript را یاد می‌گیریم.
</p>

تمرین ۲ — ویژگی‌های فرم

یک فرم ایجاد کنید که شامل:

  • نام کاربری

  • ایمیل

  • رمز عبور

باشد.

برای هر فیلد از Attributeهای مناسب استفاده کنید.

حداقل از این ویژگی‌ها استفاده کنید:

id
name
placeholder
required
type

تمرین ۳ — تصویر

یک تصویر به صفحه اضافه کنید و برای آن:

  • src

  • alt

  • width

  • height

  • class

قرار دهید.

تمرین ۴ — لینک

یک لینک ایجاد کنید که:

  • مقصد داشته باشد.

  • در یک تب جدید باز شود.

  • title داشته باشد.

  • class داشته باشد.

مثلاً ساختار کلی:

<a
    href="..."
    target="_blank"
    title="..."
    class="...">

    مشاهده سایت

</a>

چالش مقاله

یک صفحه معرفی محصول ایجاد کنید.

صفحه باید شامل:

عنوان

یک <h1> با id مناسب.

توضیحات

دو یا سه <p> با یک class مشترک.

تصویر

یک <img> با:

src
alt
width
height
class

لینک

یک لینک خرید یا مشاهده محصول با:

href
target
title
class

فرم

فرمی شامل:

  • نام

  • ایمیل

  • شماره تلفن

  • پیام

ایجاد کنید.

برای فیلدها از Attributeهای مناسب استفاده کنید.

در این تمرین هدف اصلی، تمرین Attributeها است؛ بنابراین فعلاً نگران طراحی ظاهری صفحه نباشید.

نکات مهم این مقاله

در این مقاله یاد گرفتیم:

  • Attribute اطلاعات اضافی درباره یک عنصر HTML است.

  • Attribute معمولاً داخل تگ شروع قرار می‌گیرد.

  • ساختار رایج Attribute به شکل name="value" است.

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

  • id برای شناسایی یک عنصر استفاده می‌شود.

  • id بهتر است در یک صفحه یکتا باشد.

  • class برای گروه‌بندی عناصر کاربرد دارد.

  • چند عنصر می‌توانند class یکسان داشته باشند.

  • یک عنصر می‌تواند چند class داشته باشد.

  • title برای توضیح کوتاه یک عنصر کاربرد دارد.

  • style امکان نوشتن CSS مستقیم روی عنصر را فراهم می‌کند.

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

  • dir جهت متن را مشخص می‌کند.

  • hidden برای مخفی کردن یک عنصر استفاده می‌شود.

  • disabled یک کنترل را غیرفعال می‌کند.

  • readonly از تغییر مقدار یک فیلد جلوگیری می‌کند.

  • required یک فیلد را اجباری می‌کند.

  • placeholder متن راهنما نمایش می‌دهد.

  • value مقدار اولیه یک کنترل را مشخص می‌کند.

  • name نام یک کنترل فرم را مشخص می‌کند.

  • ویژگی‌های data-* برای نگهداری داده‌های سفارشی کاربرد دارند.

جمع‌بندی

تا اینجا یاد گرفته‌ایم که HTML فقط مجموعه‌ای از تگ‌ها نیست.

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

مثلاً:

<input
    type="text"
    id="username"
    class="form-control"
    name="username"
    placeholder="نام کاربری"
    required>

در این یک عنصر، چند Attribute مختلف داریم که هر کدام وظیفه خاص خود را دارند.

در ادامه مسیر، Attributeها اهمیت بیشتری پیدا می‌کنند؛ مخصوصاً زمانی که وارد CSS و JavaScript شویم.

تا اینجا بخش زیادی از عناصر پایه HTML را یاد گرفته‌ایم.

در مقاله بعدی یک قدم مهم دیگر برمی‌داریم و با HTML معنایی یا Semantic HTML آشنا می‌شویم.

در مقاله بعدی با تگ‌های معنایی آشنا خواهیم شد.

۰۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.