Quick Intro to HTML5

I’m guessing, you might end your evening with this Article, Introduction on HTML5 which gives quick turnaround which is very basic information.


All of Greatest languages has their own History, Why Not HTML5 after SGML

  1. HTML 1991 (draft)
  2. HTML 2.0 1995
  3. HTML 3.2, 1997
  4. HTML 4.01, 1999
  5. XHTML 2000
  6. HTML5 2014
  7. HTML5.1 2016 (draft)

2. HTML Elements

So, What then does it mean, Currently Industry using HTML5, Lets look at various categories of HTML5 Elements.

2.1 Block Level Elements: These elements are basic elements which will construct the web page in HTML5.

<header>, <footer>, <article>, <section>, <aside>, <nav>, <main>, <div>, <figure>, <form>

2.2 Inline Level Elements: Elements that doesn’t have any line breaks before and after unlike Block-level elements.

<span>, <img>, <a>, <input>, <select>

2.3 Heading Elements: Except h1 tag, all other tags can be used multiple times.

<h1>, <h2>, <h3>, <h4>, <h5>,<h6>

2.3 Content Elements: Elements that can hold your web content.

<p>, <h1> to <h6>, <span> ...much more

2.5 Navigation Element: Unique Element which will hold a fame which is anchor element.

<a href="url">Text or <img ... /></a>

2.6 Replacing Elements: Elements will be replaced with graphical representation.

<input>, <select>, <button>, <img>

2.7 Empty Elements: These are empty element due to non-exist of end tags but its good to add slash in the start tag to have a structural unit.

<hr/>, <br/>, <meta charset="UTF-8"/>, <link rel="stylesheet" .../>

2.8 Formatting Elements: These presentational elements normally not required now since we are using CSS files.

<b>, <strong>, <i>, <em>, <ins>, <del>, <small>, <mark>, <sub>, <sup>

2.9 Quoted Elements: These elements helps to quote and guide to Browser and Search Engine on its own good.

<q>, <blockquote>, <abbr>, <address>

2.10 Bidirectional Elements: Elements helps for arabic language to reverse the text direction from left to right (ltr) or right to left (rtl).

<bdo dir=”rtl”>

2.11 Code Elements: Elements explain about your programming code.

<kbd>, <samp>, <code>, <var>

2.12 New Form Elements: Elements newly introduced for various need in the form.

number, date, time, calendar, and range, datalist, keygen, output, much more

2.13 Graphic elements: These elements improves the graphical representation like 3D and high clarity pictures.

<svg> and <canvas>

2.14 Multimedia elements: These elements replaced flash and applets objects.

<audio> and <video>, <embed>, <track>, <source>


Yup, its not over, It has few cool APIs:

  1. Geolocation
  2. Drag and Drop
  3. Local Storage
  4. Session Storage
  5. Application Cache (deprecated and Work in Progress)
  6. Web Workers
  7. Aria Elements

4. Things You should Know

  1. Use “<!doctype html>” for using lower case elements and attribute names.
  2. Use <element> is valid and <Element> and <ELEMENT> is Bad.
  3. Quote the Attribute values, if the value contains spaces.
  4. Declare the lang is important. “<html lang=”en-US”>”.
  5. Declaring the Charset is mandatory. “<meta charset=”utf-8″>”
  6. HTML ID Attribute is case sensitive. (<div id=”header”> and <div id=”Header”> is different).
  7. You can have multiple “<header> and <footer>” elements in one page. one in root and another in article and section.
  8. “<article>” in “<article”> is valid, “<div>” in “<article>” is valid. “<div>” in “<section>” and “<section>” in “<article>” is Valid.