תיעוד HTML עם דוגמאות להרצה: מאפיינים (attributes)

Q: מהו מאפיין (attribute) ב-HTML?

מאפיין הוא מידע נוסף שנכתב בתוך תגית הפתיחה בצורה name="value". הוא מגדיר את האלמנט: href קובע לאן קישור מוביל, src ו-alt מתארים תמונה, ו-class ו-id מאפשרים ל-CSS ול-JavaScript למצוא את האלמנט.

Q: מה ההבדל בין class ל-id ב-HTML?

id חייב להיות ייחודי בעמוד ומזהה אלמנט אחד, עבור קישורי #fragment, ו-getElementById. class יכול להיות משותף לאלמנטים רבים, ולאלמנט אחד יכולות להיות כמה מחלקות מופרדות ברווחים. השתמשו במחלקות לעיצוב.

Q: איך מוסיפים כמה class לאלמנט HTML?

כתבו אותן במאפיין class אחד, מופרדות ברווחים: . כתיבת class פעמיים לא עובדת: הדפדפן שומר רק את הראשון.

Q: למה הכפתור שלי עדיין מושבת עם disabled="false"?

disabled הוא מאפיין בוליאני: עצם הנוכחות שלו פירושה אמת, לא משנה מה כתוב בערך. כדי להפעיל את האלמנט, הסירו את המאפיין, או הגדירו button.disabled = false ב-JavaScript, מה שמסיר אותו.

Q: אפשר להמציא מאפייני HTML משלי?

השתמשו בקידומת data-: data-price="12" או data-user-id="7" תקינים בכל אלמנט וניתנים לקריאה ב-JavaScript דרך element.dataset. שמות מומצאים בלי הקידומת הם HTML לא תקין.

מה הם מאפייני HTML

מאפיין (attribute) מוסיף מידע לאלמנט. הוא נכתב בתוך תגית הפתיחה: שם, סימן שוויון וערך במרכאות, name="value". לאלמנט יכול להיות כל מספר של מאפיינים, מופרדים ברווחים.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href אומר לקישור לאן ללכת, src ו-alt מתארים את התמונה, ו-type, placeholder ו-required מגדירים את שדה הקלט. לכל אלמנט יש סט מאפיינים משלו, וכמה מהם (המאפיינים הגלובליים שבהמשך) עובדים על כל אלמנט.

כללי תחביר

<input type="text" name="city" value="Paris" disabled>

שם, סימן שוויון, ערך במרכאות. מרכאות כפולות הן המוסכמה; גם גרשיים בודדים עובדים (title='Say "hi"' היא הדרך לשים מרכאות כפולות בתוך ערך).
שמות לא תלויי רישיות. CLASS ו-class הם אותו מאפיין. ערכים כן תלויים: class="Box" ו-class="box" הן מחלקות שונות.
המרכאות אופציונליות כשאין רווחים, אבל שימו אותן בכל זאת. class=big box נותן לאלמנט את המחלקה big ומאפיין שני, חסר משמעות, בשם box.
הסדר לא משנה. <img alt="" src="a.png"> זהה ל-<img src="a.png" alt="">.
כל שם פעם אחת לאלמנט. אם מאפיין מופיע פעמיים, הדפדפן שומר את הראשון ומשמיט את השני בשקט.

מאפיינים בוליאניים

חלק מהמאפיינים הם דלוק או כבוי. אצלם הנוכחות פירושה אמת, והערך נזנח. disabled, checked, required, readonly, hidden, multiple, autofocus ו-open פועלים כולם כך.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

הכפתור השלישי מושבת למרות שהערך אומר false, כי הדפדפן בודק רק אם המאפיין קיים. כדי לכבות מאפיין בוליאני, הסירו אותו. ב-JavaScript, button.disabled = false עושה בדיוק את זה.

המאפיין class

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

כל מחלקה נוספת מוסיפה את הכללים שלה מעל הקודמים. ב-CSS בוחרים מחלקה עם נקודה (.card); ב-JavaScript, element.classList.add('featured') ו-classList.remove משנים אותן. מחלקות הן הדרך הרגילה לעצב: רוב ה-CSS שלכם יכוון למחלקות.

המאפיין id

id נותן לאלמנט שם שחייב להיות ייחודי בעמוד. השתמשו בו כשצריך בדיוק אלמנט אחד: יעד של קישור, <label for> או document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

לחיצה על התווית מעבירה את המיקוד לשדה הקלט, כי for="email" מצביע על id="email". הקישור גולל אל #pricing כי המקטע ב-href תואם ל-id.

	`class`	`id`
כמה אלמנטים יכולים לחלוק אותו	כל מספר	אחד (ייחודי)
ערכים לאלמנט	כמה, מופרדים ברווח	אחד
סלקטור CSS	`.name`	`#name`
שימוש נפוץ	עיצוב קבוצות של אלמנטים	יעדי קישורים, תוויות, אלמנט ספציפי אחד ב-JavaScript

id לא יכול להכיל רווחים. התחילו אותו באות כדי שיהיה קל להשתמש בו ב-CSS: #2col אינו סלקטור CSS תקין בלי escaping.

מאפיינים גלובליים

המאפיינים האלה עובדים על כל אלמנט:

מאפיין	מה הוא עושה
`id`	שם ייחודי לאלמנט
`class`	רשימת שמות מחלקות מופרדת ברווחים
`style`	CSS מוטבע, כמו `style="color: red"`
`title`	טקסט טולטיפ שמוצג במעבר עכבר
`lang`	שפת התוכן, כמו `lang="fr"`
`dir`	כיוון הטקסט: `ltr`, `rtl` או `auto`
`hidden`	מסתיר את האלמנט (בוליאני)
`tabindex`	הופך אלמנט לבר מיקוד עם Tab, או קובע את הסדר שלו
`contenteditable`	מאפשר למשתמש לערוך את הטקסט של האלמנט
`data-*`	נתונים משלכם, נקראים עם JavaScript

למאפיין lang יש עמוד משלו כי הוא משפיע על קוראי מסך, תרגום וחיפוש.

מאפייני data-*

כשצריך לשמור ערך משלכם על אלמנט, הוסיפו לשם את הקידומת data-. כל שם עובד אחרי הקידומת, ו-JavaScript קורא את הערכים דרך element.dataset, כשהמקפים הופכים ל-camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id הופך ל-dataset.productId. הערכים תמיד חוזרים כמחרוזות, אז המירו עם Number() לפני חישובים. גם CSS יכול לבחור לפיהם: [data-price="4.50"].

טעויות נפוצות

כתיבת class פעמיים. <div class="a" class="b"> שומר רק את a. שימו את שניהם במאפיין אחד: class="a b".
שימוש חוזר ב-id. שני אלמנטים עם אותו id שוברים קישורי #links, תוויות ו-getElementById, שמחזיר רק את הראשון. השתמשו במחלקה לכל דבר שחוזר.
disabled="false" או checked="false". המאפיין עדיין קיים, אז הוא עדיין פעיל. הסירו אותו במקום.
ערכים בלי מרכאות עם רווחים. alt=My photo מגדיר את alt כ-My. שימו מרכאות סביב כל ערך.
המצאת מאפיינים בלי data-. <div price="4"> הוא HTML לא תקין ועלול להתנגש במאפיין תקני עתידי. השתמשו ב-data-price.

שאלות נפוצות

מהו מאפיין (attribute) ב-HTML?

מאפיין הוא מידע נוסף שנכתב בתוך תגית הפתיחה בצורה name="value". הוא מגדיר את האלמנט: href קובע לאן קישור מוביל, src ו-alt מתארים תמונה, ו-class ו-id מאפשרים ל-CSS ול-JavaScript למצוא את האלמנט.

מה ההבדל בין class ל-id ב-HTML?

id חייב להיות ייחודי בעמוד ומזהה אלמנט אחד, עבור קישורי #fragment, <label for> ו-getElementById. class יכול להיות משותף לאלמנטים רבים, ולאלמנט אחד יכולות להיות כמה מחלקות מופרדות ברווחים. השתמשו במחלקות לעיצוב.

איך מוסיפים כמה class לאלמנט HTML?

כתבו אותן במאפיין class אחד, מופרדות ברווחים: <div class="card featured dark">. כתיבת class פעמיים לא עובדת: הדפדפן שומר רק את הראשון.

האם מאפייני HTML צריכים מרכאות?

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

למה הכפתור שלי עדיין מושבת עם disabled="false"?

disabled הוא מאפיין בוליאני: עצם הנוכחות שלו פירושה אמת, לא משנה מה כתוב בערך. כדי להפעיל את האלמנט, הסירו את המאפיין, או הגדירו button.disabled = false ב-JavaScript, מה שמסיר אותו.

אפשר להמציא מאפייני HTML משלי?

השתמשו בקידומת data-: data-price="12" או data-user-id="7" תקינים בכל אלמנט וניתנים לקריאה ב-JavaScript דרך element.dataset. שמות מומצאים בלי הקידומת הם HTML לא תקין.

מושגים קשורים