HTML5 על מה המהומה?

כבר כמה שנים עולם האינטרנט נימצא בתנועה מתמדת קדימה.

מאז אוקטובר 2015   ניכנס חוק הנגישות לתוקף ואיתו ניקבע סופית קוד חדש לבניית האתרים. HTML5 !

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

HTML5 לא בא לבדו…  ערכו הרבה בחיבורו עם קוד הסטיילינג CSS3 המתקדם והמאפשר עוד ועוד אפשרויות לנווט בדף האינטרנט, להציג או שלא להציג, לבחור תצוגה לפי גדלי מסכים ועוד..

לכן אני מראה פה את הבסיס לHTML5 ובעיקר העברונות הבסיסיים ביותר שלו.

כמובן שכל זה הולך יום יום קדימה ומשתכלל ומשתדרג ויש לעקוב ולהתעדכן.

נתחיל בתזכורת לגרסת html4 הקיימת באתר ההדרכה שלנו שם תמצאו את התגים הבסיסיים וכיצד משתמשים בהם. כמה אלמנטים מהגרסה הישנה יוצאים משימוש או משנים את יעודם בגרסת ה5 אך לפיw3c שהם המכתיבים את הסטנדרטים ברשת – יש לנו מספיק זמן להפנים ועדיין להשתמש בגרסת ה 4 , במקרה הקרוב יותר עד שנת 2014 ובהכרזה האחרונה מבטיחים סיום מוחלט של בניית התקן עד לשנת 2022. יש למה לצפות..:)

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

  • תגי המסמך והגדרת הדף
  • התגים החדשים ומה יעודם.
  • שימוש נכון בסגנונות
  • טיפול במדיות השונות.
  • נענה על שאלות הבאות מכם.

נתחיל..

התגים החדשים ב html5 – שימו לב – יש לעקוב אחר השינויים בהגדרות ובהתפתחות באתר הרשמי.

1 – המסמך

התג הפותח של המסמך המודע על גרסת השפה יהיה כעת רק – <!doctype html> שימו לב לסימן הקריאה שבסוגריים המשולשים.

*- תג פותח לדף יהיהכרגיל הכל התקצר ונהיה פשוט יותר.

2- התגים החדשים וייעודם

התגים העקריים שנוספו קשורים לתפיסת סידור וארגון הדף. (זה ניקרא – סמנטיקה) המחשבה של סדר בדף טובה ונכונה מכמה בחינות.
* סמנטיקה טובה מפרידה בין עיצוב לתוכן, שמה את התוכן בצורה מאורגנת בדף, מקלה על משקלו באופן כללי- ומאפשרת טעינה מהירה של הדף לדפדפנים.
* הקלה בקריאת המסמך על ידי תוכנות קוראות מסך למוגבלויות שונות.
*

התגים הבסיסיים של מבנה הדף נישארים.. כלאמר – מבנה דף בסיסי יראה כך

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

ואז נוספו התגים הבאים כדי לסדר טוב יותר את המסמך-

הפותח את המסמך בחלק הבודי יהיה ההדר-  

<header>

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

HTML5Doctor.com

אילו ההדרים אותם אנו מכירים, גודלם בהתאם לחשיבותם ומכאן H1 הוא הגדול והחשוב יותר והיתר בסדר יורד.
עד כה טוב היה לשים H1 פעם אחת לדף כדי להציג את כותרת הדף החשובה. ואחריה את תתי הכותרות בהתאם.
כעת כשהדף מחולק לסקשנים ולארטיקלים וכל אחד הוא נושא בפני עצמו – יש לתת כותרת h1-6 לכל חלק בניפרד ואין זה נחשב לכפילות או הורדת הערך של הכותרות. להפך. הסמנטיקה הטובה היא לתת לכל מחלקה את הכותרת החשובה שלה. בתנאי שאכן חילקנו את הדף למחלקות ולארטיקלים.
אין צורך לתת דוגמה – ובכל זאת..

 

<body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
<h1>Diving in</h1>
</section>
<section>
<h1>Simple shapes</h1>
</section>
<section>
<h1>Canvas coordinates</h1>
<section>
<h1>Canvas coordinates diagram</h1>
</section>
</section>
<section>
<h1>Paths</h1>
</section>
</body>

<hgroup> משמש לצרף יחד לקבוצה כמה כותרות יחד באותו הסקשן.

<hgroup>
<h1>כותרת חשובה ראשונה</h1>
<h2>כותרת חשובה שניה – מחוברת אליה בגרופ</h2>

</hgroup>

<nav> זהו החלק השמור לתפריט האתר.
ההגדרה אומרת שבחלק זה יופיעו קישורים המובילים להתניידות באתר. הכוונה כמובן לתפריט ולא סתם מקבץ קישורים.

<nav>
        <ul>
                        <li>Nav Link</li>
                        <li>Nav Link</li>

                        <li>Nav Link</li>
        <ul>
</nav>

<article>


הכוונה אינה לכתיבת מאמר אלא לחלק שבו יש תוכן עצמאי. התוכן העצמאי יכול להכיל :
טופס לשליחה, מאמר ממגזין,פוסט בבלוג או כל חלק תוכן עצמאי. תג הarticle יכול להיות מקונן (שוכן בתוך) חלק אחר של הדף, כמו למשל sction ואז הוא מהווה חלק עצמאי של אותו החלק אך חייב להיות קשור אליו רעיונית. (ראה הסבר במקור)

<article>
        <header>
                <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
                by <a href="http://example.com/">שם כותב המאמר</a></h4>

                <time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
        </header>
        <p>
כאן כל התוכן והמאמר באריכות ובפירוט.</p>
</article>

http://dev.w3.org/html5/spec/single-page.html#the-article-element

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

<section>
<h1>Level 1</h1>
        <section>

        <h1>Level 2</h1>
                <section>
                <h1>Level 3</h1>
                </section>
        </section>

</section>

<footer> הוא החותם את המסמך ומכיל בתוכו את כל מה שתרצו לשים כסיומת. בדרך כלל פרטי התקשרות קצרים וזכויות יוצרים.

<aside>מייצג חלק בדף הקשור לתוכן הדף אך יכול להחשב ניפרד ממנו. חלק זה בדרך כלל היא הבר הצדדי.

<aside>
        <h2>Blogroll</h2>
        <ul>
                        <li><a href="#">My Friend</a></li>

                        <li><a href="#">My Other Friend</a></li>
                        <li><a href="#">My Best Friend</a></li>
        </ul>

</aside>
או ראו בקישור הזה

<abbr> מייצג קיצור- ראשי תיבות
מגיע עם title בו נרשום את הצירוף הארוך וזה יראה במעבר עכבר על ראשי התיבות המסומנות בדפדפנים אחדים בקו מנוקד תחתיו.

The

<abbr title="Web Hypertext Application Technology Working Group">

WHATWG</abbr> started working on HTML5 in 2004.
=
The WHATWG started working on HTML5 in 2004.

<audio> מייצג קול או הזרמת צלילים.
הקבצים הניתמכים על ידי דפדפנים הם-

Supported audio codecs:

Chrome 3+ supports .ogg and .wav

Firefox 3.5+ supports .ogg and .wav

Opera 10.5+ supports .ogg and .wav

Safari 4+ supports .mp3 and .wav

<audio src="music.oga" controls>
        <a href="music.oga">Download song</a>

</audio>

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

<p><bdo dir="rtl">Don't cheat by reading this in a mirror!</bdo></p>

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

<figure>
<img … > (or video, table etc)
<figcaption>A rabid unicorn goring a fairy.</figcaption>
</figure>

<video> משמש להצגת וידיאו עם נגן חדש מובנה, התג יכול להכיל בתוכו עוד מידע על הסרט.

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download song</a>
</video>

מכיוון שכמובן לא אני כותבת התקן ולא אני המפרשת אותו.. אני מביאה לכם את הפירוש המעשי שלי הלקוח מהמקורות הבאים-

הכותבים והמפתחים הבלעדיים – הם המורשים והמחליטים – w3c

הנה חלק מרשימה עליה דיברתי- תוכלו להקיש על תג ולקבל את איפיונו ושימושו- באנגלית.

למה html-5

HTML5 and The Future of the Web

New elements in HTML 5

http://html5doctor.com/

מי מתאים ולאיזה קוד?

התאמה לאקספלורר – איך פותרים בעית תאימות

23 Essential HTML 5 Resources

HTML5 Demos

HTML5 Gallery

HTML5 Cheat Sheet

HTML5 Validator

WHATWG Wiki

HTML Working Group

Elements introduced in HTML5

There has been a few elements introduced in HTML5. Some of them were imported from XHTML2, others from large statistical surveys on made by Google, Opera and other people. The analysis of class names and id names helped defining what were the most common semantic patterns. These new elements are not yet completely imported in all browsers at this time.

(MOVED) article

(MOVED) aside

audio

canvas

command

datalist

details

embed

figcaption

figure

footer

header

hgroup

keygen

mark

math

meter

nav

output

progress

rp

rt

ruby

section

source

summary

svg

time

track

video

wbr