מאפיינים

המאפיינים הוצגו בקצרה בקטע סקירה כללית על HTML. עכשיו הגיע הזמן להיכנס לעומק.

המאפיינים הם מה שמאפשרים ל-HTML להיות כל כך חזק. מאפיינים הם שמות שמופרדים באמצעות רווחים וצמדים של שם/ערך שמופיעים בתג הפתיחה, ומספקים מידע על הרכיב ופונקציונליות שלו.

התג הפותח, המאפיינים והתג הסגור, שמסומנים על אלמנט HTML.

מאפיינים מגדירים את ההתנהגות, הקישורים והפונקציונליות של רכיבים. חלק מהמאפיינים הם גלובלים, כלומר הם יכולים להופיע בתוך תג הפתיחה של כל רכיב. מאפיינים אחרים חלים על כמה רכיבים, אבל לא על כולם, ויש מאפיינים אחרים שרלוונטיים רק לרכיב אחד. ב-HTML, כל המאפיינים, מלבד מאפיינים בוליאניים, ובמידה מסוימת מאפיינים שמפורטים במספרים, דורשים ערך.

אם ערך מאפיין כולל רווח או תווים מיוחדים, צריך להקיף את הערך במירכאות. לכן, וגם כדי לשפר את הקריאוּת, מומלץ תמיד להשתמש במירכאות.

ב-HTML אין הבחנה בין אותיות רישיות לאותיות רגילות, אבל בחלק מערכי המאפיינים יש הבחנה כזו. הערכים שחלק ממפרט ה-HTML הם לא תלויי רישיות. ערכי מחרוזות שמוגדרים, כמו שמות של כיתות ומזהים, הם תלויי אותיות רישיות. אם ערך מאפיין תלוי אותיות רישיות ב-HTML, הוא תלוי אותיות רישיות גם כשמשתמשים בו כחלק מסלקטור מאפיינים ב-CSS וב-JavaScript. אחרת, הוא לא תלוי אותיות רישיות.

<!-- 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. אם אחד (או יותר) מהמאפיינים האלה קיים, הרכיב מושבת, נדרש, לקריאה בלבד וכו'. אם הוא לא קיים, הרכיב לא מושבת.

אפשר להשמיט ערכים בוליאניים, להגדיר אותם למחרוזת ריקה או להגדיר אותם בתור שם המאפיין. עם זאת, הערך לא חייב להיות מוגדר למחרוזת true. כל הערכים, כולל true,‏ false ו-😀, גם אם הם לא חוקיים, יתקבלו כ-true.

שלושת התגים האלה זהים:

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

אם ערך המאפיין הוא false, משמיטים את המאפיין. אם המאפיין הוא true, צריך לכלול את המאפיין אבל לא לספק ערך. לדוגמה, required="required" הוא לא ערך חוקי ב-HTML, אבל מכיוון ש-required הוא ערך בוליאני, ערכים לא חוקיים מומרים לערך true. עם זאת, מאפייני ספירה לא תקינים לא מתקבלים בהכרח באותו ערך כמו ערכים חסרים, ולכן קל יותר לפתח את ההרגל להשמיט ערכים מאשר לזכור אילו מאפיינים הם בוליאניים ואילו הם מאפייני ספירה, ויכול להיות שהם מספקים ערך לא תקין.

כשעוברים בין true ל-false, מוסיפים ומסירים את המאפיין לגמרי באמצעות JavaScript במקום להחליף את הערך.

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

חשוב לזכור שבשפות XML, כמו SVG, כל המאפיינים צריכים לכלול ערך, כולל מאפיינים בוליאניים.

מאפיינים שמפורטים במספרים

לפעמים אנשים מבלבלים בין מאפיינים מפורטים לבין מאפיינים בוליאניים. אלה מאפייני HTML שיש להם קבוצה מוגבלת של ערכים חוקיים מוגדרים מראש. בדומה למאפיינים בוליאניים, למאפיינים כאלה יש ערך ברירת מחדל אם המאפיין נמצא אבל הערך חסר. לדוגמה, אם תכללו את <style contenteditable>, הערך שמוגדר כברירת מחדל הוא <style contenteditable="true">.

עם זאת, בניגוד למאפיינים בוליאניים, השמטת המאפיין לא מעידה על כך שהוא שקר. מאפיין שנמצא עם ערך חסר לא בהכרח נכון, וגם ברירת המחדל לערכים לא חוקיים לא בהכרח זהה למחרוזת null. בהמשך לדוגמה, הערך שמוגדר כברירת מחדל ל-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 יותר מפעם אחת, אבל יכול להיות שהפעולות של JavaScript, הקישורים והרכיבים לא יפעלו כצפוי.

סרגל הניווט כולל ארבעה קישורים. נרחיב על רכיב הקישור בהמשך, אבל בינתיים חשוב לדעת שקישורים לא מוגבלים לכתובות URL שמבוססות על HTTP. הם יכולים להיות מזהי קטעים של קטעי הדף במסמך הנוכחי (או במסמכים אחרים).

באתר של סדנת למידת המכונה, סרגל הניווט בכותרת הדף כולל ארבעה קישורים:

המאפיין href מספק את הקישור ההיפר שמפעיל את הקישור ומפנה את המשתמש אליו. כאשר כתובת URL כוללת סימן תיוג (#) ואחריו מחרוזת תווים, המחרוזת הזו היא מזהה של שבר. אם המחרוזת תואמת ל-id של רכיב בדף האינטרנט, הקטע הוא עוגן או סימנייה לרכיב הזה. הדפדפן יגלול לנקודה שבה ה-anchor מוגדר.

ארבעת הקישורים האלה מפנים לארבעה קטעים בדף שלנו, שמזוהים לפי המאפיין id שלהם. כשהמשתמש לוחץ על אחד מארבעת הקישורים בסרגל הניווט, הרכיב שמקושר למזהה הרצף, הרכיב שמכיל את המזהה התואם פחות #, גוללים אליו.

התוכן של <main> בסדנת למידת המכונה כולל ארבעה קטעים עם מזהים. כשמבקר באתר לוחץ על אחד מהקישורים ב-<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>

בהשוואה בין מזהי הקטעים בקישורים <nav>, ניתן לראות שכל אחד מהם תואם ל-id של <section> ב-<main>. הדפדפן מספק לנו קישור חינם ל'חלק העליון של הדף'. הגדרת href="#top", ללא קשר לאותיות רישיות, או פשוט href="#", תגרום לגלילה של המשתמש לחלק העליון של הדף.

מפריד סימני ה-hash ב-href הוא לא חלק ממזהה החלק. מזהה המקטע הוא תמיד החלק האחרון של כתובת ה-URL, והוא לא נשלח לשרת.

סלקטורים ב-CSS

ב-CSS, אפשר לטרגט כל קטע באמצעות סלקטור מזהה, כמו #feedback. לחלופין, אם רוצים פחות ספציפיות, אפשר להשתמש בבורר מאפיינים, [id="feedback"], שבו יש הבחנה בין אותיות רישיות לאותיות רגילות.

כתיבת סקריפטים

באתר MLW.com יש ביצה חבולה למשתמשי עכבר בלבד. לחיצה על מתג התאורה מפעילה או משביתה את הדף.

ה-markup של התמונה של מתג התאורה הוא: html <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");

פונקציית ה-JavaScript היחידה שלנו משתמשת ביכולת הזו כדי לטרגט רכיבים לפי המאפיין id שלהם:

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

<label>

לרכיב ה-HTML <label> יש מאפיין 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 בנושאי נגישות ונוחות השימוש לא מוגבל לתוויות. בקטע מבוא לטקסט, הוספנו ל-<section> את הערך של id ב-<h2> כערך של aria-labelledby ב-<section> כדי לספק את השם הנגיש:

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

יש יותר מ-50 מצבים ומאפיינים של aria-* שאפשר להשתמש בהם כדי להבטיח נגישות. הערכים של aria-labelledby,‏ aria-describedby,‏ aria-details ו-aria-owns הם רשימת הפניות מסוג id שמפרידה בין הערכים באמצעות רווחים. aria-activedescendant, שמזהה את רכיב הצאצא שמוקף כרגע, מקבל כערך הפניה יחידה של id: זו של הרכיב היחיד שמוקף (רק רכיב אחד יכול להיות מוקף בכל פעם).

class

המאפיין class מספק דרך נוספת לטרגט רכיבים באמצעות CSS (וגם JavaScript), אבל הוא לא משמש למטרה אחרת ב-HTML (למרות ש-frameworks וספריות רכיבים עשויים להשתמש בו). הערך של מאפיין class הוא רשימה של הכיתות של הרכיב, מופרדות בפסיקים, תוך התחשבות ברישיות של האותיות.

בניית מבנה סמנטי תקין מאפשרת טירגוט של רכיבים על סמך המיקום והפונקציה שלהם. מבנה תקין מאפשר להשתמש בבוררי רכיבים של צאצאים, בבוררי יחסי ובבוררי מאפיינים. במהלך הקריאה על המאפיינים בקטע הזה, כדאי לחשוב איך אפשר להגדיר סגנון לרכיבים עם אותם מאפיינים או ערכי מאפיינים. זה לא שאסור להשתמש במאפיין class, אלא שרוב המפתחים לא מבינים שלרוב אין צורך בכך.

עד כה, MLW לא השתמש בשום כיתה. האם אפשר להשיק אתר בלי שם של כיתה אחת? נראה.

style

המאפיין style מאפשר להחיל סגנונות מוטמעים, שהם סגנונות שחלים על הרכיב היחיד שבו המאפיין מוגדר. הערך של המאפיין style הוא זוגות של ערכי מאפייני CSS, וסינטקס הערך זהה לתוכן של בלוק סגנון CSS: אחרי המאפיינים מופיעה נקודתיים, בדיוק כמו ב-CSS, וכל הצהרה מסתיימת בנקודתיים שמופיעות אחרי הערך.

הסגנונות חלים רק על הרכיב שבו המאפיין מוגדר, והצאצאים יורשים את ערכי המאפיינים שעברו בירושה, אלא אם הם בוטלו על ידי הצהרות סגנון אחרות ברכיבים בתצוגת עץ או בבלוק <style> או בגיליון סגנונות. מכיוון שהערך כולל את התוכן המקביל של בלוק סגנונות אחד שחלה על הרכיב הזה בלבד, אי אפשר להשתמש בו ליצירת תוכן שנוצר, ליצירת אנימציות של נקודות מפתח או להחלה של כללים אחרים מסוג at-rule.

אמנם style הוא אכן מאפיין גלובלי, אבל לא מומלץ להשתמש בו. במקום זאת, מגדירים סגנונות בקובץ או בקבצים נפרדים. עם זאת, המאפיין style יכול להיות שימושי במהלך הפיתוח כדי לאפשר עיצוב מהיר, למשל למטרות בדיקה. לאחר מכן, מעתיקים את הסגנון 'solution' ומדביקים אותו בקובץ CSS המקושר.

tabindex

אפשר להוסיף את המאפיין tabindex לכל רכיב כדי לאפשר לו לקבל את המיקוד. הערך של tabindex מגדיר אם הוא יתווסף לסדר הלחצן Tab, ואם כן, לסדר לחצן Tab שאינו ברירת המחדל.

הערך של המאפיין tabindex הוא מספר שלם. ערך שלילי (המוסכמה היא להשתמש ב--1) מאפשר לאובייקט לקבל את המיקוד, למשל באמצעות JavaScript, אבל לא מוסיף אותו לרצף הקשה על Tab. ערך tabindex של 0 מאפשר להתמקד במרכיב ולהגיע אליו באמצעות מקש Tab, ומוסיף אותו לסדר הכרטיסיות שמוגדר כברירת מחדל בדף לפי סדר קוד המקור. הערך 1 ואילך מעביר את הרכיב לרצף התמקדות לפי תעדוף, ואין להמליץ עליו.

בדף הזה יש פונקציונליות שיתוף באמצעות רכיב <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 מאפשר למשתמשים בקורא מסך לדעת שהרכיב הזה אמור לפעול כמו לחצן. JavaScript משמש כדי לוודא שהלחצן פועל כמצופה, כולל טיפול באירועי click ו-keydown, וגם טיפול בהקשות על מקש Enter ומקש הרווח.

אפשר להעביר את המיקוד לרכיבי שליטה בטופס, לקישורים, ללחצנים ולרכיבים של תוכן שאפשר לערוך. כשמשתמש במקלדת מקשיב על מקש Tab, המיקוד עובר לרכיב הבא שאפשר להעביר אליו את המיקוד, כאילו הוגדר לו tabindex="0". כברירת מחדל, אי אפשר להתמקד ברכיבים אחרים. הוספת המאפיין tabindex לרכיבים האלה מאפשרת להם לקבל את המיקוד, גם אם הם לא היו מקבלים אותו אחרת.

אם מסמך כולל רכיבים עם tabindex של 1 או יותר, הם נכללים בסדרת כרטיסיות נפרדת. כפי שאפשר לראות ב-codepen, הקשה על Tab מתחילה ברצף נפרד, בסדר מהערך הנמוך ביותר עד הערך הגבוה ביותר, לפני שהיא עוברת על הערכים ברצף הרגיל לפי סדר המקור.

שינוי סדר הלחצן Tab עלול לגרום לחוויית משתמש גרועה מאוד. קשה להסתמך על טכנולוגיות עזר – מקלדות וקוראי מסך – כדי לנווט בתוכן. בנוסף, קשה למפתחים לנהל ולתחזק את הקוד. חשוב להתמקד בנושא. יש מודול שלם שמדבר על התמקדות ועל סדר ההתמקדות.

role

המאפיין role הוא חלק ממפרט ARIA, ולא ממפרט HTML של WHATWG. אפשר להשתמש במאפיין role כדי לספק משמעות סמנטית לתוכן, וכך לאפשר לקוראי מסך להודיע למשתמשי האתר על האינטראקציה הצפויה של המשתמש עם האובייקט.

יש כמה ווידג'טים נפוצים של ממשק משתמש, כמו תיבות שילוב, סרגל תפריטים, רשימות כרטיסיות וטבלאות עץ, שאין להם מקבילה מקורית ב-HTML. לדוגמה, כשיוצרים תבנית עיצוב עם כרטיסיות, אפשר להשתמש בתפקידים tab, tablist ו-tabpanel. מי שיכול לראות פיזית את ממשק המשתמש למד מניסיון איך לנווט בווידג'ט ולהציג חלוניות שונות בלחיצה על הכרטיסיות המשויכות. אם משלבים את התפקיד tab עם <button role="tab"> כשמשתמשים בקבוצת לחצנים כדי להציג חלוניות שונות, משתמש קורא המסך יודע שהלחצן <button> שבו נמצא המיקוד כרגע יכול להציג חלונית קשורה, במקום להטמיע פונקציונליות רגילה של לחצן.

המאפיין role לא משנה את התנהגות הדפדפן או את האינטראקציות עם המקלדת או עם מכשיר הסמן. הוספת role="button" ל-<span> לא הופכת אותו ל-<button>. לכן מומלץ להשתמש ברכיבי HTML סמנטיים למטרה שבשבילה הם מיועדים. עם זאת, אם אי אפשר להשתמש ברכיב הנכון, המאפיין role מאפשר להודיע למשתמשים בקוראי מסך כשרכיב לא סמנטי הותאם לתפקיד של רכיב סמנטי.

contenteditable

אלמנט עם המאפיין contenteditable שמוגדר כ-true ניתן לעריכה, אפשר להתמקד בו והוא מתווסף לסדר הקלדת Tab כאילו הוגדר לו הערך 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. אין להסיר את מאפיין התצוגה, אחרת בלוק הסגנון ייעלם.

מאפיינים מותאמים אישית

התייחסנו רק לחלק מהמאפיינים הגלובליים של HTML. יש עוד הרבה מאפיינים שחלים רק על רכיב אחד או על קבוצה מוגבלת של רכיבים. גם אם יש מאות מאפיינים מוגדרים, יכול להיות שתצטרכו מאפיין שלא מופיע במפרט. HTML יעזור לכם.

אפשר ליצור כל מאפיין מותאם אישית שרוצים על ידי הוספת הקידומת data-. אפשר לתת למאפיין שם שמתחיל ב-data- ואחריו כל סדרה של תווים קטנים שלא מתחילה ב-xml ולא מכילה נקודתיים (:).

HTML הוא גמיש ולא יתקלקל אם תיצרו מאפיינים לא נתמכים שלא מתחילים ב-data, או אפילו אם תתחילו את המאפיין המותאם אישית ב-xml או תכללו :. עם זאת, יש יתרונות ליצירת מאפיינים מותאמים אישית תקינים שמתחילים ב-data-. כשמשתמשים במאפייני נתונים מותאמים אישית, אפשר להיות בטוחים שלא משתמשים בטעות בשם של מאפיין קיים. מאפייני נתונים מותאמים אישית עמידים בפני שינויים עתידיים.

הדפדפנים לא יטמיעו התנהגויות ברירת מחדל למאפיין ספציפי עם הקידומת data-, אבל יש ממשק API מובנה של מערך נתונים כדי לעבור על המאפיינים המותאמים אישית. מאפיינים מותאמים אישית הם דרך מצוינת להעביר מידע ספציפי לאפליקציה באמצעות JavaScript. מוסיפים מאפיינים מותאמים אישית לאלמנטים באמצעות data-name, ומשתמשים בהם דרך ה-DOM באמצעות dataset[name] באלמנט הרלוונטי.

<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>. בעזרת מאפיין מערך הנתונים, אתם לא צריכים לדעת מהם המאפיינים המותאמים אישית כדי לגשת לשמות ולערכים שלהם:

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

המאפיינים במאמר הזה הם גלובלים, כלומר אפשר להחיל אותם על כל רכיב HTML (אבל לא כולם משפיעים על הרכיבים האלה). בשלב הבא נבחן את שני המאפיינים של תמונת הפתיחה שלא התייחסנו אליהם – target ו-href – וגם כמה מאפיינים ספציפיים לרכיבים אחרים, במסגרת סקירה מעמיקה יותר של קישורים.

בדיקת ההבנה

בודקים את הידע שלכם לגבי מאפיינים.

השדה id צריך להיות ייחודי במסמך.

לא נכון
אפשר לנסות שוב.
True
תשובה נכונה!

בוחרים את המאפיין המותאם אישית שנוצר בצורה תקינה.

data-birthday
תג תקין
birthday
אפשר לנסות שוב.
data:birthday
ניסיון חוזר