Master HTML From Scratch

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

Basic HTML

Learn the basic HTML building blocks used to create and structure web pages.

Introduction to Basic HTML

After understanding the fundamentals of HTML, the next step is to learn the basic elements used to build a web page.

HTML provides a collection of elements that allow developers to organize content such as headings, paragraphs, links, images, and other page components.

In this module: You will learn HTML elements, attributes, headings, paragraphs, comments, line breaks, and horizontal rules.

Simple HTML Example 

<!DOCTYPE html>

<html>

<head>

    <title>Basic HTML Example</title>

</head>

<body>

    <h1>Welcome to CIIT Institute</h1>

    <p>
        Learn HTML step-by-step.
    </p>

</body>

</html>

Output

Welcome to CIIT Institute

Learn HTML step-by-step.

HTML Elements

HTML elements are the basic building blocks of an HTML document. They describe the content and structure of the page. 

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

<p> starts the paragraph element.

Content

The text between the tags is the element content.

Closing Tag

</p> ends the paragraph element.

HTML Attributes

Attributes provide additional information about an HTML element. They are normally written inside the opening tag. 

<p id="intro">
    Welcome to CIIT Institute.
</p>
Remember: An attribute usually follows the format attribute="value".

HTML Headings

HTML provides six heading levels from <h1> to <h6>. 

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Main Heading

Sub Heading

Heading 3

Heading 4

Heading 5
Heading 6

HTML Paragraphs

The <p> element is used to create paragraphs. 

<p>
    HTML is easy to learn.
</p>

<p>
    Start building your first web page.
</p>

HTML is easy to learn.

Start building your first web page.

HTML Comments

Comments are written inside the HTML source code and are ignored by the browser when displaying the page. 

<!-- This is an HTML comment -->

<h1>Welcome to HTML</h1>
Use: Comments are helpful for writing notes and improving code readability.

HTML Line Breaks

The <br> element is used to insert a line break. 

<p>
    Hello<br>
    Welcome to HTML<br>
    Learn Web Development
</p>
Hello
Welcome to HTML
Learn Web Development

HTML Horizontal Rules

The <hr> element is used to create a thematic horizontal separation between sections. 

<h2>HTML</h2>

<p>
    Learn HTML step-by-step.
</p>

<hr>

<h2>CSS</h2>

HTML

Learn HTML step-by-step.

CSS

Basic HTML Topics

HTML Elements

Understand the structure and types of HTML elements.

HTML Attributes

Learn how attributes provide additional information to elements.

Headings

Learn how to create and organize headings using HTML.

Paragraphs

Learn how to create paragraphs and organize text content.

Comments

Learn how to add comments to HTML source code.

Line Breaks

Learn how to move content to a new line.

Horizontal Rules

Learn how to visually separate sections of content.

Practice Exercise

  1. Create an HTML file named index.html.
  2. Add an <h1> heading.
  3. Add two paragraphs.
  4. Add an HTML comment.
  5. Use a <br> line break.
  6. Use an <hr> between two sections.

Summary

In Basic HTML, you will work with the fundamental elements used to structure a web page. This module covers HTML elements, attributes, headings, paragraphs, comments, line breaks, and horizontal rules.

← Previous: HTML vs CSS vs JavaScript Next: HTML Elements →