Image for post
Image for post
  • HTML 4.01 in 1999 …….HTML 5 in 2012.

→ CSS specifies the LAYOUT of the web pages.

→ JS specifies the BEHAVIOUR of web pages.

  • HTML headings are defined with the <h1> to <h6> tags.

<!DOCTYPE html>

  • NOT an HTML tag.
<!DOCTYPE html>

anchor attributes

<a target=”_blank|_self|_parent|_top|framename”>

_blank => Opens the linked document in a new window or tab

_self= > Opens the linked document in the same frame as it was clicked (this is default)

_parent=> Opens the linked document in the parent frame

_top=> Opens the linked document in the full body of the window

attribute=”_blank” in html hyperlink => tells the browser to open a new window (or tab, if that’s the user’s preference) when that link is clicked.

<meta> elements

  • provides metadata about the document.
Image for post
Image for post
Model Box Structure

HTLM 5 APIs

  • Application Cache

Why HTML 5 over HTML 4.01

  • 8 more semantic elements introduced

Block vs Inline

Block

  • block arranges elements within a page flow vertically ( from top to bottom).

Inline

  • block arranges elements within a page flow horizontally( from left to right).

Positioning ( f A R S I ) in HTML

Image for post
Image for post

To start with, create a parent container with 4 boxes side by side.

Image for post
Image for post

position: static

index.html

<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>

style.css

.parent {
border: 2px black dotted;
display: inline-block;
}
.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
#two {
background: green;
}

Live code: JsBin

By default, position is set to static. It positions based on the layout in the flow.

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

Image for post
Image for post

position: relative

This is where position: relative comes in. Move the green box relative to its current position to 20px from the left and top without changing the layout around it. Thus, leaving a gap for the green box where it would have been had it not been position.

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

Live code: JsBin

Position: absolute is the opposite.

Image for post
Image for post

position: absolute

By applying position: absolute to the GreenBox, it will not leave any gap where it would have been. The position of the GreenBox is based on its parent position (the dotted border). Thus, moving 20px to the left and bottom from the top-left origin of the dotted border.

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

Live code: JsBin

In a nutshell …

  • position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent’s position and changing the layout around it.

HTML5 for the mobile web — forms and input types

The full list of input types which are particularly useful for mobile users is:

color date datetime datetime-locale mail month number range search tel time url week

Input type tel vs Input type number

The tel input type is very similar to the number input type. The main difference is in the numeric keypad that is displayed on some browsers.

For number a simple numeric keypad is shown, but for tel the user is presented with a virtual telephone keypad, complete with alphanumeric keys.

HTML vs HAML

  • You are trying to compare Apples to Oranges. Browsers only understand HTML. HAML is just a templating language that gets transformed into HTML (e.g. same final output). If you find the HAML syntax to be easier than HTML then go for it. However IMHO — abstracting away what actual elements you are generating just makes applying CSS and doing JavaScript navigation that much more difficult.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store