Master HTML From Scratch

Clear, interactive, and structured HTML lessons designed for beginners.

Introduction to HTML

Learn the fundamentals of HTML and understand how HTML provides the structure for modern web pages.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure content on web pages.

HTML defines the structure of a web page using elements and tags. These elements can represent headings, paragraphs, links, images, lists, tables, forms, media, and many other types of content.

HTML is a markup language rather than a programming language. Its main purpose is to describe the structure and meaning of content on a web page.

Simple Definition: HTML is used to structure the content of a web page.

Why Learn HTML?

HTML is one of the fundamental technologies of web development. It provides the basic structure on which CSS and JavaScript are commonly applied.

Web Page Structure

HTML organizes content into headings, paragraphs, sections, links, images, lists, tables, and forms.

Foundation of Web Development

HTML provides the structural foundation for websites and web applications.

Easy to Understand

HTML uses readable tags and a structured document format that beginners can learn.

Works with CSS and JavaScript

HTML can be combined with CSS for styling and JavaScript for behavior and interaction.

Your First HTML Document

A simple HTML document can contain a document type declaration, an HTML root element, a head section, a title, and a body section. 

<!DOCTYPE html>

<html>

<head>
    <title>My First Web Page</title>
</head>

<body>

    <h1>Hello Student !</h1>

    <p>Welcome to Ciit Training Institute ❤️👀...!</p>

</body>

</html>

Expected Output

Hello Student !

Welcome to Ciit Training Institute ❤️👀...!

Basic HTML Document Structure

Element Purpose
<!DOCTYPE html> Declares that the document is an HTML document.
<html> Represents the root element of the document.
<head> Contains metadata and document information.
<title> Defines the title shown in the browser tab.
<body> Contains the visible content of the web page.

How HTML Works

When an HTML document is opened in a web browser, the browser reads the HTML elements and creates the structure of the web page.

HTML Document

Contains HTML elements and content.

↓
Browser

Reads and interprets the HTML document.

↓
Document Structure

The browser builds the structure of the page.

↓
Rendered Web Page

The user sees the resulting web page.

HTML Elements

HTML documents are made up of elements. Many HTML elements have an opening tag, content, and a closing tag. 

<p>This is a paragraph.</p>

In this example:

  • <p> is the opening tag.
  • This is a paragraph. is the element content.
  • </p> is the closing tag.

Basic HTML Tag Structure 

<tagname>Content</tagname>

For example: 

<h1>Welcome to HTML</h1>

The opening tag identifies the start of the element and the closing tag identifies the end of the element.

Common HTML Elements

Element Example Purpose
<h1> <h1>Title</h1> Creates a heading.
<p> <p>Text</p> Creates a paragraph.
<a> <a href="...">Link</a> Creates a hyperlink.
<img> <img src="..." alt="..."> Displays an image.
<ul> <ul>...</ul> Creates an unordered list.
<table> <table>...</table> Creates a table.
<form> <form>...</form> Creates a form.

HTML, CSS and JavaScript

These three technologies are commonly used together in web development.

HTML

Defines the structure and content of the page.

CSS

Controls styling, colors, spacing, layout, and presentation.

JavaScript

Adds interaction, behavior, and dynamic functionality.

HTML File Extension

HTML files are commonly saved with the .html extension. 

index.html

Where HTML is Used

  • Websites
  • Web applications
  • Landing pages
  • Online forms
  • Documentation pages
  • Content and template pages

Practice Exercise

  1. Create a file named index.html.
  2. Add a title inside the <title> element.
  3. Add an <h1> heading.
  4. Add two paragraphs using <p>.
  5. Open the file in a browser and observe the result.

Summary

HTML stands for HyperText Markup Language and is used to structure content on web pages. HTML documents are created using elements and tags such as headings, paragraphs, links, images, lists, tables, and forms. HTML provides the basic structure of a web page and commonly works together with CSS and JavaScript.

Next: HTML Document Structure →