Complete HTML
HTML (HyperText Markup Language) is the standard language for creating web
pages.
It provides the structure of a webpage.
Everything on the internet (websites, blogs, etc.) starts with HTML.
Other famous Markup languages are Markdown, LateX, XML etc.
Basic Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Page Title</title>
Complete HTML 1
</head>
<body>
<h1>Welcome to Web Development!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Basic HTML Tags
Tag Purpose
<h1> to <h6> Headings (largest to smallest)
<p> Paragraph
<a> Anchor (links)
<img> Insert images
<ul> , <ol> , <li> Lists (unordered, ordered)
<div> Block container
<span> Inline container
<br> , <hr> Line break, horizontal line
<i> , <u> , <em> , <strong> , <b> Formatting tags
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
<a href="[Link] Google</a>
<img src="[Link]" alt="Image" />
Setup VS code
Steps:
1. Download and install Visual Studio Code.
2. Install important extensions on VS Code:
Live Server: To see the updates using local host.
Complete HTML 2
Prettier: It will format the code in better way.
3. Create a new folder for your project.
4. Open the folder in VS Code.
5. Create a file named [Link] and let’s start coding!
Advanced HTML Tags: Forms, Tables, Semantic
Elements
Forms
Used to collect user input.
<form action="/submit" method="POST">
<label>Name:</label>
<input type="text" name="username" />
<input type="submit" value="Submit" />
</form>
Common Form Elements:
<input> — for text, email, password, etc.
<textarea> — for multi-line text.
<button> — for clickable buttons.
<select> and <option> — dropdown lists.
For more detail about Form input methods visit official mdn documentation.
Tables
Used to display tabular data.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
Complete HTML 3
<tr>
<td>Alice</td>
<td>24</td>
</tr>
</table>
Semantic Elements
HTML5 introduced elements that clearly describe their meaning:
Tag Purpose
<header> Top section of a page
<footer> Bottom section of a page
<nav> Navigation links
<section> Defines sections in a page
<article> Independent, self-contained content
<aside> Content aside from the main content
For Example:
<header>
<h1>My Website</h1>
</header>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a>
</nav>
<section id="home">
<h2>About Me</h2>
<p>This is my story.</p>
</section>
<footer id="about">
<p>Copyright © 2025</p>
</footer>
Complete HTML 4
Introduction to HTML5 Tags
HTML5 brought many new tags for richer content and better structure.
New Tag Purpose
<video> Embeds video content
<audio> Embeds sound content
Draw graphics on the fly using
<canvas>
JavaScript
<section> , <article> , <header> , <footer> ,
Structure content semantically
<aside>
<figure> and <figcaption> For images with captions
<main> Main content of the document
Video Tag Syntax:
<video controls>
<source src="video.mp4" type="video/mp4" />
You can write anything
</video>
Audio Tag Syntax:
<audio controls>
<source src="audio.mp3" type="audio/mp3" />
you can write anything
</audio>
Image Tag Syntax:
<img src="path/to/[Link]" alt="Alternative Text">
Quick Tip:
When working with MERN Stack, HTML is still very important because React
components often generate HTML-like code (JSX).
Complete HTML 5
Now, next step? —- CSS
Complete HTML 6