-
Hajipur, Bihar, 844101
HTML Basic
Before moving to advanced tags or layouts, it’s important to understand the basic structure and essential elements of HTML. These basics form the foundation for every webpage you will build in the future. Whether you’re creating a simple personal site or working on a full project, these core concepts appear everywhere. In this chapter, you’ll learn the basic structure of an HTML page, how tags work, how to display headings, paragraphs, links and images, and how to build your first simple layout.
The Basic Structure of an HTML Page
Every HTML document follows a standard structure. This structure tells the browser what the page contains and how to read it.
Here’s a simple starting skeleton:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage.</p>
</body>
</html>
Let’s break it down:
<!DOCTYPE html>
Declares the document type. It tells the browser the page is written in HTML5.
<html>
The root of your web document. Everything visible and invisible lies inside this tag.
<head>
Holds information that doesn’t appear on the page directly. It includes the title, metadata and linked files like CSS.
<title>
Shows text in the browser tab.
<body>
Contains all the visible content. This is where headings, paragraphs, links, images and lists go.
What Are HTML Tags?
Tags are the building blocks of HTML. They tell the browser how to display the content.
Most tags have:
-
An opening tag
-
A closing tag
-
Content between them
Example:
<p>This is a paragraph.</p>
Some tags don’t need a closing tag. These are self-closing tags. Examples include:
<br />
<img src="image.jpg" />
<hr />
Tags may also have attributes, which add extra information to the tag. You’ll learn more about this in the next chapter.
Headings in HTML
HTML has six levels of headings. They range from large to small.
Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Sub Section</h4>
<h5>Small Heading</h5>
<h6>Tiny Heading</h6>
<h1> is the largest and usually used for the main title. <h6> is the smallest.
These headings help organize your content and make it easier for users to read.
Paragraphs
Paragraphs are added using the <p> tag.
<p>This is a simple paragraph of text.</p>
By default, browsers add spacing around paragraphs. This creates readability without needing extra formatting.
Line Breaks
If you want to break a line without starting a new paragraph, use the <br /> tag.
Example:
<p>Hello<br />World</p>
Horizontal Lines
A horizontal line is used to separate sections visually.
<hr />
This is often used between paragraphs or sections to improve clarity.
Links in HTML
Links are one of the most important parts of the web. You create them using the <a> tag with an href attribute.
Example:
<a href="https://example.com">Visit Example</a>
When the user clicks this text, they are taken to another webpage.
You can also link to local pages:
<a href="about.html">About Us</a>
Images in HTML
Images are added using the <img> tag. This tag needs at least one attribute: src, which tells the browser where the image file is located.
Example:
<img src="photo.jpg" alt="A sample photo" />
The alt attribute describes the image. It helps with accessibility and displays text if an image fails to load.
Lists in HTML
Lists help you show items in an organized way. HTML supports two main types: ordered lists and unordered lists.
Ordered List
Shows items with numbers.
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Unordered List
Shows items with bullets.
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
Lists are common in navigation menus, features sections and FAQs.
Comments in HTML
Comments help you leave notes inside your code without displaying them on the page.
Example:
<!-- This is a comment -->
Comments are useful when you want to explain a section of code or temporarily disable something.
A Small Basic Example
Here’s a simple webpage using the basic building blocks you’ve learned:
<!DOCTYPE html>
<html>
<head>
<title>Basic Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a simple HTML example.</p>
<h2>My Interests</h2>
<ul>
<li>Learning HTML</li>
<li>Exploring websites</li>
<li>Building projects</li>
</ul>
<a href="https://google.com">Search on Google</a>
</body>
</html>
This combines headings, paragraphs, lists and a link into a clean and readable layout.
Real-Life Examples of Basic HTML
Basic HTML tags appear everywhere:
-
Blog articles use headings and paragraphs.
-
E-commerce sites use lists for features.
-
Navigation menus rely on links.
-
Product galleries use images.
-
Footer sections contain text separated by horizontal lines.
Even complex websites start with these basic building blocks.
Practice Task
Try building a small page using the following:
-
A heading
-
A paragraph
-
A list of 3 items
-
An image
-
A link
-
A horizontal line
This will help you get comfortable with the essentials.
Summary of HTML Basic
Basic HTML is all about structure. You learned how pages are built using standard tags, how headings, paragraphs, links and images work, how lists organize content and how comments help you document your code. These elements appear in almost every webpage you will ever create. With this foundation, you’re ready for the next chapter: understanding HTML Elements in a deeper way.
Practice Questions
Q1. Write a complete HTML document that displays a heading and a paragraph.
Q2. Add the <title> tag to show "My Website" in the browser tab.
Q3. Use an <h1> tag to display "Welcome!" on the webpage.
Q4. Create a paragraph using the <p> tag with any text.
Q5. Add a horizontal line between two paragraphs using <hr>.
Q6. Insert a line break in a sentence using the <br> tag.
Q7. Write a nested element: a paragraph with bold text inside it using <strong>.
Q8. Save your file as basic.html and open it in a browser.
Q9. Create headings from <h1> to <h6> in one HTML page.
Q10. Create an HTML file with two paragraphs and one line break in each.
