HTML

תכונות (Attributes)

מה זה Attributes?

תכונות מוסיפות מידע נוסף לאלמנטים:

<תגית תכונה="ערך">תוכן</תגית>

דוגמה:

<a href="https://google.com" target="_blank">גוגל</a>

תכונות גלובליות

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

id - מזהה ייחודי

<div id="main-content">תוכן</div>

class - קלאס

<p class="highlight important">טקסט</p>

style - סגנון inline

<p style="color: blue; font-size: 18px;">טקסט כחול</p>

title - Tooltip

<abbr title="HyperText Markup Language">HTML</abbr>

hidden - הסתרה

<div hidden>אלמנט מוסתר</div>

lang - שפה

<p lang="en">This is English</p>

dir - כיוון

<p dir="rtl">עברית מימין לשמאל</p>
<p dir="ltr">English left to right</p>

tabindex - סדר Tab

<input tabindex="1">
<input tabindex="2">

תכונות Data (data-*)

תכונות מותאמות אישית:

<div 
    data-user-id="123" 
    data-role="admin"
    data-created="2024-12-15"
>
    מידע משתמש
</div>

גישה ב-JavaScript:

const div = document.querySelector('div');
console.log(div.dataset.userId);  // "123"
console.log(div.dataset.role);    // "admin"

תכונות נגישות (ARIA)

role - תפקיד

<div role="navigation">תפריט</div>
<div role="button">כפתור</div>

aria-label - תיאור

<button aria-label="סגור חלון">X</button>

aria-hidden - הסתרה מקורא מסך

<span aria-hidden="true">🎉</span>

aria-describedby - קישור להסבר

<input aria-describedby="help-text">
<p id="help-text">הכנס 9 ספרות</p>

סיכום

← חזרה: אלמנטים סמנטיים | → המשך: שיטות עבודה מומלצות