Every HTML document has a certain code structure. In programming, it is often referred to as boilerplate. The block of code shown below is what every HTML page contains or should contain.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Skeleton</title> <!--All the Elements in here are used by browsers and search engine web crawlers --> </head> <body> <!-- All the elements in here markup the content users see in the screen --> </body> </html>
Let’s try to break it down!
DOCTYPE
It lets the browser know which version of HTML we are using. <!DOCTYPE html> means we are using the latest version of HTML i.e. HTML 5.
HTML 4 had something like
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML
It contains everything that should be in an HTML document apart from the DOCTYPE.
<html> </html>
HEAD
The elements in the head aren’t displayed on the screen but are used to convey important information to browsers or search engine web crawlers. These include your meta tags, link to CSS file, etc.
<head> <!--All the Elements in here are used by browsers and search engine web crawlers --> </head>
Meta
Meta tag used for communicating meta-data to the browser and search engine robots. Meta-data is basically data that describes data. Meta data to describe who wrote the document for which audience can be laid out by using meta tags.
Meta Charset
It’s used to define the character encoding that the document is allowed to use. If you use <meta charset=”utf-8″> then it can handle any human language. But, character encoding such as ISO-8859-1 and ASCII wouldn’t be able to. UTF-8 is the only character set that should be used with HTML5.
<meta charset="utf-8">
Meta Viewport
A browser’s viewport is the space or the screen where the content can be seen. Mobile screen sort of use a virtual viewport and you need to zoom in mobile phones that render web pages made for desktop but that’s not good for webpages designed to be responsive.
<meta name="viewport" content="width=device-width, initial-scale=1">
The code is used as it is for mobile phone optimization. The code above would set the width of the content as much as that of device width and the initial scale would set an initial zoom level that’s fit for the specific device.
Title
It’s used to give the document an unique title that represents the purpose of the webpage. Title of an webpage is displayed in the browser tab.
<title> Title of the page </title>
Body
This element holds everything displayed on the screen. Anything a user is supposed to look at or play with is inside the body tag.
<body> <!-- All the elements in here markup the content users see in the screen --> </body>
And,
You can refer to MDN web docs if you want to go deeper and stay tuned to Techsathi for more content like this.
