Back to Roadmap
8:00

HTML Basics & Structure

Learn how HTML works as the foundation of web pages and how to structure content using tags and elements

8 MIN READ VERIFIED CURRICULUM

HTML (HyperText Markup Language) is the standard language used to create and structure web pages.

It defines the structure of content like headings, paragraphs, images, links, and forms in a web page.

What is HTML?

HTML is a markup language used to structure content on the web using elements and tags.

It tells the browser how content should be displayed but does not control styling or behavior.

Basic HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
html

This is the basic structure of every HTML document.

HTML Elements

HTML elements are building blocks of a webpage defined using tags.

Each element usually has an opening tag, content, and a closing tag.

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

HTML Tags vs Elements

A tag is the syntax used to create elements, while an element includes the tag and its content.

For example, <p> is a tag, and <p>Hello</p> is an element.

Head Section

The head section contains metadata about the webpage.

It includes title, links to stylesheets, and scripts.

<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
</head>
html

Body Section

The body section contains all visible content of a web page.

Everything users see on the browser is inside the body tag.

Headings in HTML

HTML provides six levels of headings from <h1> to <h6>.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
html

Paragraphs and Text

Paragraphs are defined using the <p> tag.

<p>This is a simple paragraph in HTML.</p>
html

Links in HTML

Links are created using the anchor (<a>) tag.

<a href="https://example.com">Visit Website</a>
html

Images in HTML

Images are added using the <img> tag.

<img src="image.jpg" alt="Sample Image">
html

Lists in HTML

HTML supports ordered and unordered lists.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>First</li>
    <li>Second</li>
</ol>
html

Forms in HTML

Forms are used to collect user input.

<form>
    <input type="text" placeholder="Enter name">
    <button type="submit">Submit</button>
</form>
html

Semantic HTML

Semantic tags clearly describe their meaning to browsers and developers.

<header>, <footer>, <article>, <section>
html

Why HTML is Important

HTML is the foundation of all websites and web applications.

Without HTML, browsers would not be able to display structured content.

Common Beginner Mistakes

Beginners often forget to close tags or use incorrect nesting.

Another mistake is not using semantic HTML elements properly.

Best Practices

Always use semantic tags for better structure and accessibility.

Keep HTML clean, well-indented, and properly organized.

Real-World Importance

HTML is used in every website, from simple blogs to complex web applications.

It is the first skill every web developer must learn.

Summary

HTML provides the structure of web pages using elements and tags.

Mastering HTML is the first step toward becoming a web developer.