HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 Style Guide and Migration

HTML5 Migration

This chapter will teach you how to migrate from HTML4 to HTML5.

Let's see how to convert HTML4 page into HTML5 page without any problem in content or structure.

In HTML4 In HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>

Change the HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

To HTML5 doctype:

<!DOCTYPE html>

Change the encoding information:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

to HTML5 encoding:

<meta charset="UTF-8">


Close Empty HTML Elements

In HTML5, it is optional to close empty elements.

Allowed:

<meta charset="UTF-8">

Also Allowed:

<meta charset="UTF-8" />

Quote Attribute Values

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some rare situations, when the attribute value itself contains quotes, it is necessary to wrap attribute value inside single quotes:

Or vice versa:


Set the viewport

Pages optimized for a variety of devices must include a meta viewport tag in the head of the document.

A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling.

Using the meta viewport value width=device-width instructs the page to match the screen's width in device-independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

Some browsers keep the page's width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device-independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.