HTML TAG REFERENCE HANDBOOK
Subject: Responsive Web Page Design (RWPD - D103000061)
GTU Diploma Computer Engineering — Semester 3
Perfect Lab Manual Companion | 100% Practical Aligned
👨🏫 Welcome Students! This quick reference handbook contains every single HTML tag used in your 25 RWPD practicals.
Read this whenever you get confused about what a tag does, where it is used, or which attributes to use!
1. DOCUMENT STRUCTURE & METADATA
<!DOCTYPE html>
Purpose: Tells the web browser that this document is written in modern HTML5.
Simple Always write this declaration at the very first line of your HTML code so the browser loads it
Explanation: correctly.
Syntax Example:
<!DOCTYPE html>
Where Used: At the top of every single HTML document before any tags.
Parent / Child: Parent: None | Child: None
Practicals: Used in ALL Practicals (1 to 25)
⚠️ Beginner Mistake: Forgetting to place it on line 1 or writing closing tag </!DOCTYPE> (it has no closing tag!).
💡 Teacher Tip: VS Code automatically adds this when you type ! and press Enter.
<html>
Purpose: The root (main container) element of the entire web page.
Simple Everything you write in HTML must be inside <html> and </html>.
Explanation:
Syntax Example:
<html lang="en">
... head and body content ...
</html>
Common lang="en" (specifies English language)
Attributes:
Parent / Child: Parent: None | Child: <head>, <body>
Practicals: Used in ALL Practicals (1 to 25)
⚠️ Beginner Mistake: Writing code outside the </html> closing tag.
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 1 of 10
<head>
Purpose: Contains invisible metadata, page title, and external library links (like Bootstrap CSS).
Simple Information inside <head> does not show on the webpage itself, but controls configuration and
Explanation: settings.
Syntax Example:
<head>
<meta charset="UTF-8">
<title>Practical 1</title>
<link href="..." rel="stylesheet">
</head>
Parent / Child: Parent: <html> | Child: <meta>, <title>, <link>, <style>
Practicals: Used in ALL Practicals (1 to 25)
⚠️ Beginner Mistake: Putting headings or visible text inside <head> instead of <body>.
<title>
Purpose: Sets the title visible on the browser tab bar.
Simple This text appears on the browser tab at the top of your screen.
Explanation:
Syntax Example:
<title>Practical 8 Student Registration Form</title>
Parent / Child: Parent: <head> | Child: Plain Text
Practicals: Used in ALL Practicals (1 to 25)
<meta>
Purpose: Defines character encoding and browser viewport rules for responsiveness.
Simple Crucial for mobile screens! The viewport meta tag ensures Bootstrap layout adjusts properly on
Explanation: mobile phones.
Syntax Example:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Common charset, name, content
Attributes:
Practicals: Used in ALL Practicals (1 to 25)
💡 Teacher Tip: Without width=device-width, your mobile phone renders webpages super tiny!
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 2 of 10
<link>
Purpose: Connects an external CSS file or CDN link to your web page.
Simple Used in every practical inside <head> to load the Bootstrap 5.3.3 CSS stylesheet.
Explanation:
Syntax Example:
<link href="[Link]
rel="stylesheet">
Common href (file/CDN link), rel="stylesheet"
Attributes:
Practicals: Used in ALL Practicals (1 to 25)
<style>
Purpose: Used for writing internal CSS styles inside the HTML document.
Simple Allows you to write custom CSS rules directly inside the <head> section.
Explanation:
Syntax Example:
<style>
body { padding-top: 70px; }
:root { --bs-primary: #e83e8c; }
</style>
Practicals: Practical 2, 13, 18, 23, 24
<script>
Purpose: Loads JavaScript files or internal JS scripts (like Bootstrap Bundle JS).
Simple Placed just before </body> to power interactive features like dropdowns, modals, and carousel.
Explanation:
Syntax Example:
<script src="[Link]
script>
Common src (path or CDN link)
Attributes:
Practicals: Used in ALL Practicals (1 to 25)
⚠️ Beginner Mistake: Forgetting the closing </script> tag when using the src attribute.
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 3 of 10
<body>
Purpose: Container for all visible web page content (headings, text, buttons, forms).
Simple Everything you want user to see on the page goes inside <body>.
Explanation:
Syntax Example:
<body class="bg-primary text-white">
... page content ...
</body>
Common class, data-bs-spy, data-bs-target
Attributes:
Practicals: Used in ALL Practicals (1 to 25)
2. LAYOUT & SEMANTIC SECTIONING TAGS
<div>
Purpose: Generic block-level container used to group elements and apply Bootstrap grid classes.
Simple The most used tag in web development! Think of it as a invisible box used to hold Bootstrap classes
Explanation: like container, row, and col.
Syntax Example:
<div class="container py-4">
<div class="row">
<div class="col-md-6">Content</div>
</div>
</div>
Common class, id, style
Attributes:
Practicals: Used in ALL Practicals (1 to 25)
💡 Teacher Tip: Always make sure every <div> you open has a matching </div>!
<header>
Purpose: Semantic tag representing the top header section of a web page.
Simple Replaces plain <div> for page headers, logos, and top navigation.
Explanation:
Syntax Example:
<header class="bg-light border-bottom py-3">
... header content ...
</header>
Practicals: Practical 22, 25
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 4 of 10
<nav>
Purpose: Semantic tag used for navigation menus and bars.
Simple Wraps navigation elements like Navbar, Breadcrumbs, and Nav Pills.
Explanation:
Syntax Example:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
... navbar links ...
</nav>
Practicals: Practical 9, 13, 14, 18, 20, 21, 24
<main>
Purpose: Semantic tag wrapping the main primary content of the web page.
Simple Contains content specific to the page, between header and footer.
Explanation:
Syntax Example:
<main class="container my-5">
... primary content ...
</main>
Practicals: Practical 13, 22, 25
<section>
Purpose: Defines a standalone section of content on a webpage.
Simple Used to group related content like "Home", "About Us", or "Contact Us".
Explanation:
Syntax Example:
<section id="aboutus" class="bg-success text-white">
... section content ...
</section>
Practicals: Practical 18, 23
<footer>
Purpose: Semantic tag for the page footer at the bottom.
Simple Contains copyright information, quick links, and footer navigation.
Explanation:
Syntax Example:
<footer class="bg-dark text-white py-4">
<p>© 2026 RNGPIT Polytechnic</p>
</footer>
Practicals: Practical 7, 13, 18, 22, 25
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 5 of 10
3. HEADINGS & TYPOGRAPHY TAGS
<h1> to <h6>
Purpose: Defines HTML headings from level 1 (largest) to level 6 (smallest).
Simple Use <h1> for main page titles and <h2>–<h6> for sub-headings.
Explanation:
Syntax Example:
<h1 class="text-primary">Main Title</h1>
<h3 class="fw-bold">Subheading</h3>
Related Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Practicals: Used in ALL Practicals (1 to 25)
⚠️ Beginner Mistake: Do not use <h7> — HTML headings only go from h1 to h6!
<p>
Purpose: Defines a paragraph of text.
Simple Wraps regular text content and adds automatic spacing before and after.
Explanation:
Syntax Example:
<p class="lead">This is lead paragraph text.</p>
Practicals: Used in ALL Practicals (1 to 25)
<small>, <mark>, <del>, <s>, <ins>, <u>, <strong>, <em>,
<abbr>, <cite>
Purpose: Text formatting tags for highlighting, bolding, secondary text, and abbreviations.
Simple <strong> = Bold | <em> = Italic | <small> = Fine print
Explanation: <mark> = Highlighted | <del> / <s> = Strikethrough | <ins> / <u> = Underline
Syntax Example:
<p><strong>Bold</strong> and <mark>highlighted</mark> text.</p>
Practicals: Practical 3, 7, 16, 19, 25
<blockquote> & <cite>
Purpose: Used to display quotes and quote sources.
Syntax Example:
<blockquote class="blockquote">
<p>Learning never exhausts the mind.</p>
<footer class="blockquote-footer"><cite>RNGPIT</cite></footer>
</blockquote>
Practicals: Practical 7
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 6 of 10
<hr>
Purpose: Inserts a horizontal rule (line separator).
Simple Self-closing tag used to visually separate sections on a page.
Explanation:
Practicals: Practical 3
4. LINKS, IMAGES & LISTS
<a> (Anchor Tag)
Purpose: Creates hyperlinks to other pages or section IDs.
Simple Used for navbar links, buttons, list groups, and page navigation.
Explanation:
Syntax Example:
<a href="[Link]" class="nav-link">About College</a>
<a href="#contact" class="nav-link">Contact</a>
Common href, class, data-bs-toggle
Attributes:
Practicals: Practical 9, 13, 14, 17, 18, 22, 24, 25
⚠️ Beginner Mistake: Forgetting the href attribute makes the link unclickable! Use href="#" as placeholder.
<img>
Purpose: Displays images on the web page.
Simple Self-closing tag. Requires src (image link) and alt (description text).
Explanation:
Syntax Example:
<img src="[Link] class="d-block w-100" alt="Slide
1">
Common src, alt, class, data-bs-toggle, title
Attributes:
Practicals: Practical 16, 20, 21
<i> (Icon Tag)
Purpose: Used to display Bootstrap Icons font classes.
Syntax Example:
<i class="bi bi-facebook"></i>
Practicals: Practical 22
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 7 of 10
<ul>, <ol>, <li>
Purpose: Unordered (bulleted) lists, ordered lists, and list items.
Simple Used for bullet points, navbars, breadcrumbs, and pagination lists.
Explanation:
Syntax Example:
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
</ul>
Practicals: Practical 9, 12, 13, 14, 20, 22, 25
5. TABLE TAGS
<table>, <thead>, <tbody>, <tr>, <th>, <td>
Purpose: Constructs data tables with rows and columns.
Simple <table> = Table wrapper | <thead> = Table header block
Explanation: <tbody> = Table body | <tr> = Table row | <th> = Header cell | <td> = Data cell
Syntax Example:
<table class="table table-striped">
<thead class="table-dark"><tr><th>Sr. No.</th><th>Activity</th></tr></
thead>
<tbody><tr class="table-danger"><td>01</td><td>Workshop</td></tr></
tbody>
</table>
Practicals: Practical 6
⚠️ Beginner Mistake: Putting <td> directly inside <table> without wrapping inside <tr>!
6. FORM TAGS & INPUTS
<form>
Purpose: Container for form inputs, selects, radios, and submit buttons.
Syntax Example:
<form class="mx-auto" style="max-width: 700px;"> ... inputs ... </form>
Practicals: Practical 8, 9, 11, 13
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 8 of 10
<input>
Purpose: Creates various form inputs (text, email, password, radio, checkbox, search).
Simple Self-closing tag. Input type is controlled by the type="" attribute.
Explanation:
Common type="text", type="email", type="password", type="radio", type="checkbox",
Types: type="search"
Common type, class="form-control" / "form-check-input", id, placeholder, name, value, checked
Attributes:
Practicals: Practical 8, 9, 11, 13
<label> & <legend> & <fieldset>
Purpose: Labels for form inputs and grouping radio button sets.
Syntax Example:
<label for="inputEmail" class="form-label">Email</label>
<fieldset class="row"><legend class="col-form-label">Gender</legend></
fieldset>
Practicals: Practical 8, 11
<select> & <option>
Purpose: Creates dropdown selection lists in forms.
Syntax Example:
<select class="form-select" id="inputsem">
<option value="1">First</option>
<option value="3" selected>Third</option>
</select>
Practicals: Practical 8, 11
<button>
Purpose: Interactive button for forms, modals, togglers, and toolbars.
Common type="submit", type="button", class="btn btn-primary", data-bs-toggle, data-
Attributes: bs-target
Practicals: Used in ALL Practicals (1 to 25)
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 9 of 10
<span>
Purpose: Inline container used for small styled text, input-group labels, badges, and toggler icons.
Syntax Example:
<span class="input-group-text">First Name</span>
<span class="badge text-bg-secondary">10</span>
Practicals: Used in ALL Practicals (1 to 25)
RWPD - HTML Tag Reference Handbook | GTU Diploma Sem-3 Page 10 of 10