HTML Introduction

Free HTML Developer Roadmap 2025 HTML roadmap for beginners Learn HTML step by step roadmap HTML learning path infographic

A complete FREE HTML Developer Roadmap to learn HTML from scratch with projects.

HTML is the abbreviation of HyperText Markup Language and it is an invisible framework for every web page. If you think about website as a house then HTML could be the wooden frame and bricks and CSS could be colors for the walls and the furniture.

1. What is HTML?

Basically, HTML is a “markup” language. This is a language that uses tags (special instructions) to tell a web browser (such as Google Chrome or Safari) how to display pictures, text and buttons. As an example it may tell the web browser, “this is a big heading” or “this is a link”.

2. The Basic Structure of a Page

Every HTML file also has a very strict “parent-child” hierarchy. First, you have to tell what kind of document it is, and then you include all within a tag.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Welcome to My Site</h1>
    <p>This is a simple paragraph of text.</p>
  </body>
</html>

Key Sections:

<head>: The ‘metadata’ of the page or information relating to it. It specifically contains the title of the page and the links to CSS files.
<body>:holds all the content that the user will see such as text, images and videos..

3. Elements and Tags

Most plain HTML elements are just that, starting with an opening tag, then having some content and then ending with a closing tag.

Opening Tag: <p> (Tells the browser a paragraph is starting)
Content: “Hello World!”
Closing Tag: </p> (The forward slash / tells the browser the element is finished)

4. Common HTML Elements

In the process of constructing a working page you must be familiar with the basic elements. For example these are the tags that will be implemented most often:

Tag	Purpose	Example
`<h1>` to `<h6>`	Headings (H1 is the biggest)	`<h1>Main Title</h1>`
`<p>`	Paragraphs of text	`<p>This is a sentence.</p>`
`<a>`	Hyperlinks to other pages	`<a href="url">Click me</a>`
`<img>`	Images (Self-closing)	`<img src="image.jpg">`
`<ul>` / `<li>`	Bulleted lists	`<li>List item</li>`

5. Attributes: Adding Extra Info

Sometimes tags require additional information to function properly. In that case the extended tags called Attributes. They are always located within the opening tags.

Example:

<a href="https://google.com">Go to Google</a>

href is the attribute.
https://google.com is the value (the destination).

Why is HTML Important?

Primarily, because it is the one language everyone on the web understands. Also, it is built to be “semantic”: the tags are meant to describe what the content is about. This way, search engines like Google can read your site and know what it is about, so your page can show in the results.