📄 Table of Contents

◉ Introduction

◉ <!DOCTYPE html>

<!DOCTYPE html>

anchor attributes

<meta> elements

Model Box Structure

◉ HTLM 5 APIs

◉ Why HTML 5 over HTML 4.01

◉ Block vs Inline

Block

Inline

Positioning ( f A R S I ) in HTML

position: static

<div class=”parent”>
<div class=”box” id=”one”>One</div>
<div class=”box” id=”two”>Two</div>
<div class=”box” id=”three”>Three</div>
<div class=”box” id=”four”>Four</div>
</div>
.parent {
border: 2px black dotted;
display: inline-block;
}
.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
#two {
background: green;
}

What happens when we want to move the GreenBox but do not want to affect the layout around it?

position: relative

#two {
top: 20px;
left: 20px;
background: green;
position: relative;
}

Position: absolute is the opposite.

position: absolute

#two {
top: 20px;
left: 20px;
background: green;
position: absolute;
}

In a nutshell …

HTML5 for the mobile web — forms and input types

Input type tel vs Input type number

◉ Pseudo-classes

◉ Pseudo-elements

◉ HTML data-* Attributes

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>

◉ HTML Attributes

◉ HTML vs HAML

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.