Getting Started with HTML - Building the Skeleton of a Webpage

What’s Inside -

What is HTML?
Behind the Scenes - How HTML Works?
Basic Structure of HTML Page
Example of a Webpage

Let us suppose you are building a house. Before starting the construction, you prepare a blueprint that outlines the layout, including the rooms, doors, windows, and walls. Similarly, HTML serves as the blueprint for a webpage. Without a blueprint, it's unclear where each component belongs; without HTML, a browser cannot render any webpage. HTML is the foundation of any Webpage.

Once the structure is in place, painting, decorating, and beautifying the house requires an additional layer of design. This is where CSS (Cascading Style Sheets) comes in. In this article, we provide a brief introduction to HTML.

What is HTML? -

HTML stands for Hyper Text Markup Language. It tells the browser how to display the page layout and content. It allows the developer to define the structure of the webpage as it should appear in the browser. HTML is the markup language used for creating and designing the structure of a web page. It provides various tags or elements to define different sections of a website.

Behind the Scenes - The Working of HTML -

HTML is the backbone of the Web. The browser renders the Page or Website from top to bottom and displays the content according to the different Tags or Elements provided by the HTML markup. HTML will be rendered by the Browser line by line.

For example, for rendering of image, HTML contains <img> tag

For inserting a heading or a link - it provides with <h1> tag or <a> tag

Basic Structure of HTML -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link />
</head>
<body>
  <!-- Website content goes here -->
</body>
</html>

Now, let us understand each code line by line -

<!DOCTYPE html>

<!DOCTYPE> specifies the version of HTML i.e., HTML5. It helps the Browser to render the Web page correctly.

<html lang=”en”> & </html>

It is the root element of the Webpage, wrapping all the content of the Webpage. Contains lang=“en” to help for browsers to understand the language as per the Attribute.

<head> & </head>

The <head> tag contains metadata (data about data) and other information that doesn't appear on the visible webpage. It also encloses with the closing </head> tag.

<meta>

The <meta> tag provides meta-information to the browser.

<meta charset="UTF-8"> – It defines character encoding.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> – It helps with mobile responsiveness.

<title> & </title>

Used to give the title of the webpage.

<title>Netflix</title>

<link>

Used inside <head> to link the external files or resources like CSS, any favicons, or fonts etc.

<link rel="stylesheet" href="styles.css">

<body> & <body/>

The visible part of the webpage is enclosed with the <body> tag. All the content, like images, headings, links, buttons, text, etc. Everything inside the <body> is rendered on the screen.

<body>
  <h1>Hello World</h1>
  <p>This is my webpage.</p>
</body>

</html>

It closes the HTML document. Used after the </body> tag.

Example of HTML document -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to my Webpage</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis explicabo ipsam voluptatum voluptatibus temporibus odio delectus placeat, esse, quidem iusto deserunt? Officia ipsa odit blanditiis delectus neque exercitationem laudantium perferendis.</p>
    <button>Click Me</button>
</body>
</html>

Preview -

Beginning with HTML is the essential first step on the journey to becoming a web developer. Although it may seem straightforward, HTML serves as the foundation for every website you encounter online. By grasping how HTML functions, understanding its basic structure, and learning to use tags effectively.

Getting Started With HTML - Building the Skeleton of a Webpage

Table of contents