آموزش HTML - ویژگی‌ها

هر تگ HTML را می‌توان به وسیله صفت‌ها (Attributes) تغییر داد. صفت‌ها را به عنوان اطلاعات اضافه‌ای در نظر بگیرید که به یک عنصر می‌دهید تا نحوه رفتار یا ظاهر آن را تغییر دهید. این راهنما متداول‌ترین صفت‌هایی را که هر روز استفاده خواهید کرد، توضیح می‌دهد.

صفت‌های HTML چیستند؟

صفت‌های HTML کلمات ویژه‌ای هستند که اطلاعات بیشتری درباره یک عنصر HTML ارائه می‌دهند. صفت‌ها داخل تگ بازکننده عنصر قرار می‌گیرند و برای تنظیم یا تغییر رفتار عنصر استفاده می‌شوند. همه صفت‌ها از دو بخش تشکیل شده‌اند: یک نام (name) و یک مقدار (value) −

نام (Name): نام صفت، کلمه کلیدی یا همان شناسه صفت است که ویژگی خاصی را برای عنصری که از آن استفاده می‌کند تعریف می‌کند. برای مثال، عنصر پاراگراف <p> (در مثال زیر) دارای صفت "align" است که چیدمان پاراگراف را روی صفحه مشخص می‌کند.
مقدار (Value): مقدار صفت، داده یا اطلاعاتی است که مقدارِ تنظیمی برای آن صفت را تعیین می‌کند. این مقدار داخل دابل کوتیشن (علامت نقل‌قول دوتا) قرار می‌گیرد. برای مثال، مقادیر "left"، "center" یا "right" را می‌توان به صفت "align" در تگ پاراگراف اختصاص داد (همان‌طور که در مثال زیر نشان داده شده است).

در زیر ساختار دستور (Syntax) یک عنصر HTML دارای صفت آمده است −

<tag_name attribute="Value">...</tag_name>

قوانین و ویژگی‌ها

در ادامه، قوانین و ویژگی‌های صفت‌های HTML آمده است؛ هنگام استفاده از صفت‌ها همراه با عناصر HTML باید این موارد را رعایت کنید:

صفت‌ها اختیاری هستند؛ می‌توانید از آن‌ها برای ارائه اطلاعات اضافی درباره یک عنصر HTML استفاده کنید.
صفت‌ها دارای جفت‌های نام و مقدار هستند، اما برخی از صفت‌ها به هیچ مقداری نیاز ندارند؛ به این صفت‌ها، صفت‌های بولین (Boolean) می‌گویند.
یک عنصر HTML می‌تواند چند صفت داشته باشد و این صفت‌ها باید با فاصله (space) از هم جدا شوند.
صفت‌ها همواره باید همراه با تگ بازکننده نوشته شوند.
همه عناصر HTML می‌توانند صفت داشته باشند، به‌جز تعداد معدودی مانند <head>، <title>، <script> و غیره.
سازمان W3C توصیه می‌کند صفت‌ها را با حروف کوچک بنویسید و مقدار آن‌ها را داخل کوتیشن قرار دهید.

مثالی از صفت‌های HTML

این مثال نحوه استفاده از صفت‌ها با عناصر HTML را نشان می‌دهد −

<!DOCTYPE html>
<html>

<head>
    <title>Example of HTML Attributes</title>
</head>

<body>
   <a href="https://www.tut24.ir">Visit our homepage</a>
</body>

</html>

در این مثال، href نام صفت و "https://www.tut24.ir" مقدار صفت است.

صفت‌های اصلی که هر عنصری می‌تواند استفاده کند

چهار صفت اصلی که روی اکثر عناصر HTML (اگرچه نه همه آن‌ها) قابل استفاده هستند عبارتند از −

صفت id

صفت id در تگ HTML برای شناسایی منحصر‌به‌فرد هر عنصر در یک صفحه HTML استفاده می‌شود. دو دلیل اصلی وجود دارد که ممکن است بخواهید از صفت id روی یک عنصر استفاده کنید −

اگر یک عنصر دارای صفت id به عنوان شناسه منحصر‌به‌فرد باشد، امکان شناسایی فقط همان عنصر و محتوای آن وجود دارد.
اگر دو عنصر با نام یکسان در یک صفحه وب (یا استایل‌شیت) داشته باشید، می‌توانید از صفت id برای تمایز بین عناصر هم‌نام استفاده کنید.

ما در اینجا از صفت id برای تمایز بین دو عنصر پاراگراف استفاده می‌کنیم −

مثال

<!DOCTYPE html>
<html>
<head>
   <title>ID Attribute Example</title>
</head>
<body>
   <p id="html">This para explains what is HTML</p>
   <p id="css">This para explains what is Cascading Style Sheet</p>
</body>
</html>

صفت title

صفت title یک عنوان پیشنهادی برای عنصر ارائه می‌دهد. ساختار صفت title مشابه همان چیزی است که برای صفت id توضیح داده شد −

رفتار این صفت به عنصری که آن را حمل می‌کند بستگی دارد، اگرچه اغلب زمانی که نشانگر ماوس روی عنصر می‌رود یا در هنگام بارگذاری عنصر، به صورت یک تول‌تیپ (راهنمای متنی شناور) نمایش داده می‌شود.

مثال

<!DOCTYPE html>
<html>
<head>
   <title>The title Attribute Example</title>
</head>
<body>
   <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

با اجرای مثال بالا، سرتیتر "Titled Heading Tag Example" نمایش داده می‌شود. اگر نشانگر ماوس خود را روی آن ببرید، خواهید دید عنوانی که در کد خود استفاده کرده‌اید به صورت یک تول‌تیپ کنار نشانگر ماوس ظاهر می‌شود.

صفت class

صفت class یک یا چند کلاس CSS را برای یک عنصر HTML مشخص می‌کند. با استفاده از این صفت می‌توان از چندین کلاس برای یک عنصر استفاده کرد. اگر چند کلاس را مشخص می‌کنید، مقدار این صفت لیستی از نام‌های کلاس است که با فاصله (space) از هم جدا شده‌اند.

مثال

class="className1 className2 className3"

صفت style

صفت style به شما امکان می‌دهد برای یک عنصر، قوانین CSS درون‌خطی (inline) بنویسید.

مثال

<!DOCTYPE html>
<html>
<head>
   <title>The style Attribute</title>
</head>
<body>
   <p style="font-family:arial; color:#FF0000;">Welcome to Tut24...</p>
</body>
</html>

با اجرای مثال بالا، متن "Welcome to Tut24..." با فونت "Arial" و با رنگ قرمز نمایش داده می‌شود.

صفت‌های بین‌المللی‌سازی (i18n)

سه صفت بین‌المللی‌سازی وجود دارد که برای اکثر عناصر XHTML (اگرچه نه همه آن‌ها) در دسترس هستند.

صفت dir

صفت dir به شما این امکان را می‌دهد که جهت جریان متن را به مرورگر اعلام کنید. صفت dir می‌تواند یکی از دو مقدار مشخص‌شده در جدول زیر را بگیرد −

شماره	مقدار و معنی
1	ltr چپ به راست (مقدار پیش‌فرض)
2	rtl راست به چپ (برای زبان‌هایی مانند عبری یا فارسی و عربی که از راست به چپ خوانده می‌شوند)

شماره

مقدار و معنی

ltr

چپ به راست (مقدار پیش‌فرض)

rtl

راست به چپ (برای زبان‌هایی مانند عبری یا فارسی و عربی که از راست به چپ خوانده می‌شوند)

مثال

<!DOCTYPE html>
<html dir="rtl">
<head>
   <title>Display Directions</title>
</head>
<body>
   This is how IE 5 renders right-to-left directed text.
</body>
</html>

اگر روی Edit & Run کلیک کنید، می‌توانید تراز شدن متن به سمت راست را مشاهده کنید.

هنگامی که صفت dir در داخل تگ <html> استفاده می‌شود، نحوه نمایش متن را در کل سند تعیین می‌کند. وقتی داخل تگ دیگری استفاده می‌شود، جهت متن را فقط برای محتوای همان تگ کنترل می‌کند.

صفت lang

صفت lang به شما امکان می‌دهد زبان اصلی مورد استفاده در سند را مشخص کنید، اما این صفت فقط برای سازگاری عقب‌رو (Backwards Compatibility) با نسخه‌های قبلی HTML نگه داشته شده است. این صفت در اسناد جدید XHTML با صفت xml:lang جایگزین شده است.

مقادیر صفت lang کدهای زبان دو حرفی استاندارد ISO-639 هستند. برای مشاهده لیست کامل کدهای زبان، صفحه کدهای زبان HTML: ISO 639 را بررسی کنید.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
   <title>English Language Page</title>
</head>
<body>
   This page is using English Language
</body>
</html>

صفت‌های بولین (Boolean Attributes)

صفت‌های بولین نشان‌دهنده مقادیر درست (true) و نادرست (false) هستند و به هیچ مقداری همراه با نام صفت نیاز ندارند. برای تنظیم مقدار true، کافی است نام صفت را بنویسید و برای تنظیم مقدار false، صفت باید کلاً حذف شود.

در اینجا چند صفت بولین آورده شده است –

disabled
readonly
required
inert
autocomplete

مثال

در اینجا مثالی از یک صفت بولین در HTML (صفت required) آورده شده است −

<!DOCTYPE html>
<html>
<body>

<h1>Example of "required" attribute</h1>

<form>
  <label for="user_name">Input User Name:</label>
  <input type="text" id="user_name" name="user_name" required>
  <input type="submit">
</form>

</body>
</html>

صفت xml:lang

صفت xml:lang جایگزین XHTML برای صفت lang است. مقدار صفت xml:lang باید یک کد کشور ISO-639 باشد، همان‌طور که در بخش قبلی اشاره شد.

صفت‌های عمومی (Generic Attributes)

در ادامه جدولی از برخی صفت‌های دیگر آمده است که به راحتی با بسیاری از تگ‌های HTML قابل استفاده هستند.

صفت	گزینه‌ها	عملکرد
align	right, left, center	تگ‌ها را به صورت افقی تراز می‌کند
valign	top, middle, bottom	تگ‌ها را در داخل یک عنصر HTML به صورت عمودی تراز می‌کند.
bgcolor	numeric, hexidecimal, RGB values	یک رنگ پس‌زمینه پشت عنصر قرار می‌دهد
background	URL	یک تصویر پس‌زمینه پشت عنصر قرار می‌دهد
id	User Defined	عنصری را برای استفاده با استایل‌شیت‌های آبشاری (CSS) نام‌گذاری می‌کند.
class	User Defined	عنصری را برای استفاده با استایل‌شیت‌های آبشاری (CSS) دسته‌بندی می‌کند.
width	Numeric Value	عرض جداول، تصاویر یا سلول‌های جدول را مشخص می‌کند.
height	Numeric Value	ارتفاع جداول، تصاویر یا سلول‌های جدول را مشخص می‌کند.
title	User Defined	عنوان پاپ‌آپ برای عناصر.
href	User Defined	آدرس مقصد (URL) را برای یک لینک یا ارجاع مشخص می‌کند.
src	User Defined	فایل منبع را برای عناصر رسانه‌ای مانند `<img>`، `<audio>` یا `<iframe>` مشخص می‌کند.

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

بهترین روش‌ها (Best Practices) برای استفاده از صفت‌های HTML

روش‌های خاصی وجود دارد که باید برای استفاده از صفت‌ها روی هر عنصری دنبال کنید، لطفاً شیوه‌های ذکرشده در زیر را بررسی کنید:

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

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

<!-- Good Practice -->
<a href="https://www.tut24.ir/html/overview.htm">
   HTML Introduction
<a>

<!-- Bad Practice -->
<a href=https://www.tut24.ir/html/overview.htm>
   HTML Introduction
<a>

۲. از حروف کوچک استفاده کنید

زبان HTML به کوچک و بزرگ بودن حروف حساس نیست (Case-insensitive)، اما روش خوب این است که صفت‌های HTML را با حروف کوچک بنویسید.

<input type="text">

۳. استفاده هم‌زمان از سینگل و دابل کوتیشن

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

<!-- Can use single and double Quotes -->
<p title="We are known for 'Simple Easy Learning'">
    Tut24
</p>
<p title='We are known for "Simple Easy Learning"'>
    Tut24
</p>

پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.

درس قبلی: عناصر درس بعدی: تیترها