HTML5

Depreceted Tags :

Semantics :

العنصر يدل على معناه و محتواه مثل

<form></form>
<img src="dd"/>

Syntax :

يمكن كتابة الكود بعدة أشكال و هي صحيحة

الطريقة الأولى >

<img src=" hello.png " alt=" helloWorld " title=" name "/>

الطريقة الثانية >

<img src=' hello.png ' alt=' helloWorld ' title=' name '/>

الطريقة الثالثة >

<img src=' hello.png ' alt=' helloWorld ' title=" name "/>

الطريقة الرابعة >

<img src= hello.png alt= helloWorld title= name />

لاكن هنا سوف تحدث مشكلة عند وضع أكثر من كلاس أو أكثر من أسم

الطريقة الخامسة >

<img src= hello.png
         alt= helloWorld
         title= name />

الطريقة السادسة >

possible but is not the best practice [Capital and Small or capital only ]

<IMG src= hello.png
         ALT= helloWorld
         title= name />

in html5 you can not close the tag and you can delete the body tag and the head tag but is not mean anything

الطريقة السابعة >

<img src=" hello.png " alt=" helloWorld " title=" name ">//you can delete Self close but if you append xml in your page the correct thing is do a self close

Migrate :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="file.js"></script>
  </head>
  <body>
  </body>
</html>

Support Html5 :

I : Download

html5shiv

Download and copy html5shiv.min.js and paste in folder javascript

II:Target

<!--[if lt IE 9]>
  <script src="html5shiv.min.js"></script>
<![endif]-->

New Tags : Header, Nav, Article, Section, Footer

hello Header
Article Name //header
This is Section
Article Name
This is Section
this is footer

New Tags : Main, Aside

hello Header
Hello Main
Article Name //header
This is Section
Article Name
This is Section
this is footer

New Tags : Progress, Meter

Progress 1:

<progress></progress>

Progress 2:

<progress value="1" max="10" ></progress>

Progress 3:

<progress value=".4" max="1" ></progress>

Meter 1:

<meter></meter>

Meter 2:

<meter min =".1" max ="1" value =".5" low =".2" high =".8" optimum =".7"></meter>

Meter 3:

<meter min =".0" max ="1" value =".1" low =".2" high =".8" optimum =".7"></meter>

Meter 4:

<meter min =".0" max ="1" value =".9" low =".2" high =".8" optimum =".7"></meter>

Meter 5:

<meter min =".0" max ="1" value =".7" low =".2" high =".8" optimum =".7"></meter>

Meter 6:

<meter min =".0" max ="1" value =".1" low =".3" high =".8" optimum =".8"></meter>
HTML5 progress element

New Tags : Details, Mark, Wbr

Details 1:

<details>
  <ul>
    <li>REF 1</li>
    <li>REF 2</li>
    <li>REF 3</li>
  </ul>
<details>

Details 2:

Click To see The links
<details open>
<summary>Click To see The links</summary>
  <ul>
    <li>REF 1</li>
    <li>REF 2</li>
    <li>REF 3</li>
  </ul>
</details>

Mark :

This is HTML5

<p>This is <mark>HTML5</mark></p>

Wbr :

قم بتصغير حجم Div لكي ترى التغيير

https://www.youssefbe.org/courses/html/vr-5/tags/name/wbr/vr_2018/index.html
https://www.youssefbe.org/courses/html/vr-5/tags/name/wbr/vr_2018/index.html

New Tags : Figure, Figcaption

Figure :

figure
The Figure Number 1
<figure>
  <img src="https://www.placehold.it/100/100">
  <figcaption>The Figure Number 1</figcaption>
</figure>

New Tags : Time, Dialog, Bdi

Time :

This post created on
<span>This post created on</span><time datetime="2017-11-19T15:56">Sunday,November 19, 2017</time>

Dialog :

Click to go [dialog]
<dialog open>Click to go [dialog]</a>

BDI :

Top members

Ali: 100pts

Amine:200 pts

Jamal: 300pts

علي:140pts

<p>Top members</p>
<p>Ali : 100pts</p>
<p>Amine : 200pts</p>
<p>Jamal : 300pts</p>
<p><bdi>علي</bdi> : 200pts</p>

New From Element : DATALIST

<form>
  <label>What you want to learn ?</label>
  <datalist id="Education">
    <option value="HTML5">
    <option value="html4">
    <option value="Css2">
    <option value="Css3">
    <option value="Javascript">
    <option value="Jquery">
    <option value="PHP">
    <option value="Python">
  <datalist>
  <input type="submit">
</form>

New From Element : Output

  <form oninput="result.value ='='+ parseInt(age.value)*365+' days'">
    <input type="text" name="age">
    <output name="result" ></output>
  </form>

Multimedia Element : audio

Play the audio

<audio controls autoplay loop muted preload="none">
  <source src="ad.mp3" type="audio/mpeg " >
  <source src="ad.ogg" type="audio/ogg " >
  Your Browser does not support the audio technologie
</audio>

يجب وضع أكثر من صيغة للصوت لدعم المتصفحات الأخرى

controls تعني تشغيل المتحكمات في الصفحة

autoplay تعني تشغيل ملف الصوت عند تحميل الصفحة

loopتعني تكرار الملف

muted تعني كثم الصوت

preloadتحميل

Multimedia Element : Video

Play The video :

<video controls autoplay loop muted preload="none" poster="play.jpg" width="100%">
  <source src="bismilah.mp4" type="video/mp4 " >
  <source src="bismilah.ogg" type="video/ogg " >
  <source src="bismilah.webm" type="video/webm " >
  <track src="engtrack.vtt" kind="subtitles" kind="caption" srclang="en" label="English" >
  <track src="artrack.vtt" kind="subtitles" kind="metadata" srclang="ar" label="Arabic" >
  Your Browser does not support the video technologie
</video>

Form input : Color,range,Number

color:

<input type="color" name="color" value="#00ADB5">

Range :

<input type="range" name="choose" min="0" max="20" value="1" step="2">

number:

<input type="number" name="number" min="0" max="30" step="2">

Form input : Email,Search,Url,Tel

Email :

<input type="email" name="email" >

Search :

<input type="search" name="search" >

Url :

<input type="url" name="link" >

TEL :

<input type="tel" name="telephone" >

Form input : Time,Date,Month,Week

Date :

<input type="date" name="date" >

Time :

<input type="Time" name="Time" >

DateTime :

<input type="datetime-local" name="datetime" >

Week :

<input type="Week" name="Week" >

Month :

<input type="Month" name="Month" >

Form Atrributes : disabled,required,AutoComplete,AutoFocus,NoValidate

disabled :

<input type="text" name="username" disabled >

required :

<input type="text" name="username" required >

AutoComplete :

<input type="email" name="username" autocomplete="on" >
<input type="email" name="username" autocomplete="off" >

AutoFocus :

<input type="email" name="username" autofocus="on" >
<input type="email" name="username" autofocus="off" >

Novalidate :

<input type="email" name="username" Novalidate="on" >
<input type="email" name="username" >

Form Attributes : Action,Method,EncType

<form action = "process.php" method="get" enctype="multipart/form-data">
   <input type = "submit" value="default Submit">
   <input type = "submit" value="other Submit" formaction="other.php" formmethod="post" >
</form>
form attributes

Form Attributes : form,formnovalidate,formtarget

this is input outside the form :

<form id="sendmealso">
  <input type="text" name="text" placeholder="name" >
  <input type="email" name="email" placeholder="email" >
  <input type="submit" value="submit">
  <input type="submit" value="submit without validation" formnovalidate>
  <input type="submit" value="submit in new window" formnovaidate formtarget="_blank">
</form>
  <input type="password" name="password" placeholder="password" form="sendmealso">

Form Attributes : Multiple,Placeholder,Required

multiple :

يمكن كتابة أكثر من اميل في نفس الحقل و رفع أكثر من ملف

your can write multiple email and bettwen you write comma,

you can upload multiple file
<form>
  <input type="email" name="email" multiple >
  <input type="file" multiple>
  <input type="submit">
</form>

placeholder:

<input type="text" name="username" placeholder="enter your name " >

Required:

<input type="text" name="username" required >

Form Attributes : Min,Max,Step ,Pattern

Min Max Step :

<input type="number" name="number" min="0" max="30" step="2">

pattern:

<input type="text" name="username" pattern="[A-Z]{4}" required >

Form Attributes : Readonly ,Disabled

Readonly:

possibleToSend
<input type="text" name="username" value="read-field" Readonly >

disabled:

notpossibletosend
<input type="text" name="username" value="dis-field" disabled >