1. Basic HTML Tags

HTML elements are the building blocks of webpages. Most elements consist of an opening tag, content and a closing tag.

Basic Element

<p>Hello World</p>

Heading

<h1>Main Heading</h1>

Paragraph

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

Line Break

<br>

Horizontal Rule

<hr>

HTML Comment

<!-- This is an HTML comment -->

2. Document Structure Tags

<!DOCTYPE html>

Declares that the document should be interpreted using the modern HTML standard.

<!DOCTYPE html>

<html>

The root element of an HTML document.

<html lang="en">

<head>

Contains metadata and resource references used by the document.

<body>

Contains the document's visible page content.

<title>

Defines the document title shown by the browser.

3. Headings & Paragraph Tags

HTML provides six heading levels.

<h1>Heading 1</h1>
  

Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Paragraph

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

Preformatted Text

<pre>
Line 1
    Line 2
  

4. Text Formatting Tags

Text formatting elements help communicate importance, emphasis, annotations and other meanings within written content.

Strong Importance

<strong>Important text</strong>

Emphasis

<em>Emphasized text</em>

Bold Text

<b>Bold text</b>

Italic Text

<i>Italic text</i>

Underline

<u>Underlined text</u>

Highlighted Text

<mark>Highlighted text</mark>

Small Text

<small>Small text</small>

Deleted Text

<del>Deleted text</del>

Inserted Text

<ins>Inserted text</ins>

Subscript

H<sub>2</sub>O

Superscript

x<sup>2</sup>

Inline Code

<code>console.log()</code>

Keyboard Input

<kbd>Ctrl + S</kbd>

Quotation

<blockquote>
A quotation can be placed here.
  

5. Links & Navigation

Basic Link

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

Open Link in New Tab

<a
href="https://example.com"
target="_blank"
rel="noopener"
  

>
Open Website

Email Link

<a href="mailto:hello@example.com">
Send Email
  

Telephone Link

<a href="tel:+1234567890">
Call Us
  

Internal Link

<a href="#contact">
Contact Section
  

6. Images & Multimedia

Image

<img
src="image.jpg"
alt="Description of image"
  

>

Figure

<figure>

<img
    src="photo.jpg"
    alt="A landscape"
>

<figcaption>
    A beautiful landscape
</figcaption>
  

Audio

<audio controls>

<source
    src="audio.mp3"
    type="audio/mpeg"
>

Your browser does not support audio.
  

Video

<video controls width="640">

<source
    src="video.mp4"
    type="video/mp4"
>

Your browser does not support video.
  

7. Lists

Unordered List

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
  

Ordered List

<ol>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
  

Description List

<dl>

<dt>HTML</dt>

<dd>
    Markup language for document structure.
</dd>

<dt>CSS</dt>

<dd>
    Style sheet language.
</dd>
  

8. Tables

Tables are designed for displaying structured tabular data.

<table>

<tr>
    <th>Name</th>
    <th>Marks</th>
</tr>

<tr>
    <td>Rahul</td>
    <td>90</td>
</tr>
  

Complete Table Structure

<table>

<caption>
    Student Results
</caption>

<thead>

    <tr>
        <th>Student</th>
        <th>Score</th>
    </tr>

</thead>

<tbody>

    <tr>
        <td>Aman</td>
        <td>95</td>
    </tr>

</tbody>

<tfoot>

    <tr>
        <td>Average</td>
        <td>95</td>
    </tr>

</tfoot>
  

9. HTML Forms

Forms allow users to enter and submit information.

Basic Form

<form action="/submit" method="post">

<label for="name">
    Name
</label>

<input
    type="text"
    id="name"
    name="name"
>

<button type="submit">
    Submit
</button>
  

Common Input Types

• text
• password
• email
• number
• tel
• url
• search
• date
• time
• checkbox
• radio
• file
• range
• color

Textarea

<textarea
name="message"
rows="5"
cols="30"
  

>

Select Menu

<select name="country">

<option value="india">
    India
</option>

<option value="usa">
    USA
</option>
  

Button

<button type="submit">
Submit
  

10. Semantic HTML

Semantic elements describe the purpose and meaning of different parts of a webpage.

• <header> — introductory content
• <nav> — navigation links
• <main> — primary page content
• <section> — thematic section
• <article> — self-contained content
• <aside> — related content
• <footer> — footer information

Semantic Layout Example

<header>
Website Header
  







  
<article>

    <h1>
        Article Title
    </h1>

    <p>
        Article content.
    </p>

</article>

<aside>
    Related information
</aside>
  

11. Metadata Tags

Character Encoding

<meta charset="UTF-8">

Viewport

<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
  

>

Meta Description

<meta
name="description"
content="Page description"
  

>

Stylesheet

<link
rel="stylesheet"
href="style.css"
  

>

Favicon

<link
rel="icon"
href="favicon.ico"
  

>

12. Interactive HTML Elements

Details and Summary

<details>

<summary>
    Click to learn more
</summary>

<p>
    Hidden content appears here.
</p>
  

Dialog

<dialog open>

<p>
    This is a dialog.
</p>
  

Progress

<progress
value="70"
max="100"
  

>
70%

13. Embedding External Content

Iframe

<iframe
src="https://example.com"
title="Example Website"
  

>

Embed

<embed
src="document.pdf"
type="application/pdf"
  

>

14. Global HTML Attributes

Global attributes can be used on many HTML elements.

id

<div id="header">
Header
  

class

<div class="card">
Card
  

title

<p title="Extra information">
Hover information
  

data-* Attribute

<button data-product-id="123">
Buy
  

contenteditable

<p contenteditable="true">
You can edit this text.
  

15. HTML Accessibility Basics

Accessible HTML helps people with different abilities use websites and applications effectively.

Meaningful Headings

<h1>Page Title</h1>
  

Main Section
Subsection

Alternative Text

<img
src="student.jpg"
alt="Student studying at a desk"
  

>

Form Labels

<label for="email">
Email
  

16. HTML Tags Quick Reference

17. Practice Challenges

Challenge 1: Personal Profile

Create a profile page containing a heading, paragraph, image, list and links.

Challenge 2: Student Result Table

Create a table containing student names, subjects, marks and total scores.

Challenge 3: Registration Form

Create a registration form using text, email, password, radio buttons, checkboxes and a submit button.

Challenge 4: Blog Article

Build a semantic blog page using header, nav, main, article, section, aside and footer.

Challenge 5: Complete Webpage

Build a complete webpage using appropriate HTML elements and meaningful structure.

18. Frequently Asked Questions