HTML Cheat Sheet: דף עזר מהיר
עודכן לאחרונה
מבנה המסמך
כל עמוד HTML מתחיל בשלד הזה.
| אלמנט | מה הוא עושה |
|---|---|
<!DOCTYPE html> | מצהיר שהמסמך הוא HTML5 (השורה הראשונה) |
<html lang="en"> | אלמנט השורש; lang קובע את השפה |
<head> | מטא-נתונים: כותרת, קישורים, סקריפטים. לא מוצג בעמוד |
<meta charset="UTF-8"> | קידוד התווים (תמיד לכלול) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | התאמת קנה מידה רספונסיבית במובייל |
<title> | כותרת העמוד שמוצגת בלשונית הדפדפן ובתוצאות החיפוש |
<body> | כל מה שנראה בעמוד נמצא כאן |
טקסט וכותרות
| אלמנט | מה הוא עושה |
|---|---|
<h1> … <h6> | כותרות, <h1> החשובה ביותר (אחת לעמוד) |
<p> | פסקת טקסט |
<br> | ירידת שורה (בלי תגית סוגרת) |
<hr> | הפרדה נושאית / קו אופקי |
<strong> | טקסט חשוב (מודגש) |
<em> | טקסט מודגש בהטעמה (נטוי) |
<span> | מכל בשורה לעיצוב חלק מהטקסט |
<code> | קוד בתוך שורה |
<pre> | טקסט מעוצב מראש (שומר על רווחים) |
<blockquote> | בלוק טקסט מצוטט |
קישורים ותמונות
| אלמנט | תחביר |
|---|---|
| קישור | <a href="https://coddy.tech">Coddy</a> |
| פתיחה בלשונית חדשה | <a href="..." target="_blank" rel="noopener"> |
| עוגן (קפיצה ל-id) | <a href="#section">Jump</a> |
| תמונה | <img src="cat.png" alt="A cat" width="200"> |
| תמונה רספונסיבית | <img src="..." srcset="..." sizes="..."> |
| איור עם כיתוב | <figure><img ...><figcaption>…</figcaption></figure> |
רשימות
| אלמנט | מה הוא עושה |
|---|---|
<ul> | רשימה לא ממוספרת (עם תבליטים) |
<ol> | רשימה ממוספרת |
<li> | פריט ברשימה (בתוך <ul> או <ol>) |
<dl> | רשימת הגדרות |
<dt> / <dd> | מונח / ההגדרה שלו |
טבלאות
| אלמנט | מה הוא עושה |
|---|---|
<table> | מכל הטבלה |
<thead> / <tbody> / <tfoot> | קבוצות הכותרת, הגוף והתחתית של הטבלה |
<tr> | שורה בטבלה |
<th> | תא כותרת (מודגש, ממורכז) |
<td> | תא נתונים |
colspan / rowspan | מיזוג תאים לרוחב עמודות / שורות |
טפסים ושדות קלט
אבני הבניין של כל טופס שאוסף קלט.
| אלמנט | תחביר / מטרה |
|---|---|
| טופס | <form action="/submit" method="post"> |
| שדה טקסט | <input type="text" name="q" placeholder="Search"> |
| אימייל / סיסמה | <input type="email">, <input type="password"> |
| תיבת סימון / כפתור רדיו | <input type="checkbox">, <input type="radio"> |
| מספר / תאריך | <input type="number">, <input type="date"> |
| תווית | <label for="q">Search</label> |
| טקסט מרובה שורות | <textarea rows="4"></textarea> |
| רשימה נפתחת | <select><option>One</option></select> |
| כפתור | <button type="submit">Send</button> |
| שדה חובה | <input required> |
תגיות סמנטיות ותגיות פריסה
השתמשו בהן במקום ב-<div> גנריים, כדי שדפדפנים, קוראי מסך ומנועי חיפוש יבינו את העמוד שלכם.
| אלמנט | מה הוא מסמן |
|---|---|
<header> | החלק העליון של עמוד או של אזור (לוגו, ניווט) |
<nav> | קישורי ניווט |
<main> | התוכן העיקרי (אחד לעמוד) |
<section> | קיבוץ נושאי של תוכן |
<article> | תוכן עצמאי (פוסט, כרטיס) |
<aside> | סרגל צד / תוכן משני |
<footer> | החלק התחתון של עמוד או של אזור |
<div> | מכל בלוק גנרי (ללא משמעות) |
מאפיינים גלובליים נפוצים
| מאפיין | מה הוא עושה |
|---|---|
id | מזהה ייחודי לאלמנט |
class | שם מחלקה אחד או יותר (עבור CSS / JS) |
style | CSS בתוך השורה (השתמשו במשורה) |
title | טקסט tooltip שמופיע במעבר עכבר |
data-* | מאפיין נתונים מותאם אישית, למשל data-id="42" |
hidden | מסתיר את האלמנט |
כל תגית ומאפיין של HTML שצריך, מקובצים לפי מה שהם עושים. ה-HTML cheat sheet הזה מכסה את שלד העמוד, טקסט וקישורים, תמונות ומדיה, רשימות, טבלאות, טפסים, והתגיות הסמנטיות שנותנות משמעות ל-markup שלכם.
הכול כאן הוא HTML5 סטנדרטי ועובד בכל דפדפן מודרני. העתיקו תגית, או פתחו את עורך האונליין של HTML כדי לערוך אותה עם תצוגה מקדימה חיה, בלי שום הגדרות. בונים את העמוד הראשון שלכם? קורס HTML האינטראקטיבי והחינמי של Coddy מתחיל מהבסיס.
שאלות נפוצות על ה-HTML cheat sheet
האם ה-HTML cheat sheet הזה בחינם?
כן. ה-HTML cheat sheet הזה חינמי לשימוש, בלי צורך בהרשמה. שמרו אותו במועדפים וחזרו אליו בכל פעם שצריך לבדוק תגית או מאפיין.
מה ההבדל בין <section> ל-<div>?
<section> היא תגית סמנטית: היא אומרת לדפדפנים ולקוראי מסך שהתוכן שלה הוא קבוצה נושאית בעלת משמעות, ובדרך כלל יש לה כותרת. <div> לא נושאת שום משמעות, והיא רק מכל גנרי לעיצוב או לסקריפטים. בחרו בתגית סמנטית (<section>, <article>, <nav>) כשיש כזו שמתאימה, והשתמשו ב-<div> רק כשאין.האם כל תגיות HTML צריכות תגית סוגרת?
רובן כן (
<p>...</p>), אבל כמה אלמנטים "ריקים" (void) לא צריכים, כי הם לא יכולים להכיל כלום: <img>, <br>, <hr>, <input>, <meta> ו-<link>. ב-HTML5 אפשר לכתוב אותם עם לוכסן בסוף או בלעדיו.אפשר לתרגל HTML אונליין?
כן. פתחו את עורך האונליין של HTML כדי לכתוב HTML בדפדפן עם תצוגה מקדימה חיה, בלי שום התקנה. כשתרצו מסגרת מסודרת, קורס HTML האינטראקטיבי והחינמי של Coddy מלמד תגיות, טפסים ופריסה צעד אחר צעד.
האם דף העזר הזה מתאים למתחילים?
כן. הוא מתחיל בשלד העמוד ובתגיות היומיומיות שתשתמשו בהן ראשונות, ואז עובר לטפסים ול-markup סמנטי, כך שאפשר להשתמש בחלקים העליונים כבר מהיום הראשון.
משאבים קשורים
עוד דפי עזר
