ویژگی های

ویژگی‌ها (Attributes) به طور خلاصه در بخش «مروری بر HTML» مورد بحث قرار گرفتند. حالا وقت آن است که عمیق‌تر به آنها بپردازیم.

ویژگی‌ها (Attributes) همان چیزی هستند که HTML را بسیار قدرتمند می‌کنند. ویژگی‌ها نام‌هایی هستند که با فاصله از هم جدا می‌شوند و جفت‌های نام/مقدار هستند که در تگ آغازین ظاهر می‌شوند و اطلاعاتی در مورد عنصر و عملکرد آن ارائه می‌دهند.

ویژگی‌ها، رفتار، پیوندها و عملکرد عناصر را تعریف می‌کنند. برخی از ویژگی‌ها سراسری هستند، به این معنی که می‌توانند در تگ آغازین هر عنصری ظاهر شوند. برخی دیگر از ویژگی‌ها به چندین عنصر اعمال می‌شوند اما نه همه آنها، در حالی که برخی دیگر از ویژگی‌ها مختص عنصر هستند و فقط به یک عنصر واحد مربوط می‌شوند. در HTML، همه ویژگی‌ها به جز boolean و تا حدودی ویژگی‌های شمارشی، نیاز به مقدار دارند.

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

اگرچه HTML به حروف بزرگ و کوچک حساس نیست، اما برخی از مقادیر ویژگی‌ها حساس هستند. مقادیری که بخشی از مشخصات HTML هستند، به حروف بزرگ و کوچک حساس نیستند. مقادیر رشته‌ای که تعریف می‌شوند، مانند نام‌های کلاس و شناسه، به حروف بزرگ و کوچک حساس هستند. اگر یک مقدار ویژگی در HTML به حروف بزرگ و کوچک حساس باشد، وقتی به عنوان انتخابگر ویژگی در CSS و جاوا اسکریپت استفاده شود، به حروف بزرگ و کوچک حساس است؛ در غیر این صورت، اینطور نیست.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the ID attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

ویژگی‌های بولی

اگر یک ویژگی بولی وجود داشته باشد، همیشه درست است. ویژگی‌های بولی شامل autofocus ، inert ، checked ، disabled ، required ، reversed ، allowfullscreen ، default, loop ، autoplay ، controls ، muted ، readonly ، multiple, و selected . اگر یک (یا چند) از این ویژگی‌ها وجود داشته باشند، عنصر غیرفعال، الزامی، readonly و غیره است. اگر وجود نداشته باشد، عنصر غیرفعال، الزامی، readonly و غیره است.

مقادیر بولی می‌توانند حذف شوند، روی یک رشته خالی تنظیم شوند، یا نام ویژگی باشند؛ اما لازم نیست مقدار واقعاً روی رشته true تنظیم شود. همه مقادیر، از جمله true ، false و 😀 ، در حالی که نامعتبر هستند، به true تبدیل می‌شوند.

این سه تگ معادل هستند:

<input required>
<input required="">
<input required="required">

اگر مقدار ویژگی false باشد، ویژگی را حذف کنید. اگر ویژگی true باشد، ویژگی را اضافه کنید اما مقداری ارائه ندهید. برای مثال، required="required" یک مقدار معتبر در HTML نیست؛ اما از آنجایی که required بولی است، مقادیر نامعتبر به true تبدیل می‌شوند. اما از آنجایی که ویژگی‌های شمارشی نامعتبر لزوماً به همان مقدار مقادیر از دست رفته تبدیل نمی‌شوند، عادت کردن به حذف مقادیر آسان‌تر از به خاطر سپردن ویژگی‌های بولی در مقابل شمارشی است و به طور بالقوه مقدار نامعتبری ارائه می‌دهند.

هنگام تغییر بین true و false، به جای تغییر مقدار، ویژگی را به طور کامل با جاوا اسکریپت اضافه و حذف کنید.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

ویژگی‌های شمارش‌شده

ویژگی‌های شمارشی (Enumerated Attributes) گاهی اوقات با ویژگی‌های بولی (Boolean Attributes) اشتباه گرفته می‌شوند. آن‌ها ویژگی‌های HTML هستند که مجموعه‌ای محدود از مقادیر معتبر از پیش تعریف شده دارند. مانند ویژگی‌های بولی، اگر ویژگی وجود داشته باشد اما مقدار آن وجود نداشته باشد، آن‌ها نیز یک مقدار پیش‌فرض دارند. برای مثال، اگر <style contenteditable> را وارد کنید، به طور پیش‌فرض <style contenteditable="true"> در نظر گرفته می‌شود.

برخلاف ویژگی‌های بولی، حذف ویژگی به معنای نادرست بودن آن نیست. یک ویژگی فعلی با مقدار از دست رفته لزوماً درست نیست و پیش‌فرض برای مقادیر نامعتبر لزوماً با یک رشته تهی یکسان نیست. در ادامه مثال، contenteditable در صورت فقدان یا نامعتبر بودن، به طور پیش‌فرض inherit می‌رسد و می‌تواند به صراحت روی false تنظیم شود.

مقدار پیش‌فرض به ویژگی بستگی دارد. برخلاف مقادیر بولی، ویژگی‌ها در صورت وجود به طور خودکار "true" نمی‌شوند. اگر <style contenteditable="false"> را وارد کنید، عنصر قابل ویرایش نیست. اگر مقدار نامعتبر باشد، مانند <style contenteditable="😀"> ، یا به طور شگفت‌آوری، <style contenteditable="contenteditable"> ، مقدار نامعتبر است و به طور پیش‌فرض به inherit می‌رسد.

در بیشتر موارد با ویژگی‌های شمارشی، مقادیر ناموجود و نامعتبر یکسان هستند. برای مثال، اگر ویژگی type در یک <input> وجود نداشته باشد، وجود داشته باشد اما مقدار نداشته باشد، یا مقدار نامعتبری داشته باشد، به طور پیش‌فرض روی text تنظیم می‌شود. اگرچه این رفتار رایج است، اما یک قانون نیست. به همین دلیل، مهم است که بدانید کدام ویژگی‌ها بولی در مقابل شمارشی هستند. در صورت امکان مقادیر را حذف کنید تا آنها را اشتباه متوجه نشوید و در صورت نیاز مقدار را جستجو کنید.

ویژگی‌های سراسری

ویژگی‌های سراسری، ویژگی‌هایی هستند که می‌توانند روی هر عنصر HTML، از جمله عناصر موجود در <head> ، تنظیم شوند. بیش از 30 ویژگی سراسری وجود دارد. در حالی که از نظر تئوری، همه این ویژگی‌ها می‌توانند به هر عنصر HTML اضافه شوند، برخی از ویژگی‌های سراسری هنگام تنظیم روی برخی عناصر هیچ تاثیری ندارند. به عنوان مثال، تنظیم hidden روی <meta> به این دلیل که محتوای متا نمایش داده نمی‌شود.

id

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

• هدف شناسه‌ی قطعه‌ی یک لینک.
• شناسایی یک عنصر برای اسکریپت نویسی
• مرتبط کردن یک عنصر فرم با برچسب آن.
• ارائه برچسب یا توضیحی برای فناوری‌های کمکی.
• هدف قرار دادن استایل‌ها با (ویژگی بالا یا به عنوان انتخابگرهای ویژگی) در CSS.

مقدار id یک رشته بدون فاصله است. اگر حاوی فاصله باشد، سند خراب نمی‌شود، اما باید id را با کاراکترهای escape در HTML، CSS و JS خود هدف قرار دهید. همه کاراکترهای دیگر معتبر هستند. مقدار id می‌تواند 😀 یا .class باشد، اما ایده خوبی نیست. برای آسان‌تر کردن برنامه‌نویسی برای خودتان در حال حاضر و آینده، اولین کاراکتر id را یک حرف قرار دهید و فقط از حروف ASCII، اعداد، _ و - استفاده کنید. بهتر است یک قرارداد نامگذاری id ایجاد کنید و سپس به آن پایبند باشید، زیرا مقادیر id به حروف کوچک و بزرگ حساس هستند.

id باید مختص سند باشد. اگر یک id بیش از یک بار استفاده شود، احتمالاً طرح‌بندی صفحه شما به هم نمی‌ریزد، اما ممکن است جاوا اسکریپت، لینک‌ها و تعاملات عناصر شما آنطور که انتظار می‌رود عمل نکنند.

شناسه قطعه پیوند

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

در سایت کارگاه یادگیری ماشین، نوار ناوبری در هدر صفحه شامل چهار لینک است:

ویژگی href لینکی را فراهم می‌کند که فعال کردن لینک، کاربر را به آن هدایت می‌کند. وقتی یک URL شامل علامت هشتگ ( # ) و به دنبال آن رشته‌ای از کاراکترها باشد، آن رشته یک شناسه fragment است. اگر آن رشته با id یک عنصر در صفحه وب مطابقت داشته باشد، fragment یک anchor یا نشانه‌گذاری برای آن عنصر است. مرورگر به نقطه‌ای که anchor تعریف شده است، اسکرول می‌کند.

این چهار لینک به چهار بخش از صفحه ما که توسط ویژگی id آنها مشخص شده‌اند، اشاره می‌کنند. وقتی کاربر روی هر یک از چهار لینک در نوار ناوبری کلیک می‌کند، عنصری که توسط شناسه fragment به آن لینک شده است، یعنی عنصری که حاوی شناسه منطبق منهای # است، به داخل صفحه نمایش اسکرول می‌شود.

محتوای <main> کارگاه یادگیری ماشینی دارای چهار بخش با شناسه (id) است. وقتی بازدیدکننده سایت روی یکی از لینک‌های موجود در <nav> کلیک می‌کند، بخشی که شناسه قطعه در آن قرار دارد، به نمایش در می‌آید. نشانه‌گذاری مشابه زیر است:

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

با مقایسه شناسه‌های fragment در لینک‌های <nav> ، متوجه خواهید شد که هر کدام با id یک <section> در <main> مطابقت دارند. مرورگر یک لینک "بالای صفحه" رایگان به ما می‌دهد. تنظیم href="#top" ، بدون حساسیت به حروف بزرگ و کوچک، یا href="#" ، کاربر را به بالای صفحه اسکرول می‌کند.

جداکننده‌ی علامت هش در href بخشی از شناسه‌ی قطعه نیست. شناسه‌ی قطعه همیشه آخرین بخش URL است و به سرور ارسال نمی‌شود.

انتخابگرهای CSS

در CSS، می‌توانید هر بخش را با استفاده از anselector، مانند #feedback ، هدف قرار دهید. برای دقت کمتر، از یک انتخابگر ویژگی حساس به حروف بزرگ و کوچک، [id="feedback"] استفاده کنید.

اسکریپت نویسی

در MLW.com ، یک راز مخفی فقط برای کاربران ماوس وجود دارد. کلیک روی کلید چراغ، صفحه را روشن و خاموش می‌کند.

نشانه‌گذاری تصویر کلید برق به صورت زیر است:

<img src="svg/switch2.svg" id="switch"
  alt="light switch" class="light" />

ویژگی id می‌تواند به عنوان پارامتر برای متد getElementById() و با پیشوند # ، به عنوان بخشی از پارامتر برای متدهای querySelector() و querySelectorAll() استفاده شود.

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

تابع جاوا اسکریپت ما از این قابلیت برای هدف قرار دادن عناصر با استفاده از ویژگی id آنها استفاده می‌کند:

<script>
  /* Switch is a reserved word in JavaScript, so instead, we use onoff */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

عنصر <label> در HTML دارای یک ویژگی for است که مقدار آن، شناسه id کنترل فرمی است که به آن مرتبط است. ایجاد یک برچسب صریح با قرار دادن یک id در هر کنترل فرم و جفت کردن هر کدام با ویژگی for مربوط به برچسب، تضمین می‌کند که هر کنترل فرم دارای یک برچسب مرتبط است.

اگرچه هر برچسب می‌تواند دقیقاً با یک کنترل فرم مرتبط باشد، اما یک کنترل فرم می‌تواند بیش از یک برچسب مرتبط داشته باشد.

اگر کنترل فرم بین تگ‌های باز و بسته <label> قرار گرفته باشد، ویژگی‌های for و id لازم نیستند: به این برچسب "ضمنی" گفته می‌شود. برچسب‌ها به همه کاربران اطلاع می‌دهند که هر کنترل فرم برای چیست.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

ارتباط بین for و id اطلاعات را در دسترس کاربران فناوری‌های کمکی قرار می‌دهد. علاوه بر این، کلیک کردن روی هر نقطه از یک برچسب، به عنصر مرتبط تمرکز می‌کند و ناحیه کلیک کنترل را گسترش می‌دهد. این امر نه تنها برای افرادی که در مهارت حرکت مشکل دارند و دقت ماوس را کاهش می‌دهند، مفید است؛ بلکه به هر کاربر دستگاه تلفن همراهی که انگشتانش از دکمه رادیویی پهن‌تر است نیز کمک می‌کند.

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

هنگام گنجاندن دکمه‌های رادیویی، از آنجایی که برچسب‌ها مقدار دکمه‌های رادیویی را توصیف می‌کنند، ما تمام دکمه‌های هم‌نام را در یک <fieldset> قرار می‌دهیم که <legend> برچسب یا سوال کل مجموعه است.

سایر کاربردهای دسترسی‌پذیری

استفاده از id در دسترسی‌پذیری و کاربردپذیری فراتر از برچسب‌ها (labels) است. در مقدمه‌ی text ، یک <section> با ارجاع به id یک <h2> به عنوان مقدار aria-labelledby در <section> برای ارائه نام قابل دسترس، به یک نشانگر منطقه تبدیل شد:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

بیش از ۵۰ حالت و ویژگی aria-* وجود دارد که می‌توانند برای تضمین دسترسی‌پذیری مورد استفاده قرار گیرند. aria-labelledby ، aria-describedby ، aria-details و aria-owns یک لیست مرجع شناسه id را که با فاصله از هم جدا شده‌اند، به عنوان مقدار خود می‌گیرند. aria-activedescendant که عنصر فرزندِ متمرکز را شناسایی می‌کند، یک مرجع id واحد را به عنوان مقدار خود می‌گیرد: همان عنصر واحدی که فوکوس دارد (فقط یک عنصر می‌تواند در یک زمان فوکوس شود).

class

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

ایجاد یک ساختار معنایی مناسب، امکان هدف‌گیری عناصر بر اساس جایگاه و عملکرد آنها را فراهم می‌کند. ساختار مناسب، استفاده از انتخابگرهای عنصر فرزند، انتخابگرهای رابطه‌ای و انتخابگرهای ویژگی را امکان‌پذیر می‌سازد. همانطور که در مورد ویژگی‌ها یاد می‌گیرید، در نظر بگیرید که چگونه می‌توان عناصری با ویژگی‌ها یا مقادیر ویژگی یکسان را استایل‌دهی کرد. اینطور نیست که شما نباید از ویژگی کلاس استفاده کنید، فقط اکثر توسعه‌دهندگان متوجه نمی‌شوند که اغلب نیازی به آن ندارند.

تاکنون، MLW از هیچ کلاسی استفاده نکرده است. آیا می‌توان سایتی را بدون نام یک کلاس راه‌اندازی کرد؟ خواهیم دید.

style

ویژگی style امکان اعمال سبک‌های درون‌خطی را فراهم می‌کند، که سبک‌هایی هستند که به عنصر واحدی که ویژگی روی آن تنظیم شده است، اعمال می‌شوند. ویژگی style جفت‌های مقدار ویژگی CSS را به عنوان مقدار خود می‌گیرد، و سینتکس مقدار مشابه محتویات یک بلوک سبک CSS است: ویژگی‌ها با یک دونقطه دنبال می‌شوند، درست مانند CSS، و نقطه‌ویرگول‌ها هر اعلان را پایان می‌دهند و بعد از مقدار می‌آیند.

استایل‌ها فقط به عنصری که ویژگی روی آن تنظیم شده است، اعمال می‌شوند. فرزندان، مقادیر ویژگی‌های ارثی را به ارث می‌برند، مگر اینکه توسط سایر اعلان‌های استایل روی عناصر تودرتو یا در بلوک‌های <style> یا stylesheetها لغو شوند. از آنجایی که این مقدار شامل معادل محتوای یک بلوک استایل واحد است که فقط به آن عنصر اعمال می‌شود، نمی‌توان از آن برای محتوای تولید شده، ایجاد انیمیشن‌های keyframe یا اعمال هرگونه at-rule دیگر استفاده کرد.

اگرچه style در واقع یک ویژگی سراسری است، استفاده از آن توصیه نمی‌شود. در عوض، styleها را در یک یا چند فایل جداگانه تعریف کنید. با این حال، ویژگی style می‌تواند در طول توسعه برای فعال کردن استایل‌بندی سریع، مثلاً برای اهداف آزمایشی، مفید باشد. سپس style مربوط به «راه حل» را بردارید و آن را در فایل CSS لینک شده خود قرار دهید.

tabindex

ویژگی tabindex را می‌توان به هر عنصری اضافه کرد تا امکان دریافت فوکوس را برای آن فراهم کند. مقدار tabindex مشخص می‌کند که آیا به ترتیب تب‌ها اضافه شود یا خیر، و به صورت اختیاری، به یک ترتیب تب‌بندی غیر پیش‌فرض نیز اضافه شود.

ویژگی tabindex مقدار خود را یک عدد صحیح می‌گیرد. مقدار منفی (قرار است از -1 استفاده شود) باعث می‌شود عنصر بتواند فوکوس را دریافت کند، مانند جاوا اسکریپت، اما عنصر را به توالی tabbing اضافه نمی‌کند. مقدار tabindex برابر با 0 باعث می‌شود عنصر قابل فوکوس و قابل دسترسی با tabbing باشد و آن را به ترتیب پیش‌فرض tab صفحه در ترتیب کد منبع اضافه می‌کند. مقدار 1 یا بیشتر، عنصر را در یک توالی focus اولویت‌بندی شده قرار می‌دهد و توصیه نمی‌شود.

در این صفحه، قابلیت اشتراک‌گذاری با استفاده از عنصر سفارشی <share-action> وجود دارد که به عنوان <button> عمل می‌کند. tabindex ) برابر با صفر است تا عنصر سفارشی به ترتیب تب‌بندی پیش‌فرض صفحه‌کلید اضافه شود:

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

role button به کاربران صفحه‌خوان اطلاع می‌دهد که این عنصر باید مانند یک دکمه رفتار کند. از جاوا اسکریپت برای اطمینان از حفظ عملکرد دکمه استفاده می‌شود؛ از جمله مدیریت رویدادهای کلیک و پایین آوردن کلید و همچنین مدیریت فشردن کلیدهای Enter و Space.

کنترل‌های فرم، لینک‌ها، دکمه‌ها و عناصر قابل ویرایش محتوا می‌توانند فوکوس دریافت کنند؛ وقتی کاربر کلید tab را فشار می‌دهد، فوکوس به عنصر قابل فوکوس بعدی منتقل می‌شود، انگار که tabindex="0" روی آن تنظیم شده باشد. سایر عناصر به طور پیش‌فرض فوکوس‌پذیر نیستند. افزودن ویژگی tabindex به این عناصر، آنها را قادر می‌سازد تا فوکوس را دریافت کنند، در حالی که در غیر این صورت این اتفاق نمی‌افتاد.

اگر یک سند شامل عناصری با tabindex برابر با 1 یا بیشتر باشد، آنها در یک توالی جداگانه tab قرار می‌گیرند. در CodePen، tabbing قبل از اینکه به ترتیب منبع، عناصر موجود در توالی معمولی را بررسی کند، به ترتیب از کمترین مقدار به بیشترین مقدار، در یک توالی جداگانه شروع می‌شود.

تغییر ترتیب تب‌ها می‌تواند یک تجربه کاربری واقعاً بد ایجاد کند. این کار تکیه بر فناوری‌های کمکی، چه کیبورد و چه صفحه‌خوان‌ها، برای پیمایش محتوای شما را دشوار می‌کند. همچنین مدیریت و نگهداری آن به عنوان یک توسعه‌دهنده دشوار است. تمرکز مهم است؛ یک ماژول کامل در مورد تمرکز و ترتیب تمرکز وجود دارد.

role

ویژگی role بخشی از مشخصات ARIA است، نه مشخصات WHATWG HTML . ویژگی role می‌تواند برای ارائه معنای معنایی به محتوا استفاده شود و به صفحه‌خوان‌ها این امکان را می‌دهد که کاربران سایت را از تعامل مورد انتظار کاربر با یک شیء مطلع کنند.

چند ویجت رابط کاربری رایج، مانند کمبوباکس‌ها ، منوبارها ، تب‌لیست‌ها و تری‌گریدها ، وجود دارند که معادل بومی HTML ندارند. برای مثال، هنگام ایجاد یک الگوی طراحی تب‌بندی‌شده، می‌توان از نقش‌های tab ، tablist و tabpanel استفاده کرد. کسی که می‌تواند رابط کاربری را به صورت فیزیکی ببیند، به تجربه آموخته است که چگونه در ویجت پیمایش کند و با کلیک بر روی تب‌های مرتبط، پنل‌های مختلف را قابل مشاهده کند. گنجاندن نقش tab با <button role="tab"> هنگام استفاده از گروهی از دکمه‌ها برای نمایش پنل‌های مختلف، به کاربر صفحه‌خوان این امکان را می‌دهد که بداند <button> که در حال حاضر فوکوس دارد، می‌تواند یک پنل مرتبط را به نمایش درآورد، نه اینکه عملکرد دکمه‌مانند معمولی را پیاده‌سازی کند.

ویژگی role رفتار مرورگر یا تعاملات صفحه کلید یا دستگاه اشاره‌گر را تغییر نمی‌دهد - اضافه کردن role="button" به <span> آن را به <button> تبدیل نمی‌کند. به همین دلیل است که استفاده از عناصر HTML معنایی برای هدف مورد نظرشان توصیه می‌شود. با این حال، هنگامی که استفاده از عنصر مناسب امکان‌پذیر نیست، ویژگی role به کاربران صفحه خوان این امکان را می‌دهد که در صورت جایگزینی یک عنصر غیرمعنایی با نقش یک عنصر معنایی، به آنها اطلاع دهند.

contenteditable

عنصری که ویژگی contenteditable آن روی true تنظیم شده باشد، قابل ویرایش و قابل فوکوس است و به ترتیب تب‌ها اضافه می‌شود، گویی tabindex="0" تنظیم شده است. Contenteditable یک ویژگی شمارشی است که از مقادیر true و false پشتیبانی می‌کند و در صورت عدم وجود یا داشتن مقدار نامعتبر، مقدار پیش‌فرض inherit را دارد.

این سه تگ آغازین معادل هستند:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

اگر <style contenteditable="false"> وارد کنید، عنصر قابل ویرایش نیست (مگر اینکه به طور پیش‌فرض قابل ویرایش باشد، مانند <textarea> ). اگر مقدار نامعتبر باشد، مانند <style contenteditable="😀"> یا <style contenteditable="contenteditable"> ، مقدار به طور پیش‌فرض به inherit تنظیم می‌شود.

برای تغییر بین حالت‌ها، مقدار ویژگی فقط خواندنی HTMLElement.isContentEditable را جستجو کنید.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

به عنوان یک روش جایگزین، می‌توان این ویژگی را با تنظیم editor.contentEditable به true ، false یا inherit تعیین کرد.

ویژگی‌های سراسری را می‌توان به همه عناصر، حتی عناصر <style> اعمال کرد. می‌توانید از ویژگی‌ها و کمی CSS برای ساخت یک ویرایشگر CSS زنده استفاده کنید.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

سعی کنید color style را به چیزی غیر از inherit تغییر دهید. سپس style به یک انتخابگر p تغییر دهید. ویژگی display را حذف نکنید، در غیر این صورت بلوک استایل ناپدید می‌شود.

ویژگی‌های سفارشی

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

شما می‌توانید با اضافه کردن پیشوند data- هر ویژگی سفارشی که می‌خواهید ایجاد کنید. می‌توانید ویژگی خود را هر چیزی که با data- شروع می‌شود و به دنبال آن هر سری حروف کوچک از کاراکترهایی که با xml شروع نمی‌شوند و حاوی دونقطه ( : نیستند، نامگذاری کنید.

اگرچه HTML بخشنده است و اگر ویژگی‌های پشتیبانی نشده‌ای ایجاد کنید که با data شروع نمی‌شوند، یا حتی اگر ویژگی سفارشی خود را با xml شروع کنید یا یک : را در آن قرار دهید، مشکلی ایجاد نمی‌کند، اما ایجاد ویژگی‌های سفارشی معتبر که با data- شروع می‌شوند، مزایایی دارد. با ویژگی‌های داده سفارشی، می‌دانید که به طور تصادفی از نام یک ویژگی موجود استفاده نمی‌کنید. ویژگی‌های داده سفارشی در آینده قابل استفاده هستند.

اگرچه مرورگرها رفتارهای پیش‌فرض را برای هیچ ویژگی خاص با پیشوند data- پیاده‌سازی نمی‌کنند، اما یک API داخلی برای مجموعه داده وجود دارد که می‌تواند از طریق ویژگی‌های سفارشی شما تکرار شود. ویژگی‌های سفارشی راهی عالی برای انتقال اطلاعات خاص برنامه در جاوا اسکریپت هستند. ویژگی‌های سفارشی را به عناصر به شکل data-name اضافه کنید و با استفاده dataset[name] روی عنصر مورد نظر، از طریق DOM به آنها دسترسی پیدا کنید.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

می‌توانید getAttribute() با استفاده از نام کامل ویژگی استفاده کنید، یا می‌توانید از ویژگی ساده‌تر dataset بهره ببرید.

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

ویژگی dataset یک شیء DOMStringMap از ویژگی‌های data- هر عنصر را برمی‌گرداند. چندین ویژگی سفارشی در <blockquote> وجود دارد. ویژگی dataset به این معنی است که برای دسترسی به نام‌ها و مقادیر آن ویژگی‌ها، نیازی به دانستن آنها ندارید:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

ویژگی‌های این مقاله سراسری هستند، به این معنی که می‌توانند روی هر عنصر HTML اعمال شوند (هرچند همه آنها روی آن عناصر تأثیری ندارند). در ادامه، نگاهی به دو ویژگی از تصویر مقدمه که به آنها نپرداختیم target و href - و چندین ویژگی خاص عنصر دیگر می‌اندازیم و نگاه عمیق‌تری به لینک‌ها می‌اندازیم.

درک خود را بررسی کنید

دانش خود را در مورد صفات آزمایش کنید.