ویژگیهایی که در بسیاری از عناصر کاربرد دارند
id در یک سند باید یکتا باشد و برای مقصد لینک، اتصال label یا مراجعهٔ برنامه به یک عنصر به کار میرود. class دستهبندی قابلتکرار است و چند نام را با فاصله میگیرد. data-* دادهٔ اختصاصیِ سبک برای کد برنامه نگه میدارد؛ چیزی را خودکار نمایش نمیدهد.
<article id="workshop-html" class="card featured" data-course="html">
<h2>کارگاه HTML</h2>
<p title="ظرفیت این گروه">۲۰ نفر</p>
</article>
<p hidden>این پیام فعلاً نمایش داده نمیشود.</p>
title توضیح کمکی است و نمایش آن با ماوس، لمس و ابزار کمکی یکسان نیست؛ اطلاعات ضروری را فقط در title نگذار. hidden محتوا را معمولاً از نمایش و درخت دسترسپذیری کنار میگذارد. inert یک ناحیه و فرزندانش را برای تعامل و فوکوس غیرفعال میکند؛ کاربردش مثلاً کنارگذاشتن ناحیهٔ پشت یک رابط است و برای پنهانکردن دادهٔ حساس نیست.
contenteditable="true" ویرایش متنِ ناحیه را ممکن میکند، اما ذخیرهسازی یا فرم استاندارد نمیسازد؛ برای ورودی معمول textarea مناسبتر است. spellcheck و translate="no" بر پیشنهاد بررسی املا و ترجمه اثر میگذارند، نه امنیت. draggable نیازمند طراحی رفتار کامل کشیدنورهاکردن است.
تمرین دستی: به دو کارت class مشترک و id متفاوت بده و به هرکدام با لینک داخلی برو. سپس hidden را اضافه و حذف کن و تفاوت را ببین.