HTML Layout

by | Jun 11, 2020 | Website Development

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

 

Related Posts:

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

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

Advertisement

Advertisement

Advertisement

Advertisement

en English
af Afrikaanssq Albanianam Amharicar Arabichy Armenianaz Azerbaijanieu Basquebe Belarusianbn Bengalibs Bosnianbg Bulgarianca Catalanceb Cebuanony Chichewazh-CN Chinese (Simplified)zh-TW Chinese (Traditional)co Corsicanhr Croatiancs Czechda Danishnl Dutchen Englisheo Esperantoet Estoniantl Filipinofi Finnishfr Frenchfy Frisiangl Galicianka Georgiande Germanel Greekgu Gujaratiht Haitian Creoleha Hausahaw Hawaiianiw Hebrewhi Hindihmn Hmonghu Hungarianis Icelandicig Igboid Indonesianga Irishit Italianja Japanesejw Javanesekn Kannadakk Kazakhkm Khmerko Koreanku Kurdish (Kurmanji)ky Kyrgyzlo Laola Latinlv Latvianlt Lithuanianlb Luxembourgishmk Macedonianmg Malagasyms Malayml Malayalammt Maltesemi Maorimr Marathimn Mongolianmy Myanmar (Burmese)ne Nepalino Norwegianps Pashtofa Persianpl Polishpt Portuguesepa Punjabiro Romanianru Russiansm Samoangd Scottish Gaelicsr Serbianst Sesothosn Shonasd Sindhisi Sinhalask Slovaksl Slovenianso Somalies Spanishsu Sundanesesw Swahilisv Swedishtg Tajikta Tamilte Teluguth Thaitr Turkishuk Ukrainianur Urduuz Uzbekvi Vietnamesecy Welshxh Xhosayi Yiddishyo Yorubazu Zulu