Learn HTML | Neoaspire

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It defines the structure of content on the web such as headings, paragraphs, links, images, and other elements.

HTML was first introduced in 1991 by Tim Berners-Lee and has evolved significantly to support modern web development.

Evolution of HTML

1991 – HTML 1.0 introduced by Tim Berners-Lee.
1995 – HTML 2.0 added forms and tables.
1997 – HTML 3.2 introduced scripting support.
1997 – HTML 4.0 improved accessibility and CSS support.
1999 – HTML 4.01 refined and standardized.
2000 – XHTML 1.0 (stricter XML-based version).
2008 – HTML5 introduced semantic tags, audio, video, canvas.
2014+ – Continuous updates and improvements.

Why HTML is Important

Provides structure to web content
Works together with CSS and JavaScript
Essential foundation for web development
Supported by all modern browsers

Basic Structure of an HTML Document

Every HTML document follows a basic structure that defines the document type, metadata, and visible content.


<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Explanation of Structure

<!DOCTYPE html> – Declares the document type.
<html> – Root element of the webpage.
<head> – Contains metadata (title, links, styles).
<body> – Contains visible content.

🎯 Practice Task

Create a simple HTML page with a heading and paragraph.
Change the page title.
Add an image below the paragraph.

HTML Document Structure

The structure of an HTML document is defined by a hierarchy of elements. This structure ensures that content is organized and displayed correctly in web browsers.

Key Structural Elements

<!DOCTYPE html> – Declares the document type and version.
<html> – Root element that wraps the entire webpage.
<head> – Contains metadata, title, and links to stylesheets.
<title> – Sets the title shown in the browser tab.
<body> – Contains all visible webpage content.

Complete Example of HTML Structure


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

Best Practices for HTML Structure

Always start with the correct <!DOCTYPE> declaration.
Use semantic elements to improve accessibility and SEO.
Keep the structure organized and logical.
Validate your HTML to ensure it follows standards.

🎯 Practice Task

Create a new HTML document with the correct structure.
Add a title and some content inside the body.
Validate your HTML using an online validator tool.

HTML Elements

HTML elements are the building blocks of a web page. They define the structure and content displayed in the browser. Most elements consist of an opening tag, content, and a closing tag.

Basic Structure Elements

<!DOCTYPE html> – Declares the HTML document type.
<html> – Root element that wraps the entire webpage.
<head> – Contains metadata, title, and links to stylesheets.
<title> – Sets the title shown in the browser tab.
<body> – Contains all visible webpage content.

Content Elements

<h1> to <h6> – Heading tags for different levels.
<p> – Defines a paragraph.
<a> – Creates a hyperlink.
<img> – Embeds an image.
<div> – Container element for grouping content.

Example of HTML Elements


<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
    <a href="https://example.com">Visit Example</a>
    <img src="image.jpg" alt="Sample Image">
</body>

Understanding Elements

Most HTML elements follow this structure:


<tagname> Content goes here </tagname>

Some elements like <img> do not have closing tags. These are called self-closing elements.

🎯 Practice Task

Create a webpage using <h1>, <p>, and <a>.
Add an image using the <img> tag.
Wrap everything inside a <div> container.

HTML Attributes

HTML attributes provide additional information about an element. They are written inside the opening (start) tag and usually appear as name="value" pairs.

Key Rules

Attributes are always placed in the start tag.
They usually follow the format: name="value".
Some attributes (like disabled) do not require a value.
Attributes control behavior, appearance, identification, and metadata.

General Syntax


<tagname attribute="value"> Content </tagname>

Common HTML Attributes

Attribute	Used In	Description	Example
href	<a>, <link>	Specifies the destination URL.	`<a href="about.html">About</a>`
src	<img>, <script>, <iframe>	Defines the source file.	`<img src="photo.jpg" alt="Profile">`
alt	<img>	Alternative text for accessibility.	`<img src="logo.png" alt="Company Logo">`
id	Any	Unique identifier (used in CSS/JS).	`<p id="intro">Hello</p>`
class	Any	Groups elements for styling or scripting.	`<p class="highlight">Text</p>`
title	Any	Tooltip text shown on hover.	`<abbr title="HyperText Markup Language">HTML</abbr>`
target	<a>	Specifies where to open the link.	`<a href="site.html" target="_blank">Open</a>`
type	<input>, <button>	Defines the type of element.	`<input type="email">`
placeholder	<input>, <textarea>	Displays hint text inside input fields.	`<input placeholder="Enter email">`
disabled	<input>, <button>	Disables user interaction.	`<button disabled>Submit</button>`
readonly	<input>	Makes input uneditable.	`<input value="View Only" readonly>`
name	Form elements	Identifies data when a form is submitted.	`<input name="username">`

Best Practices

Always include alt text for images.
Use id only once per page.
Prefer CSS instead of inline style attributes.
Use semantic and meaningful class names.
Always use lowercase for attribute names (HTML5 standard).

🎯 Practice Task

Create a link that opens in a new tab.
Add an image with proper src and alt.
Create a form input with placeholder and required attributes.
Use both id and class on different elements.

HTML Headings

HTML headings are used to define titles and subtitles on a webpage. They create a clear content structure, improve readability, and are essential for both SEO and accessibility.

There are six levels of headings: from <h1> (highest importance) to <h6> (lowest importance).

Heading Levels

Syntax	Rendered Output
`<h1>This is Heading 1</h1>`	This is Heading 1
`<h2>This is Heading 2</h2>`	This is Heading 2
`<h3>This is Heading 3</h3>`	This is Heading 3
`<h4>This is Heading 4</h4>`	This is Heading 4
`<h5>This is Heading 5</h5>`	This is Heading 5
`<h6>This is Heading 6</h6>`	This is Heading 6

How Headings Work

<h1> is usually used for the main title of the page.
<h2> is used for major sections.
<h3>–<h6> are used for sub-sections.
Headings should follow a logical order (do not skip levels).

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Headings Example</title>
</head>
<body>

    <h1>Main Title</h1>
    <h2>Section Title</h2>
    <h3>Subsection Title</h3>
    <h4>Sub-subsection</h4>
    <h5>Minor Heading</h5>
    <h6>Smallest Heading</h6>

</body>
</html>

Best Practices

Use only one <h1> per page (for the main title).
Do not skip heading levels (e.g., avoid jumping from <h1> to <h4>).
Use headings for structure — not just for styling.
Use CSS to control size and appearance, not heading level.

🎯 Practice Task

Create a webpage with one <h1> title.
Add two <h2> section headings.
Add at least one <h3> under each section.
Ensure the heading hierarchy is logically structured.

HTML Paragraphs

In HTML, the <p> tag is used to define a paragraph of text. Paragraphs automatically include spacing before and after the content, making text easier to read and visually separated.

Basic Syntax

Syntax	Rendered Output
`<p>This is a paragraph of text.</p>`	This is a paragraph of text.

How Paragraphs Work

Each <p> element creates a new block of text.
Browsers automatically add margin (spacing) around paragraphs.
Multiple spaces inside a paragraph are treated as a single space.
Pressing Enter in HTML code does not create a new paragraph — you must use a new <p> tag.

Line Break vs Paragraph

If you only need a line break inside a paragraph (not a new paragraph), use the <br> tag.


<p>
This is line one.<br>
This is line two.
</p>

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Paragraph Example</title>
</head>
<body>

    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>

</body>
</html>

Best Practices

Use paragraphs to group related text content.
Do not use multiple <br> tags to create spacing — use CSS instead.
Keep paragraphs short for better readability.
Use semantic HTML structure along with headings.

🎯 Practice Task

Create a webpage with three separate paragraphs.
Add a line break inside one paragraph using <br>.
Observe the spacing difference between paragraphs and line breaks.

HTML Text Formatting

HTML provides various text formatting elements to style content such as bold, italic, highlighted, inserted, deleted, subscript, superscript, and code text.

Some formatting tags are purely visual, while others are semantic (they add meaning and improve accessibility and SEO).

Common Text Formatting Tags

Tag	Example	Description	Type
`<b>`	Bold text	Displays bold text (visual only)	Visual
`<strong>`	Important text	Indicates important content	Semantic
`<i>`	Italic text	Displays italic text (visual only)	Visual
`<em>`	Emphasized text	Indicates emphasized content	Semantic
`<u>`	Underlined	Underlines text	Visual
`<mark>`	Highlighted	Highlights text	Semantic
`<small>`	Small text	Displays smaller text	Semantic
`<del>`	~~Deleted text~~	Represents removed content	Semantic
`<ins>`	Inserted text	Represents newly added content	Semantic
`<sub>`	H₂O	Subscript text	Semantic
`<sup>`	2⁵	Superscript text	Semantic
`<code>`	`console.log("Hello");`	Inline code snippet	Semantic
`<pre>`	Preserves spaces and line breaks	Preformatted text block	Semantic

Visual vs Semantic Tags

Visual tags change appearance only (<b>, <i>, <u>).
Semantic tags add meaning and improve accessibility (<strong>, <em>, etc.).
Screen readers recognize semantic tags and adjust reading tone accordingly.

Comparison Example

Syntax	Rendered Output
`<p><b>Bold</b> vs <strong>Strong</strong></p>`	Bold vs Strong
`<p><i>Italic</i> vs <em>Emphasized</em></p>`	Italic vs Emphasized

Complete Example


<!DOCTYPE html>
<html>
<head>
    <title>HTML Text Formatting Example</title>
</head>
<body>

    <p><strong>Important Text</strong></p>
    <p><em>Emphasized Text</em></p>
    <p>Water formula: H<sub>2</sub>O</p>
    <p>Math power: 2<sup>5</sup> = 32</p>
    <p><code>console.log("Hello World");</code></p>

</body>
</html>

Best Practices

Prefer semantic tags over purely visual tags.
Do not use formatting tags for layout design — use CSS.
Use <pre> for code blocks that need preserved formatting.
Use <code> for inline code snippets.

🎯 Practice Task

Create a paragraph with both <strong> and <em>.
Write a chemical formula using <sub>.
Write a math expression using <sup>.
Add an inline JavaScript code snippet using <code>.

HTML Comments

HTML comments are used to add notes or explanations within the HTML code. They are not displayed in the browser and are only visible in the source code.

Syntax for Comments


<!-- This is a comment in HTML -->

Use Cases for Comments

Explaining complex code sections.
Leaving notes for other developers.
Temporarily disabling code during development.

Example of Comments


<!DOCTYPE html>
<html>
<head>
    <title>HTML Comments Example</title>
</head>
<body>
    <!-- This is the main heading -->
    <h1>Welcome to My Website</h1>
    <!-- This paragraph introduces the site -->
    <p>This is a simple webpage created for learning HTML.</p>
    <!-- The following link goes to the about page -->
    <a href="about.html">About Us</a>
</body>
</html>

Best Practices

Use comments to improve code readability.
Avoid over-commenting — only add comments where necessary.
Do not include sensitive information in comments.
Use comments to explain the "why" behind code decisions, not just the "what".

🎯 Practice Task

Add comments to a sample HTML page explaining each section.
Use comments to temporarily disable a piece of code and observe the change.
Review the source code in your browser to see the comments you added.

HTML Colors

In HTML and CSS, colors can be applied to text, backgrounds, borders, and other elements. Colors may be defined using color names, hexadecimal values, RGB, HSL, and modern CSS techniques such as gradients and variables.

Common Methods to Specify Colors

Method	Description	Example
Color Names	Predefined color keywords such as `red`, `blue`, or `green`.	`color: red;`
Hexadecimal (HEX)	Six-digit hexadecimal codes prefixed with `#`.	`color: #FF0000;`
RGB	Defines colors using Red, Green, Blue values (0–255).	`color: rgb(255, 0, 0);`
HSL	Defines colors using Hue, Saturation, and Lightness.	`color: hsl(0, 100%, 50%);`

Basic Color Reference

Name	HEX	RGB	HSL
Red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
Green	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)
Blue	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)
Yellow	#FFFF00	rgb(255, 255, 0)	hsl(60, 100%, 50%)
Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
White	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)

CSS Gradients

Gradients create smooth transitions between two or more colors. They are defined using the linear-gradient() and radial-gradient() functions.

Preview	Description
	Linear gradient from red to yellow
	Linear gradient from blue to green
	Radial gradient from purple to pink

Gradient Syntax Example

/* Linear Gradient */
background-image: linear-gradient(to right, red, yellow);

/* Radial Gradient */
background-image: radial-gradient(circle, blue, green);

Applying Colors to Elements

<h1 style="color: blue;">Blue Heading</h1>

<p style="background-color: #FFFF00;">
  Paragraph with yellow background
</p>

<div style="border: 2px solid rgb(0, 255, 0);">
  Div with green border
</div>

<span style="color: hsl(240, 100%, 50%);">
  Blue text using HSL
</span>

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Colors Example</title>
</head>
<body>

    <h2>HTML Colors Demonstration</h2>

    <h1 style="color: blue;">This is a blue heading</h1>

    <p style="background-color: #FFFF00;">
        This paragraph has a yellow background.
    </p>

    <div style="border: 2px solid rgb(0, 255, 0);">
        This div has a green border.
    </div>

    <span style="color: hsl(240, 100%, 50%);">
        This text is blue using HSL.
    </span>

</body>
</html>

✅ Best Practice: For maintainability and scalability, define colors in external CSS files or use CSS variables instead of inline styles.

HTML Entities

HTML entities are special character codes used to display reserved characters, symbols, and characters that are not easily typed on a keyboard. They are especially useful when you need to display characters that have a specific meaning in HTML (such as < and >).

An entity begins with an ampersand (&) and ends with a semicolon (;).

Common HTML Entities

Entity	Description	Rendered Output
`<`	Less-than symbol	<
`>`	Greater-than symbol	>
`&`	Ampersand symbol	&
`"`	Double quotation mark	"
`'`	Single quotation mark	'
` `	Non-breaking space	Prevents automatic line breaks
`©`	Copyright symbol	©
`®`	Registered trademark symbol	®
`€`	Euro currency symbol	€
`™`	Trademark symbol	™
`…`	Ellipsis symbol	…

Example Usage

<p>5 &lt; 10 and 10 &gt; 5</p>
<p>Use &amp; to represent an ampersand.</p>
<p>He said, &quot;Hello!&quot;</p>
<p>It's a beautiful day!</p>
<p>This is a non-breaking space.</p>
<p>&copy; 2024 My Website</p>

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Entities Example</title>
</head>
<body>

    <h2>HTML Entities Demonstration</h2>

    <p>5 &lt; 10 and 10 &gt; 5</p>
    <p>Use &amp; to represent an ampersand.</p>
    <p>He said, &quot;Hello!&quot;</p>
    <p>It's a beautiful day!</p>
    <p>This is a non-breaking space.</p>
    <p>&copy; 2024 My Website</p>

</body>
</html>

✅ Best Practice: Always use entities when displaying reserved HTML characters such as <, >, and & inside your code examples.

HTML Lists

HTML lists are used to display related items in an organized format. There are three main types of lists:

Ordered List (<ol>)
Unordered List (<ul>)
Description List (<dl>)

1️⃣ Ordered List (<ol>)

An ordered list displays items with numbers or letters. Each item is defined using the <li> tag.

Syntax	Rendered Output
`<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol>`	HTML CSS JavaScript

Numbering Types

type="1" → 1, 2, 3 (default)
type="A" → A, B, C
type="a" → a, b, c
type="I" → I, II, III
type="i" → i, ii, iii


<ol type="A">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ol>

2️⃣ Unordered List (<ul>)

An unordered list displays items using bullet points.

Syntax	Rendered Output
`<ul> <li>Milk</li> <li>Bread</li> <li>Butter</li> </ul>`	Milk Bread Butter

Bullet Styles (Using CSS)

disc (default)
circle
square


<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

3️⃣ Description List (<dl>)

A description list is used to define terms and their descriptions.

<dt> → Defines the term
<dd> → Defines the description

Syntax	Rendered Output
`<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>`	HTML HyperText Markup Language CSS Cascading Style Sheets

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Lists Example</title>
</head>
<body>

    <h2>Ordered List</h2>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

    <h2>Unordered List</h2>
    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Butter</li>
    </ul>

    <h2>Description List</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
    </dl>

</body>
</html>

Best Practices

Use ordered lists when sequence matters.
Use unordered lists for general grouping.
Use description lists for definitions or key-value pairs.
Avoid using lists purely for layout design.

🎯 Practice Task

Create an ordered list with Roman numerals.
Create an unordered list with square bullets.
Create a description list defining three web technologies.

HTML Links

The <a> (anchor) tag is used to create hyperlinks. Links allow users to navigate between web pages, download files, send emails, make phone calls, or jump to specific sections within a page.

Basic Syntax

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

Open Link in a New Tab

Use the target="_blank" attribute to open a link in a new tab. For security and performance reasons, always include rel="noopener noreferrer".

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    Visit Example.com
</a>

Link to an Email Address

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

Link to a Phone Number

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

Link to a Section Within the Same Page

To link to a specific section, use the id attribute on the target element.

<a href="#section-id">Go to Section</a>

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Links Example</title>
</head>
<body>

    <h2>HTML Links Demonstration</h2>

    <p>
        <a href="https://www.example.com" 
           target="_blank" 
           rel="noopener noreferrer">
           Visit Example.com
        </a>
    </p>

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

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

    <p>
        <a href="#section-id">
            Go to Section
        </a>
    </p>

    <h3 id="section-id">Target Section</h3>
    <p>You have successfully navigated to this section.</p>

</body>
</html>

HTML Images

In HTML, images are embedded using the <img> element. The <img> tag is a void (empty) element, meaning it does not require a closing tag.

At minimum, the <img> element requires the src and alt attributes.

Basic Syntax

<img src="image-url" alt="description">

Common Attributes

src — Specifies the path to the image file (absolute URL or local file path).
alt — Provides alternative text for accessibility and is displayed if the image fails to load.
width — Sets the width of the image (in pixels or percentage).
height — Sets the height of the image (in pixels or percentage).
title — Displays additional information as a tooltip when the user hovers over the image.

Example


<img src="https://example.com/image.jpg" 
     alt="Example Image"
     width="300"
     height="200"
     title="This is an example image">

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Images Example</title>
</head>
<body>

    <h2>HTML Images Demonstration</h2>

    <img src="https://via.placeholder.com/300x200"
         alt="Placeholder Image"
         width="300"
         height="200"
         title="This is a placeholder image">

</body>
</html>

HTML5 Semantic Elements

HTML5 introduced semantic elements that provide meaning and structure to web content. These elements describe the role of content clearly, improving accessibility, SEO, and maintainability.

1️⃣ Structural Semantic Elements

<header> – Introductory content or navigation.
<footer> – Footer information like copyright.
<nav> – Navigation links.
<main> – Main unique content of the page.
<section> – Thematic grouping of content.
<article> – Independent self-contained content.
<aside> – Sidebar or related content.

2️⃣ Text & Metadata Semantics

<mark> – Highlights important text.
<time> – Represents date or time.
<address> – Contact information.
<abbr> – Abbreviation with description.
<cite> – Title of a work.
<figure> – Media container.
<figcaption> – Caption for figure.

3️⃣ Form & Data Semantics

<label> – Label for input fields.
<input> – User input control.
<textarea> – Multi-line text input.
<select> – Dropdown list.
<option> – Option inside dropdown.
<datalist> – Suggested input values.
<output> – Displays calculation result.
<button> – Clickable button.

4️⃣ Media Elements

<audio> – Embeds audio player.
<video> – Embeds video player.
<source> – Multiple media sources.
<track> – Subtitles and captions.
<picture> – Responsive image container.

5️⃣ Table Elements

<table> – Defines a table.
<caption> – Table title.
<thead> – Table header section.
<tbody> – Table body section.
<tfoot> – Table footer section.
<tr> – Table row.
<th> – Header cell.
<td> – Data cell.

Example of Semantic Structure


<header>
    <h1>My Blog</h1>
</header>

<main>
    <article>
        <h2>Blog Post Title</h2>
        <p>This is the article content.</p>
    </article>
</main>

<footer>
    <p>© 2026 My Website</p>
</footer>

Key Benefits of Semantic HTML5

Accessibility – Screen readers understand content better.
SEO – Search engines index content properly.
Maintainability – Code becomes cleaner and readable.
Standardization – Follows modern web development practices.

🎯 Practice Task

Create a layout using <header>, <main>, and <footer>.
Add an <article> inside <main>.
Add a <nav> section with three links.

HTML Tables

In HTML, tables are used to display data in a structured format using rows and columns. The primary elements used to create tables are <table>, <tr>, <th>, and <td>.

Basic Structure

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Important Table Elements

<table> — Defines the table container.
<tr> — Defines a table row.
<th> — Defines a header cell (bold and centered by default).
<td> — Defines a standard data cell.
<caption> — Adds a title or description for the table.
<thead>, <tbody>, <tfoot> — Group table header, body, and footer content for better structure and styling.
colspan — Merges multiple columns into one cell.
rowspan — Merges multiple rows into one cell.

⚠️ Attributes such as border, cellpadding, cellspacing, align, and bgcolor are deprecated in HTML5. Use CSS for styling instead.

Example (Modern HTML5 Approach)

<table class="styled-table">
    <caption>User Information</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Tables Example</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
        caption {
            font-weight: bold;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>

    <h2>HTML Tables Demonstration</h2>

    <table>
        <caption>User Information</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>25</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

HTML Iframes

The <iframe> (Inline Frame) element is used to embed another HTML document within the current page. It creates a rectangular area where external content such as websites, videos, maps, or other documents can be displayed.

Basic Syntax

<iframe src="url" width="600" height="400"></iframe>

Common Attributes

src — Specifies the URL of the page or resource to embed.
width — Sets the width of the iframe (pixels or percentage).
height — Sets the height of the iframe (pixels or percentage).
title — Provides an accessible description of the iframe content (recommended for accessibility).
allowfullscreen — Allows the embedded content to be displayed in fullscreen mode.
loading — Controls loading behavior (lazy or eager).
referrerpolicy — Controls how much referrer information is sent.

⚠️ The frameborder attribute is deprecated in HTML5. Use CSS (e.g., border: none;) instead.

Example (Modern HTML5 Approach)

<iframe 
    src="https://www.example.com"
    width="600"
    height="400"
    title="Example Website"
    loading="lazy"
    style="border: none;">
</iframe>

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Iframes Example</title>
    <style>
        iframe {
            width: 600px;
            height: 400px;
            border: none;
        }
    </style>
</head>
<body>

    <h2>HTML Iframes Demonstration</h2>

    <iframe 
        src="https://www.example.com"
        title="Example Website"
        loading="lazy">
    </iframe>

</body>
</html>

HTML Media Elements

HTML5 provides built-in support for embedding multimedia content directly into web pages using the <audio> and <video> elements. These elements allow developers to add sound and video without requiring external plugins.

Audio Element

The <audio> element is used to embed sound content such as music, podcasts, or sound effects.

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

Video Element

The <video> element is used to embed video files such as tutorials, presentations, or media clips.

<video width="640" height="360" controls>
    <source src="video-file.mp4" type="video/mp4">
    <source src="video-file.webm" type="video/webm">
    Your browser does not support the video element.
</video>

Common Media Attributes

controls — Displays playback controls (play, pause, volume, etc.).
autoplay — Automatically starts playback when the page loads.
loop — Replays the media continuously.
muted — Mutes the media by default (often required with autoplay).
preload — Specifies how media should be loaded (none, metadata, auto).
width and height — Define the dimensions of the video player.
poster (video only) — Displays an image before the video starts playing.

⚠️ Best Practice: Always include multiple <source> formats to ensure cross-browser compatibility.

Example (Modern Implementation)

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

<video width="640" height="360" controls preload="metadata" poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Media Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        video, audio {
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h2>HTML Media Demonstration</h2>

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

    <video width="640" height="360" controls preload="metadata" poster="thumbnail.jpg">
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>

</body>
</html>

HTML Forms

In HTML, forms are used to collect user input and submit it to a server for processing. The primary element used to create a form is the <form> tag, along with various input elements such as <input>, <textarea>, <select>, and <button>.

Basic Structure

<form action="submit-url" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
</form>

Common Form Attributes

Attribute	Applicable Elements	Description	Example
type	<input>	Specifies the type of input (text, password, email, checkbox, radio, submit, etc.).	`<input type="email" name="useremail">`
placeholder	<input>, <textarea>	Provides a hint describing the expected value.	`<input type="text" placeholder="Enter your name">`
value	<input>, <button>	Sets the default value or button label.	`<input type="submit" value="Send">`
required	<input>, <select>, <textarea>	Makes the field mandatory before submission.	`<input type="text" required>`
disabled	<input>, <select>, <textarea>	Disables the element so it cannot be edited.	`<input type="text" disabled>`
readonly	<input>, <textarea>	Makes the input non-editable but still selectable.	`<input type="text" value="Read only" readonly>`
maxlength	<input>, <textarea>	Limits the number of characters allowed.	`<input type="text" maxlength="10">`
name	All form elements	Identifies form data when submitted to the server.	`<input type="text" name="username">`

Example

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" 
           placeholder="Enter your username" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" 
           placeholder="Enter your email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4"
              placeholder="Type your message here"></textarea>

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

Complete Code for Practice


<!DOCTYPE html>
<html>
<head>
    <title>HTML Forms Example</title>
</head>
<body>

    <h2>HTML Forms Demonstration</h2>

    <form action="/submit" 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" required><br><br>

        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="4"
                  placeholder="Type your message here"></textarea><br><br>

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

    </form>

</body>
</html>

HTML Form Input Types

The <input> element in HTML supports a wide variety of input types that allow developers to create interactive and user-friendly forms. Each input type provides specific functionality and user interface features.

Common Input Types

Input Type	Description	Example
`text`	Single-line text input for general use.	`<input type="text" name="username">`
`password`	Single-line text input that masks the entered characters.	`<input type="password" name="password">`
`email`	Input for email addresses with built-in validation.	`<input type="email" name="useremail">`
`number`	Input for numeric values with optional min, max, and step attributes.	`<input type="number" name="age" min="0" max="120">`
`checkbox`	A box that can be checked or unchecked to represent a boolean choice.	`<input type="checkbox" name="subscribe">`
`radio`	A circular button that allows selection of one option from a group.	`<input type="radio" name="gender" value="male">`

HTML Form Validation

HTML5 introduced built-in form validation features that allow developers to validate user input before it is submitted to the server. This helps improve user experience and reduce server load by catching errors on the client side.

Common Validation Attributes

required — Makes a field mandatory.
pattern — Specifies a regular expression that the input must match.
min and max — Define minimum and maximum values for numeric inputs.
step — Specifies the increment step for numeric inputs.
maxlength — Limits the number of characters allowed in text inputs.
type-specific validation — Certain input types (e.g., email, url) have built-in validation rules.

Example of Form Validation

<form action="/submit" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="0" max="120" required><br><br>
    <button type="submit">Submit</button>
</form>

Complete Code for Practice

<!DOCTYPE html>
<html>
<head>
    <title>HTML Form Validation Example</title>
</head>
<body>
    <h2>HTML Form Validation Demonstration</h2>
    <form action="/submit" method="post">
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        <label for="age">Age:</label><br>
        <input type="number" id="age" name="age" min="0" max="120" required><br><br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Introduction to HTML

Evolution of HTML

Why HTML is Important

Basic Structure of an HTML Document

Explanation of Structure

🎯 Practice Task

HTML Document Structure

Key Structural Elements

Complete Example of HTML Structure

Best Practices for HTML Structure

🎯 Practice Task

HTML Elements

Basic Structure Elements

Content Elements

Example of HTML Elements

Understanding Elements

🎯 Practice Task

HTML Attributes

Key Rules

General Syntax

Common HTML Attributes

Best Practices

🎯 Practice Task

HTML Headings

Heading Levels

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

How Headings Work

Complete Code for Practice

Best Practices

🎯 Practice Task

HTML Paragraphs

Basic Syntax

How Paragraphs Work

Line Break vs Paragraph

Complete Code for Practice

Best Practices

🎯 Practice Task

HTML Text Formatting

Common Text Formatting Tags

Visual vs Semantic Tags

Comparison Example

Complete Example

Best Practices

🎯 Practice Task

HTML Comments

Syntax for Comments

Use Cases for Comments

Example of Comments

Best Practices

🎯 Practice Task

HTML Colors

Common Methods to Specify Colors

Basic Color Reference

CSS Gradients

Gradient Syntax Example

Applying Colors to Elements

Complete Code for Practice

HTML Entities

Common HTML Entities

Example Usage

Complete Code for Practice

HTML Lists

1️⃣ Ordered List (<ol>)

Numbering Types

2️⃣ Unordered List (<ul>)

Bullet Styles (Using CSS)

3️⃣ Description List (<dl>)

Complete Code for Practice

Best Practices

🎯 Practice Task

HTML Links

Basic Syntax

Open Link in a New Tab

Link to an Email Address

Link to a Phone Number