در حال بارگذاری...

مرجع ویژگی‌های HTML

مرجع ویژگی‌های HTML (HTML Attributes Reference) فهرستی است کامل و دقیق از ویژگی‌های (attributes) معتبر در زبان HTML که به عناصر (elements) ساختار و رفتار می‌دهد. اهمیت این مرجع مانند نوشتن نامه‌ای با آدرس دقیق است: بدون آدرس، نامه به مقصد نمی‌رسد. ویژگی‌ها نقش راهنمایی در ساختار صفحه وب دارند و تجربه‌ی کاربری و دسترسی (accessibility) را ارتقا می‌دهند.
در فروشگاه آنلاین (online shop)، ویژگی‌هایی مانند data-product-id، src، alt، title و lang برای مدیریت محصولات، تصاویر و توضیحات ضروری‌اند. در سایت خبری (news website)، ویژگی datetime برای تاریخ منتشرشده و lang برای چندزبانه بودن اهمیت دارد. در بلاگ شخصی (personal blog)، مشخص‌کردن alt تصاویر و توضیحات لینک‌ها باعث خوانایی بهتر می‌شود، و در پرتال دولتی (government portal)، ویژگی‌های semantic مانند aria- و lang تضمین‌کننده‌ی دسترسی همگان به محتوا هستند.
با مطالعه این مرجع، خواننده یاد می‌گیرد که چگونه ویژگی‌های استاندارد (مثل href، src، alt) و ویژگی‌های دل‌خواه (مثل data-) را به‌درستی بنویسد، ترکیب کند، و تأثیر آن‌ها را بر سئو، دسترسی و تعامل با CSS و JavaScript بشناسد. این راهنما برای توسعه‌دهندگان جلوه‌ای حرفه‌ای و ساختاری منظم مثل کتابخانه‌ای با قفسه‌های دقیق فراهم می‌کند.

مثال پایه

html

HTML Code

<!-- مثال پایه: لینک با ویژگی‌های ضروری -->
<a href="https://myshop.ir" target="_blank" title="بازدید از فروشگاه من" rel="noopener noreferrer">
فروشگاه من
</a>

در این مثال، از عنصر anchor (<a>) استفاده شده و چند ویژگی کلیدی پیاده‌سازی شده‌اند:

href="https://myshop.ir": مسیر مقصد لینک را مشخص می‌کند؛ بدون آن کلیک عملی نمی‌شود.
target="_blank": لینک را در تب جدید باز می‌کند بنابراین کاربر فروشگاه را ترک نمی‌کند.
title="بازدید از فروشگاه من": متن نمایشی هنگام هاور (hover) روی لینک؛ تجربه کاربری و دسترسی را بهتر می‌سازد.
rel="noopener noreferrer": برای امنیت. noopener از دسترسی صفحه مقصد به window.opener جلوگیری می‌کند و noreferrer ارسال اطلاعات رجوع (referrer) را متوقف می‌کند.
این ترکیب در فروشگاه آنلاین، بلاگ یا پرتال دولتی کاربرد دارد تا لینک‌ها امن، مفید و استاندارد باشند. بسیاری از تازه‌کاران فقط target="_blank" را اضافه می‌کنند بدون rel، که موجب خطرات امنیتی مانند tab-nabbing می‌شود.

مثال کاربردی

html

HTML Code

<!-- کارت محصول در فروشگاه آنلاین -->
<div class="product-card" data-product-id="PRD123" lang="fa" title="ساعت هوشمند – کلیک برای اطلاعات بیشتر">
<h2>ساعت هوشمند</h2>
<img src="smartwatch.jpg" alt="تصویر ساعت هوشمند مشکی" width="200" height="200">
<p>قیمت: <span dir="ltr">₹9,999</span></p>
</div>

در این مثال، یک کارت محصول در فروشگاه آنلاین ایجاد شده که ترکیبی از ویژگی‌ها را نشان می‌دهد:

class="product-card": برای CSS و JavaScript جهت انتخاب عنصر کاربردی است.
data-product-id="PRD123": ویژگی دل‌خواه که ID محصول را ذخیره می‌کند و توسط JavaScript قابل استفاده است.
lang="fa": زبان متن را فارسی تعیین می‌کند؛ برای خوانش صحیح توسط screen reader و SEO مفید است.
title="ساعت هوشمند – کلیک برای اطلاعات بیشتر": متن راهنما هنگام هاور.
img src="smartwatch.jpg": منبع تصویر محصول را تعریف می‌کند.
alt="تصویر ساعت هوشمند مشکی": متن جایگزین که برای خوانندگان صفحه یا زمانی که تصویر بارگزاری نمی‌شود، نمایش داده می‌شود.
width و height: ابعاد تصویر را ثابت می‌کند تا مشکلات layout shift در لحظه بارگذاری کاهش یابد.
dir="ltr": جهت نمایش مقدار قیمت را از چپ به راست تنظیم می‌کند، مفید در ترکیب فارسی و انگلیسی.
این ساختار نه‌تنها خواناتر و قابل نگهداری است، بلکه تجربه‌ی کاربری با SEO و دسترسی استاندارد فراهم می‌کند. الگو را می‌توان در سایت خبری (data-article-id)، بلاگ (data-post-id)، یا پرتال دولتی (aria-*، lang، dir) تعمیم داد.

Best practices و اشتباهات رایج
Best practices:

استفاده از ویژگی‌های معنایی (semantic attributes) مانند alt برای تصاویر، href برای لینک‌ها، type و name برای فرم‌ها — این موارد SEO و Accessibility را بهبود می‌بخشند.
نگهداری ساختار تمیز (clean markup): ترتیب ثابت ویژگی‌ها، استفاده از کوتیشن برای مقادیر، و نامگذاری سازگار مانند case-kebab.
تقویت دسترسی (accessibility): استفاده از aria-*, lang، title و alt برای کاربران با نیازهای ویژه.
استفاده مؤثر از data-* برای ذخیره‌ی داده‌ی DOM بدون دخالت در نمای ظاهری یا content.
اشتباهات رایج:
نادیده گرفتن alt برای <img> — به تجربه کاربری و سئو آسیب می‌زند.
نوشتن اشتباه ویژگی (typo) مانند sre به‌جای src که توسط مرورگر نادیده گرفته می‌شود.
استفاده غیرمجاز از ویژگی روی تگ نامناسب: مثلا href روی <div> استفاده شود.
عدم استفاده از کوتیشن در مقادیری که فضای خالی دارند — مانند width=200 px بدون " باعث خطا می‌شود.
نکات Debugging:

با ابزار DevTools مرورگر عناصر و ویژگی‌ها را بررسی کنید.
از W3C Validator برای بررسی صحت HTML استفاده کنید.
در JavaScript از getAttribute('data-product-id') و setAttribute() برای چک کردن و تغییر دینامیک ویژگی‌ها استفاده کنید.

📊 مرجع سریع

ویژگی	توضیحات	مثال
href	تعیین آدرس لینک	<a href="https://...">
alt	متن جایگزین برای تصویر	<img alt="عکس محصول">
data-*	ذخیره داده سفارشی برای اسکریپت‌ها	<div data-user-id="45">
title	متن راهنمای نمایش در hover	<button title="ذخیره">
lang	نمایش زبان عنصر	<p lang="en">Hello</p>
dir	جهت نمایش متن (ltr یا rtl)	<p dir="rtl">مرحبا</p>

خلاصه و گام‌های بعدی
ویژگی‌های HTML ستون فقرات ساختار semantic، دسترسی‌پذیری و تعامل‌پذیری صفحات وب هستند. این آموزش پیشرفته به شما کمک کرد نحوۀ استفاده از ویژگی‌ها را در سناریوهای واقعی مانند فروشگاه آنلاین، سایت خبر، بلاگ شخصی و پرتال دولتی یاد بگیرید و پیاده‌سازی کنید.
این ویژگی‌ها پایه‌ای برای ارتباط HTML با CSS (از طریق class، attribute selectors) و JavaScript (از طریق getAttribute و setAttribute) هستند. برای مثال، می‌توانید در CSS از [data-user-id="45"] برای انتخاب دقیق استفاده کنید و در JavaScript با element.getAttribute('lang') تصمیم‌گیری منطقی انجام دهید.
موضوعات پیشنهادی بعدی:

استفاده از CSS Attribute Selectors
تعامل با ویژگی‌ها در JavaScript
ویژگی‌های ARIA برای بهبود accessibility
بررسی ویژگی‌های فرم HTML5 مانند required، pattern، placeholder
هر ویژگی را مانند برچسبی بدانید که کتابخانه HTML شما را منظم، قابل فهم و کاربرپسند می‌سازد.

🧠 دانش خود را بیازمایید

آماده شروع

آزمون دانش شما

درک خود از این موضوع را با سوالات کاربردی بسنجید.

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود