0% found this document useful (0 votes)

2 views496 pages

HTML Tutorial PDF (1)

The document is a comprehensive HTML tutorial published by HTML5ANDCSS3, covering all aspects of HTML5 including new elements, structure, and practical applications. It contains 162 chapters with runnable examples, reference tables, and links to live lessons for continuous learning. The tutorial is designed for offline use and emphasizes the importance of HTML in web development, providing guidelines and tips for beginners.

Uploaded by

anasyazami111

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

2 views496 pages

HTML Tutorial PDF (1)

Uploaded by

anasyazami111

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

HTML5ANDCSS3.

ORG / PRACTICAL WEB EDUCATION

2026 DIGITAL EDITION

HTML
TUTORIAL
THE COMPLETE PRACTICAL GUIDE
COVERS ALL HTML5 NEW ELEMENTS <HTML>
STRUCTURE

Learn HTML with practical chapters covering basics, tags,

forms, media, tables, layout, and references.

<CSS>
PRESENTATION

INSIDE THIS EDITION

Runnable examples
162 Reference tables / Live lesson links
CHAPTERS

</>
WRITTEN AND PUBLISHED BY

Swapnil Raja
[Link]

HTML TUTORIAL
About this book
HTML Tutorial is a complete offline learning companion published by HTML5ANDCSS3. It contains
162 published chapters, practical explanations, code examples, reference tables, and direct links to
the continuously updated lessons on the website.

<!DOCTYPE html> HTML DOCUMENT ANATOMY

<html>
Structure
<head> ... </head>
<body> Your web page </body> Content
</html> Meaning

Author and publisher

Swapnil Raja
Founder and Publisher, [Link]
[Link]

Edition information
Digital edition generated 2026-08-05
Content last updated 2026-07-30
Official book page: [Link]

Copyright and permitted use

(c) 2026 Swapnil Raja and HTML5ANDCSS3. All rights reserved. You may download and retain this PDF
solely for your own personal, non-commercial learning. You may not sell, redistribute, upload, republish,
reproduce, modify, translate, rebrand, remove its authorship or attribution, or present any part of it as your
own work. Any use beyond personal learning requires prior written permission from Swapnil Raja.

Keep this edition useful

Web standards and lessons evolve. Every chapter includes a link to its live version for updated
explanations, runnable examples, exercises, and related learning tools.

HTML5ANDCSS3 | [Link] 1
Table of contents
29. HTML Div & Span ................................................................... 111
HTML BASICS
30. HTML Semantic Layout Tags ............................................... 116
1. Introduction to HTML .................................................................... 5 31. HTML Iframes .......................................................................... 119
2. HTML Editors .................................................................................. 9
ADVANCED HTML
3. HTML Structure ............................................................................ 12
4. HTML Elements & Attributes .................................................... 15 32. HTML Entities & Symbols ..................................................... 122
5. HTML Headings ........................................................................... 18 33. HTML Emojis ............................................................................ 125
6. HTML Paragraphs ....................................................................... 21 34. HTML Head Element Tags ................................................... 128
7. HTML Formatting ......................................................................... 24 35. HTML Meta Tags for SEO ..................................................... 132
8. HTML Comments ......................................................................... 27 36. HTML Responsive Design .................................................... 137
9. HTML Styles .................................................................................. 30
HTML REFERENCES
HTML TEXT AND LINKS
37. HTML5 New Tags .................................................................... 143
10. HTML Text Formatting .............................................................. 34 38. Deprecated Tags ..................................................................... 150
11. HTML Quotations & Citations ................................................ 38 39. HTML Global Attributes ......................................................... 154
12. HTML Links ................................................................................. 41 40. Event Attributes ....................................................................... 159
13. HTML Email Links ..................................................................... 45 41. Complete HTML Tag List ...................................................... 168
42. Complete HTML5 Elements ................................................. 175
HTML LISTS AND TABLES
HTML TAGS
14. HTML Lists .................................................................................. 48
15. HTML Tables ............................................................................... 51 43. HTML <!DOCTYPE> Tag ...................................................... 178
16. Table Styling & Borders ........................................................... 58 44. HTML <html> Tag .................................................................... 180
45. HTML <head> Tag .................................................................. 182
HTML IMAGES AND MEDIA
46. HTML <title> Tag ..................................................................... 184
17. HTML Images ............................................................................. 65 47. HTML <body> Tag .................................................................. 186

18. HTML Picture Element ............................................................. 69 48. HTML <base> Tag .................................................................. 188

19. HTML Audio ................................................................................ 71 49. HTML <link> Tag ..................................................................... 190

20. HTML Video ................................................................................ 74 50. HTML <meta> Tag .................................................................. 192

21. HTML Embed & Object ............................................................ 77 51. HTML <style> Tag ................................................................... 194
52. HTML <script> Tag ................................................................. 197
HTML FORMS
53. HTML <h1 to h6> Tag ............................................................ 199

22. HTML Forms Overview ............................................................ 82 54. HTML <hgroup> Tag .............................................................. 201

23. HTML Form Elements .............................................................. 85 55. HTML <p> Tag ......................................................................... 204

24. HTML Input Types ..................................................................... 88 56. HTML <br> Tag ........................................................................ 206

25. HTML Input Attributes .............................................................. 92 57. HTML <wbr> Tag ..................................................................... 208

26. HTML Form Attributes .............................................................. 99 58. HTML <hr> Tag ........................................................................ 211

27. HTML Form Validation ........................................................... 104 59. HTML <pre> Tag ...................................................................... 214
60. HTML <b> Tag ......................................................................... 217
HTML LAYOUT
61. HTML <strong> Tag ................................................................ 220

28. HTML Block vs Inline Elements .......................................... 108 62. HTML <i> Tag ........................................................................... 223

HTML5ANDCSS3 | [Link] 2
Contents continued
63. HTML <em> Tag ...................................................................... 226 104. HTML <th> Tag ...................................................................... 339
64. HTML <mark> Tag .................................................................. 229 105. HTML <td> Tag ...................................................................... 342
65. HTML <small> Tag .................................................................. 232 106. HTML <col> Tag .................................................................... 345
66. HTML <del> Tag ...................................................................... 235 107. HTML <colgroup> Tag ......................................................... 348
67. HTML <ins> Tag ...................................................................... 238 108. HTML <form> Tag ................................................................. 351
68. HTML <sub> Tag ..................................................................... 241 109. HTML <input> Tag ................................................................ 354
69. HTML <sup> Tag ..................................................................... 243 110. HTML <textarea> Tag .......................................................... 357
70. HTML <u> Tag ......................................................................... 245 111. HTML <button> Tag ............................................................. 360
71. HTML <blockquote> Tag ....................................................... 248 112. HTML <select> Tag .............................................................. 363
72. HTML <q> Tag ......................................................................... 251 113. HTML <selectedcontent> Tag ........................................... 366
73. HTML <cite> Tag ..................................................................... 253 114. HTML <option> Tag .............................................................. 370
74. HTML <abbr> Tag ................................................................... 256 115. HTML <optgroup> Tag ........................................................ 373
75. HTML <address> Tag ............................................................ 259 116. HTML <label> Tag ................................................................ 376
76. HTML <bdo> Tag ..................................................................... 262 117. HTML <fieldset> Tag ............................................................ 379
77. HTML <bdi> Tag ...................................................................... 265 118. HTML <legend> Tag ............................................................ 382
78. HTML <a> Tag ......................................................................... 268 119. HTML <datalist> Tag ............................................................ 385
79. HTML <nav> Tag ..................................................................... 271 120. HTML <output> Tag ............................................................. 388
80. HTML <ul> Tags ...................................................................... 273 121. HTML <meter> Tag .............................................................. 390
81. HTML <menu> Tag ................................................................. 276 122. HTML <progress> Tag ......................................................... 392
82. HTML <ol> Tag ........................................................................ 279 123. HTML <header> Tag ............................................................ 394
83. HTML <dl> Tag ........................................................................ 282 124. HTML <footer> Tag .............................................................. 396
84. HTML <img> Tag ..................................................................... 285 125. HTML <article> Tag .............................................................. 398
85. HTML <figure> Tag ................................................................. 287 126. HTML <section> Tag ............................................................ 401
86. HTML <figcaption> Tag ......................................................... 289 127. HTML <aside> Tag ............................................................... 403
87. HTML <audio> Tag ................................................................. 291 128. HTML <main> Tag ................................................................ 406
88. HTML <video> Tag ................................................................. 293 129. HTML <search> Tag ............................................................ 409
89. HTML <source> Tag ............................................................... 296 130. HTML <details> Tag ............................................................. 412
90. HTML <track> Tag ................................................................... 299 131. HTML <summary> Tag ....................................................... 415
91. HTML <embed> Tag ............................................................... 302 132. HTML <dialog> Tag .............................................................. 417
92. HTML <object> Tag ................................................................ 304 133. HTML <time> Tag ................................................................. 420
93. HTML <param> Tag (Obsolete) .......................................... 306 134. HTML <noscript> Tag .......................................................... 422
94. HTML <picture> Tag ............................................................... 308 135. HTML <slot> Tags ................................................................ 424
95. HTML <canvas> Tag .............................................................. 311 136. HTML <template> Tag ......................................................... 427
96. HTML <map> Tag ................................................................... 314 137. HTML <shadow> Tag (Obsolete) ..................................... 430
97. HTML <area> Tag ................................................................... 317 138. HTML <center> Tag ............................................................. 432
98. HTML <table> Tag .................................................................. 320 139. HTML <font> Tag .................................................................. 434
99. HTML <caption> Tag .............................................................. 324 140. HTML <big> Tag .................................................................... 436
100. HTML <thead> Tag ............................................................... 327 141. HTML <strike> Tag ............................................................... 438
101. HTML <tbody> Tag ............................................................... 330 142. HTML <tt> Tag ....................................................................... 440
102. HTML <tfoot> Tag ................................................................. 333 143. HTML <acronym> Tag ......................................................... 443
103. HTML <tr> Tag ....................................................................... 336 144. HTML <applet> Tag .............................................................. 446

HTML5ANDCSS3 | [Link] 3
Contents continued
145. HTML <frame> Tag .............................................................. 448
146. HTML <frameset> Tag ......................................................... 450
147. HTML <noframes> Tag ....................................................... 453
148. HTML <marquee> Tag ........................................................ 456
149. HTML <blink> Tag ................................................................. 460
150. HTML <s> Tag ....................................................................... 463
151. HTML <var> Tag ................................................................... 465
152. HTML <kbd> Tag .................................................................. 467
153. HTML <samp> Tag ............................................................... 469
154. HTML <code> Tag ................................................................ 472
155. HTML <dfn> Tag ................................................................... 474
156. HTML <div> Tag .................................................................... 476
157. HTML <span> Tag ................................................................ 479
158. HTML Comment Tag ............................................................ 482
159. HTML <data> Tag ................................................................. 484
160. HTML Ruby Annotations: <ruby>, <rt> and <rp> ........ 486
161. HTML <svg> Tag ................................................................... 489
162. HTML <basefont> Tag ......................................................... 493

HTML5ANDCSS3 | [Link] 4
<html>
CHAPTER 001 / HTML BASICS

Introduction to HTML

HTML (HyperText Markup Language) is the standard language for creating web pages. In this
introduction, you'll learn what HTML is, how it works, and why it forms the foundation of all websites
on the internet.

What is HTML?
HTML stands for HyperText Markup Language.

It is the standard language used to create webpages and web applications. HTML is not a programming
language - it is a markup language that tells the browser how to display content.

Key Points about HTML:

- HTML uses tags to define elements on a webpage.
- Every HTML document has a basic structure with head and body sections.
- HTML files usually have a .html or .htm extension.
- HTML is interpreted by web browsers like Chrome, Firefox, Safari, and Edge.

History of HTML:
Developed in 1991 by Tim Berners-Lee.

HTML has evolved over time:

- HTML 1.0 -> Basic text formatting.

- HTML 2.0 / 3.2 / 4.01 -> Introduced forms, tables, and more complex formatting.
- HTML5 -> Modern standard with semantic tags, multimedia support, and APIs.

Why HTML is Important:

- Foundation of the Web - All websites use HTML.
- Works with CSS & JavaScript - HTML handles structure, CSS handles style, JS handles behavior.
- Semantic Meaning - Tags give meaning to content for search engines and accessibility.
- Browser Compatibility - All browsers understand HTML.

HTML5ANDCSS3 | [Link] 5
Introduction to HTML

Basic Structure of an HTML Document:

Here's a simple example of a basic HTML5 page:

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML Tutorial</h1>
<p>This is a simple introduction to HTML.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- <!DOCTYPE html> -> Declares HTML5.

- <html> -> Root element of the page.
- <head> -> Contains meta information, title, and links to CSS/JS.
- <body> -> Contains visible content (text, images, links, etc.).
- <h1> -> Main heading
- <p> -> Paragraph

Where to See HTML Output (Running HTML Code)

After writing your first HTML code, the next step is to view the result - and for that, you don't need any
special software.

All you need is a web browser like Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari.

You can save your file with .html extension and then you can open the saved file by double clicking on it.

The file will be opened in default browser like below image

HTML5ANDCSS3 | [Link] 6
Introduction to HTML

HTML Example

Edit and Refresh

To make changes:

1. Go back to your text editor and update the HTML code.

2. Save the file again.
3. Refresh (F5) your browser window to see the updated output.

Tip: Keep your editor and browser windows side by side - so you can code and preview quickly.

If you don't want to save files locally, you can test your code instantly using online Try it Editor

These allow you to write HTML, CSS, and JavaScript directly in your browser and see results instantly -
perfect for beginners.

Tips for Beginners:

- Always close your HTML tags (<p></p>, <h1></h1>).
- Indent your code for readability.
- Use semantic tags whenever possible (<header>, <footer>, <article>).
- Test your HTML in different browsers.

HTML5ANDCSS3 | [Link] 7
Introduction to HTML

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
You can run and test your HTML code anywhere, even without internet access.

Start with simple pages, observe the browser output, and experiment - that's the best way to learn HTML!

HTML5ANDCSS3 | [Link] 8
<html>
CHAPTER 002 / HTML BASICS

HTML Editors

HTML code can be written using any simple text editor - you don't need fancy software to start.
However, as you progress, using an HTML editor can make your work faster, more accurate, and
easier to manage.

What Is an HTML Editor?

An HTML editor is a tool that helps you write and edit HTML code.

You can use:

- A basic text editor like Notepad or TextEdit, or

- A professional code editor like Visual Studio Code, Sublime Text, or Atom

HTML editors highlight syntax, auto-complete tags, and help prevent errors - making them ideal for both
beginners and professionals.

Writing HTML Using a Simple Text Editor

Every computer already has a basic text editor.

Here's how you can create your first HTML file using Notepad (on Windows):

Steps:

Step 1: Open Notepad (press Windows + R, type notepad, and hit Enter).

Type the following HTML code:

HTML5ANDCSS3 | [Link] 9
HTML Editors

[Link]

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is my first web page created in Notepad.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Step 2: Click File -> Save As.

Step 3: In the "Save as type" dropdown, choose All Files.

Step 4: Save the file with the name [Link] (not [Link]).

Step 5: Double-click the file - it will open in your browser and display your web page.

Using Professional Code Editors

Professional editors come with extra features such as:

- Syntax highlighting (different colors for tags and text)

- Auto-completion (finishes tag names for you)
- Error detection (detects any error and flag it in red color)
- Live preview (see output instantly while typing)

Popular HTML Editors

Editor Platform Description

Free and powerful editor by Microsoft

Visual Studio Code (VS Code) Windows, macOS, Linux
with extensions support.

Lightweight, fast, and great for

Sublime Text Windows, macOS, Linux
advanced users.

Open-source editor developed by

Atom Windows, macOS, Linux
GitHub.

Designed especially for web

Brackets Windows, macOS
development with live preview.

Simple yet feature-rich upgrade to

Notepad++ Windows
default Notepad.

HTML5ANDCSS3 | [Link] 10
HTML Editors

Setting Up an Editor (Example: VS Code)

To set up Visual Studio Code (VS Code):

- Download from [Link]

- Install and open it.
- Create a new file -> save it as [Link].
- Start typing your HTML code.
- Install the Live Server extension -> click "Go Live" to preview your web page in real time.

Online HTML Editors

If you don't want to install anything, try our fastest online editor where you can write and preview instantly:

Try it Editor is best for learning and quick experiments.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
You can write HTML code using any editor - even a simple text editor is enough to get started.
But as you build more complex web pages, professional editors help improve speed, accuracy, and comfort.
Choose the one that fits your style best and start coding!

HTML5ANDCSS3 | [Link] 11
<html>
CHAPTER 003 / HTML BASICS

HTML Structure

Every web page on the internet follows a specific HTML structure.

This structure defines how a browser reads and displays the page's content - from the title at the
top to the last paragraph at the bottom.
In this article you will learn about the basic structure of HTML.

What Is the Basic Structure of an HTML Document?

An HTML document is made up of elements (tags) that tell the browser what to show and how to organize
it.

Here's the basic skeleton of every HTML page:

HTML Basic Structure

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML document structure.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Let's break this down step by step

<!DOCTYPE html> - Document Type Declaration

This line tells the browser that the page uses HTML5, the latest version of HTML.
It must always appear at the very top of every HTML document.

<!DOCTYPE html>

Without it, browsers might not interpret your page correctly.

HTML5ANDCSS3 | [Link] 12
HTML Structure

<html> - Root Element

The <html> tag wraps all other elements and defines the start and end of the document

<html>
... all your content goes here ...
</html>

Everything you want to display on the webpage lives inside this tag.

<head> - Head Section

The <head> contains metadata (information about the page that isn't shown directly on the webpage).
It usually includes:

- The page title

- Meta tags (description, keywords, viewport)
- Links to CSS files or favicons
- Scripts to run before the page loads

<head>
<title>My First Page</title>
<meta charset="UTF-8">
<meta name="description" content="A simple HTML structure example">
</head>

<title> - Title Tag

The <title> tag sets the text that appears:

- On the browser tab

- As the page title in search results

<title>My Web Page</title>

<body> - Body Section

The <body> contains everything visible on your web page - like text, images, links, tables, and forms.

HTML5ANDCSS3 | [Link] 13
HTML Structure

<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>

Complete Example with Explanation

Here's how a simple, complete HTML document looks:

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to HTML Structure</h1>
<p>This example shows the essential building blocks of an HTML document.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

- The <!DOCTYPE html> ensures HTML5 compatibility.

- The <html> wraps the entire content.
- The <head> defines page info.
- The <body> holds the visible content.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
The structure of an HTML document forms the foundation of every web page.

Once you understand where each element belongs, building pages becomes much easier.

Always remember: the browser reads your HTML from top to bottom, so order matters!

HTML5ANDCSS3 | [Link] 14
<html>
CHAPTER 004 / HTML BASICS

HTML Elements & Attributes

HTML pages are built using elements - the building blocks of a web page.
Each element defines a specific part of the content such as headings, paragraphs, images, or links.
Elements often include attributes that provide extra information about that element.

What Is an HTML Element?

An HTML element is everything between a start tag and an end tag.

Example

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

In this example:

- <p> -> Start tag

- </p> -> End tag
- This is a paragraph -> Content
- The entire line -> HTML element

So, an element = start tag + content + end tag

HTML Element Syntax

Each HTML element usually follows this pattern:

<opening-tag>Content goes here</closing-tag>

Example

<h1>Hello World!</h1>

Here <h1> is the start tag, and </h1> is the closing tag.

Some elements don't have content and don't require a closing tag - these are called empty (void) elements
.

HTML5ANDCSS3 | [Link] 15
HTML Elements & Attributes

Void Elements Example

Types of HTML Elements

1. Block-level elements - Start on a new line and take up full width.
Examples: <div>, <h1>, <p>, <table>, <form>
2. Inline elements - Do not start on a new line and only take up as much width as needed.
Examples: <span>, <a>, <strong>, <em>, <img>

What Are HTML Attributes?

Attributes provide extra details about an element - such as its behavior, appearance, or linked data.
They always appear inside the opening tag and are written as name="value" pairs.

Example

<a href="[Link] Our Site</a>

Example Explained:

- a -> Element
- href -> Attribute name
- [Link] -> Attribute value

Common HTML Attributes

Attribute Description Example

Specifies a unique identifier for an

id <p id="intro">Welcome</p>
element

class Groups elements for styling or scripting <div class="box"></div>

style Adds inline CSS styling <p style="color:blue;">Hello</p>

title Adds tooltip text HTML

Specifies the source of an image or

src <img src="[Link]">
media

href Defines link destination Link

HTML5ANDCSS3 | [Link] 16
HTML Elements & Attributes

<img src="[Link]" alt="Nature

alt Adds alternate text for images
view">

Attribute Rules
- Attributes are written inside the opening tag.
- Always use lowercase names for attributes.
- Always enclose values in quotes (single or double).
- You can use multiple attributes inside one tag.

Example

<img src="[Link]" alt="My Photo" width="400" height="300">

Nesting HTML Elements

Elements can be placed inside other elements - this is called nesting.

Example

<p>This is a <strong>bold</strong> word inside a paragraph.</p>

Here <strong> is nested inside <p>.

Always close nested tags in the reverse order they are opened.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML elements define the structure, and attributes define the behavior and properties of those elements.
Mastering both is essential to build well-structured, accessible, and dynamic web pages.

HTML5ANDCSS3 | [Link] 17
<html>
CHAPTER 005 / HTML BASICS

HTML Headings

Headings in HTML define the titles and subtitles of a webpage.

They help organize your content, improve readability, and play an important role in SEO by showing
search engines what your page is about.

What Are HTML Headings?

HTML provides six levels of headings, from <h1> to <h6>.
Each heading represents a different level of importance - with <h1> being the most important and <h6> the
least.

Example

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Explanation of Heading Levels

- <h1> - Used for the main title of the page or main topic.
- <h2> - Used for major subheadings under <h1>.
- <h3> to <h6> - Used for sub-sections or smaller details.

Browsers automatically display <h1> as the largest text and <h6> as the smallest.

Example: Headings in Real Use

HTML5ANDCSS3 | [Link] 18
HTML Headings

Real Example

<h1>HTML Tutorial</h1>
<h2>Introduction</h2>
<h3>What is HTML?</h3>
<h4>History of HTML</h4>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This structure shows a clear hierarchy - just like chapters and sections in a book.

Styling Headings with CSS

While HTML defines structure, CSS controls how headings look.

Styling Header

<h1 style="color: #29AB87; font-family: Arial;">Welcome to My Website</h1>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

You can change color, size, font, or alignment using CSS - but thesemantic meaning of the tag remains the
same.

SEO and Accessibility Tips

- Always use only one <h1> per page.
- Maintain logical order - don't skip from <h1> to <h4>.
- Use headings to organize content, not just to make text look bigger.
- Search engines use headings to understand page hierarchy and keyword relevance.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 19
HTML Headings

Conclusion
HTML headings help both users and search engines understand your content.
Use them logically, consistently, and semantically - your pages will be easier to read, better organized, and
more SEO-friendly.

HTML5ANDCSS3 | [Link] 20
<html>
CHAPTER 006 / HTML BASICS

HTML Paragraphs

Paragraphs are the foundation of text content on any webpage.

In HTML, the tag is used to define a paragraph - separating blocks of text and improving readability
for both users and browsers.

What Is an HTML Paragraph?

An HTML paragraph is created using the <p> element.
Browsers automatically add space before and after each paragraph to make text easier to read.

Paragraph Example

<p>This is my first paragraph.</p>

<p>This is another paragraph with more text.</p>

Each paragraph is treated as a separate block of content.

How Browsers Handle Paragraphs

- Browsers ignore extra spaces or line breaks inside a paragraph.
- Even if you press Enter or add multiple spaces, HTML will display them as a single space.

Example

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

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Paragraph Styling with CSS

HTML5ANDCSS3 | [Link] 21
HTML Paragraphs

Example

<p style="color: #29AB87; font-size: 18px; line-height: 1.6;">

HTML paragraphs make your text organized and easy to read.
</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Common properties to style paragraphs:

- color - text color

- font-size - size of text
- line-height - spacing between lines
- text-align - alignment (left, center, right, justify)

Aligning Text in Paragraphs

Example

<p style="text-align:center;">This paragraph is centered.</p>

<p style="text-align:right;">This paragraph is aligned to the right.</p>
<p style="text-align:justify;">This paragraph is justified like in newspapers.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Alignment improves presentation and helps with layout design.

Nested Elements Inside Paragraphs

You can include inline elements (formatting tag) such as , , , , or <a> inside paragraphs.

Example

<p>HTML <strong>paragraphs</strong> can include <em>formatted text</em> and <a href="#">links</a>

.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Things to Remember
- Paragraphs cannot contain block-level elements (like <div> or <h1>).
- Always close the paragraph tag (</p>).

HTML5ANDCSS3 | [Link] 22
HTML Paragraphs

- Avoid leaving empty <p></p> tags - they create unwanted space.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML paragraphs structure your text and make your web content clean, readable, and accessible.
Use them properly to separate ideas, add spacing, and create a natural reading flow for visitors.

HTML5ANDCSS3 | [Link] 23
<html>
CHAPTER 007 / HTML BASICS

HTML Formatting

HTML provides tags to format text on your web page - making it bold, italic, highlighted, or styled
semantically for emphasis.
Formatting improves readability and helps users understand important content.

Bold and Strong Text

- <b> - Makes text bold, purely for visual effect.
- <strong> - Makes text bold and adds semantic importance for accessibility and SEO.

Formatting Example

<p>This is <b>bold text</b>.</p>

<p>This is <strong>strong important text</strong>.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Italic and Emphasized Text

- <i> - Italicizes text for stylistic purposes.
- <em> - Emphasizes text semantically, read as important by screen readers.

Formatting Example

<p>This is <i>italic text</i>.</p>

<p>This is <em>emphasized text</em>.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Underline and Mark

- <u> - Underlines text (visual only).
- <mark> - Highlights text (like a yellow marker).

HTML5ANDCSS3 | [Link] 24
HTML Formatting

Formatting Example

<p>This is <u>underlined text</u>.</p>

<p>This is <mark>highlighted text</mark>.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Subscript and Superscript

- <sub> - Subscript text (appears slightly below baseline)
- <sup> - Superscript text (appears slightly above baseline)

Formatting Example

<p>H<sub>2</sub>O is water.</p>
<p>E = mc<sup>2</sup> is Einstein's formula.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Small and Deleted Text

- <small> - Reduces text size
- <del> - Shows deleted/strikethrough text

Formatting Example

<p>This is <small>small text</small>.</p>

<p>This is <del>deleted text</del>.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Combining Formatting Tags

You can nest formatting tags for combined effects:

HTML5ANDCSS3 | [Link] 25
HTML Formatting

Formatting Example

<p>This is <strong><em>bold and emphasized</em></strong> text.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML formatting tags let you enhance the appearance and meaning of text on your page.
Use semantic tags like <strong> and <em> for important content, and visual tags like <b> or <i> for
stylistic emphasis.

HTML5ANDCSS3 | [Link] 26
<html>
CHAPTER 008 / HTML BASICS

HTML Comments

Comments in HTML are notes or explanations added to your code for yourself or other developers.
They do not appear on the webpage, but are visible in the HTML source code. Comments make
your code easier to understand and maintain.

What Is an HTML Comment?

An HTML comment is written using the following syntax:

Comment Example

- Everything between  is ignored by the browser.

- You can write single-line or multi-line comments.

Single-Line Comment Example

Single-line Comment

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

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

- The <p> text is visible on the webpage.

- The comment is ignored and not displayed.

Multi-Line Comment Example

HTML5ANDCSS3 | [Link] 27
HTML Comments

Multi-line Comment

<p>HTML comments are helpful for developers.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Common Uses of HTML Comments

Code Documentation

Explain sections of code for yourself or other developers.

Debugging

Temporarily disable a part of your HTML code:

Example

Organizing Code

Separate sections for better readability:

Organizing Example

Important Notes
- Comments cannot be nested. Don't put  inside another comment.
- Avoid overusing comments - only use them where necessary for clarity.
- Comments are visible in the browser's "View Page Source", so don't include sensitive information.

HTML5ANDCSS3 | [Link] 28
HTML Comments

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML comments are an essential tool for code documentation, organization, and debugging.
They help developers understand, maintain, and collaborate on projects without affecting what users see on
the webpage.

HTML5ANDCSS3 | [Link] 29
<html>
CHAPTER 009 / HTML BASICS

HTML Styles

HTML allows you to style your web page content to make it visually appealing.
Styles define colors, fonts, spacing, and layout of elements. You can apply styles inline, internally, or
externally using CSS.

What Are HTML Styles?

Styles control the visual presentation of HTML elements.
While HTML defines structure, styles define appearance.

HTML Style Example

<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

- style -> Attribute to apply inline CSS

- color -> Sets text color
- font-size -> Sets size of text

Types of Styling in HTML

a) Inline Styles

Applied directly to an element using the style attribute.

Inline Style Example

<h1 style="color: #29AB87; text-align: center;">Welcome!</h1>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 30
HTML Styles

b) Internal Styles

Defined within <style> tags inside the <head> section.

Internal Style Example

<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>This paragraph is styled using internal CSS.</p>
</body>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

c) External Styles

Stored in a separate .css file and linked to HTML using <link> in <head>.

External Style Example

[Link]:

Style Example

body {
background-color: #f0f0f0;
}
h1 {
color: #29AB87;
}

HTML5ANDCSS3 | [Link] 31
HTML Styles

Common Style Properties

Property Description Example

color Text color color: blue;

background-color Background color background-color: yellow;

font-size Text size font-size: 18px;

font-family Font style font-family: Arial, sans-serif;

text-align Text alignment text-align: center;

margin Space outside element margin: 10px;

padding Space inside element padding: 5px;

Example: Combining Styles

Combined Style Example

<p style="color: white; background-color: #29AB87; font-size: 18px; padding: 10px; text-align: ce
nter;">
Styled paragraph with multiple properties.
</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This paragraph has text color, background color, font size, padding, and centered alignment.

Tips for Using Styles

Use CSS classes instead of repeating inline styles.

Example HTML

<p class="highlight">This is highlighted text.</p>

Define classes in <style> or external CSS.

HTML5ANDCSS3 | [Link] 32
HTML Styles

Example CSS

.highlight {
color: #29AB87;
font-weight: bold;
}

Avoid overusing inline styles for cleaner code and better maintainability.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML styles enhance the appearance and readability of your web page.
Learning to use inline, internal, and external styles effectively is essential for creating visually appealing and
professional-looking websites.

HTML5ANDCSS3 | [Link] 33
<html>
CHAPTER 010 / HTML TEXT AND LINKS

HTML Text Formatting

HTML Text Formatting allows you to enhance and style text to emphasize meaning, highlight
important parts, and improve readability.
It combines basic formatting tags with semantic and accessible design to make content look more
professional and meaningful.

What Is Text Formatting in HTML?

Text formatting means changing the appearance or meaning of text using HTML tags.

For example, you can make text bold, italic, underlined, marked, or smaller to draw attention or clarify
meaning.

Text Formatting Example

<p>This is <b>bold</b> and <i>italic</i> text.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Commonly Used Text Formatting Tags

Tag Description Example

<b> Makes text bold (visual only) Bold text

<strong> Emphasizes important text (semantic) Important!

<i> Italic text (visual only) Italic text

<em> Emphasized text (semantic meaning) Emphasized text

<u> Underlined text Underlined

<mark> Highlights text Highlighted text

<small> Makes text smaller Fine print

<del> Shows deleted text Old price

<ins> Shows inserted text <ins>New price</ins>

HTML5ANDCSS3 | [Link] 34
HTML Text Formatting

<sub> Subscript text H2O

<sup> Superscript text x2

Combining Multiple Formatting Tags

You can mix several formatting styles together to achieve rich text presentation.

Multiple Formatting Example

<p>This <b><i><mark>text</mark></i></b> is bold, italic, and highlighted.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Preformatted & Code Text

When displaying code snippets or preserving spaces and line breaks, HTML provides two special tags:

<pre> Tag

Pre Tag Example

<pre>
Line 1
Line 2 (Indented)
Line 3
</pre>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Tag

Displays text as computer code:

Code Tag Example

<code>[Link]("Hello World");</code>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 35
HTML Text Formatting

Combined <pre> and Tag

Combined Example

<pre><code>function greet() { [Link]("Hello!"); }</code></pre>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Accessibility and Best Practices

- Use <strong> and <em> for meaning, not just style.
Example: <strong> for important text, <em> for emphasis.
- Avoid using <b> and <i> alone unless for visual presentation only.
- Combine CSS for visual styling instead of relying entirely on HTML tags.

Example

<p style="font-weight: bold; color: #29AB87;">Styled with CSS</p>

Practical Example: Product Description

Practical Example

<h2>Smart Watch Features</h2>

<p>
The <strong>new SmartTime X</strong> comes with a
<em>heart rate monitor</em> and <mark>GPS tracking</mark>.
Battery lasts for <b>7 days</b> and is <u>water-resistant</u>.
</p>
<p>
Old price: <del>$199</del>
New price: <ins>$149</ins>
</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Demonstrates semantic, visual, and practical formatting in real-world content.

HTML5ANDCSS3 | [Link] 36
HTML Text Formatting

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML Text Formatting helps you create readable, attractive, and accessible web pages.
By combining formatting tags smartly with CSS and semantics, you can emphasize key information while
maintaining a professional look.

HTML5ANDCSS3 | [Link] 37
<html>
CHAPTER 011 / HTML TEXT AND LINKS

HTML Quotations & Citations

HTML provides several tags to display quoted text, citations, and references properly.
These tags give meaning and context to text quotes, making your content more readable and
semantically correct for browsers and search engines.

The <blockquote> Tag (For Long Quotes)

The <blockquote> tag is used for long quotations that are usually displayed as separate, indented
blocks.

Blockquote Example

<blockquote>
"The best way to get started is to quit talking and begin doing."
</blockquote>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

You can also include the source of the quote using the cite attribute:

Blockquote Example

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The <q> Tag (For Short Quotes)

The <q> tag is used for short, inline quotations within a sentence.
Browsers automatically add quotation marks around the text.

HTML5ANDCSS3 | [Link] 38
HTML Quotations & Citations

Q Tag Example

<p>Walt Disney once said, <q>The way to get started is to quit talking and begin doing.</q></p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The Tag (For Source Titles)

The <cite> tag is used to reference the title of a creative work - like a book, article, song, or painting.

Cite Example

<p><cite>The Mona Lisa</cite> was painted by Leonardo da Vinci.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Note: The <cite> tag is typically rendered in italic by browsers.

The Tag (For Abbreviations)

Although not strictly a quotation tag, <abbr> is often used in the same context to show abbreviations or
acronyms with explanations.

Abbr Example

<p>The <abbr title="World Health Organization">WHO</abbr> was established in 1948.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Note: hover to see "World Health Organization"

The <address> Tag (For Contact Information)

The <address> tag represents contact details or author information for a document or article.

HTML5ANDCSS3 | [Link] 39
HTML Quotations & Citations

Address Tag Example

<address>
Written by <a href="[Link] Doe</a>.<br>
Visit us at:<br>
123 Web Street, HTML City
</address>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Example: Combining Quotation and Citation Tags

Combined Example

<blockquote cite="[Link]
"Life is like riding a bicycle. To keep your balance, you must keep moving."
</blockquote>
<p><cite>Albert Einstein</cite></p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Displays the quote, cites the author, and attributes the source properly.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML quotation and citation tags make your content more semantic, structured, and credible.
They help browsers, readers, and search engines understand the meaning and origin of text, improving SEO
and accessibility of your web pages.

HTML5ANDCSS3 | [Link] 40
<html>
CHAPTER 012 / HTML TEXT AND LINKS

HTML Links

HTML Links allow you to connect one page to another or link to files, images, or external websites.
Links are created using the (anchor) tag, which turns any text or image into a clickable hyperlink.

The Tag - Basic Syntax

The anchor tag uses the href attribute to specify the destination URL.

Basic Example

<a href="[Link] HTML5 & CSS3</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation

- <a> - Defines the hyperlink

- href - Contains the destination address
- The text between <a> and </a> becomes clickable

Types of HTML Links

a) External Links

Links to a different website.

External Links Example

<a href="[Link] to Google</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 41
HTML Links

b) Internal Links

Links to another page on the same website.

Internal Links Example

<a href="[Link]">About Us</a>

c) Anchor Links (Within Same Page)

Links to a specific section on the same page using the id attribute.

Anchor Links Example

<a href="#contact">Go to Contact Section</a>

<h2 id="contact" style="margin-top: 700px">Contact Us</h2>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

d) Email Links

Use the mailto: prefix to open an email app.

Email Link Example

<a href="[Link] Email</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

e) Phone Links

Use the tel: prefix to make a phone number clickable on mobile.

Phone Link Example

<a href="[Link] Us</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 42
HTML Links

The target Attribute

The target attribute defines how the link opens.

Value Description

_self Opens in the same tab (default)

_blank Opens in a new tab

_parent Opens in the parent frame

_top Opens in the full body of the window

Link Example with Target

<a href="[Link] target="_blank">Open in New Tab</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Using Links with Images

You can turn an image into a clickable link:

Image Link Example

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The title Attribute

Adds extra information that appears when you hover over the link.

Link with Title Attribute

<a href="[Link] title="Visit HTML5 and CSS3 Tutorials">HTML5 & CSS3</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 43
HTML Links

Example: Navigation Menu Using Links

Navigation Menu Link

<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Services</a> |
<a href="#">Contact</a>
</nav>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This creates a simple, text-based navigation menu for your website.

You can change # with your desired path to link these navigation menus.

Best Practices for Links

- Always use meaningful link text (avoid "Click here").
- Use target="_blank" only for external sites.
- Ensure all links are accessible and have clear purpose.
- Use CSS to style links consistently across pages.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML Links are essential for connecting web pages and building site navigation.
Using the <a> tag properly improves user experience, accessibility, and SEO - making your website easier
to explore and understand.

HTML5ANDCSS3 | [Link] 44
<html>
CHAPTER 013 / HTML TEXT AND LINKS

HTML Email Links

HTML Email Links allow users to click and open their default email application to send a message
directly.
This is done using the mailto: protocol inside the (anchor) tag.

Basic Email Link

Basic Example

<a href="[Link] Email</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

- Clicking the link opens the default email client with the To: field pre-filled.
- The text between <a> and </a> becomes clickable.

Adding Subject and Body

You can include a subject, body, CC, and BCC directly in the email link using query parameters.

Email with Subject Example

<a href="[Link]
know%20more%20about%20your%20services.">Send Email</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

- %20 represents a space in URLs.

- Opens the email client with subject and pre-written body.

CC and BCC Fields

You can also include CC (carbon copy) and BCC (blind carbon copy) recipients:

HTML5ANDCSS3 | [Link] 45
HTML Email Links

CC, BCC Example

<a href="[Link]
dback">Send Feedback</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Clicking this link automatically populates To, CC, BCC, and Subject fields.

Webmail Clients (like Gmail)

You can create a link that opens Gmail compose window:

Gmail Link Example

<a href="[Link] target="_blank">

Send Email
</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Best Practices
- The Email link will only work, when you have default email client is setup in your system.
- Keep the link text descriptive:
Contact Support instead of Click Here.
- Avoid putting sensitive information in the body.
- Test links across different email clients to ensure compatibility.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML Email Links ([Link] provide a fast and convenient way for visitors to contact you directly from
your website.

HTML5ANDCSS3 | [Link] 46
HTML Email Links

By adding subject, body, CC, and BCC, you can streamline communication and improve user experience.

HTML5ANDCSS3 | [Link] 47
<html>
CHAPTER 014 / HTML LISTS AND TABLES

HTML Lists

HTML Lists allow you to organize content in a structured way.

They are used for menus, steps, bullet points, or any grouped information. HTML provides three
main types of lists: unordered, ordered, and description lists.

Unordered List (<ul>)

Use the <ul> tag for the list container and <li> for each item.

Unordered List Example

<ul>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>JavaScript Introduction</li>
</ul>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Ordered List (<ol>)

An ordered list displays items with numbers or letters.
Use the <ol> tag for the container and <li> for items.

Ordered List Example

<ol>
<li>Register an account</li>
<li>Verify your email</li>
<li>Start learning HTML</li>
</ol>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 48
HTML Lists

Optional attributes for <ol>:

- type="A" -> Uppercase letters (A, B, C)

- type="a" -> Lowercase letters (a, b, c)
- type="I" -> Uppercase Roman numerals (I, II, III)
- type="i" -> Lowercase Roman numerals (i, ii, iii)

Description List (<dl>)

A description list is used for terms and their descriptions.
It uses three tags: <dl> (list), <dt> (term), <dd> (description).

Description List Example

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language used for web pages.</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets used for styling HTML.</dd>
</dl>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Nesting Lists
You can create lists inside lists for hierarchical information.

Nesting Lists Example

<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Spinach</li>
</ul>
</li>
</ul>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 49
HTML Lists

Best Practices
- Always use <li> inside <ul> or <ol>.
- Use <dl> for definitions, terms, or FAQs.
- Nest lists carefully for clear structure.
- Style lists using CSS for better appearance.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML Lists help structure content in bullet points, numbered steps, or definitions.
They improve readability, organization, and the overall user experience on your web pages.

HTML5ANDCSS3 | [Link] 50
<html>
CHAPTER 015 / HTML LISTS AND TABLES

HTML Tables

HTML Tables allow you to display data in a structured, tabular format with rows and columns.
Tables are commonly used for schedules, pricing lists, reports, and any content that requires clear
organization.

Basic Table Structure

A table is created using the <table> tag.
Each row is defined by <tr>, and each cell by <td> (data cell) or <th> (header cell).

Basic Table Example

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alissha</td>
<td>28</td>
<td>Delhi</td>
</tr>
<tr>
<td>Swapnil</td>
<td>30</td>
<td>Mumbai</td>
</tr>
</table>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Table Header, Body & Footer

HTML5 introduced semantic tags for better structure:

- <thead> -> Table header section

- <tbody> -> Main table content
- <tfoot> -> Footer section (like totals or notes)

HTML5ANDCSS3 | [Link] 51
HTML Tables

Table Example

<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$800</td>
</tr>
<tr>
<td>Tablet</td>
<td>$400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$1200</td>
</tr>
</tfoot>
</table>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Why use these?

They improve readability, structure, and accessibility, especially when using JavaScript or styling with
CSS.

Adding Captions
The <caption> tag provides a title or description for your table.

Caption Example

<table border="1">
<caption>Monthly Sales Report</caption>
...
</table>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 52
HTML Tables

Merging Cells (Rowspan & Colspan)

To merge multiple cells together:

- colspan merges columns

- rowspan merges rows

Merged Cell Example

<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Alissha</td>
<td>95</td>
<td>89</td>
</tr>
</table>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Styling Tables with CSS

You can control borders, padding, and colors using CSS.

HTML5ANDCSS3 | [Link] 53
HTML Tables

Table Styling Example

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Responsive Tables
Large tables can overflow on small screens.
Use CSS for horizontal scrolling or stacking layout.

HTML5ANDCSS3 | [Link] 54
HTML Tables

[Link]

<div style="overflow-x:auto;">
<table border="1" style="width: 800px;">
<tr><th>Name</th><th>City</th><th>Email</th></tr>
<tr><td>Alissha</td><td>Delhi</td><td>alissha@[Link]</td></tr>
<tr><td>Swapnil</td><td>Mumbai</td><td>swapnil@[Link]</td></tr>
</table>
</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Table Accessibility Tips

To make your tables screen-reader friendly:

- Use <th> for headers, not <td>.

- Add scope="col" or scope="row" for clarity.
- Use <caption> to describe the table's purpose.

Accessibility Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible HTML Table Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
caption {
caption-side: top;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
color: #29AB87;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f5f5f5;
}
tr:nth-child(even) {
background-color: #fafafa;
}
tr:hover {
background-color: #f0f9f6;

HTML5ANDCSS3 | [Link] 55
HTML Tables

}
</style>
</head>
<body>

<h2>Student Information Table</h2>

<table>
<caption>List of Students with Age and City</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alissha</td>
<td>28</td>
<td>Delhi</td>
</tr>
<tr>
<td>Swapnil</td>
<td>30</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Rahul</td>
<td>26</td>
<td>Pune</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Students: 3</td>
</tr>
</tfoot>
</table>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- <thead>, <tbody>, <tfoot> - provide clear structure.

- <th scope="col"> - defines header cells for each column, improving screen-reader accessibility.
- <caption> - gives the table a descriptive title.
- CSS styling adds borders, colors, and hover effects for better readability.

HTML5ANDCSS3 | [Link] 56
HTML Tables

Advanced Table Attributes (Legacy)

Older HTML supports attributes (now replaced by CSS):

- border -> Defines table border

- cellpadding -> Space inside cells
- cellspacing -> Space between cells
- align, bgcolor, width -> Outdated, use CSS instead

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML Tables provide a powerful way to display and organize data in rows and columns.
Using <thead>, <tbody>, <tfoot>, and CSS styling helps make your tables more structured,
accessible, and responsive.

HTML5ANDCSS3 | [Link] 57
<html>
CHAPTER 016 / HTML LISTS AND TABLES

Table Styling & Borders

HTML tables look plain by default - but with a few CSS properties, you can turn them into clean,
professional, and visually appealing data tables.

This chapter will show you how to add borders, colors, spacing, hover effects, and full styling control
over your tables.

Default Table Look

By default, an HTML table only shows data without borders or spacing.

Default Table

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alissha</td>
<td>28</td>
</tr>
</table>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Adding Basic Borders

You can add a border to your table using either the HTML border attribute (not recommended anymore) or
CSS styling.

Using HTML Attribute (Old Method)

<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alissha</td><td>28</td></tr>
</table>

HTML5ANDCSS3 | [Link] 58
Table Styling & Borders

Not recommended in HTML5 - use CSS instead.

Using CSS (Modern Method)

Table Border Example

<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alissha</td><td>28</td></tr>
</table>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- border: 1px solid black; adds a one-pixel black border.

- The same rule applies to <table>, <th>, and <td>.

Removing Double Borders

When adding borders to both <table> and <td>, you may see double borders.
Use the border-collapse property to fix this.

HTML5ANDCSS3 | [Link] 59
Table Styling & Borders

Double Border Remove

<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Swapnil</td><td>30</td></tr>
<tr><td>Alissha</td><td>28</td></tr>
</table>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Adding Table Padding & Spacing

Padding - space inside a cell

Cell Inside Space Example

th, td {
padding: 10px;
}

Spacing - space between cells

Space Between Cells Example

table {
border-spacing: 5px;
}

Tip: border-collapse: collapse; removes cell spacing, while border-spacing adds it.

HTML5ANDCSS3 | [Link] 60
Table Styling & Borders

Adding Colors & Backgrounds

You can style your table cells using CSS background and text colors.

Table Colors Example

Output:

- Header row has a green background and white text.

- Table data has a soft gray background.

Adding Hover Effects

Hover effects make tables more interactive and readable.

Hover Effect Example

When you move your mouse over a row, it changes color.

Aligning Text
You can align text left, center, or right using text-align.

HTML5ANDCSS3 | [Link] 61
Table Styling & Borders

Align Example

th {
text-align: center;
}
td {
text-align: right;
}

Table Width, Height, and Alignment

You can set table dimensions using CSS:

Table Width & Height

table {
width: 100%;
height: auto;
}

To center your table:

Table Alignment Example

table {
margin-left: auto;
margin-right: auto;
}

Stylish Table Example

Here's a complete example showing modern styling, hover, and even zebra stripes:

Table Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Styling Example</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
}

HTML5ANDCSS3 | [Link] 62
Table Styling & Borders

caption {
caption-side: top;
font-weight: bold;
margin-bottom: 10px;
color: #29AB87;
}
th, td {
border: 1px solid #ddd;
padding: 10px 15px;
text-align: left;
}
th {
background-color: #29AB87;
color: #fff;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e6f5ef;
}
</style>
</head>
<body>

<h2>Styled Employee Data Table</h2>

<table>
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Alissha</td>
<td>Design</td>
<td>$5000</td>
</tr>
<tr>
<td>Swapnil</td>
<td>Development</td>
<td>$6000</td>
</tr>
<tr>
<td>Rahul</td>
<td>Marketing</td>
<td>$4500</td>
</tr>
</table>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 63
Table Styling & Borders

What you'll see:

- A centered table with borders, background colors, zebra stripes, and hover effects.
- Beautiful readability and professional structure.

Responsive Table Design (for Mobile)

To make your table scrollable on small screens:

Responsive Table

This ensures that your table does not break layout on mobile devices.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML tables become visually appealing with just a few CSS rules.
By adding borders, colors, padding, and hover effects, you make your tables cleaner, more readable,
and mobile-friendly.

Remember: always use CSS for styling, not old HTML attributes.

HTML5ANDCSS3 | [Link] 64
<html>
CHAPTER 017 / HTML IMAGES AND MEDIA

HTML Images

Images make a webpage more engaging and visually appealing. HTML allows you to display
images using the <img> tag, which is an empty tag (it doesn't have a closing tag). You can insert
photos, illustrations, icons, and other graphics directly into your webpage.

The <img> Tag

The basic syntax for adding an image is:

Basic Image Tag

<img src="[Link]" alt="Description of the image">

Explanation:

- src (source): Specifies the path or URL of the image.

- alt (alternative text): Provides descriptive text if the image cannot be displayed. It also helps with
accessibility and SEO.

Adding Image Width and Height

You can control the display size of an image using the width and height attributes:

Image Example

<img src="[Link]" alt="A sample image" width="300" height="200">

Tip: It's better to control image size with CSS for responsive design.

Image from a Folder

If your image is stored in a subfolder, specify the relative path:

HTML5ANDCSS3 | [Link] 65
HTML Images

Image from Folder

<img src="images/[Link]" alt="Picture inside folder">

If the image is hosted online, you can use an absolute URL:

Image from Online

<img src="[Link] alt="Online image">

Image as a Link
You can make an image clickable by placing it inside an <a> tag:

Image as a Link

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Image Title Attribute

The title attribute adds a tooltip text when users hover over the image:

Image Title Example

<img src="[Link]" alt="Rose" title="A beautiful rose">

Responsive Images with CSS

To make your images adjust automatically on different screen sizes, use CSS:

Responsive Image Example

<img src="[Link]" alt="Mountain view" style="width:100%; height:auto;">

This ensures the image scales correctly across all devices.

HTML5ANDCSS3 | [Link] 66
HTML Images

Image Alignment (Modern Way)

In older HTML, people used align attribute (now deprecated).
The modern and better way is to use CSS:

Image Alignment Example

<img src="[Link] alt="Phot

o" style="display:block; margin:auto;">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This centers the image horizontally.

Alternative Text Importance (Alt Tag)

The alt attribute is crucial for:

- SEO optimization
- Screen readers for visually impaired users
- Displaying fallback text when the image is missing

Always use descriptive alt text relevant to the image content.

Example: Complete Image Code

HTML5ANDCSS3 | [Link] 67
HTML Images

Complete Image Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Image Example</title>
</head>
<body>

<h2>Example of an Image in HTML</h2>

<a href="[Link]
<img src="[Link] alt="
HTML5 Logo" width="200" style="display:block; margin:auto;">
</a>
<p>This is an example of how to add and center an image in HTML.</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Best Practices
- Use <img> tag with src and alt attributes.
- Use width, height, and CSS for responsive styling.
- Wrap images in <a> tags for clickable images.
- Always include descriptive alt text for accessibility.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
Images are an essential part of modern web design. They help communicate ideas, showcase products, and
enhance the visual appeal of your website. In HTML, the <img> tag is simple yet powerful - allowing you to
insert, resize, and link images effortlessly.

By combining proper attributes (src, alt, width, height) and modern CSS styling, you can create
responsive, accessible, and fast-loading visuals that improve both user experience and SEO performance.

HTML5ANDCSS3 | [Link] 68
<html>
CHAPTER 018 / HTML IMAGES AND MEDIA

HTML Picture Element

The <picture> element in HTML is used to display responsive images that automatically adjust to
different devices and screen sizes. It allows you to define multiple image sources, and the browser
chooses the most suitable one based on screen width, resolution, or file type.
This helps improve loading speed and visual quality, especially on mobile and high-resolution
displays.

HTML <picture> Syntax

Picture Tag Example

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation

- The <picture> tag acts as a container for multiple image sources.

- Each <source> element specifies an image file and a condition for when it should be used.
- When the screen is 800px or wider, the large image is shown.
- For screens between 500px and 799px, the medium image is displayed.
- On smaller screens, the browser shows the mobile image.
- The browser checks these sources from top to bottom and displays the first one that matches the
current device or screen width.
- The <img> tag inside <picture> serves as a fallback image if none of the conditions match.

Using Different Image Formats

The <picture> tag can also be used to provide images in multiple formats.
Modern browsers can load newer, more efficient formats like WebP, while older browsers fall back to JPEG
or PNG.

HTML5ANDCSS3 | [Link] 69
HTML Picture Element

Various Image Format Example

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

In this example:

- Browsers that support WebP will load [Link].

- Others will automatically fall back to [Link].

Advantages
- Displays the best image for the user's device.
- Reduces bandwidth and improves loading speed.
- Provides flexibility for responsive design.
- Maintains backward compatibility with older browsers.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Partially

All modern browsers including Chrome, Firefox, Safari, Edge, and Opera support the <picture> element.
Older browsers that don't support it will still display the fallback <img> tag.

Conclusion
The <picture> element is a powerful tool for delivering responsive and optimized images on the web.
By using it with the srcset, media, and type attributes, you can control how images appear across
different devices, ensuring both speed and quality.
It's an essential part of modern HTML for performance-focused websites.

HTML5ANDCSS3 | [Link] 70
<html>
CHAPTER 019 / HTML IMAGES AND MEDIA

HTML Audio

HTML allows you to add audio content directly to web pages using the <audio> element. You can
embed music, podcasts, sound effects, or any audio file without relying on third-party plugins. The
<audio> element supports multiple audio formats, offers controls, and can play automatically or loop
based on your settings.

HTML <audio> Syntax

Audio Example

<audio controls>
<source src="[Link] type="audio/mpeg">
<source src="[Link] type="audio/ogg">
Your browser does not support the audio element.
</audio>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation

- <audio>: The container element for audio files.

- controls: Adds play, pause, volume, and other standard audio controls.
- <source>: Specifies the audio file and its type. Multiple sources ensure compatibility across
browsers.
- Fallback text: Displayed if the browser doesn't support the <audio> element.

Attributes of <audio>
- controls: Shows audio player controls.
- autoplay: Starts playing automatically when the page loads.
- loop: Replays audio continuously.
- muted: Starts audio in a muted state.
- preload: Specifies whether to load audio data (auto, metadata, none).

HTML5ANDCSS3 | [Link] 71
HTML Audio

Example with attributes:

HTML Audio Attributes

<audio controls autoplay loop>

<source src="[Link] type="audio/mpeg">
Your browser does not support the audio element.
</audio>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Supported Audio Formats

1. MP3 - widely supported.
2. OGG - open-source alternative.
3. WAV - uncompressed audio, large file size.

Tip: Always provide multiple formats for maximum browser compatibility.

Example: Complete HTML Audio Player

Complete HTML Audio Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Audio Example</title>
</head>
<body>

<h2>Listen to Our Audio Track</h2>

<audio controls>
<source src="[Link] type="audio/mpeg">
<source src="[Link] type="audio/ogg">
Your browser does not support the audio element.
</audio>

<p>Enjoy the music directly from your browser without any plugins!</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 72
HTML Audio

Advantages

- Embed audio without third-party plugins.

- Cross-browser compatibility with multiple source formats.
- Easy to control playback with attributes like autoplay, loop, and controls.
- Improves interactivity and engagement on web pages.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Partially

Conclusion
The HTML <audio> element makes adding sound to your website simple and efficient.
By using multiple sources and the built-in controls, you can ensure your audio plays seamlessly across all
modern browsers. Whether it's background music, podcasts, or alerts, <audio> enhances the user
experience without extra plugins.

HTML5ANDCSS3 | [Link] 73
<html>
CHAPTER 020 / HTML IMAGES AND MEDIA

HTML Video

The HTML <video> element allows you to embed videos directly on web pages without relying on
external plugins. You can display movies, tutorials, animations, or any video content. <video>
supports multiple formats, provides built-in controls, and can autoplay, loop, or be muted for a better
user experience.

HTML <video> Syntax

HTML Video Example

<video controls>
<source src="[Link] type="video/m
p4">
<source src="[Link] type="video/
webm">
Your browser does not support the video tag.
</video>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation

- <video>: The container for video content.

- controls: Displays standard video controls like play, pause, volume, and fullscreen.
- <source>: Specifies video files and types. Multiple sources improve browser compatibility.
- Fallback text: Displayed if the browser does not support the <video> element.

Attributes of <video>
- controls: Shows video controls.
- autoplay: Starts playing automatically when the page loads.
- loop: Plays video repeatedly.
- muted: Mutes the video initially.
- poster: Displays an image before the video starts.
- width / height: Sets the size of the video player.

HTML5ANDCSS3 | [Link] 74
HTML Video

Example with Multiple Attributes

<video width="640" height="360" controls autoplay muted loop poster="[Link]

andcss3/lesson-samples/sample_thumbnail.png">
<source src="[Link] type="video/m
p4">
<source src="[Link] type="video/
webm">
Your browser does not support the video tag.
</video>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Supported Video Formats

1. MP4 - most widely supported across all browsers.
2. WebM - modern, open-source format with good compression.
3. OGG / OGV - older open-source format.

Tip: Provide multiple formats to ensure all browsers can play your video.

Example: Complete HTML Video Player

HTML Video Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Video Example</title>
</head>
<body>

<h2>Watch Our Tutorial Video</h2>

<video width="640" height="360" controls poster="[Link]
es/sample_thumbnail.png">
<source src="[Link] type="video/m
p4">
<source src="[Link] type="video/
webm">
Your browser does not support the video tag.
</video>

<p>Enjoy the video directly in your browser with built-in controls!</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 75
HTML Video

Advantages
- Embed videos without third-party plugins.
- Cross-browser support with multiple source formats.
- Customizable playback with attributes like controls, autoplay, loop, and poster.
- Enhances engagement and user experience on your website.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Partially

Conclusion
The HTML <video> element allows seamless video integration for websites.
Using multiple formats, the controls attribute, and optional features like poster and autoplay ensures
your content is accessible, engaging, and compatible across modern browsers.

Videos make your web pages dynamic, interactive, and professional, all without additional plugins.

HTML5ANDCSS3 | [Link] 76
<html>
CHAPTER 021 / HTML IMAGES AND MEDIA

HTML Embed & Object

HTML provides the <embed> and <object> elements to include external content in web pages, such
as PDFs, multimedia files, or interactive applications. These elements allow you to integrate
non-HTML content seamlessly, giving your website rich functionality beyond standard images,
audio, or video.

HTML <embed> Element

The <embed> element is used to embed external content directly, such as PDFs, videos, or Flash (legacy).
It is a self-closing tag.

Syntax

<embed src="[Link]" type="application/pdf" width="600" height="400">

Explanation:

- src: Path or URL of the external file.

- type: MIME type of the file (e.g., application/pdf, video/mp4).
- width & height: Size of the embedded content.

HTML Embed Example

<embed src="[Link] type="application/pdf"

width="600" height="800">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This displays a PDF file directly inside the web page.

HTML5ANDCSS3 | [Link] 77
HTML Embed & Object

HTML <embed> Attributes

Attribute Description

src URL or path of the external file to embed.

MIME type of the embedded content (e.g., application/pdf,

type
video/mp4).

width Width of the embedded content (in pixels or %).

height Height of the embedded content (in pixels or %).

autoplay Automatically starts playing audio or video (if supported).

loop Loops the media (video/audio).

hidden Hides the embedded content from display.

CSS styling (can be used to hide sidebars, borders, or

style
adjust appearance).

HTML <object> Element

The <object> element is a more versatile container for external resources, such as PDFs, multimedia, or
HTML pages.

HTML Object Syntax

<object data="[Link]" type="application/pdf" width="600" height="400">

Your browser does not support embedded objects.
</object>

Explanation:

- data: Path or URL of the external file.

- type: MIME type of the file.
- width & height: Dimensions of the embedded content.
- Inner content: Fallback text or HTML displayed if the browser cannot load the object.

HTML5ANDCSS3 | [Link] 78
HTML Embed & Object

HTML Object Example

<object data="[Link] type="application/pd

f" width="600" height="800">
<p>It appears your browser does not support PDF viewing. <a href="[Link]
ndcss3/lesson-samples/[Link]">Download the PDF</a>.</p>
</object>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML <object> Attributes

Attribute Description

data URL or path of the external file.

type MIME type of the content.

width Width of the embedded object.

height Height of the embedded object.

form Associates the object with a form.

name Assigns a name to the object for scripting purposes.

Differences Between <embed> and <object>

Feature <embed> <object>

Fallback content None Supported

HTML compatibility HTML5 HTML4 & HTML5

Flexibility Less flexible More flexible

Multimedia support Yes Yes

Use for PDFs Yes Yes

Tip: Use <object> if you want fallback content or additional HTML inside the element. Use <embed> for
simple embedding.

HTML5ANDCSS3 | [Link] 79
HTML Embed & Object

Removing PDF toolbar/sidebar using parameters in URL

PDF Toolbar Removing Example with <embed>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

PDF Toolbar Removing with <object>

PDF Toolbar Removing Example with <object>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- You can control the display of PDF toolbars, navigation panels, and scrollbars by appending
parameters in the URL (#toolbar=0&navpanes=0&scrollbar=0).
- The <object> fallback allows users to download the file if it cannot be displayed.

Note: Some PDF viewers ignore certain parameters depending on the browser or plugin.

Advantages
- Embed multimedia, PDFs, or interactive content directly.
- <object> allows fallback HTML content.
- Both elements work across modern browsers for supported formats.
- Improves user experience without redirecting to external files.

Tips for Embedded Media

1. Always specify width and height to reduce layout shifts.
2. Test PDF URL parameters across browsers because built-in PDF viewers may ignore them.
3. Use fallback content inside <object> so users can access or download the resource.
4. Use <audio> and <video> instead of <embed> or <object> for media playback.

HTML5ANDCSS3 | [Link] 80
HTML Embed & Object

5. Do not add obsolete <param> children to <object>.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
The <embed> and <object> elements can display supported external resources such as PDFs.
<object> is useful when fallback HTML is required. Prefer dedicated HTML elements for audio, video,
images, and webpages.

HTML5ANDCSS3 | [Link] 81
<html>
CHAPTER 022 / HTML FORMS

HTML Forms Overview

HTML forms are essential for collecting user input on a website. They allow users to enter
information like names, email addresses, passwords, or upload files. These inputs can then be sent
to a server for processing, such as logging in, signing up, or submitting feedback.

Basic Syntax
An HTML form is created using the <form> element, which wraps around input fields, buttons, and other
controls.

Forms Syntax

<form action="submit_form.php" method="post">

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

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

</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation

- <form> - The container element for all form controls.

- action - Specifies the URL where form data will be sent for processing.
- method - Determines how data is sent:
- GET appends data to the URL (used for search or simple data).
- POST sends data securely in the request body (used for login, signup, etc.).
- <label> - Describes an input field for better accessibility.
- <input> - Used for collecting data such as text, email, password, etc.
- <input type="submit"> - Creates a button to submit the form.

HTML5ANDCSS3 | [Link] 82
HTML Forms Overview

Other Common Form Elements

HTML forms can contain several elements besides <input>:

Element Description

<textarea> Multi-line text input field.

<select> Dropdown menu for multiple options.

<option> Defines each choice within a dropdown.

<button> Adds custom buttons for submitting or resetting forms.

<fieldset> Groups related form fields together.

<legend> Defines a title for a fieldset group.

Example with Different Controls

Form Example with Controls

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

<fieldset>
<legend>Contact Form</legend>

<label for="fullname">Full Name:</label>

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>

<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br><br>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

How Forms Work

When the user clicks the Submit button:

1. Browser gathers all field values.

2. Sends data to the server via the action URL.

HTML5ANDCSS3 | [Link] 83
HTML Forms Overview

3. The server processes the input (e.g., saves it, emails it, or validates it).
4. The user receives a response (success or error).

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML forms are the foundation of user interaction on the web. Whether it's logging in, submitting a
comment, or making a purchase - forms make it possible. As we move ahead, you'll learn about form
elements, input types, attributes, and how to validate user input.

HTML5ANDCSS3 | [Link] 84
<html>
CHAPTER 023 / HTML FORMS

HTML Form Elements

HTML form elements are the building blocks that make up a form. These elements allow users to
interact with a webpage - typing text, selecting options, uploading files, and submitting data. Each
element serves a specific purpose to collect the right type of information.

Common Form Elements

Element Description

Used to get user input in various formats (text, password,

<input>
email, etc.).

<label> Defines a text label for form controls to improve accessibility.

Creates a multi-line text field for long input such as

<textarea>
comments.

<select> Defines a dropdown list of options.

<option> Defines each selectable item in a dropdown.

<button> Adds clickable buttons (submit, reset, or custom actions).

<fieldset> Groups related form controls together.

<legend> Provides a caption or title for a fieldset.

<datalist> Offers pre-defined suggestions while typing in an input.

<output> Displays the result of a calculation or script.

<optgroup> Groups related options within a <select> dropdown.

HTML5ANDCSS3 | [Link] 85
HTML Form Elements

Basic Example

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

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

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>

<label for="country">Select Country:</label>

<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select><br><br>

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

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation of Key Elements

- <input> - Most commonly used element; supports multiple types like text, password, checkbox,
radio, and file.
- <label> - Clicking the label focuses the input field it's linked to via the for attribute.
- <textarea> - Allows users to write long text.
- <select> and <option> - Used for dropdown lists.
- <button> - More flexible than <input type="submit">; can contain icons or text.
- <fieldset> & <legend> - Visually group related form fields.
- <datalist> - Adds auto-complete suggestions when typing.

Example with <datalist> and <output>

HTML5ANDCSS3 | [Link] 86
HTML Form Elements

Form Example

<form oninput="[Link]=parseInt([Link])+parseInt([Link])">
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
</datalist>
<br><br>

<input type="number" id="a" value="5"> +

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Keynotes
- Each form element should have a name attribute so that its value can be sent to the server.
- Use labels for accessibility (especially for screen readers).
- Group related fields using fieldset for clarity and organization.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML form elements are the core of web input collection. They define how users provide information, from a
simple text field to complex dropdowns and file uploads. Understanding these elements makes it easier to
design user-friendly and accessible forms.

HTML5ANDCSS3 | [Link] 87
<html>
CHAPTER 024 / HTML FORMS

HTML Input Types

The <input> element is one of the most versatile and commonly used elements in HTML forms.
It can represent different types of input fields depending on the type attribute.
Each input type provides a specific way to collect and validate user data.

Basic Syntax

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

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The type attribute defines the kind of input. For example, text, email, password, checkbox, and so on.

Commonly Used Input Types

Input Type Description Example

text A single-line text input. <input type="text">

password Hides input characters (for passwords). <input type="password">

email Validates email format. <input type="email">

number Allows numeric input only. <input type="number">

tel For phone numbers. <input type="tel">

url Ensures valid website URL format. <input type="url">

date Provides a calendar for date selection. <input type="date">

time Lets users pick a time. <input type="time">

datetime-local For date and time without timezone. <input type="datetime-local">

month For selecting a month and year. <input type="month">

week For selecting a week and year. <input type="week">

color Opens a color picker. <input type="color">

checkbox Allows multiple selections. <input type="checkbox">

HTML5ANDCSS3 | [Link] 88
HTML Input Types

Allows a single selection from multiple

radio <input type="radio">
options.

file Lets users upload files. <input type="file">

<input type="range" min="0"

range Displays a slider for numeric values.
max="100">

Used to store data that's not visible to <input type="hidden" name="id"

hidden
users. value="001">

submit Creates a form submission button. <input type="submit">

reset Resets all form fields. <input type="reset">

button Generic clickable button. <input type="button" value="Click Me">

Example: Various Input Types

Input Type Example

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

<label>Text:</label>
<input type="text" name="username" placeholder="Enter your name"><br><br>

<label>Password:</label>
<input type="password" name="password" placeholder="Enter password"><br><br>

<label>Email:</label>
<input type="email" name="email" placeholder="name@[Link]"><br><br>

<label>Telephone:</label>
<input type="tel" name="phone" placeholder="+91 9876543210"><br><br>

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

<label>URL:</label>
<input type="url" name="website" placeholder="[Link]

<label>Datetime Local:</label>
<input type="datetime-local" name="meeting"><br><br>

<label>Month:</label>
<input type="month" name="birthmonth"><br><br>

HTML5ANDCSS3 | [Link] 89
HTML Input Types

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

<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="traveling"> Traveling
<input type="checkbox" name="hobby" value="music"> Music<br><br>

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

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

<label>Volume:</label>
<input type="range" name="volume" min="0" max="100"><br><br>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation

- Text-based Inputs - text, password, email, tel, url, number let users enter basic info.
- Date & Time Inputs - date, time, month, week, and datetime-local add native pickers.
- Choice Inputs - checkbox and radio provide selection options.
- File/Color/Range - file uploads, color opens a color picker, range provides a slider.
- Buttons - submit, reset, and button control form actions.
- Hidden - Stores background data like user IDs or tokens.

Key Notes

- Each input should have a name attribute for data submission.

- Use placeholder for hint text inside input fields.
- Use required, min, max, and pattern attributes for validation.
- Radio buttons with the same name are grouped together.
- The file type requires enctype="multipart/form-data" in the <form> tag for file uploads.

HTML5ANDCSS3 | [Link] 90
HTML Input Types

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML input types determine what kind of data can be entered and how browsers validate it.
By using appropriate input types, you make forms more intuitive, secure, and user-friendly.
Next, we'll explore HTML Input Attributes - which define how these input types behave and interact.

HTML5ANDCSS3 | [Link] 91
<html>
CHAPTER 025 / HTML FORMS

HTML Input Attributes

HTML <input> elements support a wide range of attributes that define their behavior, appearance,
and interaction with users. These attributes help control data entry, validation, accessibility, and
styling within web forms.

The value Attribute

Specifies the default value for an input field.

Input Value Attribute

<input type="text" value="Swapnil Raja">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The name Attribute

Defines the name of the input control, used when submitting form data.

Input Name Attribute

<input type="email" name="user_email">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The placeholder Attribute

Displays a short hint inside the input box before the user enters a value.

HTML5ANDCSS3 | [Link] 92
HTML Input Attributes

HTML Placeholder Attribute

<input type="text" placeholder="Enter your name">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The required Attribute

Marks a field as mandatory. The form cannot be submitted without filling it.

Input Required Attribute

<input type="email" required>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The readonly Attribute

Makes an input field uneditable, but its value is still submitted with the form.

Input Readonly Attribute

<input type="text" value="Read only text" readonly>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The disabled Attribute

Disables an input field - it cannot be interacted with or submitted.

Input Disabled Attribute

<input type="text" value="Disabled" disabled>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 93
HTML Input Attributes

The maxlength Attribute

Limits the maximum number of characters allowed in a text field.

HTML Maxlength Attribute

<input type="text" maxlength="10">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The min and max Attributes

Define minimum and maximum values for numeric or date inputs.

Input Min and Max Attributes

<input type="number" min="1" max="10">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The step Attribute

Specifies the legal number intervals for numeric inputs.

Input step Attribute

<input type="number" step="5">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The autofocus Attribute

Automatically focuses on the input field when the page loads.

HTML5ANDCSS3 | [Link] 94
HTML Input Attributes

Input Autofocus Attribute

<input type="text" autofocus>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The autocomplete Attribute

Tells the browser whether to enable autocomplete for a field.

Input Autocomplete Attribute

<input type="email" autocomplete="on">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The pattern Attribute

Specifies a regular expression that the input value must match.

Input Pattern Attribute

<input type="text" pattern="[A-Za-z]{3}" title="Enter only 3 letters">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The checked Attribute

Pre-selects a checkbox or radio button.

Input Checked Attribute

<input type="checkbox" checked> I agree

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 95
HTML Input Attributes

The multiple Attribute

Allows multiple values to be selected for file or email inputs.

Input Multiple Attribute

<input type="file" multiple>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The size Attribute

Defines the visible width (in characters) of the input field.

Input Size Attribute

<input type="text" size="30">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The list Attribute and <datalist>

Connects the input field to a list of predefined options.

Input List and Datalist Attribute

<input list="browsers" name="browser">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The minlength and maxlength Attributes

Ensure a specific range of input length.

HTML5ANDCSS3 | [Link] 96
HTML Input Attributes

Input Minlength and Maxlegth Attributes

<input type="password" minlength="6" maxlength="12">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Example: Various Input Attributes

Different Input Attributes Example

<form>
<label>Username:</label>
<input type="text" name="username" placeholder="Enter your name" required minlength="3" maxleng
th="15"><br><br>

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

<label>Password:</label>
<input type="password" name="password" minlength="6" maxlength="12" required><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>Favorite Browser:</label>
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
</datalist><br><br>

<label>Upload Files:</label>
<input type="file" multiple><br><br>

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

</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 97
HTML Input Attributes

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML input attributes enhance the functionality, usability, and validation of web forms. By combining these
attributes effectively, developers can create user-friendly, secure, and accessible input fields.

HTML5ANDCSS3 | [Link] 98
<html>
CHAPTER 026 / HTML FORMS

HTML Form Attributes

HTML <form> elements contain several attributes that define how form data is collected, processed,
and submitted. These attributes control important aspects such as where and how the data is sent,
how it is encoded, and how the form behaves during submission.

The action Attribute

Specifies the URL or file that will handle the form submission.
When the user clicks the submit button, the form data is sent to this location.

Form Action Attribute

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

If the action attribute is omitted, the form submits to the same page it's currently on.

The method Attribute

Defines the HTTP method used to send form data.
There are two common methods:

- GET - Data is appended to the URL (visible in the address bar).

- POST - Data is sent in the request body (not visible in the URL).

Form Method Attribute

<form action="submit_form.php" method="post">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 99
HTML Form Attributes

The target Attribute

Specifies where to display the response after submitting the form.

Value Description

_self Default. Submits in the same tab.

_blank Opens in a new tab or window.

_parent Loads in the parent frame.

_top Loads in the full body of the window.

Form Target Attribute

<form action="submit_form.php" target="_blank">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The enctype Attribute

Specifies how the form data should be encoded before sending it to the server.
It is mainly used with the POST method.

Value Description

application/x-www-form-urlencoded Default. All characters are encoded.

multipart/form-data Used for forms that include file uploads.

text/plain Sends data without encoding (rarely used).

Form Enctype Attribute

<form action="[Link]" method="post" enctype="multipart/form-data">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 100

HTML Form Attributes

The autocomplete Attribute

Enables or disables autocomplete for all input fields inside a form.

Form Autocomplete Attribute

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

You can also set autocomplete on individual input fields.

The novalidate Attribute

Disables form validation when submitting.
This is useful during testing or when validation is handled via JavaScript.

Form Novalidate Attribute

<form action="submit_form.php" novalidate>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The name Attribute

Assigns a name to the form.
This is often used to reference the form in JavaScript.

Form Name Attribute

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 101

HTML Form Attributes

The rel Attribute

Defines the relationship between the current document and the target resource when the action points to
another URL.

Form Rel Attribute

<form action="[Link] rel="external">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The accept-charset Attribute

Specifies the character encodings the server should expect for submitted form data.

Form accept-charset Attribute

<form action="submit_form.php" accept-charset="UTF-8">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Example: Various Form Attributes

HTML5ANDCSS3 | [Link] 102

HTML Form Attributes

Different Form Attributes Example

<form action="[Link]" method="post" target="_self"

enctype="multipart/form-data" autocomplete="on" name="userForm">

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

<label>Profile Picture:</label>
<input type="file" name="profile_pic"><br><br>

<label>Message:</label><br>
<textarea name="message" rows="4" cols="30"></textarea><br><br>

<input type="submit" value="Submit Form">

</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML form attributes define how form data is sent and processed.
By understanding and combining attributes like action, method, enctype, and target, developers can
control form behavior precisely and build robust user input systems.

HTML5ANDCSS3 | [Link] 103

<html>
CHAPTER 027 / HTML FORMS

HTML Form Validation

Form validation ensures that the data entered by a user meets the expected format and
requirements before being submitted to the server. It helps maintain data accuracy, prevent errors,
and enhance user experience.

HTML5 introduced built-in form validation features that work without the need for JavaScript.

What is Form Validation?

Form validation checks if the form fields are filled out correctly.
It can be of two types:

- Client-side validation - Performed by the browser using HTML5 attributes.

- Server-side validation - Performed by the server after submission (for extra security).

HTML5's client-side validation is fast and prevents invalid data from being sent.

The required Attribute

Specifies that an input field must be filled before submitting the form.

Required Example

<form>
<label>Email:</label>
<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

If the user tries to submit without filling the field, the browser shows an error message.

The pattern Attribute

Defines a regular expression pattern that the input value must match.

HTML5ANDCSS3 | [Link] 104

HTML Form Validation

Pattern Example

<form>
<label>Username (letters only):</label>
<input type="text" name="username" pattern="[A-Za-z]+" required>
<input type="submit" value="Submit">
</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This ensures only alphabetic characters are allowed.

The min and max Attributes

Used for numeric and date inputs to specify minimum and maximum allowed values.

Min and Max Example

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The step Attribute

Specifies the allowed intervals for numeric input.

Step Example

<form>
<label>Enter number (increments of 5):</label>
<input type="number" name="quantity" step="5">
<input type="submit">
</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The type Attribute and Validation

HTML input types such as email, url, and number automatically validate data.

HTML5ANDCSS3 | [Link] 105

HTML Form Validation

Type Example

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

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

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

If the entered text is not a valid email or URL, the browser displays an error.

The novalidate Attribute (Disable Validation)

You can disable form validation entirely using the novalidate attribute in the <form> tag.

Novalidate Example

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This is useful for testing or when you want to handle validation using JavaScript.

Using title to Display a Custom Message

When using the pattern attribute, you can use title to show a custom error hint.

Custom Message Example

<form>
<label>Username:</label>
<input type="text" name="username" pattern="[A-Za-z]+" title="Only letters are allowed">
<input type="submit">
</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 106

HTML Form Validation

Complete Form Validation

Example

<form action="submit_form.php" method="post">

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

<label>Password:</label>
<input type="password" name="password" minlength="6" maxlength="12" required><br><br>

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

<input type="submit" value="Submit Form">

</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

If the user leaves any required field blank or enters invalid data, the browser automatically prevents
submission and shows relevant hints.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML form validation is a powerful feature that improves data accuracy and user experience without extra
JavaScript.
Using attributes like required, pattern, min, max, and input types such as email or url, you can easily
ensure correct and complete data entry.

HTML5ANDCSS3 | [Link] 107

<html>
CHAPTER 028 / HTML LAYOUT

HTML Block vs Inline Elements

In HTML, every element is defined as either a block-level element or an inline element.

Understanding the difference between them is essential for controlling page layout, spacing, and
structure effectively.

What Are Block-Level Elements?

A block-level element always starts on a new line and stretches to take up the full width available.
Browsers automatically add space (margin) before and after block elements.

Examples of block-level elements:

Block Level Elements Example

<h2>This is a block element</h2>

<p>Block elements always start on a new line and take full width.</p>
<div>This is inside a div container.</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Rendered Output:

Each element appears on a separate line, one after another.

What Are Inline Elements?

An inline element does not start on a new line.
It only takes up as much width as necessary and sits within the flow of surrounding text.

Examples of inline elements:

<span>, <a>, <strong>, <em>, <img>, <label>, <input>, <b>, <i>

HTML5ANDCSS3 | [Link] 108

HTML Block vs Inline Elements

Inline Elements Example

<p>This is a <strong>bold</strong> word and this is an <em>italic</em> word.</p>

<p>Click <a href="#">here</a> to learn more.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Rendered Output:

All elements appear within the same line of text.

Difference Between Block and Inline Elements

Feature Block-Level Elements Inline Elements

Starts on a new line Yes No

Takes full width Yes Only as wide as its content

Can contain block elements Yes No

Can contain inline elements Yes Yes

Common examples <div>, <p>, <section> <span>, <a>, <strong>

Example: Combining Block and Inline Elements

Combined Example

<div style="border: 1px solid #ccc; padding: 10px;">

<h3>HTML Elements Example</h3>
<p>This is a <strong>paragraph</strong> that contains an <a href="#">inline link</a> and a <spa
n style="color: blue;">colored word</span>.</p>
</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- <div> is a block-level container.

- <p> is also a block-level element.
- <strong>, <a>, and <span> are inline elements inside the paragraph.

HTML5ANDCSS3 | [Link] 109

HTML Block vs Inline Elements

Converting Between Block and Inline (CSS)

Using CSS, you can change the display behavior of any element.

Converting Example

<span style="display: block; background: lightgray;">Converted to Block</span>

<div style="display: inline; background: yellow;">Converted to Inline</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- The <span> is normally inline, but CSS display: block makes it behave like a block.
- The <div> is normally block, but display: inline makes it sit inline with text.

HTML5 and Modern Layouts

In modern HTML5 layouts, semantic elements such as <header>, <main>, <article>, and <footer>
are block-level elements by default.
Understanding how block and inline behavior works helps in creating responsive, accessible layouts.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
Block-level and inline elements form the foundation of HTML page structure.

- Block elements create structure and layout regions.

- Inline elements format and highlight content inside those blocks.

Mastering their behavior is the first step toward understanding modern HTML layout design.

HTML5ANDCSS3 | [Link] 110

<html>
CHAPTER 029 / HTML LAYOUT

HTML Div & Span

The <div> and elements are two of the most commonly used tags in HTML.
They do not add any visual change by themselves but are extremely useful for grouping content,
styling, and layout control using CSS.

Introduction
Both <div> and <span> are container elements:

- <div> is a block-level container.

- <span> is an inline container.

They are often used with CSS or JavaScript to structure and style specific parts of a web page.

The <div> Element

The <div> tag defines a division or section in a webpage.
It is a block-level element, meaning it starts on a new line and takes up the full width.

Div Syntax

<div>Content goes here...</div>

Div Example

<div style="background-color: #f0f0f0; padding: 10px;">

<h2>Welcome to HTML</h2>
<p>This section is wrapped inside a div element.</p>
</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- The <div> element groups the heading and paragraph.

- Styling (like background color and padding) is applied to the entire section.

HTML5ANDCSS3 | [Link] 111

HTML Div & Span

Common Uses of <div>

- To create page sections like header, footer, sidebar, or content area.
- To apply CSS styling to grouped elements.
- To structure layouts for responsive design.
- To apply JavaScript functions to a specific section.

Example: Page Layout Using <div>

Div Example

<div id="header">Header Section</div>

<div id="menu">Menu Section</div>
<div id="content">Main Content Section</div>
<div id="footer">Footer Section</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Each <div> can be styled separately using CSS.

The Element
The <span> tag is used to group inline elements for styling or scripting purposes.
Unlike <div>, it does not start a new line and only takes up the width of its content.

Span Syntax

<span>Inline text here...</span>

Span Example

<p>Welcome to <span style="color: red;">HTML5</span> Tutorial.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- The <span> tag highlights a specific part of text within a paragraph.

- CSS is used to color only that section red.

HTML5ANDCSS3 | [Link] 112

HTML Div & Span

Difference Between <div> and

Feature <div> <span>

Type Block-level Inline

Starts a new line Yes No

Used for Large sections or containers Small text or inline content

Typical use Layouts, grouping sections Highlighting or styling inline text

Default width 100% As per content

Combining <div> and

You can use both tags together for flexible styling.

Combined Example

<div style="background: #eef; padding: 10px;">

<h3>User Details</h3>
<p>Name: <span style="color: blue;">Amit Sharma</span></p>
<p>Role: <span style="font-weight: bold;">Developer</span></p>
</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- <div> groups the section.

- <span> styles specific text portions within paragraphs.

Styling <div> and with CSS Classes

Instead of inline styles, it's best practice to use CSS classes.

HTML5ANDCSS3 | [Link] 113

HTML Div & Span

Div & Span Style Example

<div class="box">
<p>This is a <span class="highlight">highlighted</span> word inside a div.</p>
</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- The .box class applies layout and spacing to the <div>.

- The .highlight class changes color and font weight for text inside <span>.

Practical Example: Layout with Div & Span

Practical Example

<div style="border: 1px solid #ccc; padding: 10px;">

<h2>Product Information</h2>
<p>Product Name: <span style="color: brown;">Wireless Mouse</span></p>
<p>Price: <span style="color: green;">$25</span></p>
<p>Description: <span>A smooth and precise wireless mouse for everyday use.</span></p>
</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

This structure allows easy styling and layout control. Each <span> can be customized independently.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 114

HTML Div & Span

Conclusion
- The <div> element is used for structuring and organizing large sections of content.
- The <span> element is used for styling and targeting specific parts of inline text.
- Together, they form the building blocks of modern web layouts, especially when combined with
CSS and JavaScript.

HTML5ANDCSS3 | [Link] 115

<html>
CHAPTER 030 / HTML LAYOUT

HTML Semantic Layout Tags

In modern web design, creating a clear and meaningful page structure is essential. Semantic layout
tags in HTML help you define different parts of a webpage with meaningful names.
They make your code easier to read, maintain, and improve accessibility for both users and search
engines.

Before HTML5, developers commonly used <div> elements everywhere, giving them IDs or classes like
header, footer, or content.
Now, HTML5 introduces semantic elements that describe their purpose directly - no extra naming required!

Common Semantic Layout Tags

Tag Description

Represents the top section of a webpage or a section - often

<header>
contains a logo, navigation, or introductory content.

<nav> Defines navigation links to other pages or sections.

<main> Represents the main content area unique to the page.

Groups related content into a logical block, usually with a

<section>
heading.

Represents a self-contained piece of content that could

<article>
stand alone (like a blog post or news article).

Defines content indirectly related to the main content, such

<aside>
as sidebars or ads.

Represents the bottom section of a page or section, usually

<footer>
containing copyright or contact info.

<figure> & <figcaption> Used to include images or diagrams with captions.

Example: Basic Semantic Layout

[Link]

<!DOCTYPE html>
<html lang="en">
<head>

HTML5ANDCSS3 | [Link] 116

HTML Semantic Layout Tags

<header>
<h1>My Website</h1>
<p>Welcome to my homepage</p>
</header>

<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Services</a> |
<a href="#">Contact</a>
</nav>

<main>
<article>
<h2>What is HTML5?</h2>
<p>HTML5 introduces semantic elements that make web pages more readable and structured.</p>
</article>

<section>
<h2>Why Use Semantic Tags?</h2>
<p>They help browsers, developers, and search engines understand the meaning of your conten
t.</p>
</section>
</main>

<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Learn HTML</a></li>
<li><a href="#">CSS Basics</a></li>
</ul>
</aside>

<footer>
<p>(c) 2025 My Website | All rights reserved.</p>

</footer>

HTML5ANDCSS3 | [Link] 117

HTML Semantic Layout Tags

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Advantages of Using Semantic Tags

1. Better Readability: Makes code easier to understand for developers.
2. Improved SEO: Search engines can interpret the content meaning better.
3. Accessibility: Screen readers can navigate semantic elements more effectively.
4. Consistent Structure: Creates a predictable layout pattern across pages.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
Semantic layout tags bring structure and meaning to your webpage.
By using them instead of generic <div> tags, you create web pages that are cleaner, more accessible, and
optimized for search engines.

In short - semantic HTML = meaningful + modern web design.

HTML5ANDCSS3 | [Link] 118

<html>
CHAPTER 031 / HTML LAYOUT

HTML Iframes

An iframe (short for inline frame) is an HTML element that allows you to embed another webpage or
document inside the current webpage. It acts like a window or a mini browser within your page.

Iframe Syntax

[Link]

<iframe src="[Link] title="Iframe Example"></iframe>

Iframe Attributes:

- src - The URL of the page to embed.

- title - Provides a text description (important for accessibility).

Iframe Attributes Explained

Attribute Description Example

Specifies the URL of the page to <iframe

src
embed. src="[Link]

Used to name the iframe (useful for

name <iframe name="myFrame"></iframe>
targeting links).

Adds security restrictions (disables <iframe src="[Link]"

sandbox
scripts, forms, etc.). sandbox></iframe>

Allows the iframe to display full-screen <iframe src="[Link]"

allowfullscreen
content. allowfullscreen></iframe>

HTML5ANDCSS3 | [Link] 119

HTML Iframes

Controls loading behavior (lazy or <iframe src="[Link]"

loading
eager). loading="lazy"></iframe>

Controls the referrer information sent <iframe src="[Link]"

referrerpolicy
when loading content. referrerpolicy="no-referrer"></iframe>

Example: Embedding a Website

[Link]

<iframe src="[Link] width="800" height="400" title="HTML5 & CSS3"></iframe

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Example: Embedding a YouTube Video

[Link]

<iframe width="560" height="315"

src="[Link]
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Example: Using the sandbox Attribute

[Link]

<iframe src="/[Link]" width="600px" height= "450px" sandbox></iframe>

<!--Default sandbox value is restricted to submit any form or script. To submit the form you need
to allow it with sandbox. Try using sandbox="allow-forms" and it will let you submit the form. -
->

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This prevents the embedded page from running scripts or submitting forms - improving security.

HTML5ANDCSS3 | [Link] 120

HTML Iframes

Targeting Links to an Iframe

You can load content dynamically into an iframe using the name attribute.

[Link]

<iframe name="myFrame" width="600" height="300"></iframe>

<a href="[Link] target="myFrame">Open Wikipedia in Iframe</a>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

When you click the link, it loads inside the iframe instead of opening a new page.

Iframe Best Practices

- Use the title attribute for accessibility.
- Add sandbox to improve security.
- Use loading="lazy" to improve performance.
- Avoid overusing iframes - they can slow down the page and complicate SEO.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 121

<html>
CHAPTER 032 / ADVANCED HTML

HTML Entities & Symbols

In HTML, certain characters like <, >, &, or " have special meanings and cannot be written directly
inside the document - doing so can confuse the browser.
To display these characters properly, we use HTML entities.

An HTML entity is a code that begins with an ampersand (&) and ends with a semicolon (;).
They are used to represent characters that are either reserved in HTML or not available on a standard
keyboard.

Syntax

[Link]

&entity_name;
OR
&#entity_number;

Example

[Link]

<p>10 < 20 && 20 > 10</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Commonly Used HTML Entities

Character Entity Name Entity Number Description

< < < Less than sign

> > > Greater than sign

& & & Ampersand

" " " Double quotation mark

HTML5ANDCSS3 | [Link] 122

HTML Entities & Symbols

' ' ' Apostrophe

(c) © (c) Copyright symbol

(R) ® (R) Registered trademark

Indian Rupee symbol

€ Euro symbol

£ Pound symbol

-> → -> Right arrow

<- ← <- Left arrow

Example: Using Entities in HTML

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Entities Example</title>
</head>
<body>
<h2>HTML Entities Demo</h2>
<p>5 < 10 and 10 > 5</p>
<p>Copyright © 2025 HTML5 & CSS3</p>
<p>Price: 500 </p>
<p>Symbols: &hearts; &star; &check; ™</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Special Symbol Entities

You can use entity names to display mathematical, currency, and shape symbols.

Symbol Entity Description

&hearts; Heart symbol

&star; Star symbol

&check; Check mark

× Multiplication sign

HTML5ANDCSS3 | [Link] 123

HTML Entities & Symbols

÷ Division sign

∞ Infinity

± Plus-minus sign

≠ Not equal

∑ Summation symbol

Why Use HTML Entities?

- To display reserved characters like < or > without breaking code.
- To insert special characters (, (c), TM, etc.) not on the keyboard.
- To ensure compatibility across different browsers and devices.
- To enhance readability and SEO safety (especially for symbols and quotes).

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
HTML entities and symbols make your web pages look professional and readable while maintaining correct
HTML syntax.
They're especially useful in displaying currency, mathematics, special characters, and even icons in a clean
and browser-safe way.

HTML5ANDCSS3 | [Link] 124

<html>
CHAPTER 033 / ADVANCED HTML

HTML Emojis

Emojis add emotion, personality, and visual appeal to web pages.

They are part of the Unicode character set, which means you can use them directly in HTML just
like text.
HTML supports emojis natively - no extra library or image is required.

How Emojis Work in HTML

Every emoji is represented by a Unicode value - a unique code assigned to that emoji.
You can insert an emoji either by directly typing it or using its HTML entity (Unicode code point).

Syntax

[Link]

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Both represent the emoji.

Example 1: Using Emojis Directly

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Emojis</title>
</head>
<body>
<h2>Using Emojis in HTML</h2>
<p>I love HTML and CSS !</p>
<p>Learning is fun </p>
</body>
</html>

HTML5ANDCSS3 | [Link] 125

HTML Emojis

Output:

I love HTML and CSS !

Learning is fun

Example 2: Using Unicode (Entity Code)

[Link]

<p>Smile: </p>
<p>Heart: </p>
<p>Star: </p>
<p>Rocket: </p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Common Emoji Unicode Codes

Emoji Description Decimal Code Hex Code

Grinning Face

Face with Tears of Joy

Heart Eyes

Cool Face

Crying Face

Angry Face

Red Heart

Star

Fire

Rocket

Earth Globe

Check Mark

Light Bulb

Telephone

HTML5ANDCSS3 | [Link] 126

HTML Emojis

Important Notes
- Always include <meta charset="UTF-8"> in your <head> section - this ensures emojis display
correctly.
- Emojis render differently on Windows, macOS, Android, and iOS, depending on the system font.
- You can also use CSS font-family to control emoji style slightly (e.g., font-family: Segoe UI
Emoji;).

Example 3: Styled Emoji Text

[Link]

<p style="font-size: 24px; font-family: 'Segoe UI Emoji';">

HTML makes me and CSS makes me
</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
Emojis make web pages more expressive and user-friendly.
With HTML and Unicode, you can easily add thousands of emojis without relying on images - making your
design lighter, modern, and fun.

HTML5ANDCSS3 | [Link] 127

<html>
CHAPTER 034 / ADVANCED HTML

HTML Head Element Tags

The <head> element in HTML contains metadata - information about the web page that is not
visible directly on the browser screen but is essential for SEO, browser behavior, linking styles, and
scripts.
Everything inside the <head> helps define how your webpage is displayed and behaves.

Basic Syntax

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<meta name="description" content="Learn HTML Head Elements">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Your Name">
<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Common HTML Head Tags

Tag Description Example

Defines the title of the page (shown in

<title> <title>HTML Tutorial</title>
browser tab).

Provides metadata like description, <meta name="description"

<link> Links external CSS or resources. <link rel="stylesheet" href="[Link]">

<style>body { background: #f9f9f9;

HTML5ANDCSS3 | [Link] 128

HTML Head Element Tags

Adds JavaScript code or links to an

Sets a base URL for all relative links on

<base> <base href="[Link]
the page.

Defines alternative content if <noscript>Please enable

<link rel="icon"> Adds a favicon to the page. <link rel="icon" href="[Link]">

Important Meta Tags

Character Encoding

[Link]

Ensures proper display of text and emojis in all languages.

Viewport (for mobile responsiveness)

[Link]

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

Makes your website responsive on different devices.

SEO Metadata

[Link]

<meta name="description" content="Learn HTML Head Tags with examples">

HTML5ANDCSS3 | [Link] 129

HTML Head Element Tags

Social Media Sharing (Open Graph Tags)

[Link]

<meta property="og:title" content="HTML Head Tags Tutorial">

Example: Complete Head Section

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn all HTML Head Tags with examples">
<meta name="keywords" content="HTML, Head, Meta, SEO, CSS">
<meta name="author" content="HTML5 & CSS3">
<title>HTML Head Tags Tutorial</title>
<link rel="stylesheet" href="[Link]">
<link rel="icon" href="[Link]">
<script src="[Link]"></script>
</head>
<body>
<h1>Welcome to the HTML Head Tags Tutorial</h1>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Why the Head Section Matters

- Helps browsers interpret content correctly
- Provides SEO and social media optimization
- Enables linking external styles and scripts
- Controls responsive behavior and accessibility

HTML5ANDCSS3 | [Link] 130

HTML Head Element Tags

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
The <head> section is the control center of your HTML document.
It tells browsers, search engines, and users' devices how to interpret your page, making it a critical part of
every web project.

HTML5ANDCSS3 | [Link] 131

<html>
CHAPTER 035 / ADVANCED HTML

HTML Meta Tags for SEO

Meta tags are snippets of text placed inside the <head> section of an HTML document.
They provide metadata about your web page to search engines, browsers, and social media
platforms.
While meta tags aren't visible to users, they play a major role in SEO (Search Engine Optimization),
social sharing, and page indexing.

Basic Syntax

[Link]

<meta name="name" content="value">

Each meta tag has two main parts:

- name -> defines the type of metadata.

- content -> specifies the actual information.

Example: Common SEO Meta Tags

HTML5ANDCSS3 | [Link] 132

HTML Meta Tags for SEO

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Meta Tags for SEO</title>

<meta property="og:title" content="HTML Meta Tags for SEO">

<meta name="robots" content="index, follow">

</head>
<body>
<h1>HTML Meta Tags for SEO</h1>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Meta Description

[Link]

- Ideal length: 50-160 characters

- Appears below the page title in Google search results
- Helps improve click-through rate (CTR)

Example:

[Link]

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 133

HTML Meta Tags for SEO

Meta Keywords (Deprecated but Optional)

[Link]

<meta name="keywords" content="HTML, CSS, JavaScript, web development">

Note: Most modern search engines (like Google) ignore this tag, but some smaller or custom engines may
still use it.

Meta Author

[Link]

<meta name="author" content="Your Website or Company Name">

Defines who created the page - good for credit or corporate branding.

Meta Viewport (for Mobile SEO)

[Link]

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

Ensures your page scales correctly on all devices - a must for mobile-friendly SEO.

Meta Robots

[Link]

<meta name="robots" content="index, follow">

Tells search engines whether to index or ignore your page.

- index - allow indexing

- noindex - don't index
- follow - follow links
- nofollow - don't follow links

HTML5ANDCSS3 | [Link] 134

HTML Meta Tags for SEO

Example:

[Link]

<meta name="robots" content="noindex, nofollow">

Open Graph Tags (for Social Media)

[Link]

<meta property="og:title" content="Learn Meta Tags for SEO">

Used by Facebook, LinkedIn, and Twitter to show rich previews when sharing links.

Twitter Card Tags

[Link]

<meta name="twitter:card" content="summary_large_image">

These ensure your links look great when shared on X (Twitter).

Meta Charset

[Link]

Ensures proper character encoding - necessary for international websites.

Meta Refresh Redirect

HTML5ANDCSS3 | [Link] 135

HTML Meta Tags for SEO

[Link]

<meta http-equiv="refresh" content="5; url=[Link]

Redirects the page after 5 seconds to another URL (use sparingly).

Canonical Tag

[Link]

<link rel="canonical" href="[Link]

Prevents duplicate content issues and tells search engines the preferred version of a page.

SEO Best Practices

- Always include meta description, viewport, and charset.
- Avoid stuffing keywords - write natural descriptions.
- Use Open Graph and Twitter tags for better social previews.
- Ensure every page has a unique title and description.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
Meta tags are the invisible backbone of SEO - they tell search engines what your page is about, how it
should appear, and how it interacts with other platforms.
Proper use of meta tags boosts your site's visibility, ranking, and user engagement.

HTML5ANDCSS3 | [Link] 136

<html>
CHAPTER 036 / ADVANCED HTML

HTML Responsive Design

Responsive web design is a crucial concept in modern web development. It ensures that a website
looks and works well on all devices - from large desktop monitors to small mobile screens.

What is Responsive Design?

Responsive design means the layout automatically adjusts to fit the screen size and orientation of the
device. It provides users with a consistent and optimized experience across all screen sizes.

Key Goals:

- Easy reading and navigation without zooming or scrolling.

- Proper scaling of images, text, and layout.
- Smooth adaptation between portrait and landscape modes.

Core Techniques of Responsive Design

Viewport Meta Tag

This tag tells browsers how to control the page's dimensions and scaling.

[Link]

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

Explanation:

- width=device-width: sets the page width to match the device screen width.
- initial-scale=1.0: sets the initial zoom level when the page is loaded.

Responsive Layout with CSS

HTML5ANDCSS3 | [Link] 137

HTML Responsive Design

Using Percentages

Use percentages instead of fixed pixel values to make layouts flexible.

[Link]

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Using Flexbox or Grid

Modern CSS layout systems make building responsive layouts easy.

[Link]

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

CSS Media Queries

Media queries allow styles to change depending on device characteristics (like screen width).

HTML5ANDCSS3 | [Link] 138

HTML Responsive Design

[Link]

@media (max-width: 600px) {

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

Explanation:

When the screen width is 600px or less, the background color changes to lightcoral.

Responsive Images

Using max-width

[Link]

<img src="[Link]" alt="Beautiful Nature">

This ensures the image resizes according to the container width.

Using <picture> Element

[Link]

HTML5ANDCSS3 | [Link] 139

HTML Responsive Design

Responsive Text

Use relative units like em, rem, vw instead of px.

[Link]

Frameworks for Responsive Design

You can use CSS frameworks that include built-in responsive grids and utilities:

- Bootstrap
- Tailwind CSS
- Foundation

Example (Bootstrap Grid):

[Link]

<div class="container">
<div class="row">
<div class="col-md-6">Left</div>
<div class="col-md-6">Right</div>
</div>
</div>

Best Practices
- Always use the viewport meta tag.
- Test your layout on multiple devices and orientations.
- Avoid fixed-width elements.
- Use flexible grid systems and relative units.
- Optimize images for mobile screens.

Example: Complete Responsive Page

[Link]

<!DOCTYPE html>
<html lang="en">

HTML5ANDCSS3 | [Link] 140

HTML Responsive Design

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Webpage Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #29AB87;
color: white;
text-align: center;
padding: 15px;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
gap: 10px;
}
.box {
flex: 1 1 300px;
background-color: #f4f4f4;
padding: 20px;
border-radius: 8px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
@media (max-width: 768px) {
header, footer {
font-size: 16px;
padding: 10px;
}
}
</style>
</head>
<body>
<header>
<h2>HTML Responsive Design Example</h2>
</header>

<div class="container">
<div class="box">
<h3>Flexible Layout</h3>
<p>The layout automatically adjusts to fit the screen size.</p>
</div>
<div class="box">
<h3>Responsive Image</h3>
<img src="[Link] alt="Nature Image">
</div>
<div class="box">
<h3>Media Queries</h3>
<p>Media queries help to apply styles for different screen widths.</p>
</div>
</div>

HTML5ANDCSS3 | [Link] 141

HTML Responsive Design

<footer>
© 2025 HTML5 & CSS3 - Responsive Design Demo
</footer>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Try resizing your browser - the layout and image will adjust automatically.

Summary Table

Concept Description

Viewport Meta Tag Sets screen width and scaling

Flexible Layouts Use percentages instead of fixed widths

Responsive Images Scale images using max-width: 100%

Media Queries Apply different styles for screen sizes

Flexbox/Grid Create fluid, adaptive layouts

Frameworks Bootstrap, Tailwind, Foundation make responsiveness easier

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 142

<html>
CHAPTER 037 / HTML REFERENCES

HTML5 New Tags

HTML5 introduced several new tags to improve semantic meaning, multimedia handling, and web
structure.
These tags make the code more readable and help search engines and assistive technologies (like
screen readers) understand the content better.

Why HTML5 Introduced New Tags

Before HTML5, developers used generic <div> and <span> tags for layout, which didn't convey meaning.
HTML5 introduced semantic elements - tags that describe their purpose clearly (like <header>,
<footer>, <article>).

Example:

[Link]

<header>
<h1>Welcome to HTML5</h1>
</header>

<article>
<h2>HTML5 Features</h2>
<p>HTML5 brings new structure and multimedia tags for modern web development.</p>
</article>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

This is both developer-friendly and SEO-friendly.

HTML5ANDCSS3 | [Link] 143

HTML5 New Tags

Structural & Semantic Tags

Tag Description

<header> Defines the top section of a webpage or a document section.

<footer> Defines the footer section (bottom area).

<nav> Represents a navigation menu or group of links.

Defines self-contained, independent content (e.g., news,

<article>
blog posts).

<section> Represents a thematic grouping of content.

Defines content indirectly related to the main content (e.g.,

<aside>
sidebar).

<main> Specifies the main or central content of a document.

<figure> Groups images, diagrams, or illustrations with captions.

<figcaption> Defines a caption for the <figure> element.

<mark> Highlights text.

<time> Represents time, date, or both.

Multimedia Tags

Tag Description

<audio> Used to embed audio files.

<video> Used to embed videos.

<source> Defines multiple media sources for <audio> or <video>.

<track> Provides captions or subtitles for videos.

<canvas> Used for drawing graphics using JavaScript.

<svg> Defines scalable vector graphics.

<embed> Embeds external content like plugins or media.

HTML5ANDCSS3 | [Link] 144

HTML5 New Tags

Example:

[Link]

<video controls width="320">

<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Form-Related New Tags

Tag Description

<datalist> Defines a list of pre-defined options for an input field.

<output> Represents the result of a calculation or action.

<progress> Shows the completion progress of a task.

<meter> Displays a scalar measurement (e.g., temperature, rating).

<keygen> (Deprecated) Used for generating encryption keys.

Example:

[Link]

<label for="browser">Choose your browser:</label>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 145

HTML5 New Tags

Interactive & Scripting Tags

Tag Description

<details> Creates a collapsible content section.

<summary> Defines a visible heading for the <details> element.

<dialog> Represents a dialog box or popup.

<menu> Defines a list or menu of commands.

Represents a command in a popup menu (deprecated in

<menuitem>
HTML5.2).

Example:

[Link]

<details>
<summary>Show Details</summary>
<p>This is additional information that can be toggled open or closed.</p>
</details>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Other Useful Additions

Tag Description

<wbr> Suggests a possible line break.

<bdi> Isolates text for bidirectional formatting.

<bdo> Overrides current text direction.

<ruby>, <rt>, <rp> Used for annotations in East Asian typography.

Example:

HTML5ANDCSS3 | [Link] 146

HTML5 New Tags

[Link]

<p>My name is <bdi></bdi>.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Complete Example of HTML5 New Tags

HTML5ANDCSS3 | [Link] 147

HTML5 New Tags

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 New Tags Example</title>
</head>
<body>

<header>
<h1>HTML5 Semantic Example</h1>
<nav>
<a href="#home">Home</a> |
<a href="#articles">Articles</a>
</nav>
</header>

<main>
<article id="articles">
<header>
<h2>Understanding HTML5 Tags</h2>
</header>
<p>HTML5 introduced many new elements that improve the structure of web documents.</p>
<figure>
<img src="[Link] alt
="HTML5 Logo" width="150">
<figcaption>HTML5 Logo</figcaption>
</figure>
</article>

<aside>
<h3>Did You Know?</h3>
<p>You can use the <mark><mark></mark> tag to highlight important text!</p>
</aside>
</main>

<footer>
<p>© 2025 HTML5 & CSS3 Tutorials</p>
<time datetime="2025-10-22">October 22, 2025</time>
</footer>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 148

HTML5 New Tags

Conclusion
HTML5 new tags have made web pages more meaningful, accessible, and organized.
They reduce dependency on <div>-based layouts and improve both user experience and SEO
performance.
Learning and applying these tags is essential for writing modern, professional, and semantic HTML.

HTML5ANDCSS3 | [Link] 149

<html>
CHAPTER 038 / HTML REFERENCES

Deprecated Tags

As HTML evolved, many tags that were once common became deprecated - meaning they are no
longer recommended for use in modern web development.
Deprecated tags may still work in some browsers for backward compatibility, but they are not
supported in HTML5 and can cause SEO and accessibility issues.

What Does "Deprecated" Mean?

A deprecated tag is an old HTML element that has been replaced by newer, more efficient, or semantic
alternatives.
While browsers may still render them, they could be removed in future updates, so using them is not a
best practice.

Example (Deprecated):

[Link]

<center>
<h2>This is centered text</h2>
</center>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Correct Modern Alternative:

[Link]

<h2 style="text-align: center;">This is centered text</h2>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 150

Deprecated Tags

Common Deprecated Tags and Their Alternatives

Deprecated Tag Purpose (Old) Modern Alternative

<acronym> Defines an acronym <abbr>

<applet> Embeds a Java applet <object> or <embed>

<basefont> Sets default font for a page Use CSS (font-family, font-size)

<big> Displays large text Use CSS (font-size)

<center> Centers content CSS (text-align: center;)

<dir> Creates a directory list <ul>

<font> Sets font size, color, face CSS (font-family, color, font-size)

<iframe> or modern layouts (CSS

<frame>, <frameset>, <noframes> Divides window into frames
Grid/Flexbox)

<isindex> Creates a search field <input type="search">

<menuitem> Defines a command menu item <button> or <li>

<s> Strikethrough text <del> (for older docs)

<del> or CSS (text-decoration:

<strike> Draws a line through text
line-through;)

<tt> Monospaced (teletype) text <code> or <pre>

<u> Underlined text CSS (text-decoration: underline;)

<xmp> Displays preformatted text <pre> or <code>

Deprecated Attributes (Also Avoid These)

Attribute Deprecated From Modern Replacement

align <p>, <div>, <img> CSS (text-align, float)

bgcolor <body>, <table> CSS (background-color)

border <table> CSS (border)

height, width <img>, <table> CSS (width, height)

hspace, vspace <img> CSS (margin, padding)

nowrap <td> CSS (white-space: nowrap;)

valign <td> CSS (vertical-align)

HTML5ANDCSS3 | [Link] 151

Deprecated Tags

Why Avoid Deprecated Tags

- Poor accessibility and SEO
- Non-responsive layouts
- Reduced browser compatibility
- Use CSS and semantic HTML tags instead
- Cleaner, modern, maintainable code

Example: Updating Old HTML

Deprecated HTML:

[Link]

<body bgcolor="lightblue">
<center>
<font color="red" size="5">Welcome to My Page</font>
</center>
</body>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Modern HTML5 Version:

[Link]

<body style="background-color: lightblue;">

<h1 style="text-align: center; color: red; font-size: 2em;">Welcome to My Page</h1>
</body>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Tools to Check Deprecated Tags

You can check your HTML for deprecated elements using:

- W3C Markup Validation Service: [Link]

- HTMLHint (browser plugin or npm)
- VS Code extensions like HTMLHint or WebLint

HTML5ANDCSS3 | [Link] 152

Deprecated Tags

Summary

Concept Description

Deprecated tags No longer recommended for use

Why avoid them Poor SEO, accessibility, and modern compatibility

Modern practice Use CSS and semantic HTML

Validation tools W3C Validator, HTMLHint

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
Deprecated tags are remnants of early HTML versions.
Modern web design emphasizes separation of content and style, achieved through semantic HTML and
CSS.
By avoiding deprecated tags and using current standards, you create websites that are cleaner,
future-proof, and search-friendly.

HTML5ANDCSS3 | [Link] 153

<html>
CHAPTER 039 / HTML REFERENCES

HTML Global Attributes

Global attributes are special attributes that can be used with any HTML element - regardless of the
tag type.
They help define common properties like element identity, accessibility, language, styling, and
custom data.

These attributes make web development more consistent, interactive, and manageable.

What Are Global Attributes?

Global attributes apply to all HTML elements, even if not explicitly listed in the tag definition.
For example, you can use id, class, or style with almost any tag.

Example:

[Link]

<p id="intro" class="highlight" title="Introduction section">

This is a paragraph with global attributes.
</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Commonly Used Global Attributes

Attribute Description Example

Defines a unique identifier for the

id <div id="main">Content</div>
element

class Groups elements for styling or scripting <p class="note">Important!</p>

style Inline CSS styling <h1 style="color: blue;">Hello!</h1>

title Displays additional info as a tooltip HTML

Specifies the language of the element's

lang <p lang="en">Hello!</p>
content

HTML5ANDCSS3 | [Link] 154

HTML Global Attributes

dir Sets text direction (ltr, rtl, auto) <p dir="rtl"></p>

hidden Hides the element from display <p hidden>This will not be visible.</p>

Defines the tab order for keyboard

tabindex <button tabindex="1">Click</button>
navigation

accesskey Defines a keyboard shortcut <button accesskey="s">Save</button>

draggable Allows an element to be draggable <img src="[Link]" draggable="true">

spellcheck Enables or disables spell checking <input spellcheck="true">

<p contenteditable="true">Edit this

contenteditable Makes an element editable by the user
text!</p>

Specifies whether content should be

translate <p translate="no">BrandName</p>
translated

data-* Custom data attributes for JavaScript <div data-user="Alissha">Hello</div>

Examples of Global Attribute Usage

a) Using class and id for Styling

[Link]

<p id="intro" class="highlight">This is highlighted text.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

The id uniquely identifies the element, and class applies a reusable style.

b) Using contenteditable

HTML5ANDCSS3 | [Link] 155

HTML Global Attributes

[Link]

<h3 contenteditable="true">Click here to edit this heading</h3>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Result: You can directly edit the text inside the browser.

c) Using data-* Attributes

[Link]

<div data-course="HTML5" data-level="beginner">

Learn HTML with us!
</div><br/><br/>
<code id="consoleMessage"></code>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

d) Using tabindex and accesskey

[Link]

<button accesskey="s" tabindex="1" onclick="alert('Form saved!')">

Save (Alt + S)
</button>
<button tabindex="2" onclick="alert('Cancelled!')">
Cancel
</button>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Result:

- You can press Alt + S to trigger the "Save" button.

- Tab order follows the tabindex numbers.

HTML5ANDCSS3 | [Link] 156

HTML Global Attributes

Global Attributes and Accessibility (A11y)

Global attributes like lang, title, and tabindex improve accessibility:

- lang="en" helps screen readers pronounce content correctly.

- title provides context to visually impaired users.
- tabindex ensures smooth keyboard navigation.

Best Practices
Use class for grouping elements (avoid too many IDs).
Use data-* for storing small bits of data safely.
Avoid overusing inline style - use external CSS instead.
Use lang and dir for multilingual websites.
Always provide meaningful title tooltips.

Example: Global Attributes in Action

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global Attributes Example</title>
<style>
.editable { background-color: #f0f8ff; padding: 10px; }
</style>
</head>
<body>

<section id="about" class="editable" contenteditable="true" title="Edit this section">

<h2 data-section="intro">About HTML</h2>
<p lang="en" dir="ltr">HTML stands for HyperText Markup Language.</p>
</section>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Explanation:

- id and class used for styling and selection

- contenteditable makes the section editable
- title shows tooltip
- data-* stores metadata

HTML5ANDCSS3 | [Link] 157

HTML Global Attributes

- lang and dir ensure proper accessibility

Summary

Concept Description

Definition Attributes applicable to all HTML elements

Examples id, class, style, lang, data-*

Purpose Add meaning, control, and interactivity

Best Practice Use for accessibility, structure, and scripting

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
Global attributes are universal tools in HTML that enhance every element's functionality.
By using them smartly - especially class, data-*, and accessibility attributes - you make your web pages
organized, interactive, and future-proof.

HTML5ANDCSS3 | [Link] 158

<html>
CHAPTER 040 / HTML REFERENCES

Event Attributes

HTML event attributes allow you to add interactivity to your webpage.

They define how elements respond when certain events occur - such as when a user clicks a
button, hovers over an image, submits a form, presses a key, or moves the mouse.

In short, event attributes connect HTML with JavaScript to make webpages dynamic and interactive.

What is an Event?
An event is an action that happens in the browser - triggered by the user or the browser itself.

Examples of events:

- A user clicks a button -> onclick

- A webpage finishes loading -> onload
- A user presses a key -> onkeydown
- A form is submitted -> onsubmit
- A mouse pointer hovers over an element -> onmouseover

Basic Syntax

[Link]

<element event="JavaScript code"></element>

Example:

[Link]

<button onclick="alert('Button clicked!')">Click Me</button>

When the user clicks this button, an alert box will pop up.

HTML5ANDCSS3 | [Link] 159

Event Attributes

Common Event Attributes

Event Attribute Description Example

<button
onclick Triggered when an element is clicked
onclick="myFunction()">Click</button>

Triggered when the page or image

onload <body onload="init()">
finishes loading

Triggered when a form element value

onchange <input onchange="checkValue()">
changes

<div
Triggered when the mouse pointer
onmouseover onmouseover="highlight()">Hover</div
hovers over an element
>

<div
Triggered when the mouse pointer
onmouseout onmouseout="removeHighlight()">Mov
leaves the element
e out</div>

Triggered when a keyboard key is

onkeydown <input onkeydown="keyPress()">
pressed

Triggered when a keyboard key is

onkeyup <input onkeyup="showText()">
released

Triggered when an input field gets

onfocus <input onfocus="highlightField()">
focus

Triggered when an input field loses

onblur <input onblur="removeHighlight()">
focus

Example 1: Click Event

HTML5ANDCSS3 | [Link] 160

Event Attributes

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Example</title>
<script>
function showMessage() {
alert("You clicked the button!");
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Example 2: Form Validation Event

[Link]

<form onsubmit="return validateForm()">

<input type="text" id="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The form will only submit if the name field is filled.

HTML5ANDCSS3 | [Link] 161

Event Attributes

Example 3: Mouse Events

[Link]

<div onmouseover="[Link]='lightgreen'"
onmouseout="[Link]='white'"
style="width:200px; height:100px; border:1px solid gray; text-align:center; line-height:100p
x;">
Hover over me!
</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

The background color changes when you hover your mouse.

Event Categories

Category Examples

onclick, ondblclick, onmouseover, onmouseout,

Mouse Events
onmousemove

Keyboard Events onkeydown, onkeypress, onkeyup

Form Events onsubmit, onchange, onfocus, onblur

Window Events onload, onresize, onscroll, onunload

Best Practice
While you can write JavaScript inside HTML event attributes, it's better to separate JavaScript from HTML
for cleaner, maintainable code.

Example (better approach):

HTML5ANDCSS3 | [Link] 162

Event Attributes

[Link]

<button id="clickBtn">Click Me</button>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Complete HTML Event Attributes Reference

Mouse Events

Event Attribute Description

onclick Triggered when an element is clicked.

ondblclick Triggered when an element is double-clicked.

onmousedown Triggered when a mouse button is pressed down.

onmouseup Triggered when a mouse button is released.

onmouseover Triggered when the mouse pointer enters an element.

onmouseout Triggered when the mouse pointer leaves an element.

onmousemove Triggered when the mouse is moved within an element.

onwheel Triggered when the mouse wheel is scrolled.

Triggered when the right mouse button is clicked (opens

oncontextmenu
context menu).

Keyboard Events

Event Attribute Description

onkeydown Triggered when a key is pressed down.

onkeypress Triggered when a key is pressed (deprecated in HTML5).

onkeyup Triggered when a key is released.

HTML5ANDCSS3 | [Link] 163

Event Attributes

Form Events

Event Attribute Description

oninput Triggered when user input is received.

onchange Triggered when an element's value changes.

onsubmit Triggered when a form is submitted.

onreset Triggered when a form is reset.

onfocus Triggered when an element receives focus.

onblur Triggered when an element loses focus.

onselect Triggered when text within an input or textarea is selected.

oninvalid Triggered when a form field fails validation.

Window / Document Events

Event Attribute Description

onload Triggered when the page or element is fully loaded.

onunload Triggered when the page is closed or refreshed.

onresize Triggered when the browser window is resized.

onscroll Triggered when the user scrolls an element or page.

Triggered when an error occurs while loading an element

onerror
(like an image).

Drag & Drop Events

Event Attribute Description

ondrag Triggered while an element is being dragged.

ondragstart Triggered when drag starts.

ondragend Triggered when drag ends.

ondragenter Triggered when dragged element enters a valid drop target.

ondragleave Triggered when dragged element leaves a drop target.

ondragover Triggered when dragged element is over a drop target.

HTML5ANDCSS3 | [Link] 164

Event Attributes

ondrop Triggered when dragged element is dropped.

Clipboard Events

Event Attribute Description

oncopy Triggered when text or content is copied.

oncut Triggered when text or content is cut.

onpaste Triggered when text or content is pasted.

Media Events (Audio/Video)

Event Attribute Description

onplay Triggered when media starts playing.

onpause Triggered when media is paused.

onended Triggered when media playback ends.

onvolumechange Triggered when the volume changes.

ontimeupdate Triggered when the playback position changes.

onloadeddata Triggered when media data is loaded.

onprogress Triggered while downloading media data.

onerror Triggered when media loading fails.

Animation & Transition Events

Event Attribute Description

onanimationstart Triggered when a CSS animation starts.

onanimationend Triggered when a CSS animation ends.

onanimationiteration Triggered when a CSS animation repeats.

ontransitionend Triggered when a CSS transition finishes.

HTML5ANDCSS3 | [Link] 165

Event Attributes

Clipboard & Input Composition Events

Event Attribute Description

oncompositionstart Triggered when text composition (IME) starts.

oncompositionupdate Triggered when text composition is updated.

oncompositionend Triggered when text composition ends.

Touch & Pointer Events (Mobile)

Event Attribute Description

ontouchstart Triggered when a touch point is placed on the touch surface.

ontouchmove Triggered when a touch point moves.

ontouchend Triggered when a touch point is removed.

onpointerdown Triggered when a pointer (mouse, pen, or touch) is pressed.

onpointerup Triggered when a pointer is released.

onpointermove Triggered when a pointer moves.

Miscellaneous Events

Event Attribute Description

onabort Triggered when media loading is aborted.

onbeforeunload Triggered before a document is unloaded.

onhashchange Triggered when the URL hash changes.

onmessage Triggered when a message is received via postMessage().

onpopstate Triggered when navigating browser history.

Triggered when data in localStorage or sessionStorage

onstorage
changes.

HTML5ANDCSS3 | [Link] 166

Event Attributes

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
Event attributes are essential for connecting HTML with JavaScript.
Understanding them enables you to build interactive, responsive, and dynamic web pages that respond to
user actions and system changes effectively.

HTML5ANDCSS3 | [Link] 167

<html>
CHAPTER 041 / HTML REFERENCES

Complete HTML Tag List

HTML tags are the building blocks of every webpage.

They define the structure, meaning, and presentation of web content - from headings and
paragraphs to images, videos, forms, and layout elements.

Below is a categorized reference to the HTML elements covered in this tutorial, including commonly
used, semantic, media, form, and scripting elements.

Document Structure Tags

Tag Description

<!DOCTYPE> Defines the document type (HTML5 declaration).

<html> Root element of an HTML page.

<head> Contains metadata and document information.

<title> Specifies the page title (shown in browser tab).

<body> Contains all visible page content.

Metadata Tags

Tag Description

<base> Specifies the base URL for all relative links.

<link> Defines external resources (like CSS).

<meta> Provides metadata like charset, description, or keywords.

<style> Embeds CSS styles in the document.

<script> Embeds or links external JavaScript files.

HTML5ANDCSS3 | [Link] 168

Complete HTML Tag List

Text Content Tags

Tag Description

<h1> to <h6> Define headings, from largest to smallest.

Groups a heading with related subheading, alternative title,

<hgroup>
or tagline content.

<p> Defines a paragraph.

Inserts a line break.

<wbr> Suggests an optional line-break position within text.

<hr> Inserts a horizontal line (thematic break).

<pre> Defines preformatted text.

<b> Bold text (stylistic).

<strong> Important (bold) text (semantic).

<i> Italic text (stylistic).

<em> Emphasized (italic) text (semantic).

<mark> Highlights text.

<small> Displays smaller text.

<del> Shows deleted text.

<ins> Shows inserted text.

<sub> Subscript text.

<sup> Superscript text.

<u> Underlined text.

<code> Represents a fragment of computer code.

<kbd> Represents keyboard or other user input.

<samp> Represents sample output from a program.

<var> Represents a variable or placeholder value.

<s> Marks content that is no longer accurate or relevant.

<dfn> Marks the defining instance of a term.

<data> Associates visible text with a machine-readable value.

<ruby> Wraps base text and its ruby annotations.

HTML5ANDCSS3 | [Link] 169

Complete HTML Tag List

<rt> Provides the ruby annotation text.

Provides fallback punctuation around ruby text for

<rp>
unsupported browsers.

<span> Provides a generic inline container.

Quotation & Citation Tags

Tag Description

<blockquote> Defines a section quoted from another source.

<q> Short inline quotation.

<cite> Reference to a creative work (e.g., book title).

<abbr> Defines an abbreviation or acronym.

<address> Defines contact information.

<bdo> Overrides text direction.

<bdi> Isolates text for bidirectional formatting.

Link & Navigation Tags

Tag Description

<a> Defines a hyperlink.

<nav> Defines navigation links section.

List Tags

Tag Description

<ul> Unordered (bulleted) list.

<menu> Represents a toolbar as an unordered list of commands.

<ol> Ordered (numbered) list.

<li> List item.

<dl> Description list.

<dt> Term/name in a description list.

HTML5ANDCSS3 | [Link] 170

Complete HTML Tag List

<dd> Description of a term.

Image & Media Tags

Tag Description

<img> Embeds an image.

<figure> Groups media content with a caption.

<figcaption> Caption for a figure.

<audio> Embeds audio content.

<video> Embeds video content.

<source> Specifies multiple media sources.

<track> Defines text tracks for media (subtitles).

<embed> Embeds external content.

<object> Embeds an external object.

<picture> Defines multiple image sources for responsive images.

<canvas> Used for drawing graphics via JavaScript.

<map> Defines an image map.

<area> Defines clickable areas in an image map.

<iframe> Embeds another HTML page or external document.

Table Tags

Tag Description

<table> Defines a table.

<caption> Table title or caption.

<thead> Groups header content in a table.

<tbody> Groups body content in a table.

<tfoot> Groups footer content in a table.

<tr> Table row.

<th> Table header cell.

HTML5ANDCSS3 | [Link] 171

Complete HTML Tag List

<td> Table data cell.

<col> Specifies column properties.

<colgroup> Groups columns for formatting.

Form & Input Tags

Tag Description

<form> Defines a form for user input.

<input> Input control.

<textarea> Multi-line text input.

<button> Clickable button.

<select> Drop-down list.

Displays the selected option's content in a customizable

<selectedcontent>
select button.

<option> Option in a drop-down list.

<optgroup> Group of options in a list.

<label> Defines label for input control.

<fieldset> Groups form elements.

<legend> Caption for <fieldset>.

<datalist> Provides autocomplete options for input.

<output> Displays calculation or result.

<meter> Displays a measurement (e.g., disk usage).

<progress> Displays progress of a task.

Semantic Layout Tags

Tag Description

<header> Defines a page or section header.

<footer> Defines a footer for a document or section.

<article> Represents independent, self-contained content.

HTML5ANDCSS3 | [Link] 172

Complete HTML Tag List

<section> Defines a thematic section.

<aside> Defines content indirectly related to the main content.

<main> Represents the main content of a document.

<search> Contains controls or content for searching or filtering.

<details> Defines collapsible content.

<summary> Defines a summary for <details>.

<dialog> Represents a dialog box or popup.

<time> Represents time and date.

<div> Provides a generic block-level container.

Script & Style Tags

Tag Description

<script> Embeds or references JavaScript.

<noscript> Defines alternate content for users without JavaScript.

<style> Embeds CSS code.

Interactive & Web App Tags

Tag Description

<slot> Placeholder inside a web component.

<template> Defines a template for client-side rendering.

Deprecated / Obsolete Tags (Avoid Using)

Tag Reason

<center> Use CSS instead.

<font> Use CSS instead.

<big> Use CSS instead.

<strike> Use CSS instead.

HTML5ANDCSS3 | [Link] 173

Complete HTML Tag List

<tt> Use CSS instead.

<acronym> Replaced by <abbr>.

<applet> Replaced by <object>.

<frame>, <frameset>, <noframes> Deprecated in HTML5.

<marquee> Non-standard, avoid use.

<blink> Deprecated, not supported.

Obsolete. Set object resource information with <object>

<param>
attributes instead.

Obsolete Shadow DOM v0 element. Use modern Shadow

<shadow>
DOM APIs or declarative shadow DOM.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Conclusion
This reference provides a broad overview of the HTML elements covered in this tutorial, categorized for
easy learning.
Understanding these elements will help you structure webpages semantically and improve accessibility,
SEO, and maintainability.

HTML5ANDCSS3 | [Link] 174

<html>
CHAPTER 042 / HTML REFERENCES

Complete HTML5 Elements

HTML5 made everyday markup more expressive. It gave familiar parts of a webpage meaningful
names and added native tools for media, forms, and interactive interfaces.

Use this page as a quick reference. Select any tag to open its lesson, where you'll find the syntax, practical
examples, browser notes, and guidance on when to use it.

Structural & Semantic Elements

These elements give a page a meaningful outline, making its sections easier to understand for readers,
browsers, and assistive technology.

Element What it is used for

A self-contained article, post, comment, or other reusable

<article>
piece of content.

Supporting content that sits beside the main subject, such

<aside>
as a sidebar or related note.

<details> A disclosure section that users can open and close.

A dialog box or modal window that can be controlled with

<dialog>
HTML and JavaScript.

<figcaption> The caption attached to a figure.

Self-contained content such as an image, diagram,

<figure>
illustration, or code sample.

<footer> Closing information for a page or section.

<header> Introductory content for a page or section.

A heading grouped with a subtitle, tagline, or other

<hgroup>
supporting heading text.

<main> The page's unique primary content.

<mark> Text highlighted because it is relevant in the current context.

HTML5ANDCSS3 | [Link] 175

Complete HTML5 Elements

<menu> A semantic list of commands or menu items.

<nav> A section containing the page's important navigation links.

<search> A section containing search or filtering controls.

A themed section of a document, normally introduced by a

<section>
heading.

<summary> The visible label for a collapsible details section.

A human-readable date or time with an optional

<time>
machine-readable value.

Text & Internationalization Elements

Use these elements when text needs machine-readable data, language annotations, direction isolation, or a
safe place to wrap.

Element What it is used for

Isolates text whose writing direction may differ from the

<bdi>
surrounding content.

<data> Connects visible text with a machine-readable value.

Wraps base text and the pronunciation or annotation shown

<ruby>
with it.

<rt> Contains the pronunciation or annotation for ruby text.

Provides fallback parentheses when ruby annotations are

<rp>
not supported.

Marks a suitable place where a long word or string may

<wbr>
wrap.

Media & Graphics Elements

HTML can handle common media directly, without the plugin-heavy workarounds older websites once
needed.

Element What it is used for

Adds sound with native playback controls and multiple

<audio>
source options.

Provides a bitmap drawing surface controlled through

<canvas>
JavaScript.

HTML5ANDCSS3 | [Link] 176

Complete HTML5 Elements

Embeds supported external content when a dedicated

Supplies different images for screen sizes, formats, or

<picture>
display conditions.

Provides an alternative media or image source for a parent

<source>
element.

Adds captions, subtitles, descriptions, or chapters to audio

<track>
and video.

Adds video with native playback controls, captions, and

<video>
fallback sources.

Form & Measurement Elements

These controls make forms more useful and let a page communicate suggestions, results, measurements,
and progress clearly.

Element What it is used for

<datalist> Supplies suggested values for a compatible input control.

Displays a value within a known range, such as a score or

<meter>
storage level.

<output> Shows the result of a calculation or user action.

<progress> Shows how much of a task has been completed.

Templates & Modern UI Elements

These elements support reusable interface patterns, web components, and newer customizable controls.

Element What it is used for

Marks where outside content should appear inside a web

<slot>
component.

Stores markup that remains inactive until it is cloned or

<template>
rendered.

Displays a copy of the selected option inside a customizable

<selectedcontent>
select button.

HTML5ANDCSS3 | [Link] 177

<html>
CHAPTER 043 / HTML TAGS

HTML <!DOCTYPE> Tag

The <!DOCTYPE> declaration defines the document type and version of HTML that the page is
written in.
It helps browsers render the page correctly according to HTML standards.

Syntax

[Link]

<!DOCTYPE html>

- The declaration must appear at the very top of an HTML document, before the <html> tag.
- It is not case-sensitive (<!doctype html> also works).
- It does not have a closing tag.

Example

[Link]

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page uses HTML5 declaration.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 178

HTML <!DOCTYPE> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

There is no visible effect of <!DOCTYPE> on the page itself - it only affects how the browser interprets the
HTML.

Notes
- In HTML5, <!DOCTYPE html> is simple and universal for all browsers.
- In older versions of HTML, doctypes were longer and more complex, e.g.:

[Link]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"[Link]

- Using the HTML5 doctype ensures your page is rendered in standards mode, not quirks mode
(which can cause inconsistent behavior).

Conclusion
The <!DOCTYPE html> declaration is a small but essential part of every HTML document.
It tells browsers to use the latest HTML5 standards, ensuring consistent display and functionality across all
browsers.
Always include it at the top of your HTML files to avoid rendering issues and maintain proper page structure.

HTML5ANDCSS3 | [Link] 179

<html>
CHAPTER 044 / HTML TAGS

HTML <html> Tag

The <html> tag represents the root element of an HTML document.

All other HTML elements - such as <head>, <body>, <div>, , etc. - must be nested inside the
<html> element.

It defines the start and end of an HTML document and can include a lang attribute to specify the
language of the content.

Syntax

[Link]

- lang="en" sets the language to English (recommended for accessibility and SEO).
- Must enclose both <head> and <body> tags.

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Root Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This content is inside the <html> root element.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 180

HTML <html> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All content on the page is contained within the <html> element, though this container is not visibly shown
in the browser.

Notes
- Always use <html> as the first element after <!DOCTYPE>.
- Including the lang attribute improves accessibility for screen readers and helps search engines
understand your content.
- Closing tag </html> is mandatory in HTML5.
- Other global attributes (like dir="ltr" for text direction) can also be added.

Conclusion
The <html> tag is the foundation of every HTML document, acting as a container for all content.
Using it properly ensures your page is structured correctly, accessible, and compatible with browsers and
search engines.
Always pair it with <!DOCTYPE html> at the very top of your document for full HTML5 compliance.

HTML5ANDCSS3 | [Link] 181

<html>
CHAPTER 045 / HTML TAGS

HTML <head> Tag

The <head> tag contains metadata and information about the document that is not directly
displayed on the web page.
It usually includes the page title, links to CSS stylesheets, JavaScript files, meta descriptions, and
other resources used by browsers and search engines.

Everything inside the <head> helps define how the page behaves, not how it looks.

Syntax

[Link]

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Head Example</title>
<meta charset="UTF-8">
<meta name="description" content="An example of using the head tag in HTML.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome!</h1>
<p>This page uses metadata and linked CSS inside the <head> section.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 182

HTML <head> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

None of the <head> content is visible - it only influences page behavior and metadata.

Notes
- The <head> element must appear before the <body> in every HTML document.
- Typical elements inside <head> include:
<ul class="wp-block-list">
<li><title> - sets the page title.</li>

<li><meta> - defines metadata such as charset, description, keywords.</li>

<li><link> - links external stylesheets.</li>

<li><script> - links or embeds JavaScript.</li>

<li><style> - includes internal CSS</li>

</ul>
- Search engines read the <head> for SEO data, and browsers use it to understand page settings.

Conclusion
The <head> tag is the brain of the HTML document, controlling metadata, linking resources, and guiding
browsers and search engines.
Although it's not visible on the page, it's essential for SEO, responsive design, and overall page
performance.
Always include a well-structured <head> section in your HTML documents for proper functionality and
optimization.

HTML5ANDCSS3 | [Link] 183

<html>
CHAPTER 046 / HTML TAGS

HTML <title> Tag

The <title> tag defines the title of an HTML document.

It appears in the browser tab, search engine results, and bookmarks, helping users and search
engines understand the page content.

Syntax

[Link]

<title>Page Title Here</title>

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Title Tag Example</title>
<meta charset="UTF-8">
<meta name="description" content="Example showing how the title tag works in HTML.">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>The page title appears in your browser tab, not on the page.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 184

HTML <title> Tag

The text "HTML Title Tag Example" appears in the browser tab title.

Notes
- The <title> element is required in every HTML document.
- It must be placed inside the <head> section.
- The title appears in:
<ul class="wp-block-list">
<li>Browser tab</li>

<li>Search engine result titles (SEO)</li>

<li>Bookmarks/favorites</li>

<li>Social media previews (sometimes used as default title)</li>

</ul>
- Keep the title short and descriptive (50-60 characters recommended for SEO).

Conclusion
The <title> tag is a vital SEO and usability element of any web page.
It defines what users see in their browser tabs and search results.
A well-written title improves click-through rates, page identity, and search engine ranking, making it one
of the most important tags in your HTML document.

HTML5ANDCSS3 | [Link] 185

<html>
CHAPTER 047 / HTML TAGS

HTML <body> Tag

The <body> tag defines the main content area of an HTML document. It contains all the elements
that are visible to users on a web page - such as text, images, videos, links, tables, lists, and forms.
Everything that appears in a browser window (excluding metadata) must be placed inside the
<body> tag.

Syntax

[Link]

Example

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Body Tag Example</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This content is inside the body tag.</p>
<img src="[Link] alt="Sample Image" width="400">
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 186

HTML <body> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The content of <body> tag are visible things and can be displayed in the web browser.

Notes
- Each HTML document can have only one <body> tag.
- All content elements such as headings, paragraphs, lists, links, tables, etc., must be placed inside
the <body>.
- The <body> tag should not contain <head> elements or metadata.
- Inline styling and event attributes (like onload or onresize) can be applied to the <body> tag.
- Without the <body> tag, browsers may render content unpredictably or fail HTML validation.

Conclusion
The <body> tag is a fundamental structural component of any HTML document. It represents the main
section that users see and interact with. Proper use of the <body> tag ensures a well-structured, valid, and
correctly rendered webpage.

HTML5ANDCSS3 | [Link] 187

<html>
CHAPTER 048 / HTML TAGS

HTML <base> Tag

The <base> tag specifies the base URL and/or target for all relative URLs in a document.
It defines a reference point so that links and resources (like images, CSS, or JavaScript files)
without absolute URLs are resolved relative to the <base> URL.

Syntax

[Link]

<base href="[Link] target="_blank">

- href: Specifies the base URL for all relative links in the document.
- target: Defines the default target for all hyperlinks (e.g., _blank, _self, _parent, _top).

Example

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Base Tag Example</title>
<base href="[Link] target="_blank">
</head>
<body>
<a href="learn-html/">Learn HTML</a>
<img src="[Link] alt="Chrome Logo" widt
h="80">
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 188

HTML <base> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports the <base> tag.

Notes
- The <base> tag must be placed inside the <head> section.
- Only one <base> tag is allowed per document.
- If both href and target attributes are used, they affect all relative URLs and hyperlinks in the page.
- To override the default target for specific links, use the target attribute directly on the <a> tag.
- Improper use may cause resource links to break if relative URLs are incorrectly resolved.

Conclusion
The <base> tag helps maintain consistent and predictable link behavior across a website by defining a
single reference point for all relative URLs. It simplifies development when multiple relative resources share
a common base path.

HTML5ANDCSS3 | [Link] 189

<html>
CHAPTER 049 / HTML TAGS

HTML <link> Tag

The <link> tag defines the relationship between the current HTML document and an external
resource.
It is most commonly used to link external CSS stylesheets, but can also be used for favicons,
preconnect, alternate languages, and RSS feeds.

Syntax

[Link]

<link rel="stylesheet" href="[Link]">

Attributes:

- rel - Specifies the relationship between the current document and the linked resource.
- href - The URL of the external file (CSS, favicon, etc.).
- type - Defines the MIME type (optional, e.g., text/css).
- media - Specifies the media type for which the linked document is optimized (e.g., screen, print).

Example

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Link Tag Example</title>
<link rel="stylesheet" href="[Link]
</head>
<body>
<h1>This heading is styled with an external CSS file.</h1>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 190

HTML <link> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <link> tag.

Notes
- The <link> tag is self-closing and does not require an end tag.
- It must be placed inside the <head> section, before visible content.
- Commonly used for CSS, favicons, and preloading resources.
- Unlike the <style> tag, the <link> tag connects to an external file instead of embedding styles
directly in HTML.
- You can include multiple <link> tags to load multiple resources.

Conclusion
The <link> tag is essential for separating content from design, allowing external files like CSS or icons to
be linked to your HTML document.
It helps maintain cleaner, modular, and reusable code - a best practice in modern web development.

HTML5ANDCSS3 | [Link] 191

<html>
CHAPTER 050 / HTML TAGS

HTML <meta> Tag

The <meta> tag provides metadata about the HTML document. Metadata is information that does
not display directly on the page, but is used by browsers, search engines, and other services.
Common uses include specifying the character set, page description, keywords, author, and
viewport settings for responsive design.

Syntax

[Link]

Attributes

Attribute Description

Specifies the character encoding for the document (e.g.,

charset
UTF-8).

Defines the metadata name (e.g., description, keywords,

name
author).

content Provides the value for the metadata name attribute.

http-equiv Simulates HTTP headers (e.g., refresh, X-UA-Compatible).

Example

HTML5ANDCSS3 | [Link] 192

HTML <meta> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Meta Tag Example</title>
<meta charset="UTF-8">
<meta name="description" content="This page demonstrates the use of meta tags.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This page uses meta tags to provide metadata for browsers and search engines.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <meta> tag does not produce visible content but provides important information for SEO, character
encoding, and responsive behavior.

Notes
- The <meta> tag is self-closing and does not require an end tag.
- Must be placed inside the <head> section.
- Helps browsers render content correctly and search engines index pages accurately.
- Common uses: character encoding (charset), page description (name="description"), and
viewport settings for responsive design.

Conclusion
The <meta> tag is a key component of HTML documents for defining metadata, character encoding, and
responsive design settings.
Although it is invisible on the page, it plays a crucial role in SEO, accessibility, and proper rendering of
the webpage.

HTML5ANDCSS3 | [Link] 193

<html>
CHAPTER 051 / HTML TAGS

HTML <style> Tag

The <style> tag is used to embed CSS styles directly into an HTML document.
It allows you to define the look and formatting of elements on the page without using an external
stylesheet.
The <style> tag must be placed inside the <head> section (though it can also appear in the <body>
in some cases, but that's not recommended).

Syntax

[Link]

Attributes

Attribute Description

Specifies the MIME type of the style sheet. Default is

type
text/css.

Specifies the media type (e.g., screen, print) the styles apply
media
to.

(Obsolete) Limits the styles to the parent element and its

scoped
children.

Example

HTML5ANDCSS3 | [Link] 194

HTML <style> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Style Tag Example</title>
<style>
h1 {
color: green;
text-align: center;
}
p {
font-size: 18px;
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This paragraph is styled using the <style> tag.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <style> tag itself is invisible but styles the page elements, changing colors, fonts, alignment, and other
visual properties.

Notes
- The <style> tag is used for internal CSS; external stylesheets are linked using <link>.
- It should be placed inside the <head> for proper HTML structure.
- The scoped attribute is obsolete and no longer recommended.
- Using <style> helps quickly test styles without creating separate CSS files, but for larger projects,
external CSS is preferred for maintainability.

Conclusion
The <style> tag allows you to define CSS rules within your HTML document, directly affecting the
appearance of elements.

HTML5ANDCSS3 | [Link] 195

HTML <style> Tag

Although it does not produce visible content by itself, it is crucial for custom styling and page design.

HTML5ANDCSS3 | [Link] 196

<html>
CHAPTER 052 / HTML TAGS

HTML <script> Tag

The <script> tag is used to embed or reference JavaScript code in an HTML document.
It allows you to create interactive features, handle events, manipulate the DOM, and perform
dynamic operations on a webpage.

Syntax

[Link]

Attributes

Attribute Description

src Specifies the URL of an external script file.

type Specifies the scripting language. Default is text/javascript.

Loads the script asynchronously without blocking HTML

async
parsing.

defer Loads the script after the HTML is fully parsed.

crossorigin Handles CORS requests for external scripts.

nomodule Prevents execution in browsers that support ES modules.

Example

HTML5ANDCSS3 | [Link] 197

HTML <script> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Script Tag Example</title>
<script>
function showMessage() {
alert("Hello! This is a message from JavaScript.");
}
</script>
</head>
<body>
<h1>Click the button to see the message</h1>
<button onclick="showMessage()">Click Me</button>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <script> tag itself is invisible, but it can execute code that displays alerts, modifies content, or
responds to user actions.

Notes
- The <script> tag can contain inline JavaScript or reference an external file.
- async and defer help improve page load performance.
- Scripts can be placed in <head> or at the end of <body> for faster rendering.
- Always ensure scripts are properly secured to prevent XSS vulnerabilities.

Conclusion
The <script> tag is essential for adding dynamic behavior and interactivity to HTML pages.
Although it does not produce visual content directly, it powers most modern web functionality, making it a
core element in web development.

HTML5ANDCSS3 | [Link] 198

<html>
CHAPTER 053 / HTML TAGS

HTML <h1 to h6> Tag

HTML provides six levels of headings, <h1> through <h6>, to define content hierarchy and
structure.

Syntax

[Link]

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the heading.

style Adds inline CSS styles.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 199

HTML <h1 to h6> Tag

[Link]

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Headings are visible and structured from largest (<h1>) to smallest (<h6>), helping organize content on the
page.

Notes
- Headings are block-level elements by default.
- Always use headings in order (<h1> -> <h2> -> <h3>) for proper semantic structure.
- Headings improve SEO and accessibility.
- Styles can be modified with CSS, but the semantic meaning remains.

Conclusion
HTML headings <h1> to <h6> define content hierarchy and page structure.
Using them correctly ensures better readability, SEO optimization, and accessibility for all users.

HTML5ANDCSS3 | [Link] 200

<html>
CHAPTER 054 / HTML TAGS

HTML <hgroup> Tag

Learn how the HTML <hgroup> tag groups a heading with a subheading, alternative title, or tagline.

The <hgroup> tag represents a heading and its related secondary content.
It groups one <h1> to <h6> element with one or more elements containing a subheading,
alternative title, or tagline.

Syntax

[Link]

<hgroup>
<h1>Main heading</h1>
<p>Subheading or tagline</p>
</hgroup>

Attributes

Attribute Description

class Specifies one or more class names for CSS styling.

id Defines a unique identifier for the element.

style Adds inline CSS styles.

title Provides additional information as a tooltip when hovered.

Example

HTML5ANDCSS3 | [Link] 201

HTML <hgroup> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hgroup Tag Example</title>
<style>
hgroup {
border-left: 4px solid #29AB87;
padding-left: 16px;
}

hgroup h1 {
margin-bottom: 4px;
}

hgroup p {
margin-top: 0;
color: #555;
font-size: 1.1rem;
}
</style>
</head>
<body>
<hgroup>
<h1>Learn Modern HTML</h1>
<p>A beginner-friendly guide to semantic webpages</p>
</hgroup>

<p>Start with meaningful elements and build accessible content.</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <hgroup> element is supported by all major modern browsers.

Notes
- Use one <h1> to <h6> element inside an <hgroup>.
- Write secondary content such as a subheading, alternative title, or tagline inside <p> elements.
- The heading element, not the <hgroup> itself, contributes to the document outline.

HTML5ANDCSS3 | [Link] 202

HTML <hgroup> Tag

- Do not use multiple heading elements inside the same <hgroup>.

- Both the opening and closing tags are required.

Conclusion
The <hgroup> tag provides a semantic way to keep a heading together with its supporting title
content.
Use it when a heading needs a subheading, alternative title, or tagline represented by one or more
paragraphs.

HTML5ANDCSS3 | [Link] 203

<html>
CHAPTER 055 / HTML TAGS

HTML Tag

The tag defines a paragraph of text in HTML.

It is a block-level element that automatically adds some spacing above and below the text, making
content readable and organized.

Syntax

[Link]

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

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the paragraph.

style Adds inline CSS styles.

title Provides additional information as a tooltip.

Example

[Link]

<p>This is the first paragraph on the page.</p>

<p>This is the second paragraph, which is separated from the first by default spacing.</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 204

HTML <p> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Paragraphs are block-level elements that display text with spacing above and below. Multiple paragraphs are
automatically separated for readability.

Notes
- The <p> tag is a block-level element, so it starts on a new line and extends the full width of its
container.
- Avoid placing block-level elements like <div> or <h1> inside <p> tags.
- Use CSS to style paragraphs (color, font, spacing, alignment).
- Multiple <p> tags create distinct blocks of text on the page.

Conclusion
The <p> tag is the standard way to display paragraphs in HTML.
It provides readable and well-structured text content, which is essential for both users and search engines.

HTML5ANDCSS3 | [Link] 205

<html>
CHAPTER 056 / HTML TAGS

HTML
Tag

The
tag inserts a line break in text, moving content to a new line.
It is an empty (self-closing) tag and is useful for breaking lines without starting a new paragraph.

Syntax

[Link]

<br>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the line break.

style Adds inline CSS styles.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 206

HTML <br> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>BR Tag Example</title>
</head>
<body>
<h1>Line Break Example</h1>
<p>This is the first line.<br class="line-break-example">This is the second line after a break.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <br> tag itself is invisible but forces the following content to start on a new line within the same
paragraph.

Notes
- <br> is self-closing; it does not require an end tag.
- It is commonly used inside <p> or other text containers to create line breaks.
- Overusing <br> instead of proper paragraphs (<p>) can lead to poor HTML structure.
- Can be styled with CSS if needed using class or id attributes.

Conclusion
The <br> tag provides a simple way to insert line breaks in text content without creating new paragraphs.
It is essential for formatting text within paragraphs or other inline content.

HTML5ANDCSS3 | [Link] 207

<html>
CHAPTER 057 / HTML TAGS

HTML <wbr> Tag

Learn how the HTML <wbr> tag suggests optional line-break positions inside long words, URLs,
and identifiers.

The <wbr> tag represents a possible line-break position within text.

The browser may break the line at that position when space is limited, but it leaves the text
unbroken when enough space is available.

Syntax

[Link]

Attributes

Attribute Description

class Specifies one or more class names for CSS styling.

id Defines a unique identifier for the element.

style Adds inline CSS styles.

title Provides additional information as a tooltip when hovered.

Example

HTML5ANDCSS3 | [Link] 208

HTML <wbr> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WBR Tag Example</title>
<style>
.example {
width: 240px;
padding: 16px;
border: 2px solid #29AB87;
border-radius: 8px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Optional Word Breaks</h1>

<div class="example">
<p>
Visit
[Link]
to learn modern HTML.
</p>

<p>
ThisIsAReallyLong<wbr>ProductName<wbr>ThatCanWrapSafely
</p>
</div>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <wbr> element is supported by all major modern browsers.

Notes
- The <wbr> element suggests a break opportunity; it does not force a new line.
- Unlike <br>, the browser uses the break only when wrapping is needed.

HTML5ANDCSS3 | [Link] 209

HTML <wbr> Tag

- Use it inside long URLs, identifiers, product names, or other text that has no natural spaces.
- The element does not add a hyphen when the line breaks. Use  when a conditional hyphen is
required.
- Do not place text inside <wbr>; it is an empty element.
- The <wbr> tag is a void element and must not have a closing tag.
- For broad wrapping rules across an entire element, CSS properties such as overflow-wrap or
word-break may be more appropriate.

Conclusion
The <wbr> tag provides a safe optional break point inside long, unbroken text.
Use it when the browser needs help wrapping a specific word or URL without forcing a line break every time.

HTML5ANDCSS3 | [Link] 210

<html>
CHAPTER 058 / HTML TAGS

HTML <hr> Tag

The <hr> tag in HTML defines a thematic break between paragraph-level elements.
It is typically displayed as a horizontal line and is used to visually separate content or sections
within a page.
In HTML5, it represents a semantic break rather than just a visual divider.

Syntax

[Link]

<hr>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the horizontal rule.

style Adds inline CSS styles (e.g., color, width, height).

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 211

HTML <hr> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>HR Tag Example</title>
<style>
.styled-hr {
border: 0;
height: 4px;
background: linear-gradient(to right, #29AB87, #2ecc71);
border-radius: 2px;
}
</style>
</head>
<body>
<h1>Horizontal Rule Example</h1>
<p>This is the first section of text.</p>

<p>This is the second section of text after the horizontal rule.</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <hr> tag is rendered as a horizontal line that separates sections of content.
Its appearance can be customized using CSS for color, thickness, and style.

Notes
- The <hr> tag is self-closing; it does not require an end tag.
- It can be styled with CSS to match your website's design (e.g., gradient lines, dashed styles).
- In HTML5, <hr> indicates a semantic thematic break, not just a visual one.
- It helps improve content readability by visually dividing topics or sections.

HTML5ANDCSS3 | [Link] 212

HTML <hr> Tag

Conclusion
The <hr> tag adds a horizontal divider to web pages to separate content sections visually and
semantically.
It's a simple yet effective way to improve structure and readability in web design.

HTML5ANDCSS3 | [Link] 213

<html>
CHAPTER 059 / HTML TAGS

HTML <pre> Tag

The <pre> tag in HTML defines preformatted text - meaning the text inside it is displayed exactly as
written in the HTML file, including spaces, tabs, and line breaks.
It is often used to display code snippets, poems, or any text where spacing and alignment matter.

Syntax

[Link]

<pre>Preformatted text goes here</pre>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the preformatted block.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 214

HTML <pre> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>PRE Tag Example</title>
<style>
.code-sample {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 10px;
font-family: "Courier New", monospace;
color: #333;
border-radius: 6px;
}
</style>
</head>
<body>
<h1>Preformatted Text Example</h1>
<p>The <pre> tag preserves spacing and line breaks exactly as they appear in the source code.</
p>

<pre class="code-sample" id="example1" title="Sample Code">

function greetUser() {
[Link]("Hello, World!");
}
</pre>

<p>Notice how indentation and line breaks are preserved inside the <pre> tag.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <pre> tag displays text in a fixed-width font, maintaining spaces and line breaks exactly as written.
This makes it ideal for displaying source code or formatted text blocks.

Notes
- The <pre> tag maintains white spaces, line breaks, and indentation.
- Text inside <pre> is typically shown in a monospaced font (like Courier).
- You can combine <pre> with to represent formatted code blocks semantically.
- Avoid excessive use for regular text - it's meant for preformatted or technical content.

HTML5ANDCSS3 | [Link] 215

HTML <pre> Tag

Conclusion
The <pre> tag is essential for displaying preformatted or code-style text where spacing and alignment
are crucial.
It ensures that text appears exactly as written in the HTML, making it perfect for code snippets, ASCII art, or
structured data displays.

HTML5ANDCSS3 | [Link] 216

<html>
CHAPTER 060 / HTML TAGS

HTML Tag

The tag in HTML is used to bolden text without adding extra importance or emphasis.
It visually highlights content by making it bold, often used for keywords, product names, or other text
that needs attention - but not strong semantic meaning.
For emphasizing text semantically, you should use the tag instead.

Syntax

[Link]

<b>Bold text here</b>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the bold text.

style Adds inline CSS styles to customize the appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 217

HTML <b> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>B Tag Example</title>
<style>
.highlight {
color: #29AB87;
font-weight: bold;
background-color: #f0f0f0;
padding: 2px 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>HTML <b> Tag Example</h1>
<p>
The <b> tag makes text <b class="highlight" id="keyword" title="Bold Text">bold</b> without c
hanging its meaning.
</p>
<p>
Example: This is a <b>bold statement</b> in a paragraph.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <b> tag displays text in bold weight to make it stand out visually, without adding semantic importance.

Notes
- The <b> tag is used purely for visual styling - it doesn't convey importance or emphasis.
- For important or emphasized text, prefer <strong> or <em>.
- The default browser style makes <b> text bold, but this can be customized with CSS.
- It is an inline element, meaning it doesn't start on a new line.

HTML5ANDCSS3 | [Link] 218

HTML <b> Tag

Conclusion
The <b> tag is useful for visually highlighting text without changing its meaning.
It's best for stylistic purposes like marking keywords or names, while <strong> should be used for
important or emphasized content.

HTML5ANDCSS3 | [Link] 219

<html>
CHAPTER 061 / HTML TAGS

HTML Tag

The tag is used to define important or emphasized text that carries strong semantic meaning.
Browsers typically render it in bold, but unlike the tag, it indicates that the enclosed text has greater
importance or urgency in the context.
It is useful for accessibility - screen readers will emphasize the text more strongly.

Syntax

[Link]

<strong>Important text goes here</strong>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 220

HTML <strong> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Strong Tag Example</title>
<style>
.important {
color: #d32f2f;
font-weight: bold;
background-color: #fff0f0;
padding: 2px 6px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>HTML <strong> Tag Example</h1>
<p>
This tag is used to highlight text that has <strong class="important" id="warning" title="Imp
ortant Text">strong importance</strong> in meaning.
</p>
<p>
Example: Please <strong>save your work</strong> before exiting the program.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <strong> tag displays text in bold, but more importantly, it conveys semantic emphasis that affects
accessibility and SEO.

Notes
- The <strong> tag is semantically meaningful, unlike <b>, which is purely visual.
- Screen readers emphasize <strong> text, improving accessibility.
- It is an inline element, meaning it does not start on a new line.
- You can style <strong> text with CSS to change its color, font weight, or background.

HTML5ANDCSS3 | [Link] 221

HTML <strong> Tag

Conclusion
The <strong> tag is used for semantically important content that needs emphasis both visually and
contextually.
It enhances readability, accessibility, and SEO - making it more meaningful than the simple <b> tag.

HTML5ANDCSS3 | [Link] 222

<html>
CHAPTER 062 / HTML TAGS

HTML Tag

The tag in HTML is used to display text in italic style.

Unlike , which emphasizes text semantically, is generally used for stylistic purposes such as foreign
words, technical terms, or titles of works.
It is an inline element.

Syntax

[Link]

<i>Italic text here</i>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 223

HTML <i> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>I Tag Example</title>
<style>
.italic-text {
color: #2c3e50;
font-style: italic;
background-color: #f0f8ff;
padding: 2px 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>HTML <i> Tag Example</h1>
<p>
This is an example of <i class="italic-text" id="foreign-word" title="Italicized Text">italic
text</i> in a paragraph.
</p>
<p>
Example: The Latin phrase <i>Carpe diem</i> means "Seize the day."
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <i> tag displays text in italic style for stylistic purposes without semantic emphasis.

Notes
- <i> is an inline element and does not start a new line.
- It is best used for technical terms, foreign words, or titles rather than emphasis.
- For semantic emphasis, use <em> instead of <i>.
- CSS can further style <i> text with color, background, or font size.

HTML5ANDCSS3 | [Link] 224

HTML <i> Tag

Conclusion
The <i> tag is a stylistic tag used to italicize text in HTML.
It provides visual distinction without implying importance, making it ideal for stylistic purposes like foreign
words or technical terms.

HTML5ANDCSS3 | [Link] 225

<html>
CHAPTER 063 / HTML TAGS

HTML Tag

The tag in HTML is used to indicate emphasized text.

Browsers typically render text in italic style, but unlike , it carries semantic importance.
Screen readers give it special emphasis, making it important for accessibility.
It is an inline element.

Syntax

[Link]

<em>Emphasized text here</em>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 226

HTML <em> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>EM Tag Example</title>
<style>
.emphasis {
color: #d35400;
font-style: italic;
background-color: #fff8e1;
padding: 2px 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>HTML <em> Tag Example</h1>
<p>
This sentence contains <em class="emphasis" id="important-text" title="Emphasized Text">empha
sized text</em> that conveys importance.
</p>
<p>
Example: You should <em>read the instructions carefully</em> before starting the task.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <em> tag visually italicizes text and semantically emphasizes it, providing meaning for accessibility and
screen readers.

Notes
- <em> is an inline element used for semantic emphasis.
- Screen readers pronounce emphasized text with more stress, improving accessibility.
- CSS can further style <em> text with color, font size, or background.
- For purely stylistic italics without semantic meaning, use <i>.

HTML5ANDCSS3 | [Link] 227

HTML <em> Tag

Conclusion
The <em> tag is essential for emphasizing text semantically in HTML.
It conveys importance for both human readers and assistive technologies while also rendering in italic style.

HTML5ANDCSS3 | [Link] 228

<html>
CHAPTER 064 / HTML TAGS

HTML Tag

The tag in HTML is used to highlight text, typically to indicate relevance or search results.
Browsers usually render it with a yellow background by default.
It is an inline element and does not change the text's semantic importance beyond visual
highlighting.

Syntax

[Link]

<mark>Highlighted text here</mark>

Attribute

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the highlighted text.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 229

HTML <mark> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>MARK Tag Example</title>
<style>
.highlighted {
background-color: #ffeb3b;
color: #000;
padding: 2px 4px;
border-radius: 2px;
}
</style>
</head>
<body>
<h1>HTML <mark> Tag Example</h1>
<p>
This is an example of <mark class="highlighted" id="search-term" title="Highlighted Text">hig
hlighted text</mark> in a paragraph.
</p>
<p>
Example: The keyword <mark>HTML tutorial</mark> was found in the search results.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <mark> tag visually highlights text, making it stand out, typically with a yellow background.
It is commonly used to indicate search keywords or important passages.

Notes
- <mark> is an inline element and preserves surrounding text flow.
- The default highlight color can be changed using CSS for background and text color.
- It is semantic for highlighted content, useful for marking relevant information or search results.
- Avoid overusing <mark> to prevent visual clutter.

HTML5ANDCSS3 | [Link] 230

HTML <mark> Tag

Conclusion
The <mark> tag is a visual highlighting element that draws attention to important text or search results.
It improves readability and focus without changing the semantic importance of the surrounding content.

HTML5ANDCSS3 | [Link] 231

<html>
CHAPTER 065 / HTML TAGS

HTML Tag

The tag in HTML is used to reduce the font size of text, usually for fine print, disclaimers, legal
notes, or side comments.
It is an inline element and typically does not change the semantic meaning of the text.

Syntax

[Link]

<small>Smaller text here</small>

Attribute

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the text.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 232

HTML <small> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>SMALL Tag Example</title>
<style>
.fine-print {
font-size: 0.8em;
color: #555;
}
</style>
</head>
<body>
<h1>HTML <small> Tag Example</h1>
<p>
This is normal text, and here is <small class="fine-print" id="disclaimer" title="Small Text
Example">some smaller fine-print text</small> within the paragraph.
</p>
<p>
Example: <small>(c) 2025 Company Name. All rights reserved.</small>
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <small> tag reduces the font size of its content, making it suitable for disclaimers, copyright notes, or
secondary information.

Notes
- <small> is an inline element and does not create a new line.
- The font size can be further adjusted using CSS (font-size property).
- It is ideal for non-critical information that should be visible but not dominant.
- Avoid using <small> for main content, as it reduces readability.

Conclusion
The <small> tag is useful for displaying fine print or secondary text in a smaller font size.

HTML5ANDCSS3 | [Link] 233

HTML <small> Tag

It ensures that additional or less important information is presented clearly without dominating the main
content.

HTML5ANDCSS3 | [Link] 234

<html>
CHAPTER 066 / HTML TAGS

HTML Tag

The tag in HTML represents deleted or removed text.

Browsers typically display it with a strikethrough, indicating that the content is no longer valid or has
been replaced.
It is an inline element and is often used in combination with <ins> for edits and revisions.

Syntax

[Link]

<del>Deleted text here</del>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

cite URL indicating the source of the change or deletion.

datetime Specifies the date and time of the deletion.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 235

HTML <del> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>DEL Tag Example</title>
<style>
.removed {
color: #d32f2f;
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>HTML <del> Tag Example</h1>
<p>
Original price: <del class="removed" id="old-price" datetime="2025-10-29" cite="[Link]
[Link]" title="Old Price">500</del>
</p>
<p>
Updated price: 350
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <del> tag visually marks text as deleted using a strikethrough.

It is commonly used for showing revisions, discounts, or removed content.

Notes
- <del> is an inline element and does not break the flow of surrounding text.
- Combine with <ins> to indicate inserted content alongside deletions.
- The datetime and cite attributes add semantic metadata about the deletion. They are not visually
rendered but can be read and interpreted by search engines, screen readers, and other tools.
- CSS can further style <del> to modify color, thickness, or strikethrough style.

HTML5ANDCSS3 | [Link] 236

HTML <del> Tag

Conclusion
The <del> tag highlights deleted or obsolete content in HTML.
It is ideal for revision tracking, pricing updates, or marking removed information on a webpage.

HTML5ANDCSS3 | [Link] 237

<html>
CHAPTER 067 / HTML TAGS

HTML <ins> Tag

The <ins> tag in HTML represents inserted or added text.

Browsers typically display it with an underline to indicate new content.
It is often used alongside to show revisions, edits, or updates.
It is an inline element.

Syntax

[Link]

<ins>Inserted text here</ins>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

cite URL indicating the source of the insertion.

datetime Specifies the date and time of the insertion.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 238

HTML <ins> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>INS Tag Example</title>
<style>
.new-price {
color: #2e7d32;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>HTML <ins> Tag Example</h1>
<p>
Updated price: <ins class="new-price" id="new-price" datetime="2025-10-29" cite="[Link]
[Link]" title="New Price">350</ins>
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Visible Output vs Non-Visible Attributes

- What is visible:
<ul class="wp-block-list">
<li>The content inside <ins> (350) is underlined.</li>

<li>class applies CSS styling (color: green in this example).</li>

<li>title is visible on hover as a tooltip.</li>

</ul>
- What is not visible:
<ul class="wp-block-list">
<li>datetime="2025-10-29" -> Semantic information, not displayed.</li>

<li>cite="[Link] -> Reference URL, not displayed.</li>

</ul>

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 239

HTML <ins> Tag

The <ins> tag displays text with an underline to indicate newly inserted content.
Attributes like datetime and cite are semantic and not directly visible.

Notes
- <ins> is an inline element and does not break the line.
- Commonly used for content updates or corrections alongside <del>.
- The datetime and cite attributes add semantic metadata about the insertion. They are not
visually rendered but can be read and interpreted by search engines, screen readers, and other tools
for SEO purpose.
- CSS can customize underline style, color, or font for inserted text.

Conclusion
The <ins> tag visually indicates newly inserted content with an underline, while also providing semantic
meaning via attributes like datetime and cite.
It is ideal for showing revisions, updates, or additions on a web page.

HTML5ANDCSS3 | [Link] 240

<html>
CHAPTER 068 / HTML TAGS

HTML Tag

The tag in HTML is used to display subscript text, which appears smaller and slightly below the
baseline of normal text.
It is commonly used in mathematical formulas, chemical formulas, and footnotes.
It is an inline element.

Syntax

[Link]

<sub>Subscript text</sub>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 241

HTML <sub> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>SUB Tag Example</title>
<style>
.chemical {
color: #2c3e50;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>HTML <sub> Tag Example</h1>
<p>
Water chemical formula: H<sub class="chemical" id="water-sub" title="Subscript">2</sub>O
</p>
<p>
Example: CO<sub>2</sub> is carbon dioxide.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <sub> tag displays text slightly below the baseline, often in smaller font size, making it ideal for
chemical formulas, footnotes, or mathematical notation.

Notes
- <sub> is an inline element and does not break the line.
- CSS can be used to further style subscript text (color, font-size).
- Often paired with <sup> for superscripts in formulas and citations.
- Avoid overusing for normal text; it is meant for specialized notation.

Conclusion
The <sub> tag is used for subscript text, commonly in chemical, mathematical, or scientific contexts.
It visually shifts the text below the baseline, ensuring proper formatting for technical content.

HTML5ANDCSS3 | [Link] 242

<html>
CHAPTER 069 / HTML TAGS

HTML Tag

The tag in HTML is used to display superscript text, which appears smaller and slightly above the
baseline of normal text.
It is commonly used in mathematical powers, chemical notation, footnotes, or references.
It is an inline element.

Syntax

[Link]

<sup>Superscript text</sup>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 243

HTML <sup> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>SUP Tag Example</title>
<style>
.exponent {
color: #2c3e50;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>HTML <sup> Tag Example</h1>
<p>
Mathematical example: 5<sup class="exponent" id="power" title="Superscript">2</sup> = 25
</p>
<p>
Footnote example: The term "HTML"<sup>1</sup> stands for Hypertext Markup Language.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <sup> tag displays text slightly above the baseline, making it suitable for exponents, footnotes, and
reference numbers.

Notes
- <sup> is an inline element and does not break the line.
- Often paired with <sub> for scientific or mathematical notation.
- CSS can adjust font size, color, or spacing for superscript text.
- Ideal for exponents, footnotes, or references rather than normal text.

Conclusion
The <sup> tag is used for superscript text, such as exponents, footnotes, or references.
It visually raises the text above the baseline, providing correct formatting for technical and academic content.

HTML5ANDCSS3 | [Link] 244

<html>
CHAPTER 070 / HTML TAGS

HTML Tag

The tag in HTML is used to underline text.

Originally, was purely stylistic, but in modern HTML5, it can also indicate non-emphatic text that
should be stylistically different, such as proper names, misspelled words, or terms needing
attention.
It is an inline element.

Syntax

[Link]

<u>Underlined text here</u>

Attributes

Attribute Description

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 245

HTML <u> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>U Tag Example</title>
<style>
.underline {
text-decoration: underline;
color: #1a237e;
}
</style>
</head>
<body>
<h1>HTML <u> Tag Example</h1>
<p>
This is an <u class="underline" id="important-word" title="Underlined Text">underlined word</
u> in a paragraph.
</p>
<p>
Example: Please read the <u>Terms and Conditions</u> carefully.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <u> tag visually underlines the text to make it stand out, often used for stylistic emphasis without
implying semantic importance.

Notes
- <u> is an inline element and does not create a new line.
- Use CSS for additional styling (color, font weight, underline style).
- In HTML5, <u> is recommended for non-emphatic stylistic text, not for emphasis (use <em> or
<strong> for that).
- Avoid using <u> purely for emphasis, as it may be confused with hyperlinks.

HTML5ANDCSS3 | [Link] 246

HTML <u> Tag

Conclusion
The <u> tag is used to underline text, primarily for stylistic purposes.
It visually highlights content without changing semantic meaning, making it useful for names, special terms,
or visually distinct text.

HTML5ANDCSS3 | [Link] 247

<html>
CHAPTER 071 / HTML TAGS

HTML <blockquote> Tag

The <blockquote> tag is used to define a long quotation from another source.
Browsers typically display it as a block element with indentation.
It is ideal for quoting multiple sentences or paragraphs.

Syntax

[Link]

<blockquote cite="source-url">Quoted text goes here</blockquote>

Attributes

Attribute Description

cite URL of the source of the quotation.

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 248

HTML <blockquote> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>BLOCKQUOTE Tag Example</title>
<style>
blockquote {
border-left: 4px solid #2196f3;
padding-left: 10px;
margin: 10px 0;
font-style: italic;
color: #555;
}
</style>
</head>
<body>
<h1>HTML <blockquote> Tag Example</h1>
<blockquote cite="[Link] title="Source Example">
"The only limit to our realization of tomorrow is our doubts of today."
</blockquote>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The text appears indented with a left border and italicized style. The cite and title attributes are not
directly visible.

Notes
- <blockquote> is a block-level element.
- Use cite to provide semantic reference for the source.
- CSS can style the block (borders, padding, font style, background).
- Ideal for multi-line or paragraph quotations.

Conclusion
The <blockquote> tag is used for long quotations, visually distinguished by indentation and optionally
styled with CSS.

HTML5ANDCSS3 | [Link] 249

HTML <blockquote> Tag

It helps in presenting references or cited content clearly.

HTML5ANDCSS3 | [Link] 250

<html>
CHAPTER 072 / HTML TAGS

HTML <q> Tag

The <q> tag is used to define a short inline quotation.

Browsers usually display the quoted text with quotation marks automatically.
It is an inline element and suitable for single sentences or short phrases.

Syntax

[Link]

<q cite="source-url">Short quoted text</q>

Attributes

Attribute Description

cite URL of the source of the quotation.

class Assigns one or more class names for styling.

id Assigns a unique identifier to the element.

style Adds inline CSS styles to customize appearance.

title Provides additional information as a tooltip.

Example

HTML5ANDCSS3 | [Link] 251

HTML <q> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Q Tag Example</title>
<style>
.inline-quote {
color: #2c3e50;
font-style: italic;
}
</style>
</head>
<body>
<h1>HTML <q> Tag Example</h1>
<p>
Albert Einstein once said: <q class="inline-quote" cite="[Link] title="Eins
tein Quote">Imagination is more important than knowledge.</q>
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The text appears inline with quotation marks around it. The cite and title attributes are not directly
visible.

Notes
- <q> is an inline element and does not break the line.
- The cite attribute provides semantic reference for the source. It visually can't be seen.
- CSS can style the quotation (color, font-style, spacing).
- Ideal for short quotes inside a paragraph.

Conclusion
The <q> tag is used for short inline quotations.
It automatically adds quotation marks around the text and supports semantic source referencing.

HTML5ANDCSS3 | [Link] 252

<html>
CHAPTER 073 / HTML TAGS

HTML Tag

The tag is used to define the title of a creative work, such as a book, painting, movie, website, or
research paper.
Browsers usually display the text in italic by default.
It provides semantic meaning to the title of a referenced work.

Syntax

[Link]

<cite>Title of the Work</cite>

Attributes

Attribute Description

class Assigns one or more class names for CSS styling.

id Specifies a unique identifier for the element.

style Adds inline CSS styling.

title Displays additional information on hover.

Example

HTML5ANDCSS3 | [Link] 253

HTML <cite> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Cite Tag Example</title>
<style>
cite {
font-style: italic;
color: #2c3e50;
}
</style>
</head>
<body>
<h1>HTML <cite> Tag Example</h1>
<p>
The painting <cite title="Mona Lisa by Leonardo da Vinci">Mona Lisa</cite> is one of the most
famous artworks in the world.
</p>
<p>
The movie <cite class="film" id="inception" style="color:#e67e22;">Inception</cite> directed
by Christopher Nolan received critical acclaim.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The cited text appears in italic style by default. The title attribute is visible when hovering over the
element.

Notes
- The <cite> tag should be used only for titles of works, not for people's names.
- It is inline and does not introduce a line break.
- You can override the default italic style using CSS.
- Adds semantic meaning useful for accessibility and search engines.

HTML5ANDCSS3 | [Link] 254

HTML <cite> Tag

Conclusion
The <cite> tag identifies the title of a creative or referenced work, displaying it in italic by default.
It helps convey meaning to both users and search engines by marking important referenced material.

HTML5ANDCSS3 | [Link] 255

<html>
CHAPTER 074 / HTML TAGS

HTML Tag

The tag in HTML defines an abbreviation or acronym, such as "HTML," "CSS," or "NASA."
When a user hovers over the abbreviation, the browser displays the full form (if provided using the
title attribute).
This helps improve accessibility, readability, and SEO by clarifying shortened terms.

Syntax

[Link]

<abbr title="Full Form">Abbreviation</abbr>

Attributes

Attribute Description

Specifies the full form or description of the abbreviation

title
(displayed as a tooltip).

class Adds one or more class names for styling.

id Provides a unique identifier for the element.

style Defines inline CSS styles.

Example

HTML5ANDCSS3 | [Link] 256

HTML <abbr> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Abbr Tag Example</title>
<style>
abbr {
cursor: help;
}
</style>
</head>
<body>
<h1>HTML <abbr> Tag Example</h1>

<p>
The term <abbr title="HyperText Markup Language">HTML</abbr> is used to create the structure
of web pages.
</p>

<p>
<abbr title="Cascading Style Sheets" id="css" class="highlight" style="color: #2c3e50;">CSS</
abbr> controls the design and layout of web pages.
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

When you hover over the abbreviation, a tooltip displays the full form.

Notes
- The title attribute is essential for meaningful use of <abbr>.
- Screen readers announce the abbreviation's expansion, improving accessibility.
- The dotted underline can be customized or removed using CSS.
- The tag is inline and does not break text flow.

HTML5ANDCSS3 | [Link] 257

HTML <abbr> Tag

Conclusion
The <abbr> tag makes content more accessible and user-friendly by providing definitions for shortened
terms.
It enhances understanding, especially for technical and academic content, while improving SEO and
usability.

HTML5ANDCSS3 | [Link] 258

<html>
CHAPTER 075 / HTML TAGS

HTML <address> Tag

The <address> tag in HTML is used to define contact information for the author or owner of a
document or article.
It typically contains details such as name, email, physical address, phone number, or website URL.
Browsers usually render it in italic text and often add a line break before and after it.

Syntax

[Link]

<address>
Contact information goes here
</address>

Attributes

Attribute Description

class Specifies one or more class names for CSS styling.

id Defines a unique identifier for the element.

style Adds inline CSS styles.

title Provides additional information as a tooltip when hovered.

Example

HTML5ANDCSS3 | [Link] 259

HTML <address> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Address Tag Example</title>
<style>
address {
font-style: italic;
background-color: #f8f9fa;
border-left: 4px solid #29AB87;
padding: 10px 15px;
width: fit-content;
}
</style>
</head>
<body>
<h1>HTML <address> Tag Example</h1>

<p>For more information, contact us at:</p>

<address id="contact-info" class="office-address" style="color:#2c3e50;">

<strong>HTML5 and CSS3 Organization</strong><br>
45, Tech Park Road, New Delhi - 110001<br>
Email: <a href="[Link]
Website: <a href="[Link] target="_blank">[Link]
Phone: +91-9876543210
</address>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The contact information appears in italic style and may include links, line breaks, and structured details.

Notes
- The <address> element should represent contact information for its nearest <article> or
<body> ancestor.
- It should not be used for general physical addresses unrelated to document authorship.
- Text inside <address> is typically italicized, but this can be changed using CSS.
- Can include multiple child elements such as <a>, <br>, and <strong> for better structure.

HTML5ANDCSS3 | [Link] 260

HTML <address> Tag

Conclusion
The <address> tag provides a semantic and accessible way to display contact details of a webpage's
author or organization.
It helps users and search engines identify the owner or author's information clearly.

HTML5ANDCSS3 | [Link] 261

<html>
CHAPTER 076 / HTML TAGS

HTML <bdo> Tag

The <bdo> tag stands for Bi-Directional Override and is used to override the current text direction of
its content.
It's mainly helpful for displaying text in languages that are written from right to left (RTL), such as
Arabic or Hebrew, or for testing direction behavior.
You must use the dir attribute to specify the direction - either ltr (left-to-right) or rtl (right-to-left).

Syntax

[Link]

<bdo dir="rtl">Text to display in reverse direction</bdo>

Attributes

Attribute Description

Required. Specifies the text direction: ltr (left-to-right) or rtl

dir
(right-to-left).

class Adds one or more class names for CSS styling.

id Assigns a unique identifier to the element.

style Defines inline CSS styles.

title Displays additional information on hover.

Example

HTML5ANDCSS3 | [Link] 262

HTML <bdo> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>BDO Tag Example</title>
<style>
bdo {
background-color: #f0f0f0;
padding: 5px 8px;
border-radius: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>HTML <bdo> Tag Example</h1>

<p>Normal text direction:</p>

<p>Hello World!</p>

<p>Text direction reversed using <code><bdo dir="rtl"></code>:</p>

<p>
<bdo dir="rtl" id="reverse-text" class="highlight" style="color:#29AB87;">Hello World!</bdo>
</p>

<p>
Another example with <code>dir="ltr"</code> (default left to right):
<bdo dir="ltr" title="Left to Right Direction">HTML5 & CSS3</bdo>
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <bdo dir="rtl"> element reverses the display direction of the text inside it.
"Hello World!" will appear from right to left instead of the default left-to-right.

Notes
- The dir attribute is mandatory for the <bdo> tag to function.
- Commonly used to override inherited text direction in multilingual websites.
- It can be styled with CSS for visual clarity or emphasis.

HTML5ANDCSS3 | [Link] 263

HTML <bdo> Tag

- Use <bdi> instead if you need the browser to automatically determine text direction.

Conclusion
The <bdo> tag is a powerful tool for controlling text direction manually, ensuring correct display of
multilingual content.
It's particularly useful in applications involving RTL languages or testing text rendering direction.

HTML5ANDCSS3 | [Link] 264

<html>
CHAPTER 077 / HTML TAGS

HTML <bdi> Tag

The <bdi> tag stands for Bi-Directional Isolation and is used to isolate a part of text that might have
a different direction from the surrounding text.
Unlike <bdo> (which forces a direction), <bdi> allows the browser to automatically determine the
correct direction based on the content.
It is particularly useful for user-generated content in multilingual or dynamic text environments.

Syntax

[Link]

<bdi>Text with different direction</bdi>

Attributes

Attribute Description

Optional. Lets you manually set direction (ltr or rtl), though

dir
it's often detected automatically.

class Adds one or more class names for CSS styling.

id Defines a unique identifier for the element.

style Adds inline CSS for custom styling.

title Shows extra information on hover.

Example

HTML5ANDCSS3 | [Link] 265

HTML <bdi> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>BDI Tag Example</title>
<style>
bdi {
background-color: #f0f0f0;
padding: 4px 6px;
border-radius: 4px;
color: #2c3e50;
}
table {
border-collapse: collapse;
margin-top: 10px;
}
td, th {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
</style>
</head>
<body>
<h1>HTML <bdi> Tag Example</h1>

<p>The <code><bdi></code> tag helps when you have mixed-direction text, such as English and Ara
bic usernames.</p>

<table>
<tr>
<th>Username</th>
<th>Score</th>
</tr>
<tr>
<td><bdi>John</bdi></td>
<td>95</td>
</tr>
<tr>
<td><bdi></bdi></td> 
<td>89</td>
</tr>
<tr>
<td><bdi>Ali_</bdi></td> 
<td>92</td>
</tr>
</table>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 266

HTML <bdi> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The Arabic or mixed-direction usernames will display properly aligned without breaking the layout - the
<bdi> tag isolates each name's direction automatically.

Notes
- The <bdi> element is useful for dynamic or user-generated content where text direction is
unknown.
- It ensures that the surrounding text layout remains consistent regardless of the inserted text's
language.
- You can use the optional dir attribute to force a direction if needed.
- Unlike <bdo>, <bdi> doesn't override the direction - it isolates it.

Conclusion
The <bdi> tag provides a smart and automatic solution for displaying multilingual text correctly.
It preserves layout and readability by isolating text direction without manual overrides - ideal for user names,
comments, and mixed-language content.

HTML5ANDCSS3 | [Link] 267

<html>
CHAPTER 078 / HTML TAGS

HTML Tag

The tag, also known as the anchor tag, is used to create hyperlinks in HTML.
It allows users to navigate between web pages, jump to specific sections, download files, or even
send emails using mailto: links.
It is one of the most important elements for web navigation and interconnectivity.

Syntax

[Link]

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

Attributes

Attribute Description

href Specifies the destination URL or resource to link to.

Defines where to open the linked document (_self, _blank,

target
_parent, _top).

Displays additional information when the user hovers over

title
the link.

Instructs the browser to download the linked file instead of

download
navigating to it.

Specifies the relationship between the current document and

rel
the linked document (e.g., nofollow, noopener, noreferrer).

id Unique identifier for the link.

class CSS class for styling the link.

style Inline CSS styling for the link.

HTML5ANDCSS3 | [Link] 268

HTML <a> Tag

Example

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Example</title>
<style>
a {
color: #29AB87;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #1c7a63;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>HTML <a> Tag Example</h1>

<p>
Visit our official website:
<a href="[Link] target="_blank" title="Visit HTML5 and CSS3 Official Site"
>
HTML5 and CSS3
</a>
</p>

<p>
Download a sample PDF file:
<a href="[Link] download="[Link]"
>Download PDF</a>
</p>

<p>
Send us an email:
<a href="[Link]
</p>

<p>
Jump to a section on this page:
<a href="#about">Go to About Section</a>
</p>

<h2 id="about">About Section</h2>

<p>This section explains the working of the anchor tag in HTML.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 269

HTML <a> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The links appear as clickable text, styled according to your CSS.

Hover effects, file download, and email actions work as expected.

Notes
- Always use target="_blank" carefully - add rel="noopener noreferrer" for security.
- The <a> tag can link to internal elements using IDs (e.g., href="#section").
- You can turn any element (like <img> or <button>) into a link by wrapping it with <a>.
- Use the download attribute for files you want the user to save instead of opening.
- mailto will only work on the device which has default mail client has been configured.

Conclusion
The <a> tag enables hyperlinking and navigation, connecting web pages, files, and resources seamlessly.
It is the backbone of web navigation, making content interactive and interconnected.

HTML5ANDCSS3 | [Link] 270

<html>
CHAPTER 079 / HTML TAGS

HTML <nav> Tag

The <nav> tag defines a section of a webpage that contains navigation links.
It helps users move around a website and assists search engines in understanding the site's
structure.
Commonly used for main menus, sidebars, and internal page navigation.

Syntax

[Link]

Attributes

Attribute Description

The <nav> element supports all global attributes like id,

Global Attributes
class, style, etc.

Also supports event attributes such as onclick,

Event Attributes
onmouseover, etc.

Example

HTML5ANDCSS3 | [Link] 271

HTML <nav> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Navigation Example</title>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser support this <nav> tag

Notes
- The <nav> element should only include major navigation blocks.
- Don't wrap every set of links inside <nav>.
- Typically used in headers, sidebars, or footers for key navigation.
- Helps improve accessibility and SEO by indicating navigation landmarks.

Conclusion
The <nav> tag is essential for building structured and accessible websites.
It clearly defines navigational menus, improves SEO and usability, and enhances readability for both users
and assistive technologies.
Always use <nav> to wrap major navigation links, and style it consistently for a cohesive user experience.

HTML5ANDCSS3 | [Link] 272

<html>
CHAPTER 080 / HTML TAGS

HTML <ul> Tags

The <ul> tag in HTML defines an unordered (bulleted) list, while the <li> tag defines individual list
items within that list.
Unordered lists are commonly used for displaying groups of items where the order doesn't matter,
such as menus, features, or simple lists.

Syntax

[Link]

Attributes

Tag Attribute Description

Specifies the bullet style. Values: disc

<ul> type (default), circle, square. (Deprecated in
HTML5; use CSS instead)

Specifies the number of a list item (only

<li> value for ordered lists but valid in mixed
cases).

Defines list item marker style. Values:

<li> type
disc, circle, square. (Deprecated)

Example

HTML5ANDCSS3 | [Link] 273

HTML <ul> Tags

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered List Example</title>
<style>
ul {
list-style-type: square;
padding: 10px;
width: 250px;
}
li {
margin: 5px 0;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <ul> and <li> tags have full browser support across all modern browsers.
Use our Try It Editor to see how list markers appear differently based on CSS styling.

Notes
- The <ul> tag creates unordered (bulleted) lists, while <li> defines each list item.
- The bullet style can be changed using CSS: list-style-type.
- Lists can be nested by placing one <ul> inside another <li>.
- Avoid excessive nesting for readability and accessibility.

HTML5ANDCSS3 | [Link] 274

HTML <ul> Tags

Conclusion
The <ul> and <li> tags are essential for structuring unordered lists.
They improve readability, accessibility, and the visual organization of grouped items.
For consistent styling, always control bullet appearance using CSS instead of deprecated HTML attributes.

HTML5ANDCSS3 | [Link] 275

<html>
CHAPTER 081 / HTML TAGS

HTML <menu> Tag

Learn how the HTML <menu> tag represents a toolbar containing an unordered list of commands.

The <menu> tag represents a toolbar containing an unordered list of commands that a user can
perform or activate.
Its items are normally written as <li> elements containing controls such as buttons.

Syntax

[Link]

<menu>
<li><button type="button">Save</button></li>
<li><button type="button">Share</button></li>
</menu>

Attributes

Attribute Description

class Specifies one or more class names for CSS styling.

id Defines a unique identifier for the element.

style Adds inline CSS styles.

title Provides additional information as a tooltip when hovered.

Example

HTML5ANDCSS3 | [Link] 276

HTML <menu> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Tag Example</title>
<style>
menu {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
}

menu button {
border: 0;
border-radius: 6px;
background-color: #29AB87;
color: white;
padding: 10px 16px;
cursor: pointer;
}

menu button:hover {
background-color: #218c70;
}
</style>
</head>
<body>
<h1>Article Actions</h1>

<menu>
<li><button type="button">Save</button></li>
<li><button type="button">Share</button></li>
<li><button type="button">Print</button></li>
</menu>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <menu> element is supported by all major modern browsers.

HTML5ANDCSS3 | [Link] 277

HTML <menu> Tag

Notes
- Use <menu> for a toolbar or an unordered list of commands that users can activate.
- Use <ul> for a general unordered list whose items are primarily displayed as content.
- Place each command in an <li>, usually with an interactive control such as a <button>.
- Browsers render <menu> similarly to <ul>; use CSS to create the toolbar layout.
- The old context-menu use of <menu> is obsolete and should not be used.
- The obsolete compact attribute should be replaced with CSS.
- Both the opening and closing tags are required.

Conclusion
The <menu> tag provides a semantic way to group commands into a toolbar.
Use it with list items and interactive controls when users need to perform a related set of actions.

HTML5ANDCSS3 | [Link] 278

<html>
CHAPTER 082 / HTML TAGS

HTML <ol> Tag

The <ol> tag in HTML defines an ordered (numbered) list, and the <li> tag defines individual list
items within that list.
Ordered lists are used when the sequence of items is important, such as steps in a process,
rankings, or instructions.

Syntax

[Link]

Attributes

Tag Attribute Description

Specifies the numbering type. Values: 1

<ol> type
(default), A, a, I, i.

<ol> start Defines the starting number for the list.

Displays the list in descending order.

<ol> reversed
(Boolean attribute)

Specifies a custom number or letter for

<li> value
the list item.

Overrides the numbering type for that

<li> type
specific item. (Deprecated)

Example

HTML5ANDCSS3 | [Link] 279

HTML <ol> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List Example</title>
<style>
ol {
background-color: #f9f9f9;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
width: 250px;
}
li {
margin: 5px 0;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Steps to Make Tea</h2>
<ol type="1" start="1" reversed>
<li>Boil water</li>
<li>Add tea leaves</li>
<li>Pour into cup</li>
<li>Add sugar and milk</li>
</ol>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <ol> and <li> tags have full browser support across all modern browsers.
Use our Try It Editor to see how list numbering, types, and reversal behave in different browsers.

Notes
- The <ol> tag is used for ordered lists, and <li> defines the items within it.
- You can start numbering from any point using the start attribute.

HTML5ANDCSS3 | [Link] 280

HTML <ol> Tag

- The reversed attribute displays lists in reverse order.

- The numbering style can be customized using CSS:

[Link]

ol { list-style-type: upper-roman; }

- Nested ordered lists create hierarchical numbering.

Conclusion
The <ol> and <li> tags are perfect for creating structured, ordered lists where sequence matters.
They make step-by-step guides, rankings, and ordered data clear and easy to follow.
Use attributes like type, start, and reversed to fully control the numbering behavior.

HTML5ANDCSS3 | [Link] 281

<html>
CHAPTER 083 / HTML TAGS

HTML <dl> Tag

The <dl> tag in HTML defines a description list (also known as a definition list).
Each description list contains one or more pairs of terms (<dt>) and definitions (<dd>).
It is commonly used to display glossaries, FAQs, or metadata in a structured way.

Syntax

[Link]

<dl>
<dt>Term 1</dt>
<dd>Description of Term 1</dd>
<dt>Term 2</dt>
<dd>Description of Term 2</dd>
</dl>

Attributes

Tag Attribute Description

Supports all global attributes such as

<dl> Global Attributes
id, class, title, and style.

<dt> Global Attributes Can use class, id, title, etc.

Can use class, id, title, and style

<dd> Global Attributes
attributes.

Example

HTML5ANDCSS3 | [Link] 282

HTML <dl> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Description List Example</title>
<style>
dl {
padding: 15px;
width: 320px;
}
dt {
font-weight: bold;
color: #222;
margin-top: 10px;
}
dd {
margin-left: 20px;
color: #555;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2>HTML Terminology</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - the standard language for creating web pages.</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets - used to style and layout web pages.</dd>

<dt>JavaScript</dt>
<dd>A scripting language used to create dynamic and interactive effects on web pages.</dd>
</dl>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <dl>, <dt>, and <dd> tags have full browser support across all modern browsers.
Use our Try It Editor to see how terms and descriptions align differently based on your styling.

HTML5ANDCSS3 | [Link] 283

HTML <dl> Tag

Notes
- <dl> wraps the entire list, <dt> defines the term, and <dd> defines the description.
- You can include multiple <dd> elements for one <dt> to provide more details.
- Description lists are ideal for FAQs, glossaries, or attribute-value data.
- Style them using CSS to create elegant layouts like two-column descriptions.

Conclusion
The <dl>, <dt>, and <dd> tags provide a semantic way to represent term-definition pairs.
They are perfect for glossaries, FAQs, and structured data lists.
With proper CSS styling, description lists can be made visually appealing and easy to read.

HTML5ANDCSS3 | [Link] 284

<html>
CHAPTER 084 / HTML TAGS

HTML <img> Tag

The <img> tag in HTML is used to embed images into a webpage. It is an empty tag (no closing
tag) and requires attributes like src (source URL of the image) and alt (alternative text for
accessibility and SEO).

Syntax

[Link]

<img src="[Link]" alt="Description of image">

Attributes

Attribute Description Example

src Specifies the path to the image file. src="[Link]"

Provides alternate text if image fails to

alt alt="Profile picture"
load.

width Defines the image width (in px or %). width="300"

height Defines the image height (in px or %). height="200"

Defines how the image should load

loading loading="lazy"
(lazy or eager).

title Provides extra info on hover. title="HTML5 Logo"

Defines multiple image sources for srcset="[Link] 400w, [Link]

srcset
responsive design. 800w"

Specifies how different image sizes are sizes="(max-width: 600px) 480px,

sizes
used for screen widths. 800px"

Indicates if image should be fetched

crossorigin crossorigin="anonymous"
with CORS.

HTML5ANDCSS3 | [Link] 285

HTML <img> Tag

Example

[Link]

<h2>Example: Adding an Image</h2>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

(Displays an image of sunrise on the webpage - width 400px, height 250px)

Notes
- The <img> tag does not have a closing tag.
- Always include the alt attribute - it improves accessibility and SEO.
- Use loading="lazy" for better performance (defers loading until the image is visible).
- Use responsive image techniques (srcset, sizes) for adaptive layouts.

Conclusion
The <img> tag is the backbone of visual content in web design. When used correctly with attributes like alt
, srcset, and loading, it makes websites both beautiful and efficient - ensuring faster loading, better
SEO, and accessibility compliance.

HTML5ANDCSS3 | [Link] 286

<html>
CHAPTER 085 / HTML TAGS

HTML <figure> Tag

The <figure> tag in HTML is used to group self-contained media content like images, illustrations,
diagrams, code snippets, or videos - usually accompanied by a caption.
It helps semantically associate media with its description, making web content more meaningful and
accessible.

Syntax

[Link]

<figure>
<img src="[Link]" alt="A calm forest">
<figcaption>Morning view of a green forest</figcaption>
</figure>

Attributes

Attribute Description Example

Specifies a unique identifier for the

id id="forest-pic"
figure element.

Assigns one or more class names for

class class="photo-frame"
styling.

style Adds inline CSS styling. style="border:2px solid #ccc"

Example

HTML5ANDCSS3 | [Link] 287

HTML <figure> Tag

[Link]

<h2>Example: Image with Caption</h2>

<figure>
<img src="[Link] alt="Dense forest with sunlight" width="40
0">
<figcaption>A random Image</figcaption>
</figure>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <figure> tag is fully supported across all major browsers.

It is part of HTML5 and works seamlessly in responsive and semantic web layouts.

Notes
- The <figure> element is independent of the main content flow - it can be moved without affecting
meaning.
- Usually contains one visual element and one <figcaption>.
- Improves accessibility and SEO by providing descriptive context to media.

Conclusion
The <figure> tag brings semantic structure to visual content by grouping media with captions.
When used correctly, it enhances readability, accessibility, and the overall user experience on modern web
pages.

HTML5ANDCSS3 | [Link] 288

<html>
CHAPTER 086 / HTML TAGS

HTML <figcaption> Tag

The <figcaption> tag defines a caption or description for a <figure> element.

It provides context to the media (such as an image, chart, or video) grouped inside the <figure>.
Usually, it appears either at the top or bottom of the content inside <figure>.

Syntax

[Link]

<figure>
<img src="[Link]" alt="Sunset over the ocean">
<figcaption>Sunset over the Arabian Sea</figcaption>
</figure>

Attributes

Attribute Description Example

Specifies a unique identifier for the

id id="caption1"
caption.

Assigns one or more class names for

class class="image-caption"
styling.

style Adds inline CSS styling. style="color:gray; font-style:italic;"

Example

HTML5ANDCSS3 | [Link] 289

HTML <figcaption> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Figcaption Example</title>
</head>
<body>
<h2>Example: Caption for an Image</h2>
<figure>
<img src="[Link] alt="Mountain Range" width="400">
<figcaption style="font-weight: bold;">A Random Image Mountain Range</figcaption>
</figure>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <figcaption> tag is fully supported by all modern browsers.

It pairs directly with the <figure> tag for semantically meaningful content grouping.

Notes
- You can place <figcaption> either before or after the main media inside <figure>.
- A <figure> should contain only one <figcaption> element.
- Helps screen readers and search engines understand the context of visual content.

Conclusion
The <figcaption> tag provides an accessible and semantic caption for media within a <figure>.
It improves user comprehension, visual structure, and SEO for content that includes images or illustrations.

HTML5ANDCSS3 | [Link] 290

<html>
CHAPTER 087 / HTML TAGS

HTML <audio> Tag

The <audio> tag is used to embed sound content in an HTML document, such as music, podcasts,
or sound effects.
It supports multiple audio formats and provides playback controls like play, pause, and volume.

Syntax

[Link]

<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>

Attributes

Attribute Description Example

src Specifies the path to the audio file. src="song.mp3"

Displays play, pause, and volume

controls controls
controls.

autoplay Automatically starts playing the audio. autoplay

loop Repeats the audio after it ends. loop

muted Starts the audio in a muted state. muted

Specifies how the audio should be

preload preload="auto"
loaded. Values: none, metadata, auto.

Example

HTML5ANDCSS3 | [Link] 291

HTML <audio> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Tag Example</title>
</head>
<body>
<h2>Example: Embedding an Audio File</h2>
<audio controls preload="metadata">
<source src="[Link] type="audio/mpeg"
>
<source src="[Link] type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <audio> tag is fully supported by all major browsers.

Older browsers (IE8 and below) do not fully support HTML audio playback.
However, some IE version may support different audio formats such as MP3, OGG, or WAV.

Notes
- You can include multiple <source> elements to ensure cross-browser compatibility.
- If the browser doesn't support the <audio> tag, the fallback text inside will be displayed.
- Avoid using autoplay without user consent to prevent accessibility and UX issues.

Conclusion
The <audio> tag provides an easy and standardized way to integrate sound into web pages.
By combining multiple formats and attributes, you can create rich multimedia experiences with full browser
compatibility.

HTML5ANDCSS3 | [Link] 292

<html>
CHAPTER 088 / HTML TAGS

HTML <video> Tag

The <video> tag is used to embed video files directly into a webpage.
It supports multiple formats such as MP4, WebM, and Ogg, and provides built-in playback controls
for users to play, pause, or adjust volume.

Syntax

[Link]

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser does not support the video tag.
</video>

Attributes

Attribute Description Example

src Specifies the path to the video file. src="movie.mp4"

controls Displays video playback controls. controls

autoplay Automatically plays the video. autoplay

loop Repeats the video after finishing. loop

muted Starts the video with sound muted. muted

Specifies an image to show before the

poster poster="[Link]"
video starts.

Sets the dimensions of the video

width / height width="640" height="360"
player.

Indicates how the video should be

preload preload="metadata"
preloaded: none, metadata, or auto.

Manages CORS requests for the video

crossorigin crossorigin="anonymous"
element.

HTML5ANDCSS3 | [Link] 293

HTML <video> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Tag Example</title>
</head>
<body>
<h2>Example: Embedding a Video</h2>

<video width="640" height="360" controls poster="[Link]

ples/sample_thumbnail.png">
<source src="[Link] type="video
/mp4">
<source src="[Link] type="vide
o/webm">
Your browser does not support the video tag.
</video>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

Displays a built-in video player with play, pause, progress bar, and volume controls.
Use our Try It Editor to view and test video playback directly in your browser.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <video> element is supported across all major browsers starting from Internet Explorer 9.
Older browsers (IE8 and below) do not support HTML5 video playback.

HTML5ANDCSS3 | [Link] 294

HTML <video> Tag

Notes
- You can include multiple <source> elements for different video formats to ensure compatibility.
- The poster attribute helps improve user experience by showing a thumbnail before playback starts.
- Avoid using autoplay without muted, as modern browsers block auto-playing videos with sound.

Conclusion
The <video> tag provides a native, flexible, and browser-friendly way to embed video content.
It replaces older plugins like Flash and supports modern formats and responsive attributes for seamless
integration across devices.

HTML5ANDCSS3 | [Link] 295

<html>
CHAPTER 089 / HTML TAGS

HTML <source> Tag

The <source> tag is used to define multiple media resources for the <audio> and <video>
elements.
It allows the browser to choose the best supported format automatically, ensuring better playback
compatibility across devices.

Syntax

[Link]

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

Attributes

Attribute Description Example

Specifies the path (URL) of the media

src src="movie.mp4"
file.

Defines the MIME type of the file to

type type="video/mp4"
help browsers identify the format.

Specifies media query conditions (like

media media="(min-width: 800px)"
screen size) for selecting this file.

Specifies image sizes for responsive sizes="(max-width: 600px) 480px,

sizes
designs (used in <picture>). 800px"

Specifies multiple image sources for

srcset="[Link] 480w,
srcset different resolutions (used in
[Link] 800w"
<picture>).

Example

HTML5ANDCSS3 | [Link] 296

HTML <source> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Source Tag Example</title>
</head>
<body>
<h2>Example: Using <source> inside <video></h2>

<video width="640" height="360" controls>

<source src="[Link] type="video
/mp4">
<source src="[Link] type="vide
o/webm">
Your browser does not support the video tag.
</video>

<h2>Example: Using <source> inside <audio></h2>

<audio controls>
<source src="[Link] type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

When used inside <audio> or <video>, the browser automatically picks the first supported file for
mat and plays it.
Use our Try It Editor to see how browsers select media formats dynamically.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <source> tag is fully supported in all major browsers starting from Internet Explorer 9.

HTML5ANDCSS3 | [Link] 297

HTML <source> Tag

It ensures media elements remain functional even when certain formats aren't supported.

Notes
- Always include at least two <source> elements for best compatibility (e.g., MP4 + WebM for
videos).
- Browsers read <source> elements from top to bottom and stop when they find the first supported
format.
- The <source> tag does not display anything by itself - it must be nested inside <video>,
<audio>, or <picture>.

Conclusion
The <source> tag improves the flexibility and compatibility of media elements by letting developers provide
multiple file formats.
It ensures that users across all browsers and devices can play the same content smoothly without additional
plugins.

HTML5ANDCSS3 | [Link] 298

<html>
CHAPTER 090 / HTML TAGS

HTML <track> Tag

The <track> tag is used to add text tracks (like subtitles, captions, descriptions, or chapters) to
<video> and <audio> elements.
It improves accessibility by providing text alternatives for users who are deaf, hard of hearing, or
non-native speakers.

Syntax

[Link]

<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

Attributes

Attribute Description Example

Specifies the URL of the track file

src src="[Link]"
(usually a .vtt file).

Defines the type of text track: subtitles,

kind captions, descriptions, chapters, kind="subtitles"
metadata.

Specifies the language of the track text

srclang srclang="en"
(ISO language code).

Provides a title for the track (shown to

label label="English Subtitles"
users).

Marks the track as the default one

default default
when multiple tracks are available.

Example

HTML5ANDCSS3 | [Link] 299

HTML <track> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Track Tag Example</title>
</head>
<body>
<h2>Example: Adding Subtitles to a Video</h2>

<video width="640" height="360" controls crossorigin="anonymous">

<source src="[Link] type="video
/mp4">
<track src="[Link] kind="sub
titles" srclang="hi" label="Hindi" default>
<track src="[Link] kind="s
ubtitles" srclang="es" label="Espaol">
Your browser does not support the video tag.
</video>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

Displays a video with a subtitles or captions option that can be toggled using the video player's
menu.
Use our Try It Editor to see how subtitle files appear while the video plays.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Partially

The <track> element is supported in all modern browsers (from IE10+ for full functionality).
Older browsers may ignore subtitle tracks or not display them in the video controls.
To switch between the subtitles click on three vertical dots at bottom right of the video and then click on CC
(captions) and choose the desired subtitle.

HTML5ANDCSS3 | [Link] 300

HTML <track> Tag

Notes
- The text file used in src must be in WebVTT (.vtt) format.
- The kind attribute determines the purpose of the track (e.g., subtitles for translation, captions for
hearing-impaired users).
- You can include multiple <track> tags for different languages or purposes.
- The <track> element is empty, meaning it doesn't have a closing tag.

Conclusion
The <track> tag enhances accessibility and internationalization in multimedia content.
By including properly formatted caption or subtitle files, you make your videos more inclusive and
user-friendly for a global audience.

HTML5ANDCSS3 | [Link] 301

<html>
CHAPTER 091 / HTML TAGS

HTML <embed> Tag

The <embed> tag in HTML is used to embed external content such as videos, audio, PDFs, or
interactive media (like SVGs or Flash) directly into a webpage.
It is a self-closing tag and doesn't require a closing tag. It serves as a generic container for external
resources when specific tags (like <video> or <audio>) are not suitable.

Syntax

[Link]

<embed src="filename" type="mime/type" width="600" height="400">

Attributes

Attribute Description

src Specifies the path (URL) of the external file to embed.

Defines the MIME type of the embedded content (e.g.,

type
video/mp4, application/pdf).

width Sets the width of the embedded content (in pixels).

height Sets the height of the embedded content (in pixels).

Example

Embedding a PDF File

<embed src="[Link] type="application/pdf"

width="700" height="500">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 302

HTML <embed> Tag

Embedding a Video File

<embed src="[Link] type="video/mp4"

width="640" height="360">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The PDF file appears inline with scroll and zoom options inside the page.
The video plays directly inside the defined area if supported by the browser.

Notes
- <embed> is a generic container for external content; use it when a specialized element (like
<audio>, <video>, or <object>) isn't suitable.
- Many use-cases (video/audio) are better handled by <video> / <audio> because those provide
built-in controls and better accessibility.
- For documents (PDF) consider <iframe> or <object> as alternatives - browser UI and print/zoom
support may differ.
- Some embedded content types may require browser plugins or specific MIME handlers; these
cases can produce inconsistent behavior across browsers.
- Security: avoid embedding untrusted content. Use correct type and host files over HTTPS to
prevent mixed-content issues.
- Accessibility: provide fallback content and ensure embedded content is reachable via
keyboard/screen readers when applicable.
- Sizing & responsiveness: use CSS (or wrapper elements) to make embedded content responsive;
fixed width/height can break layouts on small screens.

Conclusion
The <embed> tag is a versatile tool for embedding various types of media into a webpage.
While it provides a simple way to display external content like PDFs or videos, it lacks advanced playback
controls - so for audio or video content, dedicated tags like <video> and <audio> are generally preferred.

HTML5ANDCSS3 | [Link] 303

<html>
CHAPTER 092 / HTML TAGS

HTML <object> Tag

The <object> element embeds an external resource such as a PDF or image and can provide
accessible fallback HTML when the resource cannot be displayed.
For audio, video, or another webpage, prefer the dedicated <audio>, <video>, or <iframe> element.

Syntax

[Link]

<object data="URL" type="MIME-type" width="value" height="value">

Alternative content displayed if the object cannot be loaded.
</object>

Attributes

Attribute Description

data Specifies the URL of the resource to be embedded.

Defines the MIME type of the embedded content (e.g.,

type
application/pdf).

width Sets the width of the embedded object.

height Sets the height of the embedded object.

form Associates the object with a form element.

name Assigns a name to the embedded object.

Example

HTML5ANDCSS3 | [Link] 304

HTML <object> Tag

Embedding a PDF File Using <object> Tag

<object data="[Link] type="application/pd

f" width="600" height="400">
<p>Your browser does not support embedded PDF files. <a href="[Link]
s3/lesson-samples/[Link]">Download PDF</a> instead.</p>
</object>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <object> tag is supported by all modern browsers, including Internet Explorer 9 and above.
However, the actual rendering depends on the content type and whether the browser supports that MIME
type (e.g., PDF or image).

Notes
- The <object> tag can embed images, PDFs, multimedia, and even web pages.
- If the browser doesn't support the specified media type, the fallback content between <object> and
</object> will be shown.
- Use the type attribute to specify the correct MIME type - this helps browsers determine how to
handle the content.
- For embedding multimedia like audio and video, prefer <audio> and <video> tags for better
compatibility and control.
- <object> can be nested to provide multiple fallback sources.
- Security note: avoid embedding untrusted external content directly to prevent potential script
injection.

Conclusion
Use <object> when you need to embed a supported external resource and provide fallback HTML.
Use dedicated elements for audio, video, and webpages, and do not use obsolete <param> children.

HTML5ANDCSS3 | [Link] 305

<html>
CHAPTER 093 / HTML TAGS

HTML <param> Tag (Obsolete)

The <param> element is obsolete and must not be used in new HTML documents.

The <param> element is obsolete and non-conforming. It was historically used to pass parameters
to plugin-based content inside an <object> element, but it must not be used in new HTML
documents.

Standards Status

Item Status

Current status Obsolete; do not use

Valid in modern HTML No

Historical parent <object>

<object> attributes, native media elements, URL

Use instead
parameters, or JavaScript APIs

Historical Syntax
The following syntax may appear in old websites or archived documentation. It is shown only so you can
recognize and replace it.

Legacy <param> markup - do not use

Modern Replacement
Choose the element designed for the resource. Use <audio> or <video> for media, <iframe> for another
HTML page, and the data and type attributes directly on <object> for an external resource.

HTML5ANDCSS3 | [Link] 306

HTML <param> Tag (Obsolete)

Modern <object> example without <param>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Object Example</title>
</head>
<body>
<object data="[Link] type="application/
pdf" width="600" height="400">
<p>Your browser cannot display the PDF. <a href="[Link]
amples/[Link]">Download it</a>.</p>
</object>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

How to Update Old Code

- Remove every <param> child from the old <object> markup.
- Move the resource URL to the data attribute and provide an accurate type value when using
<object>.
- Replace plugin-based audio or video with <audio> or <video>.
- Use JavaScript APIs when a modern component needs runtime configuration.
- Keep accessible fallback content inside <object>.

Conclusion
The <param> element belongs only in legacy-code discussions. Do not use it in new projects; select the
appropriate modern HTML element or API instead.

HTML5ANDCSS3 | [Link] 307

<html>
CHAPTER 094 / HTML TAGS

HTML <picture> Tag

The <picture> tag in HTML is used to provide multiple image sources for responsive designs.
It allows the browser to choose the most suitable image based on screen size, resolution, or format
support.
It's commonly used with <source> and <img> tags inside it.

Syntax

[Link]

Attributes

Attribute Description

Specifies the image URL(s) to use for a particular media

srcset
query or resolution.

Defines a media condition (like in CSS @media) to choose

media
the appropriate image.

type Specifies the MIME type of the image (e.g., image/webp).

Provides alternative text for the <img> tag (required for

alt
accessibility).

Example

HTML5ANDCSS3 | [Link] 308

HTML <picture> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Picture Tag Example</title>
</head>
<body>

<h2>Responsive Images with <picture></h2>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

<picture> is not supported in Internet Explorer 9.

The <img> element inside <picture> acts as a fallback for unsupported browsers.
Ideal for responsive images and modern formats like WebP.

Notes
- The <picture> element itself does not display anything - the <img> inside it is what's visible.
- You can include multiple <source> tags with different media queries or file formats.
- Use <picture> for art direction (different images for different devices) rather than simple scaling.
- Always include alt text in <img> for accessibility.

Conclusion
The <picture> tag provides a powerful method for delivering responsive and adaptive images.
It improves performance and user experience by letting browsers choose the most appropriate image based

HTML5ANDCSS3 | [Link] 309

HTML <picture> Tag

on screen size or format support.

HTML5ANDCSS3 | [Link] 310

<html>
CHAPTER 095 / HTML TAGS

HTML <canvas> Tag

The <canvas> tag in HTML is used to draw graphics dynamically via JavaScript, including shapes,
charts, animations, and games.
It is a container for graphics but does not have any visible output by itself until you draw on it using
JavaScript.

Syntax

[Link]

<canvas id="canvasID" width="value" height="value">

Fallback content if canvas is not supported.
</canvas>

Attributes

Attribute Description

id Specifies a unique identifier for the canvas.

width Width of the canvas in pixels (default is 300).

height Height of the canvas in pixels (default is 150).

class Standard class attribute for CSS styling.

Example

HTML5ANDCSS3 | [Link] 311

HTML <canvas> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Tag Example</title>
<style>
canvas { border: 2px solid #29AB87; }
</style>
</head>
<body>

<h2>Drawing on Canvas</h2>
<canvas id="myCanvas" width="400" height="200">
Your browser does not support the HTML canvas tag.
</canvas>

// Draw a rectangle
[Link] = "#FF0000";
[Link](50, 50, 150, 100);

// Draw a circle
[Link]();
[Link](300, 100, 50, 0, 2 * [Link]);
[Link] = "#0000FF";
[Link]();
</script>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Fully supported in modern browsers including Internet Explorer 9+.

Fallback content inside <canvas> is displayed if the browser does not support it.

HTML5ANDCSS3 | [Link] 312

HTML <canvas> Tag

Notes
- The <canvas> tag cannot display content on its own - all graphics must be drawn with
JavaScript.
- Supports drawing 2D graphics via getContext('2d') and 3D graphics via WebGL (
getContext('webgl')).
- Useful for games, charts, visualizations, and dynamic graphics.
- Always include fallback content for accessibility and unsupported browsers.
- CSS can style the canvas border, background, or size but not its internal content - that must be
drawn via JS.

Conclusion
The <canvas> tag is a versatile element for dynamic and interactive graphics in web pages.
It is fully supported across modern browsers, but requires JavaScript to render any visible content.

HTML5ANDCSS3 | [Link] 313

<html>
CHAPTER 096 / HTML TAGS

HTML <map> Tag

The <map> tag in HTML is used to define an image map, which is a clickable region on an image
that links to different destinations.
Each clickable area within the map is defined using the <area> tag.

Syntax

[Link]

Attributes

Attribute Description

Specifies a unique name for the map, used to reference it in

name
the <img> tag with usemap.

id Standard attribute for unique identification in the DOM.

class Standard attribute for CSS styling.

Example

HTML5ANDCSS3 | [Link] 314

HTML <map> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Tag Example</title>
</head>
<body>

<h2>Clickable Image Area</h2>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers, including Internet Explorer 9+, support <map> and <area> tags.

Notes
- The <map> tag itself does not display anything; it must be linked to an <img> using the usemap
attribute.
- The <area> tags define the clickable shapes: rect, circle, or poly.
- Always include alt text for accessibility.
- Coordinates are pixel-based relative to the image's size; for responsive images, JavaScript may be
needed to adjust coordinates dynamically.

HTML5ANDCSS3 | [Link] 315

HTML <map> Tag

- Ideal for interactive images, diagrams, and navigation maps.

Conclusion
The <map> tag allows you to create interactive images with multiple clickable areas.
It works across all modern browsers and IE9+, but proper coordinates and alt text are important for usability
and accessibility.

HTML5ANDCSS3 | [Link] 316

<html>
CHAPTER 097 / HTML TAGS

HTML <area> Tag

The <area> tag defines clickable areas within an image map created by the <map> element.
Each <area> represents a region of the image that acts as a hyperlink to another page, section, or
resource.

Syntax

[Link]

<area shape="shapeType" coords="coordinates" href="URL" alt="description">

Attributes

Attribute Description

Defines the shape of the clickable area - can be rect, circle,

shape
or poly.

Specifies the coordinates of the clickable area (varies based

coords
on shape).

href The URL or link the area points to when clicked.

alt Alternate text describing the clickable area (for accessibility).

Specifies where to open the linked document (_blank, _self,

target
etc.).

download Allows the linked file to be downloaded instead of opened.

Defines the relationship between the current document and

rel
the linked one.

Provides additional information (shows as a tooltip on

title
hover).

HTML5ANDCSS3 | [Link] 317

HTML <area> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Tag Example</title>
</head>
<body>

<h2>Clickable Image Area</h2>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <area> element is fully supported by all modern browsers including Internet Explorer 9+.

Notes
- The <area> tag must be nested inside a <map> element.
- The coords values depend on the defined shape:
- rect: x1, y1, x2, y2
- circle: x, y, radius

HTML5ANDCSS3 | [Link] 318

HTML <area> Tag

- poly: multiple x,y pairs forming a polygon

- You can use multiple <area> tags for different parts of the same image.
- Always include alt text for accessibility and SEO.
- Use percentage coordinates or JavaScript for responsive image maps.

Conclusion
The <area> tag makes sections of an image clickable, creating interactive and engaging content.
It's an essential companion to <map> and is supported across all major browsers, making it reliable for web
navigation and visual interfaces.

HTML5ANDCSS3 | [Link] 319

<html>
CHAPTER 098 / HTML TAGS

HTML <table> Tag

The <table> tag in HTML defines a table - a structured arrangement of data in rows and columns.
It serves as the container for all related elements like <tr>, <th>, <td>, <thead>, <tbody>, and
<tfoot>

Syntax

[Link]

<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Attributes

Attribute Description

Specifies the border width around table cells (deprecated,

border
use CSS).

Space between cell content and its border (deprecated, use

cellpadding
CSS).

cellspacing Space between cells (deprecated, use CSS).

width Sets the table's width (deprecated, use CSS).

Provides a summary of the table's purpose (deprecated, use

summary
<caption> instead).

HTML5ANDCSS3 | [Link] 320

HTML <table> Tag

Example

HTML5ANDCSS3 | [Link] 321

HTML <table> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Tag Example</title>
<style>
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #555;
padding: 10px;
text-align: center;
}
th {
background-color: #29AB87;
color: white;
}
</style>
</head>
<body>

<h2>HTML Table Example</h2>

<table>
<tr>
<th>Language</th>
<th>Type</th>
<th>Year Introduced</th>
</tr>
<tr>
<td>HTML</td>
<td>Markup</td>
<td>1993</td>
</tr>
<tr>
<td>CSS</td>
<td>Style Sheet</td>
<td>1996</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Programming</td>
<td>1995</td>
</tr>
</table>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 322

HTML <table> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers fully support the <table> element.

Notes
- The <table> element is the parent container for all table-related elements.
- Use <thead>, <tbody>, and <tfoot> for semantic grouping.
- CSS should be preferred for styling (borders, spacing, alignment).
- For accessibility, include a <caption> or use scope attributes in header cells.

Conclusion
The <table> tag is the backbone of tabular data in HTML.
When combined with semantic child elements and proper CSS, it allows for both well-structured and
visually appealing data presentation.

HTML5ANDCSS3 | [Link] 323

<html>
CHAPTER 099 / HTML TAGS

HTML <caption> Tag

The <caption> tag defines a title or description for a table.

It helps users understand the purpose or content of the table and is usually displayed above the
table by default.

Syntax

[Link]

<table>
<caption>Table Title</caption>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Attributes

Attribute Description

Specifies the alignment of the caption - values can be top,

align
bottom, left, or right. (Deprecated - use CSS instead)

Example

HTML5ANDCSS3 | [Link] 324

HTML <caption> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caption Tag Example</title>
<style>
table {
border-collapse: collapse;
width: 60%;
margin: 20px auto;
}
th, td {
border: 1px solid #444;
padding: 10px;
text-align: center;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 1.2em;
color: #29AB87;
margin-bottom: 8px;
}
</style>
</head>
<body>

<table>
<caption>World Programming Languages Overview</caption>
<tr>
<th>Language</th>
<th>Creator</th>
<th>Release Year</th>
</tr>
<tr>
<td>Python</td>
<td>Guido van Rossum</td>
<td>1991</td>
</tr>
<tr>
<td>Java</td>
<td>James Gosling</td>
<td>1995</td>
</tr>
<tr>
<td>HTML</td>
<td>Tim Berners-Lee</td>
<td>1993</td>
</tr>
</table>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 325

HTML <caption> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All modern browsers fully support the <caption> element.

Notes
- Only one <caption> is allowed per table.
- The default position is above the table, but you can reposition it using CSS:

[Link]

caption { caption-side: bottom; }

Helps with accessibility, providing screen readers with context about the table's data.

Conclusion
The <caption> tag is a simple yet powerful way to make your tables more understandable and
accessible.
It enhances both usability and semantic meaning, especially when working with data-heavy layouts.

HTML5ANDCSS3 | [Link] 326

<html>
CHAPTER 100 / HTML TAGS

HTML <thead> Tag

The <thead> tag in HTML defines the header section of a table.

It groups all header rows (<tr>) that typically contain column headings defined by <th> tags.
This element improves readability, accessibility, and enables consistent styling or scripting across
header rows.

Syntax

[Link]

<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>

Attributes

Attribute Description

The <thead> tag does not have any specific attributes. You
(None)
can use global attributes like class, id, or style.

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

HTML5ANDCSS3 | [Link] 327

HTML <thead> Tag

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

<title>Thead Tag Example</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px auto;
text-align: center;
}
thead {
background-color: #29AB87;
color: white;
}
th, td {
border: 1px solid #555;
padding: 10px;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>

<h2>HTML Table with Thead Example</h2>

<table>
<thead>
<tr>
<th>Planet</th>
<th>Distance from Sun</th>
<th>Moons</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mercury</td>
<td>57.9 million km</td>
<td>0</td>
</tr>
<tr>
<td>Earth</td>
<td>149.6 million km</td>
<td>1</td>
</tr>
<tr>
<td>Jupiter</td>
<td>778.5 million km</td>
<td>79</td>
</tr>
</tbody>
</table>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 328

HTML <thead> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All modern browsers fully support the <thead> element.

Notes
- The <thead> element should appear before <tbody> and <tfoot> within a table.
- It improves data organization and helps browsers render large tables efficiently.
- Useful for styling headers and keeping them fixed while scrolling with CSS or JavaScript.
- Tables without <thead> are still valid but less structured.

Conclusion
The <thead> tag defines a clear and accessible table header section, separating structure from content.
It's especially helpful for data tables, reports, and dashboards where clarity and readability are essential.

HTML5ANDCSS3 | [Link] 329

<html>
CHAPTER 101 / HTML TAGS

HTML <tbody> Tag

The <tbody> tag in HTML is used to group the main content rows (body) of a table.
It separates the table's data section from the header (<thead>) and footer (<tfoot>), helping improve
structure, readability, and performance for large datasets.

Syntax

[Link]

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>

Attributes

Attribute Description

The <tbody> element has no specific attributes. You can use

(None)
global attributes such as id, class, or style.

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tbody Tag Example</title>

HTML5ANDCSS3 | [Link] 330

HTML <tbody> Tag

<h2>HTML Table with Tbody Example</h2>

<table>
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population (Millions)</th>
</tr>
</thead>
<tbody>
<tr>
<td>India</td>
<td>New Delhi</td>
<td>1428</td>
</tr>
<tr>
<td>USA</td>
<td>Washington, D.C.</td>
<td>332</td>
</tr>
<tr>
<td>Japan</td>
<td>Tokyo</td>
<td>125</td>
</tr>
</tbody>
</table>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 331

HTML <tbody> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All modern browsers fully support the <tbody> element.

Notes
- The <tbody> tag is optional if the table only contains one set of rows, but browsers insert it
automatically in the DOM.
- It allows styling the main data section separately from the header and footer.
- Helps with table accessibility, scrolling, and printing optimization.
- Best practice: always include <thead>, <tbody>, and <tfoot> for semantic structure.

Conclusion
The <tbody> tag defines the core content section of a table, enhancing clarity and control over how data
rows are displayed and styled.
It's an essential element for managing and presenting tabular information efficiently.

HTML5ANDCSS3 | [Link] 332

<html>
CHAPTER 102 / HTML TAGS

HTML <tfoot> Tag

The <tfoot> tag in HTML defines the footer section of a table.

It is used to group rows that summarize or provide totals, notes, or other information related to the
table data.
Typically, <tfoot> appears after <thead> and before <tbody> in the HTML source, though browsers
visually render it at the bottom of the table.

Syntax

[Link]

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer Content</td>
</tr>
</tfoot>
</table>

Attributes

Attribute Description

The <tfoot> element has no specific attributes. You may use

(None)
global attributes such as id, class, or style.

HTML5ANDCSS3 | [Link] 333

HTML <tfoot> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tfoot Tag Example</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px auto;
text-align: center;
}
thead {
background-color: #29AB87;
color: white;
}
tfoot {
background-color: #e0f3ec;
font-weight: bold;
color: #333;
}
th, td {
border: 1px solid #555;
padding: 10px;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>

<h2>HTML Table with Tfoot Example</h2>

<table>
<thead>
<tr>
<th>Item</th>
<th>Price ()</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>50</td>
</tr>
<tr>
<td>Pencil</td>
<td>10</td>
</tr>
<tr>
<td>Eraser</td>
<td>5</td>
</tr>
</tbody>

HTML5ANDCSS3 | [Link] 334

HTML <tfoot> Tag

<tfoot>
<tr>
<td>Total</td>
<td>65</td>
</tr>
</tfoot>
</table>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers, including IE9+, support the <tfoot> tag completely.

Notes
- The <tfoot> section is optional but recommended for large tables with totals or summary data.
- In HTML source order, <tfoot> is placed before <tbody> for faster page rendering when tables
are loaded.
- Use CSS to style the footer differently from other table sections.
- <tfoot> improves data comprehension and accessibility, especially in screen readers.

Conclusion
The <tfoot> tag defines the footer of a table, providing space for totals, summaries, or concluding
remarks.
It helps organize table data more clearly while maintaining semantic meaning and consistent presentation.

HTML5ANDCSS3 | [Link] 335

<html>
CHAPTER 103 / HTML TAGS

HTML <tr> Tag

The <tr> tag in HTML defines a table row.

It is used inside the <table> element to group one or more table cells (<th> or <td>) in a single
horizontal row.

Syntax

[Link]

Attributes

Attribute Description

Specifies the horizontal alignment of content in a row

align
(deprecated).

bgcolor Specifies the background color of a row (deprecated).

Specifies the vertical alignment of content in a row

valign
(deprecated).

These attributes are deprecated. Use CSS instead for layout and styling.

Example

HTML5ANDCSS3 | [Link] 336

HTML <tr> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML tr Tag Example</title>
</head>
<body>
<h2>Example of the <tr> Tag</h2>
<table border="1">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$150</td>
</tr>
</table>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All modern browser support <tr> html tag

Notes
- A <tr> must be placed inside a <table>, <thead>, <tbody>, or <tfoot> element.
- Each <tr> represents one row of table cells.
- It can contain both <th> (header cells) and <td> (data cells).

Conclusion
- The <tr> tag represents a single row in a table.
- It is used within <table>, <thead>, <tbody>, or <tfoot> elements.
- Each row contains one or more <th> or <td> cells.

HTML5ANDCSS3 | [Link] 337

HTML <tr> Tag

In simple terms, the <tr> tag helps organize your table data horizontally - each <tr> creates one complete
row of information, making your table more structured and readable.

HTML5ANDCSS3 | [Link] 338

<html>
CHAPTER 104 / HTML TAGS

HTML <th> Tag

The <th> tag in HTML defines a header cell in a table.

Header cells are typically displayed in bold text and centered by default. They help describe the
content of each column or row, making data tables easier to understand and accessible.

Syntax

<th scope="col|row">Header Content</th>

Attributes

Attribute Description

Provides an abbreviated version of the header cell content

abbr
for screen readers.

colspan Specifies the number of columns a header cell should span.

rowspan Specifies the number of rows a header cell should span.

Associates the header cell with one or more data cells (id
headers
values of <td> elements).

Defines whether the header applies to a row, column, row

scope
group, or column group (row, col, rowgroup, colgroup).

Tip: Use the scope attribute to improve accessibility, especially for assistive technologies.

Example

HTML5ANDCSS3 | [Link] 339

HTML <th> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML th Tag Example</title>
</head>
<body>
<h2>Example of the <th> Tag</h2>
<table border="1">
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$150</td>
</tr>
</table>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Notes
- <th> is always contained inside <tr>.
- Can be used with <thead>, <tbody>, or <tfoot> to structure table headers.
- scope, colspan, and rowspan attributes improve accessibility and semantic clarity.
- Browser styling: Bold and center-aligned by default, but fully customizable via CSS.

Conclusion
- The <th> tag defines header cells in a table, giving structure to columns or rows.
- It enhances readability and accessibility, especially for screen readers.

HTML5ANDCSS3 | [Link] 340

HTML <th> Tag

- Using <th> properly ensures your tables are semantic, clear, and easy to interpret.

HTML5ANDCSS3 | [Link] 341

<html>
CHAPTER 105 / HTML TAGS

HTML <td> Tag

The <td> tag in HTML defines a standard data cell within a table.
Each <td> element represents a single piece of data in a table row (<tr>). It is one of the most
commonly used tags for displaying tabular data such as numbers, text, or links.

Syntax

[Link]

<td attribute="value">Content</td>

Attributes

Attribute Description

colspan Specifies the number of columns a cell should span.

rowspan Specifies the number of rows a cell should span.

Associates the cell with one or more header cells (id of

headers
related <th> elements).

Provides an abbreviated version of the content for screen

abbr
readers.

(Deprecated) Specifies horizontal alignment (left, right, or

align
center).

(Deprecated) Specifies vertical alignment (top, middle,

valign
bottom).

Example

HTML5ANDCSS3 | [Link] 342

HTML <td> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML td Tag Example</title>
<style>
table {
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h2>Example of the <td> Tag</h2>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$150</td>
</tr>
<tr>
<td colspan="2">Total Savings: $250</td>
</tr>
</table>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Tip: Modern HTML prefers using CSS for alignment and presentation instead of deprecated attributes like
align or valign.

HTML5ANDCSS3 | [Link] 343

HTML <td> Tag

Notes
- <td> elements are always nested inside a <tr> (table row).
- Can be used with colspan or rowspan to merge cells horizontally or vertically.
- Default cell alignment: left-aligned and middle vertically aligned.
- To improve readability and accessibility, combine with<th> headers for data labeling.

Conclusion
- The <td> tag is used to display table data within rows.
- It represents the main data content of any table structure.
- Use CSS for better styling and layout instead of deprecated alignment attributes.
- Proper use of <td> ensures your data tables are clear, consistent, and responsive.

HTML5ANDCSS3 | [Link] 344

<html>
CHAPTER 106 / HTML TAGS

HTML <col> Tag

The <col> tag in HTML defines column properties for each column within a <colgroup> element.
It allows you to apply styling, width, or alignment to one or more columns of a table - without
repeating the same style on each <td> or <th> individually.

Syntax

[Link]

<col span="number" style="property:value;">

Attributes

Attribute Description

Specifies how many columns the <col> element should

span
affect.

Adds inline CSS styling to the targeted columns (e.g., width,

style
background color).

class Applies a CSS class to the defined columns for styling.

id Specifies a unique ID for the column.

Example

HTML5ANDCSS3 | [Link] 345

HTML <col> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML col Tag Example</title>
<style>
table {
border-collapse: collapse;
width: 60%;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h2>Example of the <col> Tag</h2>
<table>
<colgroup>
<col span="1" style="background-color: #f2f2f2;">
<col span="1" style="background-color: #d9f7be;">
<col span="1" style="background-color: #ffd6e7;">
</colgroup>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Notebook</td>
<td>$5</td>
<td>120</td>
</tr>
<tr>
<td>Pencil</td>
<td>$1</td>
<td>500</td>
</tr>
</table>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 346

HTML <col> Tag

The <col> tag itself does not produce visible content; it affects how columns are displayed.

Notes
- The <col> tag is always nested inside <colgroup>.
- It is primarily used to style multiple columns efficiently.
- The tag itself has no visible effect - only styling effects are reflected.
- You can apply a class or id to customize multiple columns through external CSS.

Conclusion
The <col> tag defines styling or structural properties for table columns. It enhances maintainability by
applying consistent styles across multiple cells. When used properly inside <colgroup>, it provides
cleaner and more semantic table layouts.

HTML5ANDCSS3 | [Link] 347

<html>
CHAPTER 107 / HTML TAGS

HTML <colgroup> Tag

The <colgroup> tag in HTML is used to group one or more columns in a table for formatting
purposes.
It allows you to apply common styles or attributes to a group of columns, making it easier to
maintain a consistent design.

Syntax

[Link]

Attributes

Attribute Value Type Description

Specifies how many columns the style

span number applies to (used in <col> tags inside
<colgroup>).

style CSS styles Applies visual styling to the columns.

class, id global attributes For styling and scripting.

Example

HTML5ANDCSS3 | [Link] 348

HTML <colgroup> Tag

[Link]

<!DOCTYPE html>
<html>
<body>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <colgroup> element is always placed inside the <table> element, but before <thead>, <tbody>,
and <tfoot> elements.

Notes
- The <colgroup> element must appear immediately after the <caption> element (if present)
and before <thead>, <tbody>, and <tfoot>.
- You can use multiple <col> elements inside <colgroup> to style specific columns.

HTML5ANDCSS3 | [Link] 349

HTML <colgroup> Tag

- If you do not include <col> elements inside <colgroup>, you can still apply styles directly to
<colgroup>.
- The <colgroup> tag cannot contain any text content - only <col> tags.

Conclusion
The <colgroup> tag is a powerful and efficient way to apply collective styling or width control to
columns in a table.
It enhances readability and maintainability, especially for large tables with consistent column formatting.

HTML5ANDCSS3 | [Link] 350

<html>
CHAPTER 108 / HTML TAGS

HTML <form> Tag

The <form> tag is used to create an HTML form for collecting user input.
It acts as a container for various input elements like text fields, checkboxes, radio buttons, buttons,
and more.
Forms are essential for user interaction - for example, submitting login details or feedback.

Syntax

[Link]

<form action="[Link]" method="post" target="_blank" enctype="multipart/form-data" autocomplet

e="on">

</form>

Attributes

Attribute Description

action Specifies where to send the form data when submitted.

method Defines how the form data is sent - either GET or POST.

Specifies where to display the response after submitting

target
(_blank, _self, etc.).

Specifies how the form data should be encoded when

enctype
submitted.

autocomplete Enables or disables autocomplete feature.

novalidate Disables HTML5 form validation.

name Assigns a name to the form.

Specifies the relationship between the current document and

rel
the linked resource.

HTML5ANDCSS3 | [Link] 351

HTML <form> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="/samples/form_processor.php" method="post" enctype="multipart/form-data">
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="fullname" placeholder="Enter your name" required><br><br>

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

<label for="file">Upload Photo:</label><br>

<input type="submit" value="Register">

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You'll see a registration form with input fields for name, email, and photo upload.
Once filled, clicking Register will open a new tab (because of target="_blank") showing the submi
ssion result.
Use our TryIt Editor to test this behavior interactively.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <form> element itself doesn't produce any visible output until form controls are added inside it.

HTML5ANDCSS3 | [Link] 352

HTML <form> Tag

Notes
- The <form> tag itself does not produce visible output - the contained elements do.
- Always validate user input for security.
- Use HTTPS when submitting sensitive data.

Conclusion
The <form> tag is the foundation of web interactivity, allowing users to submit data efficiently and securely.
It's one of the most essential building blocks for any web application.

HTML5ANDCSS3 | [Link] 353

<html>
CHAPTER 109 / HTML TAGS

HTML <input> Tag

The <input> tag is used to create interactive form controls for user input.
It can represent a text field, checkbox, radio button, file selector, password box, email, number input,
and more.
The type of input is determined by the type attribute.

Syntax

[Link]

<input type="text" name="username" value="" placeholder="Enter text" required>

Attributes

Attribute Description

Specifies the type of input (text, password, email, number,

type
checkbox, radio, file, submit, etc.).

name Name of the input, used for form data submission.

value Default value of the input field.

placeholder Text displayed when input is empty.

required Marks the field as mandatory.

disabled Disables the input field.

readonly Makes the input field read-only.

maxlength Maximum number of characters allowed.

min, max Minimum and maximum values (for number, date, etc.).

step Step interval (for number or range inputs).

pattern Regex pattern for input validation.

autofocus Automatically focuses on the input field when page loads.

HTML5ANDCSS3 | [Link] 354

HTML <input> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Tag Example</title>
</head>
<body>
<h2>Input Types Example</h2>
<form action="/samples/form_processor.php" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" placeholder="Enter your username" required><
br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Enter your email"><br><br>

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

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

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see multiple input fields: text box, email, number, and radio buttons.
Filling the fields and clicking Submit sends the data to the URL specified in the action attribut
e.
Use our TryIt Editor to test how each input type behaves and validates data.

HTML5ANDCSS3 | [Link] 355

HTML <input> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports this tag

Notes
- <input> is a self-closing tag; it does not wrap content.
- The type attribute determines the control behavior and validation.
- Use required, min, max, pattern, and other attributes to enforce client-side validation.
- Combine with <label> for accessibility and better UX.

Conclusion
The <input> tag is the most versatile form element in HTML.
It allows developers to collect a wide range of user data efficiently and works in all modern browsers.
Proper use of attributes ensures valid, accessible, and interactive forms.

HTML5ANDCSS3 | [Link] 356

<html>
CHAPTER 110 / HTML TAGS

HTML <textarea> Tag

The <textarea> tag is used to create a multi-line text input field in a form.
Unlike the <input type="text"> field, which is single-line, <textarea> allows users to enter large
blocks of text, like comments, feedback, or messages.

Syntax

[Link]

<textarea name="message" rows="4" cols="50" placeholder="Enter your message here" required></text

area>

Attributes

Attribute Description

name Name of the textarea used for form submission.

rows Number of visible text lines.

cols Width of the textarea in character columns.

placeholder Hint text displayed inside the textarea when empty.

required Makes the field mandatory.

readonly Makes the textarea non-editable.

disabled Disables the textarea entirely.

maxlength Maximum number of characters allowed.

wrap Specifies how the text should wrap (soft, hard).

autofocus Automatically focuses on the textarea when page loads.

HTML5ANDCSS3 | [Link] 357

HTML <textarea> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Example</title>
</head>
<body>
<h2>Feedback Form</h2>
<form action="/samples/form_processor.php" method="post">
<label for="feedback">Your Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="5" cols="50" placeholder="Enter your feedback h
ere" required></textarea><br><br>

<input type="submit" value="Submit Feedback">

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see a multi-line text box where users can type long messages or feedback.
The placeholder text guides the user, and the textarea enforces the number of visible rows and co
lumns.
Try it in our TryIt Editor to see how resizing and typing works.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <textarea> tag

HTML5ANDCSS3 | [Link] 358

HTML <textarea> Tag

Notes
- <textarea> allows for multi-line user input, unlike <input type="text">.
- Always use <label> for accessibility.
- Combine with maxlength or wrap to control input length and display.
- You can set default text by placing content between the opening and closing <textarea> tags.

Conclusion
The <textarea> tag is essential for collecting long-form user input on web pages.
It provides flexibility for messages, comments, and feedback forms, and works consistently across modern
browsers.

HTML5ANDCSS3 | [Link] 359

<html>
CHAPTER 111 / HTML TAGS

HTML <button> Tag

The <button> tag is used to create a clickable button in an HTML form or web page.
It can contain text, images, or HTML content, unlike <input type="submit"> which is limited to plain
text.

Syntax

[Link]

<button type="submit" name="btnName" value="buttonValue">Click Me</button>

Attributes

Attribute Description

Defines the button type: submit (submit form), reset (reset

type
form), or button (custom action).

name Name of the button used for form submission.

value Value sent to the server when the form is submitted.

disabled Disables the button so it cannot be clicked.

autofocus Automatically focuses the button when page loads.

Specifies the form the button belongs to (useful if outside a

form
form).

Example

HTML5ANDCSS3 | [Link] 360

HTML <button> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Example</title>
</head>
<body>
<h2>Button Examples</h2>
<form action="/samples/form_processor.php" method="post">
<button type="submit" name="submitBtn" value="Submit">Submit Form</button>
<button type="reset">Reset Form</button>
<button type="button" onclick="alert('Hello!')">Click Me</button>
</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see three buttons:

- A Submit Form button that sends the form data.

- A Reset Form button that clears the form fields.
- A Click Me button that triggers a JavaScript alert.

Use our TryIt Editor to see the different button types and their behavior.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <button> tag

HTML5ANDCSS3 | [Link] 361

HTML <button> Tag

Notes
- <button> is more flexible than <input type="button"> because it can contain HTML or
images.
- Always use type="submit" for form submission and type="button" for custom actions.
- Use disabled to prevent user clicks when necessary.

Conclusion
The <button> tag is a versatile and interactive element for forms and web interfaces.
It allows developers to create custom buttons with text, images, or icons, enhancing the user experience.

HTML5ANDCSS3 | [Link] 362

<html>
CHAPTER 112 / HTML TAGS

HTML <select> Tag

The <select> tag is used to create a drop-down list in a form.

It allows users to choose one or multiple options from a predefined list.
Each option is defined using the <option> tag, and options can be grouped with <optgroup>.

Syntax

[Link]

<select name="dropdownName" id="dropdownId" multiple size="4" required>

<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</select>

Attributes

Attribute Description

name Name of the select element, used in form submission.

id Unique identifier for the element.

multiple Allows selection of multiple options.

size Number of visible options without scrolling.

required Makes selection mandatory.

disabled Disables the dropdown entirely.

autofocus Automatically focuses the dropdown when page loads.

Associates the select with a specific form (useful if outside

form
the form).

HTML5ANDCSS3 | [Link] 363

HTML <select> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Example</title>
</head>
<body>
<h2>Select Your Favorite Fruit</h2>
<form action="/samples/form_processor.php" method="post">
<label for="fruits">Choose a fruit:</label><br>
<select name="fruits" id="fruits" required>
<option value="">--Select--</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
</select><br><br>

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

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see a drop-down menu where users can select a single fruit.
Clicking the arrow shows all available options, and the selected option is sent when submitting t
he form.
Try it in our TryIt Editor to see how selection works.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <select> tag

HTML5ANDCSS3 | [Link] 364

HTML <select> Tag

Notes
- The <select> tag must contain <option> elements.
- Use multiple for multi-selection lists.
- Use <optgroup> to group related options for better UX.
- Always include a placeholder option (value="") for validation purposes.

Conclusion
The <select> tag provides an organized way for users to pick from a list of choices.
It is widely supported and essential for forms requiring selection input.

HTML5ANDCSS3 | [Link] 365

<html>
CHAPTER 113 / HTML TAGS

HTML <selectedcontent> Tag

Learn how the experimental HTML <selectedcontent> tag displays the selected option inside a
customizable select button.

The <selectedcontent> tag displays a clone of the currently selected <option> inside the button of a
customizable <select>.
This is a newer, experimental element with limited and evolving browser support. Use it as
progressive enhancement and verify compatibility before relying on it in production.

Syntax

[Link]

Attributes

Attribute Description

class Specifies one or more class names for CSS styling.

id Defines a unique identifier for the element.

style Adds inline CSS styles.

title Provides additional information as a tooltip when hovered.

Example
Compatibility notice: This example uses customizable-select features that may not work in every browser.
In unsupported browsers, keep the underlying <select> usable as a standard form control.

HTML5ANDCSS3 | [Link] 366

HTML <selectedcontent> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectedcontent Tag Example</title>
<style>
select,
::picker(select) {
appearance: base-select;
}

select {
min-width: 260px;
border: 2px solid #29AB87;
border-radius: 8px;
padding: 8px;
font: inherit;
}

select > button,

selectedcontent,
option {
display: flex;
align-items: center;
gap: 10px;
}

option {
padding: 10px;
}

option::checkmark {
display: none;
}

.badge {
display: inline-grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 6px;
background-color: #e7f8f3;
color: #007a96;
font-weight: bold;
}

selectedcontent .description {
display: none;
}
</style>
</head>
<body>
<h1>Choose a Tutorial</h1>

<label for="tutorial">Tutorial:</label>
<select id="tutorial" name="tutorial">
<button>
<selectedcontent></selectedcontent>

HTML5ANDCSS3 | [Link] 367

HTML <selectedcontent> Tag

</button>

<option value="html" selected>

<span class="badge">H</span>
<span>HTML</span>
<small class="description">Structure webpages</small>
</option>

<option value="css">
<span class="badge">C</span>
<span>CSS</span>
<small class="description">Style webpages</small>
</option>

<option value="javascript">
<span class="badge">JS</span>
<span>JavaScript</span>
<small class="description">Add interactivity</small>
</option>
</select>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes (135+) Yes (Chromium) No No Yes (Chromium) No

Browser support is still evolving. Current compatibility data reports support in Chrome 135 and later and
related Chromium-based browsers, but not in Firefox, Safari, or Internet Explorer. Check current
compatibility data before production use.

Notes
- Treat <selectedcontent> as progressive enhancement because it is experimental and not yet
available across all major browser engines.
- Place it inside a <button> that is the first child of the related <select>.
- The <selectedcontent> element should be the button's only child, followed by the select's
<option> elements.
- When the selection changes, the browser replaces its contents with a clone of the newly selected
option's DOM content.
- Content inside the select button is inert, so controls inside the cloned content cannot be focused or
activated.

HTML5ANDCSS3 | [Link] 368

HTML <selectedcontent> Tag

- Changing the selected option's child content dynamically does not necessarily refresh the existing
clone until the selection changes; update carefully in JavaScript frameworks.
- Use appearance: base-select on the select and its ::picker(select) pseudo-element to
opt into customizable-select rendering.
- Keep a functional native <select> experience as the fallback for unsupported browsers.
- Both the opening and closing tags are required.

Conclusion
The <selectedcontent> tag enables rich, styleable selected-option content in customizable select
controls.
Because the element is new and support is still changing, use it with progressive enhancement, a usable
fallback, and up-to-date browser testing.

HTML5ANDCSS3 | [Link] 369

<html>
CHAPTER 114 / HTML TAGS

HTML <option> Tag

The <option> tag is used inside a <select> element to define a single option in a drop-down list.
Each <option> represents a selectable value that the user can choose.

The <option> tag must always be a child of <select> or <datalist>.

Syntax

[Link]

<option value="value1" selected disabled>Option Text</option>

Attributes

Attribute Description

value The value sent to the server when the option is selected.

selected Preselects the option when the page loads.

disabled Makes the option unselectable.

label Provides an alternative label for the option (for accessibility).

id Assigns a unique ID to the option element.

Example

HTML5ANDCSS3 | [Link] 370

HTML <option> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Option Tag Example</title>
</head>
<body>
<h2>Select Your Favorite Color</h2>
<form action="/samples/form_processor.php" method="post">
<label for="colors">Choose a color:</label><br>
<select name="colors" id="colors" required>
<option value="">--Select--</option>
<option value="red">Red</option>
<option value="green" selected>Green</option>
<option value="blue">Blue</option>
<option value="yellow" disabled>Yellow (Unavailable)</option>
</select><br><br>

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

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see a drop-down list where users can select a color.
The green option is preselected, and yellow is disabled and cannot be chosen.
Use our TryIt Editor to experiment with selected and disabled attributes.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser suppots <option> tag.

HTML5ANDCSS3 | [Link] 371

HTML <option> Tag

Notes
- The <option> tag must be nested inside <select> or <datalist>.
- Use selected to preselect an option.
- Use disabled to prevent certain options from being selected.
- For accessibility, the label attribute can provide a screen-reader-friendly name.

Conclusion
The <option> tag defines individual choices within a dropdown or list.
It is essential for creating dynamic, user-friendly selection interfaces in forms.

HTML5ANDCSS3 | [Link] 372

<html>
CHAPTER 115 / HTML TAGS

HTML <optgroup> Tag

The <optgroup> tag is used to group related <option> elements inside a <select> drop-down.
It provides better organization and readability for long lists of options.

<optgroup> can only be used as a child of <select>.

Syntax

[Link]

<optgroup label="Group Name" disabled>

<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</optgroup>

Attributes

Attribute Description

label Specifies the name of the group displayed in the drop-down.

disabled Disables the entire group of options.

id Assigns a unique ID to the optgroup element.

Example

HTML5ANDCSS3 | [Link] 373

HTML <optgroup> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optgroup Example</title>
</head>
<body>
<h2>Select a Fruit or Vegetable</h2>
<form action="/samples/form_processor.php" method="post">
<label for="items">Choose an item:</label><br>
<select name="items" id="items" required>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="spinach">Spinach</option>
</optgroup>
<optgroup label="Unavailable" disabled>
<option value="tomato">Tomato</option>
</optgroup>
</select><br><br>

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

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see a drop-down list where options are grouped under headings like "Fruits" and "Vegetab
les."
The "Unavailable" group is disabled, so its options cannot be selected.
Try it in our TryIt Editor to explore grouped selections.

HTML5ANDCSS3 | [Link] 374

HTML <optgroup> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <optgroup> tag

Notes

Conclusion

HTML5ANDCSS3 | [Link] 375

<html>
CHAPTER 116 / HTML TAGS

HTML <label> Tag

The <label> tag is used to define a label for an HTML form control like <input>, <textarea>, or
<select>.
Clicking the label automatically focuses the associated form control, improving usability and
accessibility.

Associating labels with controls helps screen readers and improves user experience.

Syntax

[Link]

<label for="inputId">Label Text</label>

Attributes

Attribute Description

for Associates the label with a form control's id.

Specifies the form the label belongs to (useful if outside the

form
form).

id Assigns a unique ID to the label element.

Example

HTML5ANDCSS3 | [Link] 376

HTML <label> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label Example</title>
</head>
<body>
<h2>Login Form</h2>
<form action="/samples/form_processor.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required><
br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" requir
ed><br><br>

<input type="submit" value="Login">

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see a form with labels next to text and password fields.
Clicking on the Username or Password label focuses the respective input field.
Use our TryIt Editor to test how labels improve usability.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <lable> tag.

HTML5ANDCSS3 | [Link] 377

HTML <label> Tag

Notes
- Always use <label> for better accessibility.
- The for attribute must match the id of the input.
- Can be used with all types of inputs, including <textarea> and <select>.
- Reduces the chance of users clicking the wrong field.

Conclusion
The <label> tag is essential for accessible and user-friendly forms.
It ensures that users and assistive technologies can correctly associate form controls with their descriptions.

HTML5ANDCSS3 | [Link] 378

<html>
CHAPTER 117 / HTML TAGS

HTML <fieldset> Tag

The <fieldset> tag is used to group related elements in a form.

It helps organize form controls visually and semantically, often improving usability and accessibility.
It is usually combined with the <legend> tag to provide a caption for the grouped fields.

Syntax

[Link]

<fieldset>
<legend>Group Name</legend>

</fieldset>

Attributes

Attribute Description

disabled Disables all form controls within the fieldset.

Associates the fieldset with a specific form (useful if outside

form
the form).

name Specifies the name of the fieldset (rarely used).

id Assigns a unique ID to the fieldset.

Example

HTML5ANDCSS3 | [Link] 379

HTML <fieldset> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Example</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="/samples/form_processor.php" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" required><br><br>

<label for="lname">Last Name:</label>

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

<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</fieldset><br>

<input type="submit" value="Register">

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see two distinct sections in the form, each surrounded by a box with a legend at the top
.
The first box is "Personal Information," and the second is "Account Details."
Try it in our TryIt Editor to see the visual grouping and how it improves form readability.

HTML5ANDCSS3 | [Link] 380

HTML <fieldset> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <fieldset> tag.

Notes
- <fieldset> visually groups form fields and improves form semantics.
- Combine with <legend> for a caption describing the group.
- disabled can disable all fields in the group.
- Useful for long or complex forms to make them more readable.

Conclusion
The <fieldset> tag is ideal for grouping related form elements, making forms more organized and
user-friendly.
It enhances visual clarity and accessibility for users and assistive technologies.

HTML5ANDCSS3 | [Link] 381

<html>
CHAPTER 118 / HTML TAGS

HTML <legend> Tag

The <legend> tag is used to provide a caption or title for a <fieldset> in a form.
It helps users understand the purpose of the grouped fields and improves form accessibility.
A <legend> must be the first child of a <fieldset> for proper display and semantics.

Syntax

[Link]

<fieldset>
<legend>Group Title</legend>

</fieldset>

Attributes

Attribute Description

align (deprecated) Specifies the alignment of the legend text (left, center, right).

id Assigns a unique ID to the legend.

Provides a keyboard shortcut to focus the legend (rarely

accesskey
used).

Example

HTML5ANDCSS3 | [Link] 382

HTML <legend> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legend Example</title>
</head>
<body>
<h2>Survey Form</h2>
<form action="/samples/form_processor.php" method="post">
<fieldset>
<legend>Personal Details</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<fieldset>
<legend>Preferences</legend>
<label for="color">Favorite Color:</label>
<input type="text" id="color" name="color"><br><br>

<label for="hobby">Hobby:</label>
<input type="text" id="hobby" name="hobby">
</fieldset><br>

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

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see a fieldset with a caption at the top, e.g., "Personal Details" or "Preferences."
The legend clearly labels the grouped form fields.
Try it in our TryIt Editor to see how the legend improves form clarity and accessibility.

HTML5ANDCSS3 | [Link] 383

HTML <legend> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <legend> tag.

Notes
- <legend> should always be the first element inside <fieldset>.
- Provides a visual and semantic description of the fieldset.
- Improves accessibility, especially for screen readers.
- Deprecated attributes like align should be avoided; use CSS for styling instead.

Conclusion
The <legend> tag enhances form organization and readability by labeling fieldsets.
It is widely supported and crucial for accessible web forms.

HTML5ANDCSS3 | [Link] 384

<html>
CHAPTER 119 / HTML TAGS

HTML <datalist> Tag

The <datalist> tag is used to provide a list of predefined options for an <input> element.
It allows users to type a value or select from a list, offering a flexible and user-friendly input
experience.

The <datalist> element must be linked to an <input> using the list attribute.

Syntax

[Link]

<input list="listId" name="inputName" id="inputId">

Attributes

Attribute Description

Unique identifier for the datalist, used by the list attribute of

id
<input>.

name Rarely used, specifies the name of the datalist.

Example

HTML5ANDCSS3 | [Link] 385

HTML <datalist> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datalist Example</title>
</head>
<body>
<h2>Choose Your Favorite Browser</h2>
<form action="/samples/form_processor.php" method="post">
<label for="browser">Browser:</label>
<input list="browsers" id="browser" name="browser" placeholder="Start typing..." required>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
<option value="Opera">
<option value="Internet Explorer">
</datalist><br><br>

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

</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

You will see a text input where users can either type or select a value from a suggested dropdown
list.
As the user types, matching options appear for selection.
Try it in our TryIt Editor to see how <datalist> enhances form input.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <datalist> tag

HTML5ANDCSS3 | [Link] 386

HTML <datalist> Tag

Notes
- The <datalist> provides autocomplete suggestions but does not restrict input to only the listed
options.
- Must be linked to an <input> element via the list attribute.
- Improves user experience for forms with common or repetitive inputs.
- Works best for short lists; for very long lists, consider <select> instead.

Conclusion
The <datalist> tag creates a dynamic, user-friendly input experience.
It is widely supported and enhances form usability by providing autocomplete suggestions.

HTML5ANDCSS3 | [Link] 387

<html>
CHAPTER 120 / HTML TAGS

HTML <output> Tag

The <output> tag is used to display the result of a calculation or user action in a form.
It is commonly used with JavaScript to show dynamic results like sums, percentages, or other
computed values.

The <output> element is often linked to one or more input elements using the for attribute.

Syntax

[Link]

<output for="input1 input2">Result</output>

Attributes

Attribute Description

for Lists IDs of elements that contribute to the output.

form Associates the output with a specific form.

name Assigns a name to the output element.

id Assigns a unique ID.

Example

HTML5ANDCSS3 | [Link] 388

HTML <output> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output Tag Example</title>
</head>
<body>
<h2>Sum Calculator</h2>
<form oninput="[Link] = parseInt([Link]) + parseInt([Link])">
<label for="num1">Number 1:</label>
<input type="number" id="num1" value="">
<br>
<label for="num2">Number 2:</label>
<input type="number" id="num2" value="">
<br>
<br>
Output = <output name="result" for="num1 num2"></output>
</form>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <output> tag.

Notes
- The <output> element is designed for displaying calculated results.
- Can be linked to one or more inputs using the for attribute.
- Supports dynamic updates via JavaScript.
- Improves form clarity by showing real-time results without additional labels.

Conclusion
The <output> tag is useful for displaying results in forms dynamically.
It provides a semantic way to show calculations or other computed outputs in modern HTML.

HTML5ANDCSS3 | [Link] 389

<html>
CHAPTER 121 / HTML TAGS

HTML <meter> Tag

The <meter> tag is used to represent a scalar measurement within a known range, such as disk
usage, battery level, or progress percentage.
It is different from <progress>, as it can show a measurement that is not necessarily complete, but
has a min and max value.

<meter> is useful for visualizing numerical data in forms or dashboards.

Syntax

[Link]

<meter value="current" min="minValue" max="maxValue" low="lowValue" high="highValue" optimum="opt

imumValue">
Fallback text
</meter>

Attributes

Attribute Description

value Current numeric value.

min Minimum value (default is 0).

max Maximum value (default is 1).

low Range that is considered "low."

high Range that is considered "high."

optimum The ideal value.

form Associates the meter with a form.

id Assigns a unique ID.

name Name of the meter element.

HTML5ANDCSS3 | [Link] 390

HTML <meter> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meter Tag Example</title>
</head>
<body>
<h2>Battery Level</h2>
<label for="battery">Battery:</label>
<meter id="battery" value="65" min="0" max="100" low="20" high="80" optimum="90">
65%
</meter>
<p>The battery level is at 65%.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <meter> tag.

Notes
- <meter> is semantic for measurements and can be styled using CSS.
- Use low, high, and optimum to indicate different levels visually.
- Not supported in older Internet Explorer versions.
- Can be combined with <label> or <output> for more descriptive forms.

Conclusion
The <meter> tag provides a visual representation of scalar data within a defined range.
It improves usability and accessibility for displaying measurements like battery levels, scores, or progress
indicators.

HTML5ANDCSS3 | [Link] 391

<html>
CHAPTER 122 / HTML TAGS

HTML <progress> Tag

The <progress> tag is used to display the progress of a task such as file uploads, downloads, or
other operations.
Unlike <meter>, <progress> represents completion of a task rather than a general measurement.

The value attribute shows the current progress, and max defines the total amount.

Syntax

[Link]

<progress value="current" max="total">Fallback text</progress>

Attributes

Attribute Description

value Current progress value.

max Maximum value (default is 1).

id Assigns a unique ID.

form Associates the progress element with a form.

name Name of the progress element.

Example

HTML5ANDCSS3 | [Link] 392

HTML <progress> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Tag Example</title>
</head>
<body>
<h2>File Upload</h2>
<label for="fileUpload">Upload Progress:</label>
<progress id="fileUpload" value="45" max="100">45%</progress>
<p>Upload is at 45%.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <progressbar> tag.

Notes
- <progress> is designed specifically to show task completion.
- The value must be less than or equal to max; otherwise, the bar may appear full.
- Can be styled using CSS for custom colors and sizes.
- Can be used in combination with <label> or <output> for more descriptive feedback.

Conclusion
The <progress> tag provides a clear visual indicator of task completion.
It enhances user experience for uploads, downloads, or any measurable process on modern websites.

HTML5ANDCSS3 | [Link] 393

<html>
CHAPTER 123 / HTML TAGS

HTML <header> Tag

The <header> tag represents a container for introductory content or navigational links.
It usually contains headings, logos, and main navigation links, but it can appear multiple times on a
page (e.g., for sections or articles).

Syntax

[Link]

Attributes

Attribute Description

id Assigns a unique identifier.

class Specifies one or more class names.

style Inline CSS styles.

title Provides additional information about the element.

Example

HTML5ANDCSS3 | [Link] 394

HTML <header> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Tag Example</title>
</head>
<body>
<header style="background-color: #f0f0f0; padding: 20px;">
<h1>My Website</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
</header>

<main>
<h2>Welcome to my website!</h2>
<p>This is an example showing the header element.</p>
</main>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <header> tag.

Notes
- <header> is semantic, meaning it describes the role of the content for browsers and assistive
technologies.
- Can be used multiple times (for main header and section headers).
- Enhances SEO and accessibility.

Conclusion
The <header> tag is ideal for introducing content or navigation areas.
It gives structure and semantic meaning to the top part of a webpage or section.

HTML5ANDCSS3 | [Link] 395

<html>
CHAPTER 124 / HTML TAGS

HTML <footer> Tag

The <footer> tag represents a footer section for its nearest sectioning content (like <body>,
<article>, <section>).
It typically contains copyright info, author details, navigation links, or contact information.

Syntax

[Link]

Attributes

Attribute Description

id Assigns a unique identifier.

class Specifies one or more class names.

style Inline CSS styling.

title Additional information about the element.

Example

HTML5ANDCSS3 | [Link] 396

HTML <footer> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Tag Example</title>
</head>
<body>
<main>
<h1>Welcome to My Website</h1>
<p>This is an example of semantic footer usage.</p>
</main>

<footer style="background-color: #f0f0f0; padding: 15px; text-align: center;">

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <footer> tag.

Notes
- <footer> is semantic, providing meaning to the page structure.
- Can appear multiple times (e.g., for a main footer and individual articles).
- Helps improve SEO and accessibility.
- Can contain text, links, forms, or scripts.

Conclusion
The <footer> tag is ideal for bottom-of-page or section content, like copyright, contact, or links.
It adds semantic meaning and structural clarity to web pages.

HTML5ANDCSS3 | [Link] 397

<html>
CHAPTER 125 / HTML TAGS

HTML <article> Tag

The <article> tag represents self-contained content that can be independently distributed or reused,
such as a blog post, news article, or forum post.
It typically contains headings, paragraphs, images, and other related content.
<article> is ideal for content that makes sense on its own, even outside the context of the page.

Syntax

[Link]

Attributes

Attribute Description

id Assigns a unique identifier.

class Specifies one or more class names.

style Inline CSS styling.

title Provides additional information about the element.

Example

HTML5ANDCSS3 | [Link] 398

HTML <article> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Tag Example</title>
</head>
<body>
<h1>Blog Page</h1>

<article style="border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">

<h2>Understanding HTML Semantic Tags</h2>
<p>Semantic tags like <article>, <section>, and <header> provide meaning and structure to web
pages.</p>
<p>They help both **users** and **search engines** understand the content better.</p>
</article>

<article style="border: 1px solid #ccc; padding: 15px;">

<h2>Benefits of Using Semantic HTML</h2>
<p>Semantic HTML improves accessibility, SEO, and maintainability of websites. It makes conte
nt easier to read for humans and machines alike.</p>
</article>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <article> tag.

Notes
- <article> should be independent content suitable for syndication or reuse.
- Can contain headings, paragraphs, images, lists, and other HTML content.
- Helps improve SEO and accessibility.
- Can be nested inside <section> or <main> for better organization.

HTML5ANDCSS3 | [Link] 399

HTML <article> Tag

Conclusion
The <article> tag is essential for structuring self-contained content on web pages.
It provides semantic meaning and improves readability, SEO, and accessibility.

HTML5ANDCSS3 | [Link] 400

<html>
CHAPTER 126 / HTML TAGS

HTML <section> Tag

The <section> tag defines a thematic grouping of content on a webpage.

It is used to organize content into sections with a common heading or purpose, such as chapters,
tabs, or topic areas.

<section> is often used along with headings (<h1>-<h6>) to define logical blocks of content.

Syntax

[Link]

Attributes

Attribute Description

id Assigns a unique identifier.

class Specifies one or more class names.

style Inline CSS styling.

title Provides additional information about the element.

Example

HTML5ANDCSS3 | [Link] 401

HTML <section> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section Tag Example</title>
</head>
<body>
<h1>Website Overview</h1>

<section style="border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">

<h2>About Us</h2>
<p>We are a team of web developers specializing in HTML, CSS, and JavaScript.</p>
</section>

<section style="border: 1px solid #ccc; padding: 15px;">

<h2>Our Services</h2>
<p>We provide website design, development, and maintenance services for businesses.</p>
</section>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers support <section> tag.

Notes
- <section> is semantic and should contain a heading to describe its content.
- Useful for grouping related content logically.
- Can be nested inside <main> or <article> for structured layout.
- Improves accessibility and SEO by providing clear content divisions.

Conclusion
The <section> tag is ideal for organizing thematic content on a webpage.
It provides semantic meaning, improves readability, and helps search engines understand content
structure.

HTML5ANDCSS3 | [Link] 402

<html>
CHAPTER 127 / HTML TAGS

HTML <aside> Tag

The <aside> tag defines content that is related to the main content but separate from it, like
sidebars, pull quotes, or additional information.
It is often used for tangentially related content such as advertisements, links, or notes.

<aside> helps distinguish supplementary content from the main content, improving semantic
structure.

Syntax

[Link]

Attributes

Attribute Description

id Assigns a unique identifier.

class Specifies one or more class names.

style Inline CSS styling.

title Provides additional information about the element.

Example

HTML5ANDCSS3 | [Link] 403

HTML <aside> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aside Tag Example</title>
<style>
main {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<main>
<h1>Main Content</h1>
<p>This is the primary content of the webpage. It contains the main article or topic.</p>
</main>

<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Additional Resource 1</a></li>
<li><a href="#">Additional Resource 2</a></li>
</ul>
</aside>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <aside> tag.

HTML5ANDCSS3 | [Link] 404

HTML <aside> Tag

Notes
- <aside> is semantic for tangential or supplementary content.
- Often used for sidebars, callouts, or related links.
- Can appear multiple times on a page.
- Helps improve readability, accessibility, and SEO by separating main and related content.

Conclusion
The <aside> tag is ideal for supplementary content that complements the main content.
It provides semantic meaning and a clear distinction between main and secondary information.

HTML5ANDCSS3 | [Link] 405

<html>
CHAPTER 128 / HTML TAGS

HTML <main> Tag

The <main> tag represents the dominant content of the <body> of a webpage.
It should contain content unique to the page, excluding repeated elements like headers, footers,
sidebars, or navigation links.

<main> helps assistive technologies and search engines quickly identify the primary content of the
page.

Syntax

[Link]

Attributes

Attribute Description

id Assigns a unique identifier.

class Specifies one or more class names.

style Inline CSS styling.

title Provides additional information about the element.

Example

HTML5ANDCSS3 | [Link] 406

HTML <main> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Tag Example</title>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>

<main style="padding: 20px; background-color: #f9f9f9;">

<h2>Welcome to Our Website</h2>
<p>This is the primary content of the page, containing unique information for visitors.</p>
<p>Content in <main> should not include repeated site elements like navigation or footer link
s.</p>
</main>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers support <main> tag.

Notes
- <main> should only appear once per page.
- Excludes repeated content like <header>, <footer>, and <aside>.
- Improves accessibility, allowing screen readers to jump directly to main content.
- Helps SEO by signaling primary content to search engines.

HTML5ANDCSS3 | [Link] 407

HTML <main> Tag

Conclusion
The <main> tag is essential for defining the main content of a webpage.
It provides semantic meaning, accessibility benefits, and clarity for both users and search engines.

HTML5ANDCSS3 | [Link] 408

<html>
CHAPTER 129 / HTML TAGS

HTML <search> Tag

Learn how the HTML <search> tag semantically identifies controls and content used for searching
or filtering.

The <search> tag represents a part of a document or application used for searching or filtering.
It is a semantic container for form controls or other search-related content and creates a search
landmark for assistive technologies.

Syntax

[Link]

<search>
<form action="/search">
<label for="query">Search:</label>
<input type="search" id="query" name="q">
<button type="submit">Search</button>
</form>
</search>

Attributes

Attribute Description

class Specifies one or more class names for CSS styling.

id Defines a unique identifier for the element.

style Adds inline CSS styles.

title Provides additional information as a tooltip when hovered.

Provides an accessible name when multiple search

aria-label
landmarks exist.

HTML5ANDCSS3 | [Link] 409

HTML <search> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Tag Example</title>
<style>
search {
display: block;
max-width: 520px;
padding: 20px;
border: 1px solid #d7e2e5;
border-radius: 10px;
background-color: #f7fbfc;
}

search form {
display: flex;
align-items: end;
gap: 10px;
}

search label {
display: grid;
flex: 1;
gap: 6px;
font-weight: bold;
}

search input,
search button {
padding: 10px 12px;
border-radius: 6px;
}

search input {
border: 1px solid #9fb2b8;
}

search button {
border: 0;
background-color: #29AB87;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Search Our Tutorials</h1>

<search aria-label="Tutorial search">

<form action="/search">
<label for="tutorial-query">
Search tutorials
<input
type="search"

HTML5ANDCSS3 | [Link] 410

HTML <search> Tag

id="tutorial-query"
name="q"
placeholder="Enter HTML, CSS, or JavaScript"
>
</label>
<button type="submit">Search</button>
</form>
</search>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes No

The <search> element has been supported across major modern browsers since October 2023. Internet
Explorer does not support its search-landmark semantics.

Notes
- Use <search> to contain controls or content related to a search or filtering operation.
- The element identifies search semantics; it does not perform the search by itself.
- A <search> can contain a <form>, but a form is not required for JavaScript-based filtering.
- Do not use <search> as the main container for search results. Results should normally remain in
the page's main content.
- The element has an implicit search landmark role, so adding role="search" is unnecessary in
supporting browsers.
- Use an accessible name such as aria-label when a page contains multiple search landmarks.
- Do not confuse <search> with <input type="search">; the element is a container, while the
input accepts a query.
- Both the opening and closing tags are required.

Conclusion
The <search> tag gives clear semantic meaning to search and filtering interfaces.
Use it around the controls for a site-wide search, page search, or filtering feature while keeping the resulting
content in the main page area.

HTML5ANDCSS3 | [Link] 411

<html>
CHAPTER 130 / HTML TAGS

HTML <details> Tag

The <details> tag is used to create a collapsible content block that the user can open or close.
It is often used for FAQs, additional information, or disclosure sections.

The <summary> tag is typically used inside <details> to define the visible heading that toggles the
content.

Syntax

[Link]

<details>
<summary>Title or heading</summary>

</details>

Attributes

Attribute Description

Boolean attribute. If present, the details are expanded by

open
default.

id Assigns a unique identifier.

class Specifies one or more class names.

style Inline CSS styling.

title Provides additional information about the element.

Example

HTML5ANDCSS3 | [Link] 412

HTML <details> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Tag Example</title>
</head>
<body>
<h1>Frequently Asked Questions</h1>

<details>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</
p>
</details>

<details open>
<summary>What is CSS?</summary>
<p>CSS (Cascading Style Sheets) is used to style and layout HTML content.</p>
</details>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser supports <details> tag except of IE

Notes
- <details> provides interactive content without JavaScript.
- Works well for FAQs, hints, or optional content.
- The open attribute allows the block to be expanded by default.
- Styling can be applied with CSS for better appearance.

Conclusion
The <details> tag is perfect for collapsible content sections.
It enhances user experience by hiding non-essential information until needed and is semantically

HTML5ANDCSS3 | [Link] 413

HTML <details> Tag

meaningful.

HTML5ANDCSS3 | [Link] 414

<html>
CHAPTER 131 / HTML TAGS

HTML <summary> Tag

The <summary> tag defines a visible heading for the <details> element.
It acts as a toggle button that the user can click to expand or collapse the content inside <details>.

The <summary> tag must be the first child of <details> to work correctly.

Syntax

[Link]

<details>
<summary>Click to expand</summary>

</details>

Attributes

Attribute Description

id Assigns a unique identifier.

class Specifies one or more class names.

style Inline CSS styling.

title Provides additional information about the element.

Example

HTML5ANDCSS3 | [Link] 415

HTML <summary> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Summary Tag Example</title>
</head>
<body>
<h1>Interactive FAQ</h1>

<details>
<summary>What is JavaScript?</summary>
<p>JavaScript is a programming language used to make web pages interactive.</p>
</details>

<details>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is used to structure content on the web.</p>
</details>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers support <summary> tag except of IE

Notes
- <summary> must be inside <details> to function.
- Provides a toggle mechanism without JavaScript.
- Can be styled using CSS for font, color, and icons.
- Improves usability and semantic meaning for collapsible content.

Conclusion
The <summary> tag is essential for creating interactive headings inside <details>.
It enhances user experience by making content collapsible while maintaining semantic HTML.

HTML5ANDCSS3 | [Link] 416

<html>
CHAPTER 132 / HTML TAGS

HTML <dialog> Tag

The <dialog> tag represents a dialog box or modal window that can contain interactive content such
as text, forms, or buttons.
It can be opened or closed using the open attribute or JavaScript methods.
The <dialog> element is ideal for creating pop-ups, confirmation boxes, or form modals without
external JavaScript libraries.

Syntax

[Link]

<dialog open>
Content goes here...
</dialog>

Attributes

Attribute Description

open Specifies that the dialog is currently open.

id Assigns a unique identifier to the dialog.

class Specifies one or more class names for CSS styling.

style Applies inline CSS styles.

Example

HTML5ANDCSS3 | [Link] 417

HTML <dialog> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog Tag Example</title>
</head>
<body>
<h1>Dialog Tag Example</h1>

<dialog id="infoDialog">
<p>This is a sample dialog box using the <dialog> tag.</p>
<button id="closeBtn">Close</button>
</dialog>

<button id="openBtn">Open Dialog</button>

[Link]("click", () => [Link]());

[Link]("click", () => [Link]());
</script>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers support <dialog> except of IE.

Notes
- The dialog can be shown using .show() or .showModal() JavaScript methods.
- Use the ::backdrop CSS pseudo-element to style the overlay behind a modal dialog.
- The <dialog> element improves accessibility when used with focus management and ARIA roles.
- It is not supported in Internet Explorer.

HTML5ANDCSS3 | [Link] 418

HTML <dialog> Tag

Conclusion
The <dialog> tag is a modern and semantic way to create modal windows or popups.
It simplifies implementation compared to traditional JavaScript modals and provides built-in accessibility
and focus control.

HTML5ANDCSS3 | [Link] 419

<html>
CHAPTER 133 / HTML TAGS

HTML <time> Tag

The <time> tag defines a specific time or date, or both.

It helps browsers, search engines, and assistive technologies understand the time-related data in a
machine-readable format using the datetime attribute.

Syntax

[Link]

<time datetime="YYYY-MM-DDThh:mm:ssTZD">Visible Time or Date</time>

Attributes

Attribute Description

Specifies the date and/or time in a machine-readable format

datetime
(e.g., 2025-11-01T10:00).

id Defines a unique identifier for the element.

class Defines one or more class names for CSS styling.

style Applies inline CSS styles.

Note: The datetime attribute helps search engines understand structured data, improving SEO.

Example

HTML5ANDCSS3 | [Link] 420

HTML <time> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Tag Example</title>
</head>
<body>
<h1>HTML <time> Tag Example</h1>
<p>The seminar will start at <time datetime="2025-11-05T14:00">2:00 PM, November 5, 2025</time>
.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Partially

All browsers support this <time> tag, but IE has limited support for this.

Notes
- The <time> tag does not change how text looks by default.
- It allows search engines and other applications to extract and understand time-based information.
- Always use ISO 8601 format for the datetime attribute (e.g., 2025-11-01T09:30).
- The tag improves SEO and accessibility for date and time content.

Conclusion
The <time> tag is a semantic and SEO-friendly way to represent dates and times.
It makes your web content more meaningful for both users and search engines, especially for event-based
or time-sensitive information.

HTML5ANDCSS3 | [Link] 421

<html>
CHAPTER 134 / HTML TAGS

HTML <noscript> Tag

The <noscript> tag defines alternative content that is displayed only when JavaScript is disabled in
the browser or when the browser does not support scripting.

Syntax

[Link]

Attributes

Attribute Description

The <noscript> tag does not have any specific attributes. It

(None)
can include global attributes like id, class, or style.

Example

HTML5ANDCSS3 | [Link] 422

HTML <noscript> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>noscript Tag Example</title>
<script>
[Link]("<p>JavaScript is enabled in your browser.</p>");
</script>
</head>
<body>
<noscript>
<p>Your browser does not support JavaScript or it's disabled. Please enable JavaScript to vie
w the full content of this page.</p>
</noscript>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers support <noscript> tag.

Notes
- The <noscript> element provides a fallback for non-JavaScript environments.
- It is often used for warnings, accessibility, or alternate content.
- Always ensure your website remains usable without JavaScript when possible.
- This tag works inside both <head> and <body> elements.

Conclusion
The <noscript> tag ensures your webpage remains accessible and informative even if JavaScript is
unavailable.
It helps maintain usability and accessibility standards, providing fallback content for all users.

HTML5ANDCSS3 | [Link] 423

<html>
CHAPTER 135 / HTML TAGS

HTML <slot> Tags

The <slot> tag is a placeholder inside a Web Component that allows developers to pass external
content (light DOM) into the shadow DOM.
It helps in creating flexible and reusable custom elements where parts of the content can be
dynamically replaced.

Syntax

<slot name="slotName">Default content</slot>

Attributes

Attribute Description

Defines the name of the slot so specific content can be

name
assigned to it.

Example

HTML5ANDCSS3 | [Link] 424

HTML <slot> Tags

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slot Tag Example</title>
</head>
<body>

<template id="user-card">
<style>
div {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
width: 200px;
font-family: Arial, sans-serif;
}
</style>
<div>
<h3><slot name="username">Guest User</slot></h3>
<p><slot name="description">No description available.</slot></p>
</div>
</template>

<user-card>
<span slot="username">Swapnil Raja</span>
<span slot="description">Web Developer & Designer</span>
</user-card>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

HTML5ANDCSS3 | [Link] 425

HTML <slot> Tags

All major browsers support <slot> tag except of IE

Notes
- The <slot> tag is only meaningful when used inside a shadow DOM of a Web Component.
- You can define named slots using the name attribute and insert specific content using the
corresponding slot attribute in light DOM.
- Default slot content appears when no light DOM content is provided for that slot.

Conclusion
The <slot> tag enables content projection in Web Components, allowing external content to be inserted
dynamically.
It enhances the flexibility and reusability of custom elements in modern web development.

HTML5ANDCSS3 | [Link] 426

<html>
CHAPTER 136 / HTML TAGS

HTML <template> Tag

The <template> tag in HTML is used to define HTML fragments that are not rendered immediately
when a page loads.
Its content remains inactive until it is activated via JavaScript.
This makes it ideal for creating reusable content blocks such as cards, modals, or list items
dynamically.

Syntax

[Link]

Attributes

Attribute Description

Specifies a unique identifier for the template so it can be

id
accessed using JavaScript.

Example

HTML5ANDCSS3 | [Link] 427

HTML <template> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template Tag Example</title>
</head>
<body>

<h2>Template Example</h2>

const template = [Link]("user-template");

const container = [Link]("user-container");

[Link](user => {
const clone = [Link](true);
[Link](".name").textContent = [Link];
[Link](".role").textContent = [Link];
[Link](clone);
});
</script>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes No

All major browsers support <template> tag except of IE.

HTML5ANDCSS3 | [Link] 428

HTML <template> Tag

Notes
- The <template> element is not displayed when the page loads.
- It is commonly used to create client-side templates that can be cloned and inserted into the DOM
using JavaScript.
- Content inside <template> remains inactive - scripts inside it won't execute, and images won't
load until inserted into the DOM.

Conclusion
The <template> tag provides a powerful and efficient way to define reusable and hidden HTML
structures that can be dynamically rendered using JavaScript.
It is an essential tool for building modular, component-based, and interactive web applications.

HTML5ANDCSS3 | [Link] 429

<html>
CHAPTER 137 / HTML TAGS

HTML <shadow> Tag (Obsolete)

The experimental <shadow> element from Shadow DOM v0 is obsolete and unsupported.

The <shadow> element was an experimental insertion point from the old Shadow DOM v0 model. It
is obsolete, is not part of current HTML, and must not be used.

Standards Status

Item Status

Current status Obsolete and unsupported

Valid in modern HTML No

Historical technology Shadow DOM v0

Use instead attachShadow(), <slot>, or <template shadowrootmode>

Historical Syntax
You may encounter this markup in old experiments. Modern browsers do not provide the original Shadow
DOM v0 behavior.

Obsolete <shadow> syntax - do not use

Modern Shadow DOM Example

HTML5ANDCSS3 | [Link] 430

HTML <shadow> Tag (Obsolete)

Modern Shadow DOM with attachShadow()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Shadow DOM Example</title>
</head>
<body>
<div id="host"></div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Declarative Shadow DOM Example

Modern declarative shadow DOM

<div>
<template shadowrootmode="open">
<style>p { color: teal; }</style>
<p>This content is inside a declarative shadow root.</p>
</template>
</div>

Important Points
- Do not use the obsolete <shadow> element.
- Use attachShadow() to create a shadow root with JavaScript.
- Use <slot> for content insertion inside a modern shadow tree.
- Use <template shadowrootmode> when declarative shadow DOM is appropriate.

Conclusion
The old <shadow> tag should appear only in historical documentation. Modern projects should use the
current Shadow DOM API, slots, or declarative shadow DOM.

HTML5ANDCSS3 | [Link] 431

<html>
CHAPTER 138 / HTML TAGS

HTML <center> Tag

The <center> tag was used to horizontally center-align content in HTML.

It is deprecated in HTML5 and should be replaced by CSS styling (text-align: center;) for modern
web development.

Syntax

[Link]

<center>Content to be centered</center>

Attributes

Attribute Description

None The <center> tag does not have any specific attributes.

Example

HTML5ANDCSS3 | [Link] 432

HTML <center> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Tag Example</title>
</head>
<body>

<h2>Deprecated <center> Tag Example</h2>

<center>
<p>This paragraph is centered using the deprecated <center> tag.</p>
</center>

<p>Modern alternative: use CSS <code>text-align: center;</code></p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browser support <center> tag

Notes
- The <center> tag is deprecated and may be removed in future HTML versions.
- Use CSS text-align: center; for proper, modern web standards.
- This tag only affects horizontal alignment of inline and block content.

Conclusion
The <center> tag was historically used for horizontal alignment but is obsolete.
Modern web design should always use CSS for centering content.

HTML5ANDCSS3 | [Link] 433

<html>
CHAPTER 139 / HTML TAGS

HTML <font> Tag

The <font> tag was historically used to change the font face, size, and color of text in HTML.
It is deprecated in HTML5, and modern web design uses CSS (font-family, font-size, color) instead.

Syntax

[Link]

<font face="fontName" size="value" color="colorValue">Text</font>

Attributes

Attribute Description

face Specifies the font family of the text.

size Specifies the font size (1-7 or relative values).

color Specifies the text color.

Example

HTML5ANDCSS3 | [Link] 434

HTML <font> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Tag Example</title>
</head>
<body>

<h2>Deprecated <font> Tag Example</h2>

<p>
<font face="Arial" size="4" color="blue">
This text is Arial, size 4, and blue using the deprecated <font> tag.
</font>
</p>

<p>Modern alternative: use CSS <code>font-family</code>, <code>font-size</code>, and <code>color<

/code>.</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers support <font> tag.

Notes
- The <font> tag is obsolete and should not be used in modern HTML.
- CSS properties provide a more flexible and standardized approach for text styling.
- Deprecated tags like <font> may still work in modern browsers for backward compatibility, but
using them is not recommended.

Conclusion
The <font> tag was once used to style text directly in HTML, but it is deprecated.
For maintainable and modern web design, always use CSS for text styling.

HTML5ANDCSS3 | [Link] 435

<html>
CHAPTER 140 / HTML TAGS

HTML <big> Tag

The <big> tag was used to increase the font size of text by one level relative to the surrounding text.
It is deprecated in HTML5, and CSS (font-size) should be used for controlling text size in modern
web development.

Syntax

[Link]

Attributes

Attribute Description

None The <big> tag does not have any specific attributes.

Example

HTML5ANDCSS3 | [Link] 436

HTML <big> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Big Tag Example</title>
</head>
<body>

<h2>Deprecated <big> Tag Example</h2>

<p>This is normal text, but <big>this text is slightly bigger</big> than the surrounding text.</p
>

<p>Modern alternative: use CSS <code>font-size</code> property.</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers support <big> tag.

Notes
- The <big> tag is obsolete and should not be used in modern HTML.
- CSS offers more precise control over font size.
- It only increases the text size relative to surrounding text, not by a specific absolute size.

Conclusion
The <big> tag is a deprecated HTML element for enlarging text.
Modern web design should always use CSS font-size for styling text.

HTML5ANDCSS3 | [Link] 437

<html>
CHAPTER 141 / HTML TAGS

HTML <strike> Tag

The <strike> tag was historically used to display text with a strikethrough (line through the text).
It is deprecated in HTML5.
The modern standard uses the or <s> tags or CSS text-decoration: line-through; to achieve the
same effect.

Syntax

[Link]

<strike>Text to be struck through</strike>

Attributes

Attribute Description

None The <strike> tag does not have any specific attributes.

Example

HTML5ANDCSS3 | [Link] 438

HTML <strike> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strike Tag Example</title>
</head>
<body>

<h2>Deprecated <strike> Tag Example</h2>

<p>Original Price: <strike>500</strike></p>

<p>Modern alternative: use <code><del></code> or CSS <code>text-decoration: line-through;</code>.

</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Notes
- The <strike> tag is obsolete in HTML5.
- <del> or <s> should be used for semantic correctness (e.g., <del> indicates deleted content).
- CSS text-decoration: line-through; provides more flexible styling for strikethrough
effects.

Conclusion
The <strike> tag was used to create strikethrough text but is deprecated.
Modern HTML development should rely on semantic tags (<del> / <s>) or CSS for strikethrough styling.

HTML5ANDCSS3 | [Link] 439

<html>
CHAPTER 142 / HTML TAGS

HTML <tt> Tag

The <tt> tag in HTML stands for "teletype text."

It was used to display text in a monospaced (fixed-width) font, resembling the output of old teletype
machines.
This tag is deprecated in HTML5, and developers should use CSS or the tag instead.

Syntax

[Link]

<tt>Monospaced text</tt>

Attributes

Attribute Description

None The <tt> tag does not have any specific attributes.

Example

HTML5ANDCSS3 | [Link] 440

HTML <tt> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TT Tag Example</title>
</head>
<body>

<h2>Deprecated <tt> Tag Example</h2>

<p>Normal text: Hello, World!</p>

<p>Teletype text using <tt>: <tt>Hello, World!</tt></p>

<p><strong>Modern alternative:</strong> Use CSS or <code> tag:</p>

<code style="font-family: monospace;">Hello, World!</code>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

All major browsers support <tt> tag.

Notes
- The <tt> tag is obsolete in HTML5.
- Use CSS for styling monospaced text instead, for example:

[Link]

p { font-family: monospace; }

The tag is semantically appropriate for displaying <strong>computer code or

command-line text</strong>.

HTML5ANDCSS3 | [Link] 441

HTML <tt> Tag

Conclusion
The <tt> tag once displayed text in a fixed-width font but is now deprecated.
Use CSS or semantic tags like </strong> for modern and standards-compliant web
development.

HTML5ANDCSS3 | [Link] 442

<html>
CHAPTER 143 / HTML TAGS

HTML <acronym> Tag

The <acronym> tag in HTML was used to define an acronym - a word formed from the initial letters
of other words, such as NASA or HTML.
When a user hovered over the acronym, the browser could display its full meaning using the title
attribute.
This tag is deprecated in HTML5 and replaced by the tag.

Syntax

[Link]

<acronym title="Full form">ACRONYM</acronym>

Attributes

Attribute Description

title Specifies the full form or description of the acronym.

Example

HTML5ANDCSS3 | [Link] 443

HTML <acronym> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acronym Tag Example</title>
</head>
<body>

<h2>HTML <acronym> Tag Example</h2>

<p>
The <acronym title="HyperText Markup Language">HTML</acronym>
defines the structure of web pages.
</p>

<p><strong>Modern Alternative:</strong> Use <abbr> tag instead:</p>

<p>
The <abbr title="HyperText Markup Language">HTML</abbr>
defines the structure of web pages.
</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Partially Partially Partially Partially Partially Yes

It has limited browser support and tag has been depricated.

Notes
- The <acronym> tag is deprecated in HTML5.
- Use the <abbr> tag instead, which provides the same functionality and is supported by modern
browsers.
- The title attribute is what displays the tooltip on hover.

HTML5ANDCSS3 | [Link] 444

HTML <acronym> Tag

Conclusion
The <acronym> tag was once used to define acronyms in HTML documents, but it is now obsolete.
For modern, accessible, and valid HTML, use the <abbr> tag instead.

HTML5ANDCSS3 | [Link] 445

<html>
CHAPTER 144 / HTML TAGS

HTML <applet> Tag

The <applet> tag in HTML was used to embed Java applets (small Java programs) into a web page.
Applets could display interactive graphics, animations, or run other Java-based functionalities
directly within the browser.
However, the <applet> tag is deprecated in HTML5 and should no longer be used - it has been
replaced by the <object> or <embed> tag.

Syntax

[Link]

<applet code="[Link]" width="300" height="200">

Your browser does not support Java applets.
</applet>

Attributes

Attribute Description

code Specifies the name of the Java class file to be loaded.

archive Specifies the location of the applet's .jar file.

codebase Defines the base URL for the applet's class files.

width Specifies the display width of the applet.

height Specifies the display height of the applet.

name Assigns a name to the applet instance.

Provides alternate text for browsers that do not support Java

alt
applets.

object Specifies the serialized applet object.

align Defines alignment relative to surrounding elements.

hspace Sets horizontal space around the applet.

vspace Sets vertical space around the applet.

HTML5ANDCSS3 | [Link] 446

HTML <applet> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Applet Tag Example</title>
</head>
<body>

<h2>HTML <applet> Tag Example</h2>

<applet code="[Link]" width="300" height="200">

Your browser does not support Java applets.
</applet>

<p><strong>Note:</strong> Modern browsers no longer support Java applets. Use the <object> tag in
stead.</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

No No No No No Partially

No browser support this <applet> tag now except of some older version of IE.

Notes
- The <applet> tag was officially deprecated in HTML 4.01 and removed in HTML5.
- Java plug-ins are now considered insecure and have been removed from most browsers.
- For modern replacements, use <object>, <embed>, or JavaScript-based web apps.

Conclusion
The <applet> tag was used to embed Java programs directly into web pages but is now obsolete.
Modern web development standards have replaced it with safer and more compatible technologies like
JavaScript, <object>, <embed>, or WebAssembly.

HTML5ANDCSS3 | [Link] 447

<html>
CHAPTER 145 / HTML TAGS

HTML <frame> Tag

The <frame> tag in HTML was used to define a specific region within a <frameset> that could
display a separate HTML document.
Frames allowed web developers to split the browser window into multiple sections, each loading a
different webpage.
This tag is deprecated in HTML5 and replaced by more modern layout techniques using CSS
Flexbox, Grid, or iframes.

Syntax

[Link]

Attributes

Attribute Description

Specifies the URL of the document to be displayed in the

src
frame.

name Assigns a name to the frame (used for linking).

scrolling Controls whether scrollbars appear (yes, no, or auto).

noresize Prevents resizing of the frame by the user.

frameborder Defines whether the frame has a border (1 or 0).

marginwidth Sets the left and right margins of the frame content.

marginheight Sets the top and bottom margins of the frame content.

HTML5ANDCSS3 | [Link] 448

HTML <frame> Tag

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame Tag Example</title>
</head>

<noframes>
<body>
<p>Your browser does not support frames. Please use a modern browser.</p>
</body>
</noframes>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

No Major browser support for this <frame> tag.

Notes
- The <frame> tag cannot be used inside the <body> tag - it must be used within a <frameset>.
- Frames are deprecated due to accessibility, usability, and SEO issues.
- Use CSS layouts or <iframe> for embedding external content instead.

Conclusion
The <frame> tag was once used to divide a webpage into multiple sections displaying separate documents.
It is now obsolete in HTML5 and replaced by modern layout methods like CSS Grid, Flexbox, or
embedding techniques using <iframe>.

HTML5ANDCSS3 | [Link] 449

<html>
CHAPTER 146 / HTML TAGS

HTML <frameset> Tag

The <frameset> tag in HTML was used to define a set of frames within the browser window. It
allowed you to divide the window into multiple sections (frames), each displaying a separate HTML
document.

Syntax

[Link]

<frameset rows="value" cols="value">

Attributes

Attribute Description

Specifies the number and size of horizontal frames

rows
(comma-separated values).

Specifies the number and size of vertical frames

cols
(comma-separated values).

border Defines the width of the border between frames.

Specifies whether a border should be displayed between

frameborder
frames (1 or 0).

Defines the space between frames (non-standard, used in

framespacing
older browsers).

Event handler triggered when the frameset has finished

onload
loading.

onunload Event handler triggered when the frameset is unloaded.

HTML5ANDCSS3 | [Link] 450

HTML <frameset> Tag

Example

[Link]

<!DOCTYPE html>
<html>
<head>
<title>HTML Frameset Example</title>
</head>
<frameset cols="50%,50%">
<frame src="[Link] name="leftFrame">
<frame src="[Link] name="rightFrame">
</frameset>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

This example divides the browser window into two vertical frames:

- The left frame loads [Link].

- The right frame loads [Link].

(Note: In modern browsers, this will not work, as <frameset> and <frame> are deprecated.)

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <frameset> tag is partially supported by few browser's older version but most of the browser dosn't
support this tag.

Notes
- The <frameset> tag replaced the <body> tag in documents that used frames.
- Each frame could display a different webpage.

HTML5ANDCSS3 | [Link] 451

HTML <frameset> Tag

- Frames often caused usability and bookmarking problems.

- In HTML5, use <iframe> or modern CSS for layout and embedding.

Conclusion
The <frameset> tag was once a useful feature for creating multi-document layouts, but it is deprecated
and obsolete in modern web development. Developers should now use CSS layout techniques or iframes
for embedding content instead of using framesets.

HTML5ANDCSS3 | [Link] 452

<html>
CHAPTER 147 / HTML TAGS

HTML <noframes> Tag

The <noframes> tag in HTML was used to provide alternative content for browsers that do not
support frames.
When a webpage used the <frameset> element to divide the browser window into multiple frames,
the <noframes> tag offered fallback content (like a message or simple links) for users whose
browsers couldn't display frames or had frames disabled.

Note: The <noframes> tag is deprecated in HTML5. Modern browsers support frames, and modern
webpage structures use <iframe> or responsive layouts instead.

Syntax

<noframes>
Alternative content goes here...
</noframes>

Attributes

Attribute Description

The <noframes> tag does not support any specific

None attributes. However, it may contain regular HTML elements
like text, links, or images as fallback content.

Example

HTML5ANDCSS3 | [Link] 453

HTML <noframes> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Example of noframes Tag</title>
</head>
<frameset cols="50%,50%">
<frame src="[Link]
<frame src="[Link]
<noframes>
<body>
<p>Your browser does not support frames. Please visit
<a href="[Link] 1</a> or
<a href="[Link] 2</a> manually.</p>
</body>
</noframes>
</frameset>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

If the browser supports frames:

- Two frames will display side-by-side showing [Link] and

[Link]

If the browser does not support frames:

- The text inside <noframes> will appear:

Your browser does not support frames. Please visit Frame 1 or Frame 2 manually.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Browser Support Notes

HTML5ANDCSS3 | [Link] 454

HTML <noframes> Tag

Still rendered for backward

Chrome Yes
compatibility

Edge Yes Supported in legacy mode

Firefox Yes Supported but deprecated

Safari Yes Supported for old content only

Opera Yes Supported but obsolete

Internet Explorer Yes Originally designed for IE4+

Notes
- The <noframes> tag should always be used inside a <frameset> block.
- It is mainly useful for very old browsers that do not support frames.
- Modern web design practices no longer use frames or noframes.
- If you need fallback content, consider using CSS-based layouts and <iframe> with accessible
messaging instead.

Conclusion
The <noframes> tag was introduced as a fallback mechanism for browsers that could not render frames.
While it still displays content in some browsers for legacy support, it is obsolete in HTML5.
Developers should use responsive layouts, semantic HTML elements, and <iframe> for embedding
content instead of relying on frames or noframes.

HTML5ANDCSS3 | [Link] 455

<html>
CHAPTER 148 / HTML TAGS

HTML <marquee> Tag

The <marquee> tag in HTML was used to create scrolling text or images that move horizontally or
vertically across a webpage.
It was often used to attract attention with moving announcements, news tickers, or advertisements.

Note: The <marquee> tag is deprecated in HTML5 and should not be used in modern web
development.
The same effect can be achieved using CSS animations or JavaScript for better control and
accessibility.

Syntax

[Link]

<marquee direction="left" behavior="scroll" scrollamount="6">

Scrolling text goes here...
</marquee>

Attributes

Attribute Description Possible Values

behavior Defines how the marquee text scrolls. scroll (default), slide, alternate

direction Defines the direction of scrolling. left, right, up, down

Sets the speed of scrolling (higher =

scrollamount Numeric value (e.g., 1, 10)
faster).

Defines the delay between each scroll

scrolldelay Numeric value
movement (in milliseconds).

Sets how many times the marquee

loop Number, or infinite
scrolls.

Sets the background color of the

bgcolor Color name or hex code
marquee area.

width Defines the width of the marquee. Pixel or percentage value

height Defines the height of the marquee. Pixel or percentage value

HTML5ANDCSS3 | [Link] 456

HTML <marquee> Tag

Adds horizontal space around the

hspace Numeric value
marquee.

Adds vertical space around the

vspace Numeric value
marquee.

Example

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Example of marquee Tag</title>
</head>
<body>

<h2>Marquee Tag Example</h2>

<marquee behavior="scroll" direction="left" scrollamount="5">

Welcome to [Link] - Learn HTML and CSS easily!
</marquee>

<marquee behavior="alternate" direction="up" height="100" scrollamount="3" bgcolor="#e0f7fa">

This text bounces vertically up and down!
</marquee>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Output

Browser Output

When opened in a browser:

- The first marquee scrolls text continuously from right to left.

- The second marquee makes the text bounce up and down within a light blue box.

HTML5ANDCSS3 | [Link] 457

HTML <marquee> Tag

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Browser Support Notes

Chrome Partial Works, but deprecated

Edge Partial Supported for backward compatibility

Firefox Partial Supported with warnings

Safari Partial Still works but not standard

Opera Partial Works, but discouraged

Internet Explorer Full Originally designed for IE 4+

Notes
- The <marquee> tag is non-standard and not part of the official HTML5 specification.
- It can cause accessibility and usability issues for screen readers and users with motion sensitivity.
- Use CSS animations instead. For example:

[Link]

<div class="scroll-text">This is a CSS-based scrolling text!</div>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

HTML5ANDCSS3 | [Link] 458

HTML <marquee> Tag

Conclusion
The <marquee> tag was once a popular way to add scrolling effects to text or images, but it is now
deprecated and obsolete in HTML5.
Modern web developers should use CSS animations or JavaScript for smooth, accessible scrolling effects.

HTML5ANDCSS3 | [Link] 459

<html>
CHAPTER 149 / HTML TAGS

HTML <blink> Tag

The <blink> tag in HTML was used to make enclosed text blink or flash on and off continuously on
the screen.
It was introduced in Netscape Navigator browsers in the 1990s as a visual attention grabber for
important text or warnings.

Note: The <blink> tag is deprecated and not supported in HTML5 or modern browsers.
The blinking effect can be recreated using CSS animations or JavaScript.

Syntax

[Link]

<blink>Your text goes here</blink>

Attributes

Attribute Description Possible Values

The <blink> tag does not support any

standard attributes other than the
(none) -
global HTML attributes like class, id,
style, etc.

Example

HTML5ANDCSS3 | [Link] 460

HTML <blink> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Example of blink Tag</title>
</head>
<body>

<h2>Blink Tag Example</h2>

<p>This is a normal text.</p>

<blink style="color:red; font-weight:bold;">

This text used to blink in old browsers!
</blink>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Notes
- The <blink> tag is completely obsolete and should never be used in modern HTML documents.
- The blinking effect can cause accessibility issues for users with epilepsy or visual sensitivity.
- To achieve a similar blinking effect safely, use CSS animations:

HTML5ANDCSS3 | [Link] 461

HTML <blink> Tag

[Link]

@keyframes blink-effect {
50% { opacity: 0; }
}
</style>

<p class="blink">This is a CSS-based blinking text!</p>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Conclusion
The <blink> tag was once used to create a flashing text effect, but it is deprecated and no longer
supported by any modern browsers.
For modern, accessible websites, use CSS animations instead to simulate blinking or highlight text in a
more user-friendly way.

HTML5ANDCSS3 | [Link] 462

<html>
CHAPTER 150 / HTML TAGS

HTML <s> Tag

The <s> tag in HTML is used to define text that is no longer correct, accurate, or relevant but should
not be deleted.
It visually renders text with a strikethrough line, similar to , but <s> is meant for stylistic or factual
changes rather than indicating document edits.

Syntax

[Link]

<s>Text that is no longer accurate</s>

Attributes

Attribute Description

The <s> tag does not have any specific attributes. However,
None
global attributes like class, id, and style can be used.

Example

HTML5ANDCSS3 | [Link] 463

HTML <s> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML <s> Tag Example</title>
</head>
<body>
<h2>HTML <s> Tag Example</h2>
<p>Original Price: <s>999</s> Now only 599!</p>
<p>Old information: <s>Registration closes on June 1.</s> Extended till June 10!</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <s> tag is fully supported in all major browsers.

Notes
- Use <s> when you want to show stylistically outdated or incorrect information, such as an old
price or an outdated reference.
- For marking deleted or removed text in document revisions, use the <del> tag instead.

Conclusion
The <s> tag is a simple yet effective way to visually indicate that text content is obsolete or incorrect. It helps
improve user clarity while keeping the content visible for reference.

HTML5ANDCSS3 | [Link] 464

<html>
CHAPTER 151 / HTML TAGS

HTML <var> Tag

The <var> tag in HTML is used to define a variable in a mathematical expression or in a

programming context.
The content inside the <var> element is typically displayed in italic by default in most browsers to
distinguish it from regular text.
It helps semantically indicate that the enclosed text is a variable name.

Syntax

[Link]

<var>variable_name</var>

Attributes

Attribute Description

The <var> tag does not support any specific attributes other
None
than the global and event attributes.

Example

HTML5ANDCSS3 | [Link] 465

HTML <var> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>HTML var Tag Example</title>
</head>
<body>
<h2>HTML <var> Tag Example</h2>
<p>The area of a rectangle is <var>length</var> <var>width</var>.</p>
<p>In the equation <var>x</var> + <var>y</var> = 10, <var>x</var> and <var>y</var> are variable
s.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Notes
- The <var> element is purely semantic; it doesn't add any functional behavior - only meaning.
- It's mainly used in educational, scientific, or technical documents.
- You can style it differently with CSS if desired, e.g., change the color or font style.
- For code snippets or user input, use or <kbd> instead of <var>.

Conclusion
The <var> tag semantically represents a variable in code or mathematics, improving the readability and
accessibility of technical content.
Although it looks similar to italic text, it conveys specific meaning to browsers, assistive technologies, and
search engines.

HTML5ANDCSS3 | [Link] 466

<html>
CHAPTER 152 / HTML TAGS

HTML <kbd> Tag

The <kbd> tag represents keyboard input entered by the user.

Browsers typically display <kbd> text in a monospace (typewriter-style) font to differentiate it from
normal text.
It is commonly used in tutorials, documentation, and instructions to show keys or input commands.

Syntax

[Link]

<kbd>keyboard input</kbd>

Attributes

Attribute Description

The <kbd> tag has no unique attributes. It supports global

None
and event attributes only.

Example

HTML5ANDCSS3 | [Link] 467

HTML <kbd> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>HTML kbd Tag Example</title>
</head>
<body>
<h2>HTML <kbd> Tag Example</h2>

<p>To save the document, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

<p>To refresh a webpage, press <kbd>F5</kbd>.</p>

<p>To open the command prompt, type <kbd>cmd</kbd> in the Run dialog.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Since <kbd> is visible inline content, you can easily see the output in your browser.
Try it in our TryIt Editor to observe how the keyboard-style formatting appears.

Notes
- <kbd> is used for keyboard input, while <samp> is for sample output, and is for
<strong>code snippets</strong>.
- It improves semantics for tutorials and accessibility tools.
- You may style it with CSS for custom keyboard-like UI boxes.

Conclusion
The <kbd> element is perfect for displaying keyboard shortcuts or user input commands clearly and
semantically.
It enhances readability in tutorials and helps users identify instructions quickly.

HTML5ANDCSS3 | [Link] 468

<html>
CHAPTER 153 / HTML TAGS

HTML <samp> Tag

The <samp> tag is used to represent sample output from a computer program, system, or device.
Browsers typically display <samp> text in a monospace font, similar to how code or terminal output
appears.

Syntax

[Link]

<samp>sample output</samp>

Attributes

Attribute Description

The <samp> tag has no unique attributes. It supports global

None
and event attributes only.

Example

HTML5ANDCSS3 | [Link] 469

HTML <samp> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>HTML samp Tag Example</title>
</head>
<body>
<h2>HTML <samp> Tag Example</h2>

<p>Computer output may look like this:</p>

<p><samp>Error: File not found.</samp></p>

<p>Or a command result:</p>

<p><samp>Ping successful - 0% packet loss.</samp></p>

<p>Another example:</p>

<p><samp>Login failed. Try again.</samp></p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

There is visible output, so you can check it in the browser.

Use our TryIt Editor to see how monospace system-output formatting looks.

Notes
- <samp> is for program/system output, while <kbd> is for user input, and is for code
examples.
- Great for tutorials, documentation, and examples that simulate command-line output.
- You can style it with CSS to create a terminal-like appearance.

Conclusion
The <samp> tag helps display system-generated messages in a clear and semantic way.

HTML5ANDCSS3 | [Link] 470

HTML <samp> Tag

It improves the readability of technical documentation and makes program outputs easy to identify.

HTML5ANDCSS3 | [Link] 471

<html>
CHAPTER 154 / HTML TAGS

HTML Tag

The tag is used to display a fragment of computer code in a monospace (fixed-width) font.
It is typically used for inline code, not for large code blocks.

Syntax

[Link]

<code>your code here</code>

Attributes

Attribute Description

Global Attributes Yes (e.g., class, id, style)

Event Attributes Yes

Example

HTML5ANDCSS3 | [Link] 472

HTML <code> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>HTML Code Tag Example</title>
</head>
<body>

<h2>Using the <code> Tag</h2>

<p>To display a message in JavaScript, use:

<code>alert("Hello World!");</code>
</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The tag displays text in a <strong>monospace font</strong>. It does

<strong>not</strong> apply syntax highlighting by itself. Often combined with
<pre> for multi-line code blocks.

Notes
- For multi-line code, wrap inside a <pre> tag.
- For semantic clarity, use <kbd>, <samp>, or <var> when appropriate.

Conclusion
The tag is essential for displaying small pieces of code or commands in a
readable monospace format. It improves clarity and is widely supported across
all browsers.

HTML5ANDCSS3 | [Link] 473

<html>
CHAPTER 155 / HTML TAGS

HTML <dfn> Tag

The <dfn> tag identifies the defining instance of a term or concept within a document.
It is used the first time a term appears, usually alongside its explanation. Browsers may style it in
italics by default, but the real purpose is semantic - helping search engines, accessibility tools, and
documentation systems understand term definitions.

Syntax

[Link]

<dfn>term being defined</dfn>

Attributes

Attribute Description Value

The <dfn> tag has no specific

None -
attributes.

Example

HTML5ANDCSS3 | [Link] 474

HTML <dfn> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DFN Tag Example</title>
</head>
<body>

<p>
<dfn>HTML</dfn> is a markup language used to structure content on the web.
</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Notes
- <dfn> marks only the defining occurrence of a term - later references should not use <dfn>.
- Screen readers may announce it as a "definition", improving accessibility.
- Often combined with <abbr> when defining abbreviations.
- Purely semantic - does not add styling unless styled with CSS.

Conclusion
The <dfn> tag adds meaningful structure by identifying the first definition of a term in your content. It's
simple but valuable for documentation, accessibility, and SEO. Use it whenever you introduce important
vocabulary or concepts.

HTML5ANDCSS3 | [Link] 475

<html>
CHAPTER 156 / HTML TAGS

HTML <div> Tag

The <div> tag defines a division or section in an HTML document.

It is a block-level container used to group content for styling (CSS) or scripting (JavaScript).

Syntax

[Link]

<div>
Content goes here...
</div>

Attributes

Attribute Description

id Specifies a unique identifier for the <div>

class Assigns a class name for CSS styling

style Adds inline CSS styles

title Adds tooltip text

hidden Specifies that the element should be hidden

contenteditable Specifies whether content inside <div> can be edited

draggable Specifies whether the <div> is draggable

lang Specifies language

Example

HTML5ANDCSS3 | [Link] 476

HTML <div> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>DIV Example</title>
<style>
.box {
width: 200px;
padding: 20px;
background-color: lightblue;
border: 2px solid #333;
margin-bottom: 20px;
}
</style>
</head>
<body>

<h2>DIV Example</h2>

<div class="box">
This is a content box inside a DIV.
</div>

<div class="box">
Another DIV with the same CSS class.
</div>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Notes
- <div> is a block-level element; it starts on a new line.
- It is the most common container for CSS layout design.
- In modern HTML5, semantic elements like <header>, <section>, <article>, <footer>, etc.
are preferred over <div> for structure.
- <div> should be used mainly as a generic container when no semantic element fits.

HTML5ANDCSS3 | [Link] 477

HTML <div> Tag

Conclusion
The <div> tag is a fundamental block container used to group and style HTML content. While newer
semantic tags provide meaning, <div> remains essential for layout and design due to its flexibility.

HTML5ANDCSS3 | [Link] 478

<html>
CHAPTER 157 / HTML TAGS

HTML Tag

The tag is an inline container used to group text or elements for styling with CSS or to apply
JavaScript functionality.
Unlike <div>, does not create a new block; it is inline and does not affect the layout by itself.

Syntax

[Link]

<span>Some text here</span>

Attributes

Attribute Description

id Assigns a unique identifier to the <span> element.

class Assigns one or more class names for styling or scripting.

style Applies inline CSS styles directly to the <span>.

title Specifies extra information shown as a tooltip on hover.

(Global Attributes) data-*, lang, dir, etc. can be used as well.

Example

HTML5ANDCSS3 | [Link] 479

HTML <span> Tag

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML span Tag Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h2>HTML <span> Tag Example</h2>
<p>This is a normal text and <span class="highlight">this part is highlighted using span</span>
.</p>
<p>Hover over this <span title="This is a tooltip">tooltip text</span> to see the title attribu
te.</p>
</body>
</html>

Output

Browser Output

The text inside <span> can be styled or manipulated without affecting the layout of other element
s.

Inline styling or class-based CSS changes apply only to the content within the <span>.

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

<span> itself does not create visual changes unless styled with CSS or manipulated via JavaScript.

Notes
- <span> is purely semantic/structural for inline grouping.
- Commonly used for applying CSS styles, attaching event listeners, or wrapping small portions of text.
- Use <span> for inline elements, and <div> for block-level containers.

HTML5ANDCSS3 | [Link] 480

HTML <span> Tag

Conclusion
The <span> tag is a versatile inline container in HTML, perfect for applying styles or behavior to a portion of
text without disrupting the flow of the document.

HTML5ANDCSS3 | [Link] 481

<html>
CHAPTER 158 / HTML TAGS

HTML Comment Tag

HTML comments are used to insert notes or explanations in the HTML code that are not displayed
in the browser.
Comments are helpful for developers to document code, temporarily disable code, or leave
reminders.

Syntax

[Link]

Attributes

The HTML comment tag does not support any attributes. Only the content inside  is
recognized as a comment.

Example

HTML5ANDCSS3 | [Link] 482

HTML Comment Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Comment Example</title>
</head>
<body>
<h2>HTML Comment Example</h2>

<p>This paragraph is visible to the user.</p>

<p>This paragraph is also visible.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Comments do not appear in the rendered page, but they are visible in the page source.

Notes
- Comments can be used for code documentation, debugging, or temporarily removing code.
- Nested comments are not allowed; HTML does not support  -->.
- Avoid leaving sensitive information in comments, as they are visible in the page source.

Conclusion
The HTML comment tag is a developer-only tool for leaving notes or disabling code temporarily. It does not
affect the visual layout of the page and is fully supported in all browsers.

HTML5ANDCSS3 | [Link] 483

<html>
CHAPTER 159 / HTML TAGS

HTML <data> Tag

The <data> tag is used to associate machine-readable data with human-readable content.
It allows the browser or scripts to understand the value of a text while still displaying a friendly
version to users.

Syntax

[Link]

<data value="machine-readable-value">Human-readable text</data>

Attributes

Attribute Description

Specifies the machine-readable value associated with the

value
content.

(Global Attributes) class, id, style, title, etc. can also be used.

Example

HTML5ANDCSS3 | [Link] 484

HTML <data> Tag

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML data Tag Example</title>
</head>
<body>
<h2>HTML <data> Tag Example</h2>

<p>The price of the product is <data value="599">599</data>.</p>

<p>My birth year is <data value="1990">1990</data>.</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

Only the human-readable content is displayed; the value attribute is for scripts or programs.

Notes
- <data> is semantic and improves accessibility and SEO by providing machine-readable values.
- Can be used with JavaScript for calculations, data processing, or structured content.
- Works well for dates, numbers, currency, or any data that needs to be machine-readable but
human-friendly.

Conclusion
The <data> tag allows developers to link human-readable text with a machine-readable value,
enhancing semantic meaning and interactivity without changing what the user sees.

HTML5ANDCSS3 | [Link] 485

<html>
CHAPTER 160 / HTML TAGS

HTML Ruby Annotations: <ruby>,

Learn how the HTML <ruby>, <rt>, and <rp> elements create pronunciation and explanatory
annotations with fallback punctuation.

HTML ruby annotations display short pronunciation or explanatory text alongside base text,
especially in East Asian typography.
The <ruby> element wraps the annotation, <rt> provides the annotation text, and <rp> provides
fallback punctuation for browsers that cannot display ruby annotations.

Syntax

[Link]

<ruby>

Attributes

Attribute Description

class Specifies one or more class names on <ruby>, <rt>, or <rp>.

id Defines a unique identifier for any of the three elements.

style Adds inline CSS styles to the selected element.

title Provides additional information as a tooltip when hovered.

HTML5ANDCSS3 | [Link] 486

HTML Ruby Annotations: <ruby>, <rt> and <rp>

Example

[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ruby Annotation Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 30px;
}

ruby {
font-size: 2rem;
}

rt {
color: #007a96;
font-size: 0.55em;
}
</style>
</head>
<body>
<h1>Japanese Ruby Annotation</h1>

<p>
<ruby>
<rp>(</rp><rt>kan</rt><rp>)</rp>
<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
means "Chinese characters."
</p>
</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The <ruby>, <rt>, and <rp> elements are supported by all major modern browsers.

HTML5ANDCSS3 | [Link] 487

HTML Ruby Annotations: <ruby>, <rt> and <rp>

Notes
- Place the base text and its annotation inside <ruby>.
- Use <rt> as a child of <ruby> to provide pronunciation, transliteration, translation, or another short
annotation.
- Place <rp> immediately before or after <rt> to provide fallback punctuation, usually parentheses.
- Browsers with ruby support hide the <rp> text and position the <rt> annotation beside the base
text.
- A single <ruby> element can contain more than one base-text and annotation pair.
- The <ruby> closing tag is required. Although some <rt> and <rp> end tags may be omitted in
limited cases, writing them explicitly keeps the markup clear.

Conclusion
The <ruby>, <rt>, and <rp> elements work together to create readable ruby annotations with a text
fallback.
Use them for short pronunciation or explanatory annotations that belong directly with the base text.

HTML5ANDCSS3 | [Link] 488

<html>
CHAPTER 161 / HTML TAGS

HTML <svg> Tag

The <svg> tag is used to embed Scalable Vector Graphics (SVG) directly inside an HTML
document.
SVG graphics are resolution-independent, meaning they scale without losing quality and are ideal
for icons, diagrams, charts, and illustrations.
SVG elements are part of the HTML5 specification and work seamlessly with CSS and JavaScript.

Syntax

[Link]

<svg width="width" height="height">

</svg>

Attributes

Attribute Description

width Defines the width of the SVG canvas

height Defines the height of the SVG canvas

viewBox Defines the coordinate system of the SVG

xmlns Defines the SVG XML namespace

fill Defines fill color (can be overridden per shape)

stroke Defines stroke color

stroke-width Defines stroke thickness

id, class, style Global attributes

HTML5ANDCSS3 | [Link] 489

HTML <svg> Tag

Example

[Link]

<!DOCTYPE html>
<html>
<head>
<title>SVG Tag Example</title>
</head>
<body>

<h2>SVG Example</h2>

<svg width="200" height="150" xmlns="[Link]

<rect x="10" y="10" width="180" height="130"
fill="lightblue" stroke="black" stroke-width="2"/>
<text x="50" y="80" fill="black" font-size="16">Hello SVG</text>
</svg>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

SVG renders natively in modern browsers without any plugins.

IE9 partially support SVG tag

SVG Elements Reference

Basic Shape Elements

SVG Element Purpose / Description

<rect> Draws rectangles and squares

<circle> Draws circles

<ellipse> Draws ellipses (oval shapes)

<line> Draws a straight line

HTML5ANDCSS3 | [Link] 490

HTML <svg> Tag

<polyline> Draws connected straight lines

<polygon> Draws closed multi-sided shapes

Drawing & Text Elements

SVG Element Purpose / Description

<path> Draws complex shapes using path commands

<text> Displays text inside SVG

<tspan> Styles or positions parts of SVG text

Grouping & Reusability Elements

SVG Element Purpose / Description

<g> Groups multiple SVG elements

<defs> Stores reusable definitions

<use> Reuses elements defined in <defs>

<symbol> Defines reusable symbols

Gradient & Color Effects Element

SVG Element Purpose / Description

<linearGradient> Creates linear color gradients

<radialGradient> Creates circular color gradients

<stop> Defines gradient color stops

Filters & Effects (Advanced)

SVG Element Purpose / Description

<filter> Defines graphical effects

<feGaussianBlur> Applies blur effect

<feOffset> Moves image position

HTML5ANDCSS3 | [Link] 491

HTML <svg> Tag

<feColorMatrix> Color transformations

Animation Elements (SVG SMIL)

SVG Element Purpose / Description

<animate> Animates SVG attributes

<animateTransform> Animates transformations

<animateMotion> Animates movement along a path

Metadata & Interaction

SVG Element Purpose / Description

<title> Tooltip / accessibility text

<desc> Description for screen readers

<a> Creates clickable links in SVG

Notes
- SVG graphics are DOM elements, so they can be styled with CSS and manipulated with JavaScript.
- SVG is different from <canvas> - SVG is vector-based, canvas is pixel-based.
- Inline SVG is preferred over image-based SVG for better interactivity and styling.

Conclusion
The <svg> tag enables powerful, scalable, and interactive vector graphics in HTML.
It is an essential modern web technology for icons, visualizations, and responsive design.

HTML5ANDCSS3 | [Link] 492

<html>
CHAPTER 162 / HTML TAGS

HTML <basefont> Tag

The <basefont> tag was used to define a default font size, color, and font face for all text in an
HTML document.
Once set, all text on the page inherited these font properties unless overridden by other tags.

Syntax

[Link]

<basefont size="value" color="color" face="font-name">

Attributes

Attribute Description

size Sets the base font size (1-7 or relative values like +1)

color Sets the default text color

face Sets the default font family

(Global attributes) Not supported

Example

HTML5ANDCSS3 | [Link] 493

HTML <basefont> Tag

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Basefont Tag Example</title>
</head>
<body>

<basefont size="4" color="blue" face="Arial">

<h2>Basefont Tag Example</h2>

<p>This paragraph follows the base font settings.</p>
<p>All text inherits size, color, and font face.</p>

</body>
</html>

RUN THIS COMPLETE EXAMPLE ONLINE TRY IT LIVE

Browser Support

Chrome Edge Firefox Safari Opera IE9+

Yes Yes Yes Yes Yes Yes

The tag is ignored by modern browsers.

Notes
- <basefont> affects the entire document globally.
- It was replaced by CSS font rules like:
- Deprecated due to lack of flexibility and poor separation of content and style.

[Link]

body {
font-family: Arial;
font-size: 16px;
color: blue;
}

HTML5ANDCSS3 | [Link] 494

HTML <basefont> Tag

Conclusion
The <basefont> tag was an early attempt at global text styling in HTML but is now obsolete.
Modern websites should always use CSS for font control, consistency, and responsiveness.

HTML5ANDCSS3 | [Link] 495

Comprehensive HTML Guide and Best Practices
No ratings yet
Comprehensive HTML Guide and Best Practices
3 pages
HTML and JavaScript Fundamentals
No ratings yet
HTML and JavaScript Fundamentals
17 pages
Comprehensive HTML Course Overview
No ratings yet
Comprehensive HTML Course Overview
25 pages
Lesson 2 Intro. To HTML 5
No ratings yet
Lesson 2 Intro. To HTML 5
36 pages
HTML Complete Notes (15-20 Pages)
No ratings yet
HTML Complete Notes (15-20 Pages)
14 pages
Web_Development_HTML_CSS_DOM_Notes for any man or woman
No ratings yet
Web_Development_HTML_CSS_DOM_Notes for any man or woman
20 pages
Introduction to HTML and Its Evolution
No ratings yet
Introduction to HTML and Its Evolution
7 pages
2 3 HTML
No ratings yet
2 3 HTML
57 pages
Comprehensive HTML Course Guide
100% (1)
Comprehensive HTML Course Guide
4 pages
HTML Guide
No ratings yet
HTML Guide
6 pages
My Full Stack Web Dev Content-1
No ratings yet
My Full Stack Web Dev Content-1
32 pages
HTML: The Complete Beginner's: Guide
No ratings yet
HTML: The Complete Beginner's: Guide
9 pages
Comprehensive HTML Project Guide
No ratings yet
Comprehensive HTML Project Guide
58 pages
Comprehensive HTML Tutorial Guide
No ratings yet
Comprehensive HTML Tutorial Guide
4 pages
HTML5 Quick Learning Guide
No ratings yet
HTML5 Quick Learning Guide
22 pages
HTML Basics for Beginners Guide
No ratings yet
HTML Basics for Beginners Guide
4 pages
HTML & CSS Basics for Beginners
No ratings yet
HTML & CSS Basics for Beginners
20 pages
Example Syntax
No ratings yet
Example Syntax
18 pages
HTML and JavaScript Essentials Guide
No ratings yet
HTML and JavaScript Essentials Guide
17 pages
Learn HTML: A Structured Guide
No ratings yet
Learn HTML: A Structured Guide
7 pages
Rote Learning HTML & CSS Guide
No ratings yet
Rote Learning HTML & CSS Guide
62 pages
Comprehensive HTML Course Outline
No ratings yet
Comprehensive HTML Course Outline
5 pages
? Full Stack Web Development Mastery Course - HTML - Beginner To Pro (With Examples)
No ratings yet
? Full Stack Web Development Mastery Course - HTML - Beginner To Pro (With Examples)
11 pages
HTML5 Overview and Key Features Guide
No ratings yet
HTML5 Overview and Key Features Guide
8 pages
HTML, CSS & JS: A Comprehensive Guide
No ratings yet
HTML, CSS & JS: A Comprehensive Guide
182 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
27 pages
2 3 HTML
No ratings yet
2 3 HTML
55 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
20 pages
Notepad++ HTML Tutorial Guide
No ratings yet
Notepad++ HTML Tutorial Guide
9 pages
HTML 10 Page Study Notes
No ratings yet
HTML 10 Page Study Notes
10 pages
HTML 10 Page Study Notes
No ratings yet
HTML 10 Page Study Notes
10 pages
HTML 10 Page Study Notes
No ratings yet
HTML 10 Page Study Notes
10 pages
HTML5 Basics for Web Design Beginners
No ratings yet
HTML5 Basics for Web Design Beginners
49 pages
Centered Titles with CSS Formatting
No ratings yet
Centered Titles with CSS Formatting
33 pages
CSS Visibility and Wiselist Review
No ratings yet
CSS Visibility and Wiselist Review
3 pages
HTML Complete Guide
No ratings yet
HTML Complete Guide
15 pages
HTML Handbook
No ratings yet
HTML Handbook
74 pages
HTML5, CSS, and Graphics Overview
No ratings yet
HTML5, CSS, and Graphics Overview
7 pages
HTML & CSS Mastery for Beginners
No ratings yet
HTML & CSS Mastery for Beginners
57 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
6 pages
HTML Full Documentation
No ratings yet
HTML Full Documentation
4 pages
HTML and DHTML
No ratings yet
HTML and DHTML
13 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
5 pages
Module-1 Reference Material
No ratings yet
Module-1 Reference Material
60 pages
HTML Fundamentals to Advanced Guide
No ratings yet
HTML Fundamentals to Advanced Guide
24 pages
Download
No ratings yet
Download
3 pages
Selecting All <img> Tags in CSS
No ratings yet
Selecting All <img> Tags in CSS
16 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
9 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
12 pages
Web Technologies Course Overview
No ratings yet
Web Technologies Course Overview
39 pages
HTML & Css Handbook 2022
No ratings yet
HTML & Css Handbook 2022
60 pages
Comprehensive HTML Tutorial Guide
No ratings yet
Comprehensive HTML Tutorial Guide
367 pages
Complete HTML Guide for Beginners
No ratings yet
Complete HTML Guide for Beginners
9 pages
HTML Research Paper Original
No ratings yet
HTML Research Paper Original
5 pages
HTML5 and CSS3 Illustrated Complete 2nd Edition Vodnik Solutions Manual Available Full Chapters
100% (7)
HTML5 and CSS3 Illustrated Complete 2nd Edition Vodnik Solutions Manual Available Full Chapters
182 pages
GitHub Repository and Web Page Creation Guide
No ratings yet
GitHub Repository and Web Page Creation Guide
12 pages
HTML Basics: Key Concepts and Tags
No ratings yet
HTML Basics: Key Concepts and Tags
5 pages
HTML Learning Roadmap Guide
No ratings yet
HTML Learning Roadmap Guide
4 pages
Hotel Management System Project Report
No ratings yet
Hotel Management System Project Report
36 pages
Basic HTML Elements for Beginners
No ratings yet
Basic HTML Elements for Beginners
5 pages
Orgafe Organic Farm Project Report
No ratings yet
Orgafe Organic Farm Project Report
91 pages
MCA Bridge Course Syllabus Overview
No ratings yet
MCA Bridge Course Syllabus Overview
3 pages
Computer Diwali Homework Quiz
No ratings yet
Computer Diwali Homework Quiz
4 pages
HTML Tables and Forms Overview
No ratings yet
HTML Tables and Forms Overview
29 pages
Essential CSS Syntax and Examples
No ratings yet
Essential CSS Syntax and Examples
23 pages
NACTAR Webpage Design Course Roster
No ratings yet
NACTAR Webpage Design Course Roster
4 pages
MERN Stack Course Syllabus Overview
No ratings yet
MERN Stack Course Syllabus Overview
10 pages
TextMate Shortcuts Cheat Sheet
No ratings yet
TextMate Shortcuts Cheat Sheet
1 page
Web Technologies Unit I Notes
No ratings yet
Web Technologies Unit I Notes
18 pages
Six-Month Industrial Training Report
No ratings yet
Six-Month Industrial Training Report
32 pages
Python Full Stack Developer Internship Report
No ratings yet
Python Full Stack Developer Internship Report
21 pages
SAP UI5 & Fiori Online Training Syllabus
No ratings yet
SAP UI5 & Fiori Online Training Syllabus
14 pages
EZproxy Configuration Reference Guide
No ratings yet
EZproxy Configuration Reference Guide
114 pages
Web Design Exam for Computer 8
No ratings yet
Web Design Exam for Computer 8
3 pages
HTML Practice Exercises with Solutions
No ratings yet
HTML Practice Exercises with Solutions
8 pages
S7 1200 Webserver in Detail
No ratings yet
S7 1200 Webserver in Detail
76 pages
Selenium Locator Strategies Explained
No ratings yet
Selenium Locator Strategies Explained
19 pages
Understanding HTML Iframes and Elements
No ratings yet
Understanding HTML Iframes and Elements
8 pages
Understanding SGML: Overview and Syntax
0% (1)
Understanding SGML: Overview and Syntax
11 pages
Pug
No ratings yet
Pug
21 pages
HTML Coding Conventions Guide
No ratings yet
HTML Coding Conventions Guide
21 pages
Web Development 34 Pages
No ratings yet
Web Development 34 Pages
34 pages
Gmail: Intuitive Email Service
No ratings yet
Gmail: Intuitive Email Service
43 pages