HTML Basics
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements that tell the browser how to display content.
Basic HTML Document Structure
Every HTML document should start with a document type declaration and have a basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Tags With Examples
Below are HTML tags with their examples and outputs:
1. HTML Document Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
2. Text Formatting
<p><b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <strong>Strong</strong>, <em>Emphasized</em>, <mark>Marked</mark>, <small>Small</small>, <del>Deleted</del>, <ins>Inserted</ins></p>
Output:
3. Links and Images
<a href="https://example.com">Visit Example</a>
<img src="https://via.placeholder.com/150" alt="Placeholder" width="150" height="150">
Output:
Visit Example
4. Lists
<ul>
<li>Unordered Item 1</li>
<li>Unordered Item 2</li>
</ul>
<ol>
<li>Ordered Item 1</li>
<li>Ordered Item 2</li>
</ol>
Output:
5. Tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Output:
6. Forms
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
Output:
7. Semantic Elements
<header>Header Content</header>
<nav>Navigation Links</nav>
<section>Section Content</section>
<article>Article Content</article>
<aside>Side Content</aside>
<footer>Footer Content</footer>
Output:
Header Content
Section Content
Article Content
8. Media Elements
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
9. Interactive Elements
<dialog open>This is a dialog box</dialog>
<menu>
<li><button>Option 1</button></li>
<li><button>Option 2</button></li>
</menu>
10. Embedding Content
<embed type="image/jpg" src="image.jpg" width="300" height="200">
<object data="book.pdf" type="application/pdf" width="300" height="200">
PDF Viewer
</object>
11. Scripting Elements
<script>alert('Hello World!');</script>
<noscript>Your browser does not support JavaScript!</noscript>
<template>
<h2>Hidden Content</h2>
</template>
12. Graphics
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
13. Meta Information
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
14. Programming
<code>var x = 5;</code>
<pre>Preformatted text</pre>
<samp>Sample output from program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
2. Text Formatting
<p><b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <strong>Strong</strong>, <em>Emphasized</em>, <mark>Marked</mark>, <small>Small</small>, <del>Deleted</del>, <ins>Inserted</ins></p>
Output:
Bold, Italic, Underline, Strong, Emphasized, Marked, Small, Deleted, Inserted
3. Links and Images
<a href="https://example.com">Visit Example</a>
<img src="https://via.placeholder.com/150" alt="Placeholder" width="150" height="150">
Output:
Visit Example
4. Lists
<ul>
<li>Unordered Item 1</li>
<li>Unordered Item 2</li>
</ul>
<ol>
<li>Ordered Item 1</li>
<li>Ordered Item 2</li>
</ol>
Output:
- Unordered Item 1
- Unordered Item 2
- Ordered Item 1
- Ordered Item 2
5. Tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Output:
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
6. Forms
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
Output:
7. Semantic Elements
<header>Header Content</header>
<nav>Navigation Links</nav>
<section>Section Content</section>
<article>Article Content</article>
<aside>Side Content</aside>
<footer>Footer Content</footer>
Output:
8. Media Elements
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
9. Interactive Elements
<dialog open>This is a dialog box</dialog>
<menu>
<li><button>Option 1</button></li>
<li><button>Option 2</button></li>
</menu>
10. Embedding Content
<embed type="image/jpg" src="image.jpg" width="300" height="200">
<object data="book.pdf" type="application/pdf" width="300" height="200">
PDF Viewer
</object>
11. Scripting Elements
<script>alert('Hello World!');</script>
<noscript>Your browser does not support JavaScript!</noscript>
<template>
<h2>Hidden Content</h2>
</template>
12. Graphics
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
13. Meta Information
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
14. Programming
<code>var x = 5;</code>
<pre>Preformatted text</pre>
<samp>Sample output from program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>
Common HTML Tags
Here are some of the most frequently used HTML tags:
<h1> to <h6> - Headings (h1 is largest, h6 is smallest)
<p> - Paragraph
<a href="url">Link text</a> - Hyperlink
<img src="image.jpg" alt="description"> - Image
<ul> and <li> - Unordered list and list items
<ol> and <li> - Ordered list and list items
<div> - Division or section
<span> - Inline container
<strong> or <b> - Bold text
<em> or <i> - Italic text
<br> - Line break
<hr> - Horizontal rule
<p> - Paragraph
<a href="url">Link text</a> - Hyperlink
<img src="image.jpg" alt="description"> - Image
<ul> and <li> - Unordered list and list items
<ol> and <li> - Ordered list and list items
<div> - Division or section
<span> - Inline container
<strong> or <b> - Bold text
<em> or <i> - Italic text
<br> - Line break
<hr> - Horizontal rule
HTML Forms
Forms are used to collect user input:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Submit">
</form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Submit">
</form>
Advanced HTML
Once you've mastered the basics, these advanced HTML features will help you create more sophisticated websites.
Semantic HTML5 Elements
HTML5 introduced semantic elements that clearly describe their meaning:
<header> - Introductory content or navigation
<nav> - Navigation links
<main> - Main content of the document
<section> - Thematic grouping of content
<article> - Self-contained composition
<aside> - Content aside from main content
<footer> - Footer for a document or section
<figure> and <figcaption> - Figures with captions
<time> - Machine-readable date/time
<mark> - Highlighted text
<nav> - Navigation links
<main> - Main content of the document
<section> - Thematic grouping of content
<article> - Self-contained composition
<aside> - Content aside from main content
<footer> - Footer for a document or section
<figure> and <figcaption> - Figures with captions
<time> - Machine-readable date/time
<mark> - Highlighted text
Multimedia Elements
HTML5 provides native support for multimedia:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<canvas id="myCanvas" width="200" height="100"></canvas>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<canvas id="myCanvas" width="200" height="100"></canvas>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Advanced Form Features
Modern HTML forms include many advanced features:
<input type="color"> - Color picker
<input type="date"> - Date picker
<input type="range"> - Slider control
<input type="search"> - Search field
<input type="tel"> - Telephone number
<input type="url"> - URL field
<input type="number" min="1" max="10"> - Number input
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
<input list="browsers"> - Input with suggestions
<progress value="70" max="100">70%</progress>
<meter value="2" min="0" max="10">2 out of 10</meter>
<input type="date"> - Date picker
<input type="range"> - Slider control
<input type="search"> - Search field
<input type="tel"> - Telephone number
<input type="url"> - URL field
<input type="number" min="1" max="10"> - Number input
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
<input list="browsers"> - Input with suggestions
<progress value="70" max="100">70%</progress>
<meter value="2" min="0" max="10">2 out of 10</meter>
Meta Tags for SEO
These meta tags help search engines understand your content:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:image" content="https://example.com/image.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Your Page Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:image" content="https://example.com/image.jpg">
Practical HTML Examples
See these HTML features in action with practical examples you can use in your projects.
Responsive Tables
<div class="table-responsive">
<table>
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>
</div>
<table>
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
</table>
</div>
Responsive Images
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Flexbox Layout
<div class="flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
CSS:
.flex-container {
display: flex;
justify-content: space-between;
}
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
CSS:
.flex-container {
display: flex;
justify-content: space-between;
}