STABForge

Software Tech. Accelerator Blog

“HTML Basics: 10 Powerful & Essential Concepts Every Beginner Will Love”

Posted on by priti
HTML Introduction for Beginners

Introduction

HTML (HyperText Markup Language) is the standard language used to create the structure of web pages. It uses tags and attributes to define headings, paragraphs, images, links, and other elements that make up a website. Without  Hypertext markup language browsers would not know how to display content in an organized way.

It is the foundation of web development, working alongside CSS for design and JavaScript for interactivity. Whether you are a beginner or an experienced developer, understanding it is the first step toward building functional and user-friendly websites.

Basic code

<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>Welcome to my website!</p>
</body>
</html>

output:

HTML is a standard markup language used to create and design the structure of web pages using tags and elements

HEADING

Headings are used to create titles and subtitles on a web page. There are six levels of headings:

  • <h1> – Largest (main title)

  • <h2> – Second-level title

  • <h3> to <h6> – Smaller headings for sub-sections

By default, browsers apply different font sizes to headings to help organize content.

Example:

<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>

 Simple Example Code:

<html>

<head>

<title>HTML Headings Example</title>

</head>

<body>

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6</h6>

</body>

</html>

OUTPUT:

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

IMAGE

Images can be added to a page using the <img> tag, which requires the src attribute for the image path and alt text for description.

Example:

<img src="nature.jpg" alt="Beautiful landscape" width="400" height="300">

Example Code:

<!DOCTYPE html>

<html>

<head>

<title>Image Example</title>

</head>

<body>

<h1>My Favorite Image</h1>

<img src=”nature.jpg” alt=”Beautiful nature scenery” width=”400″ height=”300″>

</body>

</html>

output:

Welcome to My Webpage

My Favorite Image

Lists :-

There are three types:

  1. Ordered List (<ol>) – Displays items in numbered order.

    <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ol>

  2. Unordered List (<ul>) – Shows items with bullet points.

    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
    </ul>

  3. Description List (<dl>) – Describes terms and their meanings.

    <dl>
    <dt>HTML</dt>
    <dd>A language for structuring web pages.</dd>
    <dt>CSS</dt>
    <dd>Styles the visual appearance of a site.</dd>
    </dl>