לאחר שלמדנו בפרקים הקודמים את כל עקרונות הבסיס של 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 –
- אלמנט אשר תפקידו לבצע הדגשה בסגנון מארקר של מילה או ביטוי מסוים
שימו לב לקוד ה-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>
כעת יש לכם את הבסיס שאתם זקוקים לו על מנת להקים אתר אינטרנט משלכם.
אם אתם מרגישים שאתם סגורים על כל הפרקים,
אתם מוזמנים להמשיך אל סדרת המדריכים – מדריך ה-CSS הבסיסי ל-HTML.
