FRONT END
HTML5 Beginner Syllabus
1. Introduction to HTML
What is HTML?
History and versions (HTML, HTML4, XHTML, HTML5)
Role of HTML in web development
HTML document structure
2. Basic HTML Document Structure
<!DOCTYPE html> declaration
<html>, <head>, <body> tags
<title> tag
Saving and opening HTML files in browser
3. Text Formatting Tags
Headings: <h1> to <h6>
Paragraph: <p>
Line break: <br>
Horizontal line: <hr>
Bold: <b>, <strong>
Italic: <i>, <em>
Underline: <u>
Highlighted text: <mark>
Small text: <small>
FRONT END
Strikethrough / deleted: <del>
Inserted: <ins>
Subscript: <sub>
Superscript: <sup>
4. Lists
Unordered list: <ul>, <li>
Ordered list: <ol>, <li>
Description list: <dl>, <dt>, <dd>
List attributes: type, start, reversed, CSS styling
5. Links
Anchor tag: <a>
href, target, title, download, rel attributes
Linking to external sites, email, phone numbers
Linking to sections within the same page
6. Images
<img> tag
src, alt, width, height, title, loading attributes
Adding logos, banners, icons
Image inside links
7. Tables
FRONT END
<table>, <tr>, <td>, <th>
Table headers, rows, columns
Table attributes: border, cellspacing, cellpadding
(deprecated), CSS styling
8. Forms
<form> tag
Input fields: <input> types (text, password, email,
number, checkbox, radio, file, submit, reset)
<textarea>, <select>, <option>
Form attributes: action, method, name, placeholder,
required
9. Multimedia
Audio: <audio> tag with controls, autoplay, loop,
muted
Video: <video> tag with controls, autoplay, loop,
muted, poster
Embedding YouTube or external videos: <iframe>
10. Semantic HTML5 Tags
<header>, <footer>
<nav> → Navigation menu
<section>, <article>
<aside> → Sidebar
FRONT END
<main> → Main content
<figure> and <figcaption>
11. Other Useful Tags
<link> → CSS, favicon, fonts
<meta> → charset, viewport, description
<style> → internal CSS
<script> → internal JavaScript
<div> → division / block container
<span> → inline container
<iframe> → embed another page
<marquee> (deprecated, only for reference)
12. HTML5 Forms & Input Types
New HTML5 input types: email, url, date, time, color,
range, number, search
Attributes: required, placeholder, pattern, min, max,
step
13. Meta and SEO Basics
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<meta name="description" content="Page
description">
FRONT END
14. HTML5 Best Practices
Use semantic tags instead of <div> for clarity
Always add alt for images
Keep HTML clean and properly indented
Avoid deprecated tags like <font>, <center>,
<marquee>
=======================================
========
✅ Basic HTML Tags (Quick Revision)
1. <!DOCTYPE html> → Defines HTML5 document.
2. <html> … </html> → Root of the HTML page.
3. <head> … </head> → Metadata section (title, links).
4. <title> … </title> → Page title (shown in browser tab).
5. <body> … </body> → Main visible content.
6. <h1> … <h6> → Headings (h1 largest, h6 smallest).
7. <p> … </p> → Paragraph.
8. <br> → Line break.
9. <hr> → Horizontal line.
10. <a> … </a> → Anchor tag (links).
11. <img> → Image tag.
12. <ul>, <ol>, <li> → Lists (unordered/ordered).
13. <table>, <tr>, <td>, <th> → Tables.
FRONT END
✅ Quick Revision – HTML Formatted Tags
<b> → Bold text
<strong> → Important/strong text (bold)
<i> → Italic text
<em> → Emphasized text (italic)
<u> → Underlined text
<mark> → Highlighted text
<small> → Smaller text
<del> → Deleted/strikethrough text
<ins> → Inserted/added text
<sub> → Subscript
<sup> → Superscript
LINKS
HTML <link> Tag – Quick Revision
Purpose
Links external resources to your HTML page.
Usually placed inside <head>.
Syntax
<link rel="stylesheet" href="[Link]">
Common Uses
FRONT END
1. Link CSS stylesheet
<link rel="stylesheet" href="[Link]">
2. Favicon / Website icon
<link rel="icon" href="[Link]" sizes="32x32" type="image/png">
3. Import Google Fonts
<link href="[Link]
rel="stylesheet">
4. Alternate language version
<link rel="alternate" href="[Link]" hreflang="hi">
5. Preload resources (performance)
<link rel="preload" href="[Link]" as="image">
Common Attributes
rel → Relationship (stylesheet, icon, preload, alternate)
href → Path to the resource
type → Type of resource (optional, e.g., text/css, image/png)
sizes → Icon size (e.g., 32x32)
media → Device type (screen, print)
as → Type of resource when using preload (image, script)
FRONT END
LIST TAGS
✅ Types of List Tags in HTML
1. Ordered List (<ol>)
Used when the order of items is important.
Items are automatically numbered.
Sub-tag: <li> (list item).
Attributes:
o type → sets numbering style (1, A, a, I, i).
o start → sets the starting number/letter.
o reversed → displays numbering in reverse order.
Example:
<ol type="A" start="3">
<li>Third Item</li>
<li>Fourth Item</li>
</ol>
2. Unordered List (<ul>)
Used when the order of items is not important.
Items are marked with bullets by default.
Sub-tag: <li>.
Attribute:
o type (deprecated in HTML5, but works in old HTML). Possible
values: disc, circle, square.
FRONT END
o Modern way → use CSS: list-style-type.
Example:
<ul style="list-style-type: square;">
<li>Apples</li>
<li>Bananas</li>
</ul>
3. Description List (<dl>)
Used for terms and their descriptions (like dictionary or glossary).
Sub-tags:
o <dt> → definition term.
o <dd> → definition description.
No special attributes.
Example:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
✅ Uses of List Tags
<ol> → steps in instructions, rankings, or ordered tasks.
FRONT END
<ul> → menus, shopping lists, unordered items.
<dl> → FAQs, glossaries, dictionaries, term-definition pairs.
HTML Tables
Tables are used to display data in rows and columns on a web page.
Syntax
<table border="1">
<tr> <!-- Table Row -->
<th>Header 1</th> <!-- Table Header -->
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td> <!-- Table Data -->
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
1. Basic Table Structure
FRONT END
<table> → Main container for the table
<tr> → Table row
<th> → Table header (bold and centered by default)
<td> → Table data cell
border → Adds border around table and cells
cellspacing → Space between cells (deprecated, use CSS)
cellpadding → Space inside cells (deprecated, use CSS)
colspan → Merge cells horizontally
rowspan → Merge cells vertically
3. Example Usage
Display student marks
Display project details
Display inventory or product list