Exploring Article Writing

Understanding Skeleton for Webpages-HTML

Rushikesh Wagh's photo
Rushikesh Wagh
·

2 min read

What is HTML? It is an Hypertext Markup language which lays out structure of website, Lets Understand it with simple example when we are building house we have to build foundation and layout ,HTML lays out blueprint for website it defines structure of website.

Let us Understand how we can build our first webpage with just HTML,We can write this simple boilerplate template code in code editor and open it with live server and we are done creating our first webpage which will have one header which will display Welcome to My Website.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
    </main>
    <script src="index.js"></script>
  </body>
</html>

Lets Understand this code snippet

<!DOCTYPE html> :This is not an tag but information for browser that document is of type html.

<head> : Tag containing all metadata metadata is nothing but in simple terms we can understand it as data which is required to browser for understanding content in better way as each browser works in different way.It also contains title tag and link tag in it.

The main structure of webpage is written inside <body> tag,all the content which will render on webpage with help of html will be inside body tag .

What are Tags? Tags are keyword used to define and structure content on webpage,they can be self enclosing or non self closing tags as shown in diagram.

Tags are known as Element if it is opening and closing in document.<h1> is tag alone but when it is closed also like <h1>This is my webpage </h1> it is known as Element.

I hope you enjoyed reading this.

ChaiCodeFirst Blog