HTML Basics & Advanced (Chapter: 3)

Complete HTML Notes – Rajat Pathak

1 Introduction to HTML

HTML stands for HyperText Markup Language. It is the basic building block of all websites.

Think of HTML like the bones of a body — it gives structure to a webpage. Without HTML, webpages would just be blank.

When you open any website, HTML is telling the browser:

"Hey! This is a heading!"
"This is a paragraph!"
"This is an image!"
"This is a button!"

What is HyperText?

"Hyper" means linked or connected. Text that links to other text or pages is called Hypertext.

Example: If you click a blue word "Click Here" and it takes you to another page — that's hypertext.

What is Markup Language?

"Markup" means adding extra instructions to text so the browser knows how to display it. It's like giving instructions to a computer:

Make this bold
Make this heading big
Make this red

Together = HTML helps browsers understand what and how to show stuff.

2 History & Versions of HTML

1991 — Sir Tim Berners-Lee (the father of the web!) invented HTML. Very simple, only a few tags.
1995 — HTML 2.0 came — a little more polished.
Then 3.2, 4.0, and 4.01 versions arrived as websites needed to become smarter and prettier.
2014 — HTML5 came — a complete superhero version with video, audio, games, canvas, animations etc. directly inside HTML!

Version	Year	Key Highlights
HTML 1.0	1991	Basic text, links
HTML 2.0	1995	Forms introduced
HTML 3.2	1997	Tables, scripting
HTML 4.01	1999	CSS support, better structure
XHTML	2000	Strict rules (XML + HTML)
HTML5	2014	Multimedia, mobile-friendly, modern APIs

3 HTML Tags, Elements & Document Structure

What is a Tag?

A tag is a command inside < > brackets that tells the browser what to do.

<p>This is a paragraph.</p>
  <p>  → Opening tag
  </p> → Closing tag

Types of Tags

Type	Description	Example
Container Tag	Has both opening and closing tag. Wraps content inside.	`<b>Bold</b>`
Empty Tag	No closing tag. Single tag that works alone.	`<br>` `<img>` `<hr>`

What is an Element?

Element = Opening tag + Content + Closing tag

<h1>Hello World</h1>
  ↑               ↑              ↑
Opening tag    Content    Closing tag
Together they make one complete ELEMENT.

Basic HTML Document Structure

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    Page content here
  </body>
</html>

Part	Purpose
`<!DOCTYPE html>`	Tells browser this is HTML5
`<html>`	Root element — wraps everything
`<head>`	Invisible stuff — title, CSS, metadata
`<body>`	Visible stuff — text, images, videos

How to Write HTML in Notepad

Open Notepad (basic text editor)
Write your HTML code
Save the file with a .html extension (Example: mypage.html)
Double-click the file — it opens in a browser!

4 Head Section Elements

The <head> section stores page information — it is not visible to users. Elements inside <head>:

1. <title>

Sets the title shown on the browser tab.

<title>My First Web Page</title>

2. <meta>

Provides metadata (info about the page) to browsers and search engines.

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Attribute	Meaning
charset	Character encoding (UTF-8 for all languages)
name	Type of metadata (keywords, description, viewport)
content	The value for the name attribute
http-equiv	HTTP header (like refresh, content-type)

3. <link>

Connects external files like CSS to the HTML page.

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

Attribute	Meaning
rel	Relationship — stylesheet, icon, etc.
href	URL of linked file
type	File type — text/css, etc.

4. <base>

Sets a default URL or target for all links/images in the page.

<base href="https://example.com/" target="_blank">

Attribute	Meaning
href	Base URL for relative links
target	How links open — _blank, _self

5. <isindex> (Old / Obsolete)

⚠️ This tag is now obsolete. Do NOT use it. Use <input> and <form> instead.

Was used for a search box on the page.

<isindex prompt="Search Here:">

Attribute: prompt = Text displayed inside the search box.

6. <style>

Write CSS (Cascading Style Sheets) directly inside HTML to style the page.

<style>
  body { background-color: lightyellow; }
</style>

Attribute	Meaning
type	Style type (text/css) — optional now
media	Devices for the styles — screen, print

7. <script>

Runs JavaScript inside HTML.

<script src="script.js"></script>

Attribute	Meaning
src	URL of the external script file
type	Type of script (text/javascript)
async	Load script asynchronously
defer	Load script after HTML parsing

8. <noscript>

Shows alternative content if the browser doesn't support JavaScript.

<noscript>Your browser does not support JavaScript!</noscript>

No specific attributes — just plain content inside.

5 HTML Body Attributes & Comments

<body> Tag

All visible content goes inside <body>. The following attributes are from old HTML4 style:

Attribute	Purpose
bgcolor	Background color of the page
background	Image as page background
text	Color of all text
link	Color of unvisited links
vlink	Color of visited links
alink	Color of active (clicked) links

<body bgcolor="lightblue" text="black">

What is a Comment in HTML?

A comment is a note written inside the code — it is only for developers to read and understand. Browsers ignore comments — they do NOT show up on the webpage.

Why use comments?

To explain your code
To remind yourself why you wrote something
To hide parts of code during testing

Syntax

<!-- This is a comment -->

<p>Hello World</p> <!-- This is a simple paragraph -->

The comment  is completely ignored by the browser.

6 Full Sample HTML Page (Basics)

<!DOCTYPE html>
<html>
<head>
  <title>My First Sample Page</title>
  <meta charset="UTF-8">
  <meta name="description" content="Learning HTML Basics">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body bgcolor="lightyellow" text="black">

  <!-- Main heading -->
  <h1>Welcome to My Web Page</h1>

  <!-- Paragraph -->
  <p>This is my first webpage using HTML. I am learning it step-by-step.</p>

  <!-- Hypertext link -->
  <a href="https://www.google.com">Visit Google</a>

  <!-- Image -->
  <p><img src="logo.png" alt="Logo Image" width="200"></p>

  <!-- Horizontal line -->
  <hr>

  <!-- Line break -->
  <p>First line.<br>Second line after break.</p>

</body>
</html>

Part Used	Explanation
`<!DOCTYPE html>`	Tells browser we are using HTML5
`<html>`	Root element of the page
`<head>`	Contains metadata, styles, scripts
`<title>`	Name shown on browser tab
`<meta>`	Info for browser/search engines
`<body>`	Page visible content
`<h1>, <p>, <a>, <img>, <br>, <hr>`	Basic content elements
`<!-- comment -->`	Developer notes, ignored by browser
`<noscript>`	Message if JavaScript not supported

7 Text Formatting Tags

Block-level Tags

Tag	Name	Use / Description
`<h1> to <h6>`	Headings	Creates headings — `<h1>` is biggest, `<h6>` is smallest
`<p>`	Paragraph	Writes a paragraph of text
`<div>`	Division	Block container — divides page into sections
`<br>`	Line Break	Breaks the line, moves next content to new line (empty tag)
`<hr>`	Horizontal Rule	Draws a horizontal line across the page (empty tag)
`<pre>`	Preformatted	Keeps spaces and line breaks exactly as typed — good for poems, code
`<blockquote>`	Block Quotation	Quotes a large block of text from another source — indents the text
`<address>`	Address	Shows contact info or postal address — usually shown in italic

Inline Formatting Tags

Tag	Name	Use / Description
`<b>`	Bold	Makes text bold (dark and thick) — visual only
`<strong>`	Strong	Bold + semantically important (preferred over <b>)
`<i>`	Italic	Makes text slanted — visual only
`<em>`	Emphasis	Italic + meaningful emphasis — search engines treat it differently
`<u>`	Underline	Underlines the text
`<mark>`	Mark	Highlights text with yellow background — inline element
`<del>`	Deleted	Strikethrough — shows removed text
`<ins>`	Inserted	Underline — shows newly added text
`<sub>`	Subscript	Smaller text below normal line — e.g., H₂O
`<sup>`	Superscript	Smaller text above normal line — e.g., a²
`<span>`	Span	Groups inline content — does NOT break the line
`<q>`	Short Quote	Short inline quotation — browser auto-adds " " marks
`<abbr>`	Abbreviation	Shows abbreviation; full meaning appears on hover via title
`<dfn>`	Definition	Defines a new term — browser may italicize it
`<code>`	Code	Displays computer code in a special monospace font
`<cite>`	Citation	Cites a book, work, website — usually shown in italic

Practical Examples

<!-- Bold and Italic -->
<p><b>This is bold</b> and <i>this is italic</i></p>

<!-- Subscript and Superscript -->
<p>Water is H<sub>2</sub>O</p>
<p>Area = a<sup>2</sup></p>

<!-- Deleted and Inserted -->
<p>Price: <del>₹500</del> <ins>₹400</ins></p>

<!-- Abbreviation -->
<p><abbr title="World Health Organization">WHO</abbr> works for public health.</p>

<!-- Mark (highlight) -->
<p>Read the <mark>important</mark> instructions carefully.</p>

<!-- Short Quote -->
<p>He said, <q>Knowledge is power.</q></p>

<!-- Preformatted -->
<pre>Roses are red,
Violets are blue.</pre>

<!-- Code -->
<code>print("Hello World")</code>

<!-- Definition -->
<p><dfn>HTML</dfn> stands for HyperText Markup Language.</p>

<!-- Citation -->
<p><cite>Ramayana</cite> is an ancient Indian epic.</p>

<!-- Span -->
<p>My name is <span style="color: red;">Rajat</span>.</p>

8 HTML Links — Anchor Tag <a>

The <a> tag creates hyperlinks that connect one page to another. Links are the soul of the web!

<a href="URL">Link Text</a>

Types of Hyperlinks

Internal link — links to same page or same website
External link — links to another website
Email link (mailto:) — opens the email app
Download link — link to download files
Anchor link — jumps to a specific section on the same page

Attributes of <a> Tag

Attribute	Purpose
href	URL of the page/file to link to
target	Opens link in same tab (_self) or new tab (_blank)
title	Tooltip text shown on hover
name	Used for internal page navigation anchors (old method)
download	Forces the link to download a file
mailto:	Opens the default email app to compose mail

Examples

<!-- Basic external link -->
<a href="https://www.google.com">Visit Google</a>

<!-- Open in new tab -->
<a href="https://kcsdocs.in/" target="_blank">Visit Website</a>

<!-- Email link -->
<a href="mailto:info@example.com">Send Email</a>

<!-- Download link -->
<a href="file.pdf" download>Download PDF</a>

<!-- Jump to anchor (same page) -->
<a href="#bottom">Jump to Bottom</a>
<h2 id="bottom">This is the bottom!</h2>

Tag / Value	Purpose
`<a href="URL">`	Link to another page
`<a href="mailto:email">`	Open email app
`<a href="#id">`	Jump to anchor on same page
`target="_blank"`	Open in new tab
`target="_self"`	Open in same tab (default)

9 Mark Tag & Font Element

<mark> Tag

Used to highlight text. Default background is yellow. It is an inline element.

Great for showing search results or key points!

<!-- Syntax -->
<mark>Highlighted text</mark>

<!-- Example -->
<p>Read the <mark>important</mark> instructions carefully.</p>

<font> Element (Old HTML)

⚠️ The <font> tag is NOT supported in HTML5. Use it only for learning. For modern websites, always use CSS for styling.

The <font> tag was used in older HTML to change how text looks — colour, size, and font style.

<!-- Syntax -->
<font size="5" color="blue" face="Arial">This is styled text</font>

<!-- Example -->
<font size="6" color="green" face="Comic Sans MS">Welcome to HTML class!</font>

Attribute	Meaning	Values
color	Changes text color	red, green, blue, #hex
size	Sets text size (1–7, default = 3)	1 to 7
face	Changes font style/family	Arial, Times New Roman, Comic Sans MS

10 HTML Lists

HTML provides 3 main types of lists:

1. Unordered List — <ul>

Items appear with bullet points.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

2. Ordered List — <ol>

Items appear in numbered order.

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Have breakfast</li>
</ol>

3. Definition List — <dl>

Used for terms and their meanings. Uses <dt> (term) and <dd> (description).

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

4. Nested Lists — List inside a List

<ul>
  <li>Fruits
    <ul>
      <li>Mango</li>
      <li>Apple</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Potato</li>
    </ul>
  </li>
</ul>

Tag	Full Name	Purpose
`<ul>`	Unordered List	Bullet-point list
`<ol>`	Ordered List	Numbered list
`<dl>`	Definition List	Term + description list
`<li>`	List Item	Each item in ul or ol
`<dt>`	Definition Term	The term in a dl
`<dd>`	Definition Description	Meaning of the term in dl

11 Image Element — <img>

The <img> tag adds images to a webpage. It is a self-closing / empty tag — no closing tag needed.

<!-- Syntax -->
<img src="image.jpg" width="200" height="150" alt="A sample image">

<!-- Full Example -->
<img src="logo.jpg" height="120" width="150" border="2"
     hspace="10" vspace="10" align="right" alt="Website Logo">

Attribute	Meaning
src	Path or URL of the image file (required)
alt	Alternative text shown if image fails to load (required for accessibility)
height	Image height in pixels
width	Image width in pixels
border	Border thickness around image (in px)
hspace	Horizontal space — on left and right of image
vspace	Vertical space — on top and bottom of image
align	Position image beside text: left, right, top, bottom

12 HTML Tables

HTML tables display data in rows and columns — like a spreadsheet.

Basic Table Tags

Tag	Full Form	Description
`<table>`	Table	Creates a table
`<tr>`	Table Row	Starts a new row
`<th>`	Table Header	Bold, centered heading cell
`<td>`	Table Data	Normal data cell
`<caption>`	Caption	Title that appears above the table
`<colgroup>`	Column Group	Groups one or more columns for styling
`<col>`	Column	Single column definition inside colgroup

Table Tag Attributes

Attribute	Meaning	Example
border	Adds a border to table and cells	`<table border="1">`
cellpadding	Space between cell content and cell wall	`<table cellpadding="10">`
cellspacing	Space between individual cells	`<table cellspacing="5">`
width	Table width in % or px	`<table width="100%">`
align	Aligns table on page	`<table align="center">`
bgcolor	Background color of table	`<table bgcolor="lightblue">`

Full Table Example

<table border="1" width="100%" cellpadding="8">
  <caption>Student Information</caption>
  <colgroup>
    <col style="background-color: lightyellow">
    <col style="background-color: lightblue">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Class</th>
  </tr>
  <tr>
    <td>Rina</td>
    <td>10th</td>
  </tr>
  <tr>
    <td>Rekha</td>
    <td>9th</td>
  </tr>
</table>

Col Tag with span

Use span to apply the same style to multiple columns at once:

<col span="2" style="background-color: #f2f2f2">

13 Marquee Element

The <marquee> tag creates scrolling text or images. Not a modern standard, but still works in browsers.

<marquee>Welcome to Chaitanya Kendra!</marquee>

Types of Scroll (behavior attribute)

<marquee behavior="scroll">Scrolling across</marquee>
<marquee behavior="slide">Slides once and stops</marquee>
<marquee behavior="alternate">Bounces back and forth</marquee>

Marquee Attributes

Attribute	Purpose	Example Value
behavior	Type of scroll effect	scroll / slide / alternate
direction	Direction of movement	left / right / up / down
scrollamount	Speed (higher = faster)	scrollamount="10"
scrolldelay	Delay in ms between each move	scrolldelay="100"
loop	How many times to repeat (-1 = infinite)	loop="3"
bgcolor	Background color of marquee area	bgcolor="yellow"
width / height	Size of the marquee box	width="300" height="50"

Full Example

<marquee behavior="alternate" direction="right" scrollamount="8" bgcolor="lightgreen">
  🎉 Admission Open - Join Today! 🎉
</marquee>

14 HTML Frames & iFrame

1. HTML Frames — <frameset>

Frames divide the browser window into different sections — each section loads its own webpage. Like watching multiple web pages side-by-side.

Why was it used?

Keep the menu bar on the left and change content on the right
Avoid reloading the whole page — only part of the page updates

⚠️ Frames are now OBSOLETE — not supported in HTML5. They caused problems with bookmarking, navigation, search engine indexing, and mobile layouts. Use <div>, CSS, and JavaScript frameworks like React instead.

<!DOCTYPE html>
<html>
  <frameset cols="30%, 70%" border="10" bordercolor="blue" framespacing="5">
    <frame src="menu.html" name="menu" scrolling="auto" noresize>
    <frame src="content.html" name="content">
  </frameset>
</html>

Attribute / Tag	Explanation
cols="30%,70%"	Divides screen vertically into two parts
border, bordercolor	Customize appearance of frame borders
framespacing	Space between frames
<frame src="...">	Loads a different HTML document in each frame
scrolling="auto"	Adds scrollbar if content overflows
noresize	Prevents user from resizing the frame

2. iFrame — <iframe> (Inline Frame)

Why use iFrame?

Embed YouTube videos
Load Google Maps
Show other websites without making users leave your site

<!-- Basic iFrame -->
<iframe src="https://example.com" width="600" height="400"></iframe>

<!-- Named iFrame Example -->
<!DOCTYPE html>
<html>
<head><title>Iframe Example</title></head>
<body>
  <h2>View External Site</h2>
  <iframe src="https://example.com" width="600" height="400" name="exampleFrame"></iframe>
</body>
</html>

⚠️ Some websites block embedding using X-Frame-Options. iFrames can also slow down your site if used heavily.

15 HTML Forms

Forms allow users to input data and send it to a server. Think of: login pages, signup forms, contact us forms — all made using forms!

Without forms, a website is just information. Forms let users interact and give you data.

<form action="submit.php" method="post">
  <input type="text" name="username">
  <input type="submit" value="Send">
</form>

Key Form Attributes

Attribute	Meaning
action	URL where form sends data (e.g., PHP/Node.js server)
method="get"	Data visible in URL (less secure)
method="post"	Data hidden in request body (more secure)
enctype="multipart/form-data"	Required when uploading files
autocomplete="on/off"	Browser suggests previously entered values

target Attribute & Its Values for <form>

Value	Behaviour
_self	Default — opens result in the SAME tab
_blank	Opens result in a NEW tab
_top	Opens result in the entire browser window, breaks out of all frames
_parent	Opens result in the parent frame of the current frame

<!-- _blank example -->
<form action="submit.html" target="_blank">
  <input type="submit" value="Open in New Tab">
</form>

16 Input Types — All Types

Input Element Basics

The <input> tag is an empty element used inside a <form> to create input fields where users enter data. The type attribute determines what kind of input it is.

All Input Types with Examples

Type	Syntax	Description
text	`<input type="text">`	Type any text — name, username, etc.
password	`<input type="password">`	Hides typed characters — for login forms
email	`<input type="email">`	Validates proper email format (abc@example.com)
number	`<input type="number" min="1" max="10">`	Only numbers — for age, quantity etc.
date	`<input type="date">`	Lets user pick a date from a calendar
tel	`<input type="tel">`	For phone numbers — no format check unless pattern used
search	`<input type="search">`	Looks like a search box — optimized for searching
color	`<input type="color">`	Lets user pick a color from a color palette
file	`<input type="file" multiple>`	Lets user upload files from their computer
radio	`<input type="radio" name="g" value="m">`	Choose ONE option only — must share same name
checkbox	`<input type="checkbox" name="h">`	Choose MULTIPLE options
url	`<input type="url">`	Must be a proper link (https://something.com)
textarea	`<textarea rows="4" cols="40"></textarea>`	For long text — feedback, messages (not input tag)

Input Tag Attributes

Attribute	Easy Meaning
type	Defines the type of input (text, password, email, etc.)
name	Name of the field for form submission (not visible on page)
value	Default value or label for the input field
size	Width of input field in characters
maxlength	Maximum number of characters allowed
placeholder	Grey hint text visible inside empty box
required	Field must be filled before submission
readonly	Can see value but cannot change it
disabled	Looks grey — unclickable, value not submitted
autofocus	Cursor goes here automatically when page loads
autocomplete	Browser suggests previously entered values (on/off)
pattern	Validates input format using regular expressions

Radio Button Example

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

(Must share the same name so only ONE can be selected at a time)

Checkbox Example

<input type="checkbox" name="hobby1" value="Reading" checked> Reading
<input type="checkbox" name="hobby2" value="Travel"> Travel

17 Form Buttons & Common Attributes

Form Buttons

Button Type	Syntax	Purpose
Submit	`<input type="submit" value="Send">`	Sends form data to the server
Reset	`<input type="reset" value="Clear">`	Clears everything typed in the form
Image Button	`<input type="image" src="submit.png">`	A submit button with a custom image

Complete Form Example with All Input Types

<form action="submit.php" method="POST" enctype="multipart/form-data" autocomplete="on">

  <label>Name:</label>
  <input type="text" name="name" required placeholder="Enter your name" autofocus><br><br>

  <label>Password:</label>
  <input type="password" name="pass" maxlength="12"><br><br>

  <label>Email:</label>
  <input type="email" name="email"><br><br>

  <label>Phone:</label>
  <input type="tel" name="phone"><br><br>

  <label>Age:</label>
  <input type="number" name="age" min="1" max="100"><br><br>

  <label>Date of Birth:</label>
  <input type="date" name="dob"><br><br>

  <label>Upload File:</label>
  <input type="file" name="myfile" multiple><br><br>

  <label>Gender:</label>
  <input type="radio" name="gender" value="male" checked> Male
  <input type="radio" name="gender" value="female"> Female<br><br>

  <label>Hobbies:</label>
  <input type="checkbox" name="hobby1" value="Reading" checked> Reading
  <input type="checkbox" name="hobby2" value="Travel"> Travel<br><br>

  <label>Search:</label>
  <input type="search" name="search"><br><br>

  <label>Favourite Color:</label>
  <input type="color" name="color"><br><br>

  <label>Website URL:</label>
  <input type="url" name="website"><br><br>

  <label>Comments:</label><br>
  <textarea name="comments" rows="5" cols="40" placeholder="Enter comments..." required></textarea><br><br>

  <input type="submit" value="Submit">
  <input type="reset" value="Reset">

</form>

18 Select, Option, Optgroup & Datalist

<select> Tag — Drop-down List

Creates a drop-down list where a user can choose one or more options.

Attribute	Description
disabled	Makes the whole list unselectable
multiple	Allows selecting multiple options (hold Ctrl)
name	Name of the drop-down for form submission
required	Forces user to select before submitting
size	Number of visible options shown at once

<label>Select Country:</label>
<select name="country" required>
  <option value="IN">India</option>
  <option value="US">USA</option>
  <option value="UK">UK</option>
</select>

<option> Tag — Items in Drop-down

Defines each individual item in a <select> or <datalist>.

Attribute	Description
disabled	Makes this option unselectable
label	Gives a shorter display label
selected	Sets this as the default selected option
value	The value sent to the server on submission

<select>
  <option value="delhi">Delhi</option>
  <option value="mumbai" selected>Mumbai</option>
  <option value="chennai">Chennai</option>
</select>

<optgroup> Tag — Group Options

Groups related options inside a drop-down with a label heading.

Attribute	Description
label	Title/heading of the group (shown but not selectable)
disabled	Makes the entire group unselectable

<select>
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option>Carrot</option>
    <option>Peas</option>
  </optgroup>
</select>

<datalist> Tag — Auto Suggestion List

Provides predefined suggestions to <input> fields — like autocomplete. Linked to input via list attribute.

⚠️ Not fully supported in older Safari and Internet Explorer.

<form>
  <label>Enter Country:</label>
  <input type="text" name="country" list="countries">
  <datalist id="countries">
    <option value="India">
    <option value="China">
    <option value="USA">
    <option value="Russia">
  </datalist>
</form>

19 Button, Fieldset & Legend

<button> Tag — Clickable Button

Creates a styleable button with customizable behaviour. More flexible than <input type="submit">.

Attribute	Description
name	Name of the button sent with form data
type	button (no action), submit (sends form), reset (clears form)
value	Initial value sent with form data on submission

<button type="submit" name="submitBtn" value="send">Submit</button>
<button type="reset">Clear Form</button>
<button type="button" onclick="alert('Hello!')">Click Me</button>

<fieldset> & <legend> Tags

<fieldset> draws a visible box around related form elements to group them visually. <legend> adds a title or caption to that group box.

<form>
  <fieldset>
    <legend>Personal Information</legend>
    Name: <input type="text"><br>
    Email: <input type="email">
  </fieldset>

  <fieldset>
    <legend>Login Details</legend>
    Username: <input type="text"><br>
    Password: <input type="password">
  </fieldset>
</form>

✅ Using fieldset and legend makes forms more organized and accessible for students and users.

20 HTML5 — Introduction & Semantic Tags

What is HTML5?

HTML5 is the fifth and current version of HTML used to structure and present content on the web. It includes new tags, form controls, APIs, multimedia support, and semantic elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Page</title>
</head>
<body>
  <h1>Welcome to HTML5</h1>
</body>
</html>

Semantic Tags in HTML5

Semantic tags clearly describe their meaning and purpose — both to the browser and developer.

<header>

Defines the header section of a document or section (logo, title, navigation).

<header>
  <h1>My Website</h1>
  <p>Welcome to my website!</p>
</header>

<nav>

Defines a section for navigation links.

<nav>
  <a href="home.html">Home</a>
  <a href="about.html">About</a>
</nav>

<article>

Represents a self-contained composition — like a blog post, news item, or article.

<article>
  <h2>News Headline</h2>
  <p>This is the main content of the news.</p>
</article>

<aside>

Represents content indirectly related to the main content — like a sidebar or callout box.

<aside>
  <h4>Related Links</h4>
  <p>See more news articles...</p>
</aside>

<footer>

Defines the footer section of a document — copyright, contact info, links.

<footer>
  <p>© 2025 My Website. All rights reserved.</p>
</footer>

Tag	Purpose
`<header>`	Top section — logo, title, nav
`<nav>`	Navigation menu links
`<main>`	Main content of the page
`<article>`	Self-contained content like blog/news
`<section>`	Groups related content into sections
`<aside>`	Sidebar — related but not main content
`<footer>`	Bottom section — copyright, links
`<figure>`	Wraps images with a caption
`<figcaption>`	Caption for a figure element
`<details>`	Creates an expandable/collapsible block
`<summary>`	Visible heading for details block
`<time>`	Represents a date/time value
`<output>`	Displays result of a calculation
`<progress>`	Shows a progress bar
`<meter>`	Scalar measurement within a known range
`<wbr>`	Word break opportunity in long strings

HTML5 Tag Examples

<!-- Details / Summary -->
<details>
  <summary>Click to read a fun fact!</summary>
  <p>The details tag helps hide/show extra info.</p>
</details>

<!-- Progress Bar -->
<progress value="70" max="100">70%</progress>

<!-- Meter -->
<meter value="6" min="0" max="10">6 out of 10</meter>

<!-- Time -->
<time datetime="2025-05-13">May 13, 2025</time>

<!-- Output -->
<output id="result">42</output>

<!-- Word Break -->
<p>ThisIsA<wbr>VeryLong<wbr>String</p>

21 HTML5 Media Tags

<audio> Tag

Embeds sound content like music or speech directly in the browser.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video> Tag

Embeds a video player for displaying video content.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<source> Tag

Specifies multiple media resources for audio/video elements. Browser picks the first one it supports.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

<embed> Tag

Embeds external resources like video, audio, or flash files.

<embed src="file.mp4" width="400" height="300">

<object> Tag

Embeds external objects like multimedia, PDFs, etc.

<object data="file.pdf" type="application/pdf" width="500" height="400"></object>

<picture> Tag

Displays different images for different screen sizes or resolutions — responsive images.

<picture>
  <source media="(min-width: 650px)" srcset="img-large.jpg">
  <source media="(min-width: 465px)" srcset="img-medium.jpg">
  <img src="img-small.jpg" alt="Responsive Image">
</picture>

Tag	Purpose
`<audio>`	Embed audio/music/speech
`<video>`	Embed video player
`<source>`	Multiple media source options
`<embed>`	Embed external media file
`<object>`	Embed external objects (PDF, multimedia)
`<picture>`	Responsive images for different screen sizes

22 SVG — Scalable Vector Graphics

The <svg> tag is used to draw vector graphics directly in HTML. SVG graphics do NOT lose quality when resized.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG Shapes with Examples

1. Rectangle

<svg width="300" height="150" style="border:1px solid gray">
  <rect x="50" y="30" width="200" height="100" fill="skyblue" stroke="black" stroke-width="2"/>
</svg>

2. Circle

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="orange" stroke="black" stroke-width="2"/>
</svg>

3. Ellipse

<svg width="300" height="150">
  <ellipse cx="150" cy="75" rx="100" ry="50" fill="lightgreen" stroke="black" stroke-width="2"/>
</svg>

4. Line

<svg width="300" height="150">
  <line x1="20" y1="20" x2="280" y2="130" stroke="red" stroke-width="4"/>
</svg>

5. Polygon (Multi-sided shape)

<svg width="300" height="150">
  <polygon points="50,10 90,100 10,100" fill="yellow" stroke="black" stroke-width="2"/>
</svg>

6. Polyline (Connected lines)

<svg width="300" height="150">
  <polyline points="0,40 40,40 40,80 80,80 80,120" fill="none" stroke="blue" stroke-width="2"/>
</svg>

7. Path (Custom curve or route)

<svg width="300" height="150">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="purple" stroke-width="2"/>
</svg>

Shape Tag	Key Attributes
`<rect>`	x, y, width, height, fill, stroke
`<circle>`	cx (center-x), cy (center-y), r (radius), fill, stroke
`<ellipse>`	cx, cy, rx (x-radius), ry (y-radius), fill, stroke
`<line>`	x1, y1 (start), x2, y2 (end), stroke
`<polygon>`	points (list of x,y coordinates), fill, stroke
`<polyline>`	points (connected), fill="none", stroke
`<path>`	d (path data with M, C, S commands), stroke

23 HTML5 Other Important Tags

<meter> Tag

Represents a scalar measurement within a known range — like a gauge.

<meter value="6" min="0" max="10">6 out of 10</meter>

<figure> & <figcaption>

Groups images with a caption.

<figure style="text-align: center;">
  <img src="example.jpg" alt="Example" width="300">
  <figcaption>Figure: HTML5 Layout Example</figcaption>
</figure>

HTML5 Password Pattern Attribute

The pattern attribute in HTML5 forms validates input using Regular Expressions (Regex). Regex is a special sequence of characters that defines a search pattern.

24 Password Patterns — Regex in HTML5

What is a Pattern?

The pattern attribute uses Regular Expressions (Regex) to validate what the user types in an input field. If input doesn't match, the browser shows an error on submit.

Pattern 1 — Letters Only

[A-Za-z]{1,15} — Allows only uppercase or lowercase letters. Min 1, max 15 characters.

<input type="text" pattern="[A-Za-z]{1,15}" title="Only letters, max 15 chars">
<!-- Accepts: Hello, World, Abc -->
<!-- Rejects: Hello123, Abc@  -->

Pattern 2 — Letters and Numbers

[A-Za-z0-9]+ — Allows letters (A–Z, a–z) and digits (0–9) only. At least 1 character required.

<input type="text" pattern="[A-Za-z0-9]+" title="Only letters and numbers">
<!-- Accepts: abc123, John2024 -->
<!-- Rejects: abc@123, hello! -->

Pattern 3 — Digits and Decimal

[0-9.]{1,10} — Allows digits (0–9) and dot (.) only. Between 1 and 10 characters.

<input type="text" pattern="[0-9.]{1,10}" title="Only digits and decimal point">
<!-- Accepts: 123.45, 0.123 -->
<!-- Rejects: 123,45 (comma), 1.2.3 (multiple dots) -->

Pattern 4 — Letters, Digits, Underscore & @

[A-Za-z0-9_@]+ — Allows letters, digits, underscore and @ symbol.

<input type="text" pattern="[A-Za-z0-9_@]+" title="Letters, digits, _ and @">
<!-- Accepts: user_name, user@123 -->
<!-- Rejects: name!@, hello#    -->

Pattern 5 — Must Start with a Letter

[A-Za-z][A-Za-z0-9_-]{1,25} — Must start with a letter, followed by 1–25 characters (letters, digits, _ or -).

<input type="text" pattern="[A-Za-z][A-Za-z0-9_-]{1,25}" title="Start with letter, 1–25 chars">
<!-- Accepts: A1_b-2, Rajat_Kumar -->
<!-- Rejects: 1Start, -user123   -->

Pattern 6 — Positive / Negative Numbers

[0-9.+-]{1,10} — Allows digits, +, - and dot. Max 10 characters. For numeric values with signs.

<input type="text" pattern="[0-9.+-]{1,10}" title="Positive/negative numbers, max 10 digits">
<!-- Accepts: +123.45, -99.9 -->
<!-- Rejects: 123a, ++123   -->

Strong Password Pattern

Pattern: (?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}

Part	Meaning
`(?=.*[a-z])`	Must contain at least one lowercase letter (a–z)
`(?=.*[A-Z])`	Must contain at least one uppercase letter (A–Z)
`(?=.*\d)`	Must contain at least one digit (0–9)
`(?=.[@$!%?&])`	Must contain at least one special character (@ $ ! % * ? &)
`.{8,}`	Must be at least 8 characters long

Final Rule Summary

Your password must contain:

At least one lowercase letter
At least one uppercase letter
At least one digit
At least one special character (@ $ ! % * ? &)
Minimum 8 characters in length

Valid Passwords

Rajat@123 ✅
Hello2024$ ✅
MyPass1! ✅

Invalid Passwords

rajat123 ❌ — No uppercase, no special character
Rajat@ ❌ — No digit
Rajat123 ❌ — No special character

<!-- Strong Password Input -->
<input type="password"
       pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}"
       title="Min 8 chars: 1 uppercase, 1 lowercase, 1 digit, 1 special char"
       required>

25 Full HTML5 Practical Page

This page combines all HTML5 semantic tags, media, form, SVG and more into one working example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML5 Page</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 0;">

  <!-- HEADER -->
  <header style="background-color: #4CAF50; color: white; padding: 20px; text-align: center;">
    <h1>My Semantic HTML5 Page</h1>
    <p>Learning HTML5 Structure</p>
  </header>

  <!-- NAVIGATION -->
  <nav style="background-color: #333; padding: 10px; text-align: center;">
    <a href="#" style="color: white; margin: 0 15px; text-decoration: none;">Home</a>
    <a href="#" style="color: white; margin: 0 15px; text-decoration: none;">Services</a>
    <a href="#" style="color: white; margin: 0 15px; text-decoration: none;">Contact</a>
  </nav>

  <!-- MAIN CONTENT -->
  <main style="padding: 20px; background-color: #f4f4f4;">

    <!-- Article -->
    <article style="background: white; padding: 15px; margin-bottom: 20px; border: 1px solid #ddd;">
      <h2>Main Article</h2>
      <p>This article covers the importance of semantic HTML tags.</p>
    </article>

    <!-- Aside -->
    <aside style="background-color: #e7f3fe; padding: 15px; margin-bottom: 20px; border-left: 5px solid #2196F3;">
      <h3>Side Info</h3>
      <p>HTML5 introduced tags like &lt;article&gt;, &lt;section&gt;, &lt;aside&gt; etc.</p>
    </aside>

    <!-- Section -->
    <section style="background: white; padding: 15px; margin-bottom: 20px; border: 1px solid #ccc;">
      <h2>Another Section</h2>
      <p>This section adds more information.</p>
    </section>

    <!-- Figure -->
    <figure style="text-align: center; margin: 20px auto;">
      <img src="example.jpg" alt="Example Image" width="300" style="border: 1px solid #ccc; padding: 5px;">
      <figcaption style="font-style: italic; color: #555;">Figure: HTML5 Layout</figcaption>
    </figure>

    <!-- Details / Summary -->
    <details style="margin-bottom: 15px;">
      <summary>Click to read a fun fact!</summary>
      <p>The details and summary tags help hide/show extra information.</p>
    </details>

    <!-- Mark -->
    <mark>This is highlighted text using the mark tag.</mark><br><br>

    <!-- Progress -->
    <progress value="70" max="100">70%</progress><br><br>

    <!-- Time -->
    <time datetime="2025-05-13">May 13, 2025</time><br><br>

    <!-- Output -->
    <output id="result">42</output><br><br>

    <!-- Meter -->
    <meter value="6" min="0" max="10">6 out of 10</meter><br><br>

    <!-- SVG Circle -->
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg><br><br>

    <!-- Video -->
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video><br><br>

    <!-- Audio -->
    <audio controls>
      <source src="song.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio><br><br>

    <!-- Object (PDF) -->
    <object data="file.pdf" type="application/pdf" width="500" height="400"></object><br><br>

    <!-- Embed -->
    <embed src="file.mp4" width="400" height="300"><br><br>

    <!-- Word Break -->
    <p>ThisIsA<wbr>VeryLong<wbr>String</p>

    <!-- Form -->
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="Enter name"><br><br>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required><br><br>

      <label for="password">Password:</label>
      <input type="password" id="password" name="password"
             pattern="[A-Za-z0-9]{6,}"
             title="6 or more alphanumeric characters"><br><br>

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

  </main>

  <!-- FOOTER -->
  <footer style="background-color: #333; color: white; text-align: center; padding: 15px;">
    <p>&copy; 2025 My Website. All rights reserved.</p>
  </footer>

</body>
</html>

HTML

📘 Complete HTML Notes

📋 Table of Contents