אינדקס מדריך HTML5

מבנה העמוד ותגים חדשים

 

מבנה העמוד ותגים חדשים

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

השינויים שבוצעו הם גם בקטעי קוד לייבוא קבצי CSS וקבצי JS. למשל ב-HTML5 לא נצטרך יותר לרשום type="" ואז את סוג הקובץ המיובא בין אם זה JAVASCRIPT או CSS. וזו רק דוגמא קטנ ה.

כך נראה קוד HTML5:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Webmasters.co.il</title>
	<link rel="stylesheet" href="main.css">
	<script src="main.js"></script>
</head>
<body>

	<header>
		<h1><a href="#">HTML5 header</a></h1>
		<nav>
			MENU
		</nav>
	</header>
	
	<section>
		<article>
			<header><h2><a href="#">Content Title</a></h2></header>
			<p>content</p>
			<footer>
				pubish by Lior
			</footer>
		</article>
	</section>	
	
	<footer>2012-2013 All Copyrights ...</footer>
</body>

אין צורך לקפוץ מהכיסא כאן נעבור על ההבדלים העיקריים. הרעיון הוא פשוט: ל-HTML5 יש מבנה קוד עיקרי של תגים חדשים: חלק עליון, חלק מרכזי וחלק תחתון. אבל מה, לא רק הדף עצמו יכול להיות מחולק לחלק עליון, חלק תחתון וכן הלאה אלא גם תת אזורים. כך למשל התגית Article מחולקת ל-3 אזורים עיקריים: חלק עליון של התג header, חלק מרכזי של התוכן בתג p וחלק תחתון של התג footer (למרות שאותו תג גם משתמש כחלק תחתון של העיצוב עצמו עם זכויות יוצרים של האתר.

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

אז בוא נסכם את התגים הסמנטיים של HTML5:
header - אחראי על חלק עליון, footer - אחראי על חלק תחתון, section - אחראי על אזור מסויים, article - מכיל את אזור המאמר, nav - מכיל את התפריט וישנם עוד תגיות שעליהם נדבר בהמשך.

שימו לב לשינוי בהגדרת הדף כדף HTML5 סתכלו על תג ה-doctype הוא הגדרה נורא פשוט ביחס להגדרות של הדפים הקודמים שהיו ארוכים ומסורבלים. וכללו לפעמים דברים שאף אחד מאיתנו לא היה זוכר בעל פה. בנוסף גם ההגדרה של קידוד הדף (במקרה הזה UTF-8) נורא השתנתה ועכשיו היא קצרה ונוחה לשימוש.

בהמשך עוד נכתוב מדריך על קידוד ב-HTML5 עם שימוש בכל התגיות ובכל האלמנטים שעומדים לרשותנו. חשוב לי להזכיר שזה שיש תגים יעודיים ל-HEADER למשל לא אומר שיש להם הגדרות ברירת מחדל כך שהם יעמדו בראש הדף או משהו כזה. אלו דברים שאנחנו צריכים לעשות עם CSS.



יש בעיה? קושי או שאתם רוצים לשאול שאלה? הכנסו לפורום שלנו תשאלו ואנחנו נשמח לעזור!



תפריט


רשימת מדריכים