Connect with us

קטגוריות

HTML

איך HTML סמנטי יכול לעזור לנו לכתוב אתרים בצורה טובה יותר

HyperText Markup Language או בקיצור HTML, היא הדרך הפופולרית לתקשר בסביבת web, השפה אומרת לדפדפן איך להציג את האלמנטים (כמו טקסט ותמונות) בדף.

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

אז איך להשתמש נכון בHTML סמנטי?

במאמר זה נציג את התגיות הנפוצות ביותר ואת אופן השימוש בהם:

<header>

תג זה שימושי על מנת הגדיר מידע מקדים אודות הדף או המאמר, כותרות וכ׳ו. תג זה יכול להיות בכל מקום בדף שלנו חוץ מבתוך תגית ה <footer> יכול להיות מצב שיהיו לנו כמה תגי <header> בדף שלנו, זה בסדר.

לדוגמא, בואו נשתמש בתג <header> על מנת לעטוף את כותרת הדף וטקסט אודות הדף

<header>
    <h1>ברוכים הבאים לאתר המדהים שלי!!11</h1>
    <p>יש בו הכל ואין בו כלום!!1</p>
</header>

<nav>

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

<section>

השתמש בתגית ה <section> במקום תגית <div> על מנת להגדיר מקומות במסמך המכילים תוכן אשר קשור אחד בשני. אתה יכול לעטוף מספר פיסקאות, תמונות וסרטון על מנת להסביר (לדפדפן או למנוע החיפוש) שהם קשורים אחד בשני.

<h1>אתר המכוניות הגדול4</h1>
<section>
  <h2>צבעים של מכוניות</h2>
  <h3>סוגים של מכוניות</h3>
  <p>…</p>
  <p>…</p>
</section>
<section>
  <h2>היכן מיוצרות מכוניות</h2>
  <h3>איך מיוצרות מכוניות</h3>
  <p>…</p>
  <h3>מי המציא את המכונית הראשונה</h3>
  <p>…</p>
 </section>

<article>

תגית ה<article> היא תגית המותאמת לתוכן עצמאי, כלומר, תוכן שיראה הגיוני גם מחוץ לקונטקסט של הדף כמו פיד RSS או פלטפורמה אחרת, השתמש בתגית זו על מנת לעטוף כתבות, ופוסטים בבלוג, לדוגמא:

<article>
  <h1>מה חדש בכולם המכוניות?</h1>
  <p>תאריך: 14 לאוקטובר 2018</p>
</article>

<aside>

תגית ה<aside> מגדירה את האיזור הצדדי במסמך הHTML, תחת תגית זו אתם יכולים להוסיף תפריטים, פירסומות, ציטוטים, מידע הקשור למאמר הנמצא ליד  וכ׳ו.

<article>
  <p>
  זה רשמי: חברת טסלה מגיעה לישראל!
  </p>
  <aside>
    <p>
      אילון מאסק השקיע בחברת טסלה מעל 70 מליון דולר מכספו האישי.
    </p>
  </aside>
  <p>
    עוד מידע על טסלה...
  </p>
</article>

<footer>

 בדומה לתגית ה<header>, תגית ה<footer> יכולה להיות בכל מיקום בדף אבל בדרך כלל נמצאת בחלק התחתון ומכילה תוכן תואם כמו תפריט תחתון, טקסט בנוגע לזכויות יוצרים, קורות חיו של כותב המאמר וכ׳ו. במסמך שלנו יכולה להיות יותר מתגית אחת של <footer> ובדרך כלל התגית נמצאת לפני תגית הסגירה של </section> או </body> 

<body>
  <p>תוכן על מכוניות</p>
  <footer>התוכן מוגן בזכויות ושמור רק לי!!1</footer>
</body>

תגיות Heading

חשוב לציין שכל אלמנט <h1> יוצר איזור (section) חדש במסמך גם כן, כל תת תגית Heading (כמו <h2> <h3> וכ׳ו) לא יוצרת איזור חדש  במסמך אך משוייכת לתגית הגבוה מעליה.

מה לגבי תגית <div>?

יש לנו מגוון תגיות שאנו יכולים להשתמש בהן אך זה לא אומר שלתגית ה<div> אין כל משמעות אך הקפידו להשתמש בה כשבאמת צריך.

הקוד למטה יסכם ויראה שימוש נכון בתגיות שלמדנו:

<body>
 <header>
  <h1>הכל על מכוניות</h1>
  <nav>
  <ul>
   <li><a href=’#’>דף הבית</a></li>
   <li><a href=’#’>אודות</a></li>
   <li><a href=’#’>עוד על מכוניות</a></li>
  </ul>
  </nav>
 </header>
<section>
 <article>
  <h2>מה קורה היום בעולם המכוניות?</h2>
  <p>
   היום אנו עדים לייצוא ההמוני הראשון של המכונית המעופפת HumusFly, זה מרגש!
  </p>
 </article>
  </section>
 <footer>
  <h3>תפריט תחתון</h3>
  <p>כל הזכויות שמורות רק לי © </p>
 </footer>
</body>

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

עוד ב HTML

    Meni Edri היי אני מני, מתכנת מנוסה ומאוד אוהב קוד ואת עולם התכנות, הקמתי את CodeHub על מנת שתיהיה לי פינה שבה אוכל לכתוב, ללמד וללמוד, מקווה שתימצאו את הבלוג הזה שימושי.
    קריאה מהנה.

    מאמרים פופולריים

    נושאים פופולריים

    חזרה למעלה