تا اینجای آموزش با تگ‌های عناوین (<h2> ،<h1> و ...)، تگ <p> و برخی از تگ‌های فرمت‌دهی آشنا شده و از آن ها به ساده‌ترین شکل استفاده کردیم. اما در HTML اکثر تگ‌ها می‌توانند ویژگی‌هایی (attributes) نیز داشته باشند. این ویژگی‌ها، اطلاعات یا تنظیمات بیشتری به تگ‌ها اضافه می کنند، داخل تگ ابتدایی قرار می گیرند و دو بخش دارند: یک نام و یک مقدار (value).
به مثال زیر دقت کنید:
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="center">
This text is aligned to center
</p>
<p align="right">
This text is aligned to right
</p>
<p align="left">
This text is aligned to left
</p>
</body>
</html>در این مثال، align نام ویژگی‌ای است که از آن برای تراز پاراگراف در صفحه استفاده می‌شود. این ویژگی می‌تواند مقادیر right ،center و left بپذیرد که به ترتیب برای تراز عنصر p به مرکز، راست و چپ صفحه استفاده می‌شود.
⚠️ attribute ها همیشه در تگ ابتدایی مشخص شده و به صورت جفت "name ="value نمایش داده می‌شوند.
⚠️ ویژگی align برای تگ <p> در HTML5 پشتیبانی نمی‌شود!
ویژگی های اصلی
برخی از ویژگی‌ها، برای اکثر عناصر HTML قابل استفاده هستند که در ادامه به چهار مورد از مهم‌ترین آن‌ها اشاره می‌کنیم:
- ویژگی شناسه (Id Attribute)
ویژگی id یک شناسه‌ی منحصر به فرد را برای یک عنصر HTML مشخص می کند (مقدار این ویژگی باید در فایل HTML یکتا باشد). از این ویژگی بیشتر برای اشاره به یک عنصر خاص در css (به منظور تغییر ویژگی‌های ظاهری آن مثل رنگ و اندازه) استفاده می‌شود. همچنین می‌تواند توسط جاوا اسکریپت (از طریق HTML DOM) برای دستکاری عنصر با یک شناسه‌ی خاص استفاده می‌شود.
در مثال زیر از ویژگی id برای ایجاد تمایز بین دو عنصر <p> استفاده شده است:
<p id ="html">This paragraph explains what is HTML</p>
<p id ="css">This paragraph explains what is Cascading Style Sheet</p>- ویژگی عنوان (Title Attribute)
ویژگی title اطلاعات بیشتری برای عنصر ارائه می دهد. هنگامی که مکان‌نما (cursor) روی عنصر قرار می‌گیرد، مقدار ویژگی title به عنوان یک راهنمای ابزار (tooltip) نمایش داده می شود:
<p title = "I'm a tooltip">This This is a paragraph.</p>
- ویژگی کلاس (Class Attribute)
ویژگی class یک یا چند نام کلاس، برای یک عنصر مشخص می‌کند. این ویژگی بیشتر برای اشاره به یک کلاس در CSS استفاده می شود. علاوه بر این، می تواند توسط جاوا اسکریپت (از طریق HTML DOM) برای ایجاد تغییرات در عناصر HTML با یک کلاس مشخص استفاده شود:
<p class = "className1 className2 className3">This paragraph explains what is Cascading Style Sheet</p>- ویژگی استایل (Style Attribute)
ویژگی style این امکان را می‌دهد که قوانین CSS را در داخل عنصر مشخص کرده و بنابراین بتوان ظاهر یک عنصر را (مانند اندازه، رنگ، فونت و ...) تغییر داد:
<h1 style="color:blue;text-align:center;">This is a header</h1>
<p style="color:green;">This is a paragraph.</p>
علاوه بر این 4 ویژگی، ویژگی‌های بسیار دیگری نیز وجود دارند که بیشتر آن‌ها برای تگ‌های خاصی استفاده می‌شوند؛ مانند ویژگی href برای تگ <a>، ویژگی src و alt برای تگ <img> و ....
در ادامه‌ی بخش‌های این آموزش به معرفی این تگ‌ها و ویژگی‌های آن‌ها خواهیم پرداخت.