HTML stands for HyperText Markup Language. HTML5 is the fifth version of HTML. HTML is the markup language of the browser. It is the main pillar in the web technology. It structures all the webpages. So it is IMPORTANT!
<formaction="url"method="post">
<fieldset>
<legend>Who are you ?</legend>
<label>Login :<inputtype="text"name="login" /></label><br/>
<labelfor="pswd">Password :</label><inputtype="password"name="password"id="pswd" /><br/>
<inputtype="radio"name="sex"value="male" />Male<br/>
<inputtype="radio"name="sex"value="female" />Female<br/>
</fieldset>
<label>Your favorite color : <selectname="color">
<option>red</option>
<option>green</option>
<option>blue</option>
</select></label>
<inputtype="checkbox"name="available"value="monday" />Monday<br/>
<inputtype="checkbox"name="available"value="tuesday" />Tuesday<br/>
<textareaname="comments"rows="10"cols="30"placeholder="Write your comments here"><textarea/>
<inputtype="submit"value="Button text">
</form>
Tag
Element
form
form
label
label for input
fieldset
group inputs together
legend
legend for fieldset
input type=“text”
text input
input type=“password”
password input
input type=“radio”
radio button
input type=“checkbox”
checkbox
input type=“submit”
send form
select
drop-down list
option
drop-down list item
optgroup
group of drop-down list items
datalist
autocompletion list
textarea
large text input
HTML5 Semantic
Page Layout
<header>My website</header>
<nav>
<ahref="page1">Page 1</a>
<ahref="page2">Page 2</a>
<ahref="page3">Page 3</a>
</nav>
<section>
Hello everybody, Welcome to my website !
</section>
<article>
<header>
<h2>Title</h2>
</header>
<p>
My article
</p>
</article>
<aside>
Writen by me
</aside>
<sectionid="comments">
<article>Comment 1</article>
<article>Comment 2</article>
</section>
<footer>
Copyright notice
</footer>
Tag
Element
header
header of document or section
footer
footer of document or section
section
section
article
article, forum post, blog post, comment
aside
aside content related to surrounding content
nav
navigation links
New Elements
<figure>
<imgsrc="image.png"alt="figure 1" />
<figcaption>Figure 1</figcaption>
</figure>
<details>
<summary>Declaration of M. X on <timedatetime="2013-12-25">Christmas day</time></summary>
<p>M. X said...</p>
</details>
Downloading progress : <progressvalue="53"max="100"></progress>
Disk space : <metervalue="62"min="10"max="350"></meter>