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|
Change the HTML4 doctype:
To HTML5 doctype:
Change the encoding information:
to HTML5 encoding:
In HTML5, it is optional to close empty elements.
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:
<p title='Hello "NTR" Junior'>
Or vice versa:
<p title="Hello 'NTR' Junior">
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.
<meta name="viewport" content="width=device-width, initial-scale=1">
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.