In this article, we are going to learn about basic structure of a web page. So now without wasting much time let’s start.
You can also refer our video tutorial for same.
Now let’s start with this tutorial :
Basic Structure of a Web Page
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="page description here"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
The above code is also called as the starter template or boiler plate of HTML i.e. it is the code that we always write whenever we create a html document.
Now we will understand the above code line by line.
<!DOCTYPE> declaration :
- At the very first line, we have <!DOCTYPE html>. It basically tells the web browser about the type of document that we are creating because the web browser understands different types of documents, that’s why we need to tell the web browser that we are creating a HTML document so that the web browser can display the web page correctly.
- The <!DOCTYPE> declaration is not case sentitive.
- It must appear once at the top of every HTML document.
<html> tag :
- Now comes to second line, we have a <html> tag .
- Any HTML document itself begins with <html> tag and ends with </html> closing tag.
<head> tag :
- Now we have a <head> tag at the 3rd line. Inside the head tag, we have <title> tag which is used to define the title of our web page. We also define meta tags inside <head> tag. The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
- First, we are using the charset attribute of the meta tag. The charset attribute specifies the character encoding for the HTML document.
- Then we are using the description meta tag. This meta tag is used to write the meta description of the web page.
- Then we have another meta tag here named as the viewport. The viewport is defined as the user’s visible area of any web page. The viewport varies with the device and will be smaller on a mobile phone than on a computer screen. This gives the browser instructions on how to control the page’s dimensions and scaling.
- The width=device-width part sets the width of the page to the width of the screen width of the device.
- The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
- All the external sources (for example external CSS, external js file, etc ) are linked inside the head tag.
<body> tag :
- Now at last we have <body> tag. The <body> tag defines the body of our HTML document. Whatever we write inside the body tag, is displayed on the web browser.
- The <body> tag contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Now hope so you have a clear understanding about the boiler plate of any html document.
If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.
Thank you 🙂 Keep Learning !