היתרונות של בניית אתר עם HTML5


מה זה HTML?

HTML היא שפת תגיות (Markup Language) המהווה את השלד של האתר ולמעשה קובעת את מבנה של האתר ואת כל התוכן שלו. על הבסיס שיוצרת שפת התגיות HTML מולבש העיצוב של האתר באמצעות שפת CSS ובאמצעות JavaScript יוצרים את האינטראקטיביות בין המשתמש לאתר.

HTML5 משמשת תקן ברשת וכללי הטכנולוגיה שלה מוגדרים ע"י ארגון הW3C .

היתרונות של שימוש בגרסה האחרונה HTML5

מאז ששוחררה הגרסה האחרונה של שפת התגיות HTML ב2014 ניתן למנות יתרונות רבים לשימוש בגרסתה האחרונה (HTML5) שמפתחי האתרים יכולים ליישם – היתרונות העיקריים:

  • HTML5 מאפשרת כתיבת קוד נקי וסמנטי יותר, בגרסה החדשה של HTML ניתן למצוא אלמנטים סמנטיים יותר המאפשרים למפתח ליצור קוד יעיל, נקי, וקצר יותר.
  • אתר עם HTML5 מובן יותר למנועי החיפוש, בזכות הקוד הסמנטי של HTML5 מנועי הסריקה של גוגל ומנועי חיפוש נוספים יכולים להבין בצורה טובה יותר את מבנה האתר.
  • אפשרות אחסון מידע במצב לא מקוון.
  • אנימציה מובנת ישירות מהדפדפן, באמצעות שימוש בתגית <canvas>.
  • תמיכה בכל הדפדפנים הגדולים, שפת התגיות HTML5 מותאמת לכל הדפדפנים הגדולים הקיימים היום למשל: Google Chrome, Mozilla Firefox, Microsoft Edge, Opera ועוד…
  • אפשרות לגרירת תוכן ותמונות ישירות לדפדפן והתאמה לCSS3.
  • הצגת מדיה ישירות מהדפדפן ללא שימוש בשפות נוספת – מגוון תגיות חדשות שנוצרו על מנת לתמוך בקלות יותר במדיה חדשה.
  • תמיכה במגוון חדש של תגיות ביניהם אפקטים דו ותלת מימדיים.

סקירה של חלק מהתגיות החדשות

סקירה של התגיות חדשות וכיצד כל תגית משפרת את התוצר הסופי של אתר האינטרנט:

  • <article> – תגית סמנטית אשר מצהיר על מאמר במקום שימוש ב<div> כללי, בזכות תג זה גוגל ומנועי חיפוש נוספים מסוגלים להבין בצורה ברורה יותר מתי יש שימוש במאמר בתוך האתר שלנו.
  • <aside> – תגית המייצגת את האזור הצדדי באתר, תחת תגית זו נהוג להוסיף ציטוטים, מידע שוליים, תוספים, ורכיבי תוכן.
  • <bdi> – תגית המונעת בלבול ושינוי של מבנה המשפט במקרה של הזנת טקסט בשפה שונה ושימוש בתווים שהדפדפן לא תומך בהם.
  • <details> – תגית היוצרת אקורדיון של פרטים הנגלים בלחיצה, ניתן לשנות את הכותרת באמצעות התגית <summary>.
  • <dialog> – תגית המקלה על תהליך יצירת popup ומודלים שונים.
  • <figcaption> – כותרת לתגית <figure> העוטפת תמונה / גרף.
  • <footer> – תגית סמנטית שמגדירה את תחתית העמוד / האתר ותורמת לקוד נקי וברור יותר למפתח האתר ולמנועי החיפוש.
  • <header> – תגית סמנטית שמגדירה את ראש העמוד / האתר ותורמת לקוד נקי וברור יותר.
  • <main> – תגית סמנטית המצהירה על התוכן המרכזי באתר / בעמוד.
  • <nav> – תגית המצהירה על התפריט באתר / בעמוד.
  • <section> – תגית המאפשרת חלוקה של האתר / העמוד לקטעים סמנטיים.
  • <time> תגית שמגדירה את התאריך והשעה.

בנוסף ישנם תגיות נוספת אשר נועדו לעזור בצגה נוחה ונכונה יותר של מדיה כגון:

<picture> <canvas> <svg> <audio> <embed> <source> <track> <video>


ליעוץ וקבלת הצעת מחיר צרו קשר - טלפון: 052-2899380