HTML Basics
Structure, Tags, Examples, and
Outputs
Introduction to the Web & HTML
What is a Website?
A website is a collection of web pages.
A webpage is a single page (like one page in a book).
Example: Wikipedia → Many pages → One website.
How do we see websites?
Web Browser (Chrome, Edge, Firefox) displays websites.
HTML is the language that browsers read to display web
What is HTML?
HTML stands for HyperText Markup Language. It is used to structure web pages using
tags.
(it doesn’t calculate, it structures content)
<p>Hello, this is my first web page!
</p> Output:
Hello, this is my first web page!
Basic HTML Structure
Every HTML document follows this basic format.
<!DOCTYPE html> Output:
<html> Browser Tab: My First Page
<head> Hello World!
<title>My First Page</title> This is my first HTML program.
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML
program.</p>
</body>
</html>
Headings
There are six levels of headings, from <h1> (largest) to <h6> (smallest).
<h1>Main Title</h1> Output:
<h2>Sub Title</h2> Main Title
<h3>Section Title</h3> Sub Title
<h4>Smaller Heading</h4> Section Title
<h5>Very Small</h5> Smaller Heading
<h6>Tiny</h6> Very Small
Tiny
Paragraphs & Line Breaks
Paragraphs are written with <p>. <br> adds a line break.
<p>This is a paragraph of text.</p> Output:
<p>This is another paragraph.</p> This is a paragraph of text.
Line one<br>Line two This is another paragraph.
Line one
Line two
Horizontal Line
The <hr> tag creates a horizontal line.
<p>Above line</p> Output:
<hr> Above line
<p>Below line</p> ───────────
Below line
Text Formatting
HTML provides tags for text styling.
<b>Bold Text</b> Output:
<i>Italic Text</i> Bold Text
<u>Underlined Text</u> Italic Text
<mark>Highlighted Text</mark> Underlined Text
<small>Small Text</small> Highlighted Text
<del>Deleted Text</del> Small Text
Deleted Text
Links (Hyperlinks)
Use <a> to add a link.
<a Output:
href='[Link] Visit Google (clickable link)
Google</a>
Images
Use <img> to display an image.
<img Output:
src='[Link] An image of 150x150 is displayed.
' alt='Sample' width='150'
height='150'>
Lists
HTML supports ordered and unordered lists.
<ol> Output:
<li>First</li> 1. First
<li>Second</li> 2. Second
<li>Third</li> 3. Third
</ol> • Apple
<ul> • Mango
<li>Apple</li> • Orange
<li>Mango</li>
<li>Orange</li>
</ul>
Mini Project: My Profile Page
A complete HTML page with headings, paragraphs, lists, images, and links.
<!DOCTYPE html> Output:
<html> Title: My Webpage
<head> Hello! I am Priya
<title>My Webpage</title> I am a first-year student learning HTML.
</head> Hobbies list shown.
<body> Wikipedia link.
<h1>Hello! I am xxxxxx</h1> Image displayed.
<p>I am a first-year student learning
HTML.</p>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Drawing</li>
<li>Playing Games</li>
</ul>
<h2>My Favorite Website</h2>
<a href='[Link]
Wikipedia</a>
<h2>My Picture</h2>
<img src='[Link]
alt='My Image'>
</body>
</html>