مقدمه‌ای بر Attribute ها در HTML
در HTML، Attribute ها به عناصر HTML اطلاعات و ویژگی‌های اضافه می‌کنند. این ویژگی‌ها می‌توانند رفتار عنصر را تغییر دهند یا محتوایی که عنصر نشان می‌دهد را کنترل کنند.
Attribute ها همیشه شامل یک نام و مقداری هستند که به دنبال آن نام می‌آید. این مقادیر می‌توانند حاوی اطلاعاتی برای نمایشی یا عملکردی خاص باشند؛ مانند مشخص کردن مسیر یک تصویر یا تعیین هدف لینک.
همچنین می‌توانیم از Attribute های boolean استفاده کنیم که تنها با حضور خود تفاوت ایجاد می‌کنند؛ مانند "disabled" برای غیرفعال کردن یک عنصر فرم.
برخی از Attribute ها عمومی هستند و تقریباً در تمامی عناصر قابل استفاده‌اند، مثل 'id' که یک شناسه یکتا به عنصر می‌دهد یا 'class' برای استفاده با CSS یا JavaScript.
کپی کردن Attribute ها به شکل نامناسب یا بدون مقدار درست، می‌تواند منجر به نتایج نامطلوب در نمایش یا عملکرد صفحات وب شود.
نمونه کد استفاده از Attribute ها
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نمونه HTML با Attribute</title>
</head>
<body>
<h1 class="main-title" id="page-title" style="color: blue;">عنوان صفحه</h1>
<a href="https://example.com" target="_blank">لینک به مثال</a>
<img src="image.jpg" alt="توضیحات تصویر" width="200" height="150" />
</body>
</html>
توضیحات خط به خط کد
<!DOCTYPE html> این عبارت معرف نوع سند به عنوان HTML5 است.
<html lang="fa"> این تگ HTML را شروع می‌کند و زبان سند را به فارسی تنظیم می‌کند.
<meta charset="UTF-8"> تعیین نوع رمزگذاری کاراکترها به UTF-8 که تقریباً تمامی کاراکترها را پشتیبانی می‌کند.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> برای تنظیم نمایش صحیح صفحه در مرورگرهای موبایل استفاده می‌شود.
<title>نمونه HTML با Attribute</title> عنوان صفحه که در برگه مرورگر نمایش داده می‌شود.
<h1 class="main-title" id="page-title" style="color: blue;">عنوان صفحه</h1> عنوان اصلی صفحه با رنگ آبی و کلاس و آی‌دی مشخص.
<a href="https://example.com" target="_blank">لینک به مثال</a> ایجاد یک لینک که در برگه جدید باز می‌شود.
<img src="image.jpg" alt="توضیحات تصویر" width="200" height="150" /> تصویری با اندازه و توضیحات جایگزین.