HTML

אלמנטים לטקסט

כותרות (Headings)

HTML מספק 6 רמות של כותרות, מ-<h1> (הגדולה ביותר) עד <h6> (הקטנה ביותר):

<h1>כותרת ראשית - הכי חשובה</h1>
<h2>כותרת משנית</h2>
<h3>כותרת שלישית</h3>
<h4>כותרת רביעית</h4>
<h5>כותרת חמישית</h5>
<h6>כותרת שישית - הכי פחות חשובה</h6>

כללים: - ✅ רק <h1> אחד בדף (חשוב ל-SEO) - ✅ שמרו על היררכיה (אל תדלגו מ-h1 ל-h4) - ✅ השתמשו לפי משמעות, לא לפי גודל

<!-- ✅ נכון -->
<h1>שם האתר</h1>
<h2>מאמר ראשי</h2>
<h3>נושא משנה</h3>

<!-- ❌ שגוי - דילוג ברמות -->
<h1>כותרת</h1>
<h4>משהו</h4>

פסקאות (Paragraphs)

תגית <p> יוצרת פסקה:

<p>זוהי הפסקה הראשונה. היא מכילה טקסט שמתאר משהו.</p>

<p>זוהי פסקה שנייה. שים לב לרווח האוטומטי בין הפסקאות.</p>

💡 הדפדפן מוסיף רווח אוטומטית לפני ואחרי פסקה.

עיצוב טקסט בסיסי

מודגש (Bold)

<!-- משמעות סמנטית - חשוב -->
<strong>טקסט חשוב מאוד</strong>

<!-- רק מראה - בלי משמעות -->
<b>טקסט מודגש</b>

מתי להשתמש: - <strong> - כשהטקסט באמת חשוב - <b> - רק לעיצוב ויזואלי

נטוי (Italic)

<!-- משמעות סמנטית - הדגשה -->
<em>טקסט מודגש</em>

<!-- רק מראה - בלי משמעות -->
<i>טקסט נטוי</i>

מתי להשתמש: - <em> - להדגשה (emphasis) - <i> - למונחים זרים, שמות ספרים

סימון (Mark)

<p>המילה <mark>חשובה</mark> מסומנת בצהוב.</p>

קו תחתון (Underline)

<p>טקסט עם <u>קו תחתון</u></p>

⚠️ זהירות: קו תחתון עלול להיראות כקישור!

קו חוצה (Strikethrough)

<!-- מחיקה עם משמעות - כבר לא רלוונטי -->
<del>מחיר קודם: 100 ש"ח</del>

<!-- רק מראה -->
<s>טקסט עם קו חוצה</s>

טקסט שהוכנס

<p>המחיר <del>100</del> <ins>80</ins> ש"ח</p>

טקסט קטן וגדול

<p>טקסט רגיל <small>טקסט קטן</small></p>

<p>טקסט רגיל <big>טקסט גדול</big></p>

כתב עילי ותחתי

<!-- כתב עילי - Superscript -->
<p>E = mc<sup>2</sup></p>
<p>הערה<sup>1</sup></p>

<!-- כתב תחתי - Subscript -->
<p>H<sub>2</sub>O</p>
<p>CO<sub>2</sub></p>

שבירת שורה וקו אופקי

שבירת שורה

<p>
    שורה ראשונה<br>
    שורה שנייה<br>
    שורה שלישית
</p>

קו אופקי

<p>קטע ראשון</p>
<hr>
<p>קטע שני</p>

קוד ומקלדת

קוד בשורה

<p>השתמש בפקודה <code>npm install</code> להתקנה.</p>

בלוק קוד

<pre>
<code>
function hello() {
    console.log("שלום!");
}
</code>
</pre>

פלט מחשב

<p>הפקודה מציגה: <samp>Hello World</samp></p>

קלט מקלדת

<p>לחץ <kbd>Ctrl</kbd> + <kbd>C</kbd> להעתקה.</p>

ציטוטים

ציטוט בשורה

<p>כמו שאמר איינשטיין: <q>הדמיון חשוב מהידע</q></p>

ציטוט בלוק

<blockquote>
    <p>הדמיון חשוב יותר מהידע. כי הידע מוגבל, והדמיון מקיף את העולם כולו.</p>
    <footer>- אלברט איינשטיין</footer>
</blockquote>

מקור ציטוט

<blockquote cite="https://example.com/source">
    ציטוט עם מקור
</blockquote>

כתובות ופרטי קשר

<address>
    נכתב על ידי: נפי<br>
    כתובת: רחוב הדוגמה 123<br>
    אימייל: <a href="mailto:[email protected]">[email protected]</a>
</address>

סיכום התגיות

← חזרה: תחביר בסיסי | → המשך: קישורים ותמונות