כתיבת HTML

זה נראה כקישור, אך Tab דולג עליו

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

קרא את התג ואת האטריבוטות שלו

• לאלמנט יש לעיתים תג פתיחה, תוכן ותג סיום: <p>Meet on Thursday.</p>. אטריבוט מספק מידע בתג הפתיחה: <a href="join.html">Join</a>.
• אלמנט חלול ב-HTML כמו img אין לו תג סיום או תוכן ילד. הוא לא "מתחבר בעצמו"; נתיב סופף (trailing slash) אינו נדרש ב-HTML. השתמש בתגי זוגיים תוך הימנעות מהשתלהם זה על זה.

סימן אזורי דף לפי מטרה

• אלמנטים סמנטיים כוללים nav לנווט גישה ראשי וmain לתוכן המרכזי של הדף. השתמש בכותרות כדי לתאר חלקים והשתמש בdiv לקבוצה כללית כאשר אין אלמנט ספציפי יותר מתאים.
• native a עם href ניווט; native button ביצוע פעולה. סימון סמנטי עוזר, אך תוויות, התנהגות ומיקוד עדיין זקוקים לבדיקה.

בנה דף קטן ומלא

• שמור את הדוגמה הזו כ-index.html לצד join.html אמיתי. פתח אותו בדפדפן ועבור על הקישור באמצעות Tab ו-Enter.
• lang מזוהה שפת הדף; title מיינה לשון הגלילה. הגדרת ה-viewport מאפשרת לסגנונות רספונסיביים להשתמש במרוחב ההתקן.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Robotics club</title>
</head>
<body>
  <nav aria-label="Main"><a href="join.html">How to join</a></nav>
  <main>
    <h1>Robotics club</h1>
    <p>Meet Thursday at 4 pm in room 12.</p>
  </main>
</body>
</html>

בחר חלופות לפי מטרת התמונה

• תמונה מידעית זקוקה לחלופה המעבירה את המשמעות הרלוונטי שלה. תמונה דקורטיבית טהורה משתמשת בדרך כלל בalt="" כך שתוכנות סיוע יעברו עליה.
• עבור תמונה המשמשת כקישור, תאר את פונקציית הקישור כאשר מידע זה אינו מסופק אחרת. גרף מורכב זקוק גם הוא להסבר נתונים חשובים בטקסט.

ודא מבנה והתנהגות

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

מקורות: סינטקס של HTML ו-תמונות דקורטיביים של W3C.