המדריך הבסיסי ל-HTML – חלק ט' ואחרון – HTML5

הזמינו אותי לכוס קפה
buy me coffee

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

בראשית ימיה של רשת האינטרנט, לפני מעל ל-20 שנים, הדפדפן ההתחלתי היה יכול לפרש מסמכים אשר היו כתובים ב-HTML‎.
HTML1  תמכה במספר מועט של פורמטים עיצוביים וב-Hyper Links (כיום אנחנו פשוט קוראים להם לינקים) למסמכים אחרים.
במשך 10 השנים הבאות הרשת התמלאה במונחים של חדשנות, תקינות, מספר משתמשים, דפדפנים, שרתי ווב ועוד.
טכנית, HTML5 הוא מפרט של ה-W3C.

יתרונותיה של HTML5

  • פשוטה וקריאה יותר
  • שומרת על התוכן
  • seo friendly
  • ולידציה פשוטה יותר
  • משפר חווית משתמש ו-ux
  • טעינה מהירה יותר

תגיות חדשות 

מבניות המסמך ב-HTML5 מקנה לנו מבנה מסמך פשוט וקריא יותר.
הוסרו תגיות ישנות ונוספו חדשות, והטפסים הפכו להיות יותר אינטואיטיביים.

header
תגית אשר מייצגת את חלקו העליון של האתר, או את חלקו העליון של אזור בדף.
ניתן למשל לעטוף בתגית header את הלוגו ואת תפריט הניווט העליון של דף האינטרנט שלנו
footer
תגית זו מייצגת את חלקו התחתון של האתר, יכול להיות יותר מ-footer אחד בדף האינטרנט שלנו
nav
תגית אשר מייצגת אזור ניווט ראשי באתר.
לרוב נמצא בתוכה רשימות קישורים לאזורים(דפים) שונים באתר
section
תגית אשר מייצגת חלקים כלליים או עיקריים בדף.
לא נשתמש בתגית זו עבור style או script למשל
article
התגית article מייצגת אזור מידע עצמאי, כמו מאמר בפורום למשל.
תגית זו תכיל את הפסקאות והטקסט המרכזי של הדף
aside
תגית אשר מייצגת את החלקים הצדדיים של אתר.
אזור זה מכיל לרוב קטגוריות, כאשר עבור seo, עדיף למקם את התגית אחרי התוכן המרכזי
figure
תגית זו מייצגת אזור אשר עוטף תמונה, גרף או דיאגרמה בהקשר של הטקסט
figcaption
מייצגת כותרת לאלמנט ה-figure, מעולה ל-seo
mark
אלמנט אשר תפקידו לבצע הדגשה בסגנון מארקר של מילה או ביטוי מסוים
HTML5
HTML5

שימו לב לקוד ה-HTML הבא שבו נדגים חלק מיכולותיה של HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML5 Example Page</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="HTML5 Example Page">
  <link rel="stylesheet" href="/assets/css/stylesheet.css?v=1">
</head>
<body>
  <header>
    <h1>HTML5 Example Page</h1>
  </header>

  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>

  <article>
    <h2>Lorem ipsum dolor</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa sunt, 
      eligendi quas mollitia voluptate quaerat minus labore, 
      doloribus officia nobis accusantium nemo eveniet voluptates consequatur laudantium nihil perferendis cupiditate fugit!
    </p>
  </article>

  <aside style="float: right;">
    <a href="">
      <figure>
        <img src="logo.png" width="100" height="100" alt="Description of the image" />
        <figcaption>Caption for the image</figcaption>
      </figure>
    </a>
  </aside>

  <section>
    <h2>This is another headline</h2>
    <div class="someclass">
      This is another text.
    </div>
    <div class="someclass">
      This is another text.
    </div>
  </section>

  <footer>
    Made by <a href="https://g4a.co.il"><mark>g4a.co.il</mark></a>
  </footer>

</body>
</html>
HTML5 simple page exemple
HTML5 simple page exemple

כעת יש לכם את הבסיס שאתם זקוקים לו על מנת להקים אתר אינטרנט משלכם.
אם אתם מרגישים שאתם סגורים על כל הפרקים,
אתם מוזמנים להמשיך אל סדרת המדריכים – מדריך ה-CSS הבסיסי ל-HTML.

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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