HTML Layout

Introduction

In the previous article we have learnt the basics of HTML and HTML tags. In this article we will learn the basics of HTML layout. It is very important to understand the meaning of the tags that are the most common one.

HTML Layout

When we develop a website and publish it on a web server, the website can be accessed via its URL e.g. www.w3schools.com. Now, when we try to open this website, by default it loads index.html and it is the name used as homepage of the website.

HTML Layout Example

You can see many things are written in that index page. Among them, we will discuss only the HTML tags below:

HTML Layout

Anatomy of an HTML document

From above example, we can derive that an HTML page includes the following:

  • <!DOCTYPE html>: The <!DOCTYPE> declaration is not an HTML tag. It is an instruction to the web browser regarding the version of HTML, the page is written in. Therefore, it must be the very first thing in your HTML document. <!DOCTYPE html> declaration is for HTML5.
  • <html></html>: The <html> tag represents the root of an HTML document, and you can refer DOM discussed above for the same. The <html> tag tells the browser that the page that is loading is an HTML document.
  • <head></head>: This is the area where we put all those stuffs that will be not visible as a content of our webpage. This includes: CSS source, script source, meta tags, etc.
  • <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />: If your webpage supports Internet Explorer or not, this is specified using X-UA-Compatible and the version is defined in content, here it is IE=edge.
  • <meta charset=”utf-8″>: UTF-8 is an encoding methodology which includes characters of almost every written language. Since, browser understands English only, it is important to use Unicode UTF-8 to tell the meaning of a character to our browser.
  • <title></title>: It is used to set title of our webpage and it appears in the browser tab. You can see “Google Mail Signup” appearing in browser tab in the picture below.
  • <body></body>: It is used to show all the content to our webpage users and it includes texts, images, videos, audios and everything else.

The above code will produce given output:

HTML Layout Output

 

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.