Tagveda - Learn HTML

Introduction to HTML

What is HTML?

HTML stands for HyperText Markup Language.

It is used to create the structure of web pages.

HTML tells the browser:

What is a heading
What is a paragraph
What is an image
What is a link

👉 HTML is NOT a programming language.

It is a markup language.

History of HTML

Invented by Tim Berners-Lee
First version released in 1991
Current version: HTML5

Why HTML is used?

To create websites
To structure content
To connect CSS and JavaScript
Works on all browsers

HTML vs CSS vs JavaScript

Language	Work
HTML	Structure
CSS	Design
JavaScript	Functionality

HTML Basics

Structure of an HTML Document

Every HTML page has a fixed structure.

                        <!DOCTYPE html>

                        <html>

                          <head>

                            <title>My Website</title>

                          </head>

                          <body>

                            <h1>Hello World</h1>

                          </body>

                        </html>

This is the output of the code

<!DOCTYPE html>

Tells browser this is HTML5
Must be written at the top

<html> tag

Root element of the page
All code stays inside it

<head> tag

Contains:

Title
Meta tags
CSS
SEO info

<body> tag

Contains:

Text
Images
Videos
Forms
Links

HTML Comments

Used to explain code (not visible on page)

HTML Elements

What are HTML Elements?

HTML element = tag + content

<p>This is a paragraph</p>

This is the output of the code

Types of Elements

1. Container Elements

Have opening & closing tag
Example: <h1>Heading</h1>

2. Empty Elements

No closing tag
Example: <br>
Example: <img>
Example: <hr>

Nested Elements

Elements inside elements

This is the output of the code

Block vs Inline Elements

Block Elements

Start on new line
Take full width
Examples:<div>, <p>, <h1>

Inline Elements

Stay in same line
Take needed width
Examples : <span>, <a>, <b>

HTML Attributes

What are Attributes?

Attributes give extra information to elements.

This is the output of the code

Common Attributes

Attribute	Work
id	Unique identity
class	Group elements
style	Inline CSS
title	Tooltip text

id Attribute

Must be unique

<p id="para1">Hello</p>

This is the output of the code

class Attribute

Can be reused

<p class="text">Hello</p>

This is the output of the code

Data Attributes

Used to store extra data

Text Formatting Tags

Headings

                        <h1>Main Heading</h1>

                        <h6>Small Heading</h6>

This is the output of the code

Paragraph

<p>This is a paragraph</p>

This is the output of the code

Bold & Strong

                        <b>Bold</b>

                        <strong>Important</strong>

This is the output of the code

Italic & Emphasis

                        <i>Italic</i>

                        <em>Emphasized</em>

This is the output of the code

Underline

<u>Underlined text</u>

This is the output of the code

Superscript & Subscript

                        H<sup>2</sup>O

                        CO<sub>2</sub>

This is the output of the code

Line Break & Horizontal Line

                        <br>

                        <hr>

HTML Lists

HTML lists are used to display items in a proper order.

Unordered List (<ul>)

Shows items with bullets

                        <ul>

                          <li>HTML</li>

                          <li>CSS</li>

                          <li>JavaScript</li>

                        </ul>

This is the output of the code

Ordered List (<ol>)

Shows items with numbers

                        <ol>

                          <li>Open browser</li>

                          <li>Write code</li>

                          <li>Save file</li>

                        </ol>

This is the output of the code

Description List (<dl>)

Used for definitions

                        <dl>

                          <dt>HTML</dt>

                          <dd>Markup language for web</dd>

                        </dl>

This is the output of the code

Nested List

List inside a list

                        <ul>

                          <li>Frontend

                            <ul>

                              <li>HTML</li>

                              <li>CSS</li>

                            </ul>

                          </li>

                        </ul>

This is the output of the code

HTML Links

Links connect one page to another.

Anchor Tag (<a>)

<a href="https://google.com">Go to Google</a>

This is the output of the code

Open Link in New Tab

<a href="https://google.com" target="_blank">Open Google</a>

This is the output of the code

Relative vs Absolute URL

Absolute:

<a href="https://example.com">Website</a>

This is the output of the code

Relative:

<a href="about.html">About Page</a>

This is the output of the code

Email Link

<a href="mailto:test@gmail.com">Send Email</a>

This is the output of the code

Bookmark Link

                        <a href="#section1">Go Down</a>

                        <h2 id="section1">Section</h2>

This is the output of the code

HTML Images

Images make websites attractive.

Image Tag (<img>)

This is the output of the code

Image Attributes

Attribute	Work
src	Image path
alt	Alternate text
width	Image width
height	Image height

Image as a Link

                        <a href="home.html">

                          <img src="logo.png">

                        </a>

This is the output of the code

Image Paths

Same folder: image.jpg

Sub-folder: images/photo.png

HTML Tables

Tables are used to display data in rows and columns.

🔹 Basic Table

                        <table border="1">

                          <tr>

                            <th>Name</th>

                            <th>Age</th>

                          </tr>

                          <tr>

                            <td>Ram</td>

                            <td>18</td>

                          </tr>

                        </table>

This is the output of the code

Table Tags

Tag	Use
<table>	Table
<tr>	Row
<th>	Heading
<td>	Data

Colspan & Rowspan

<td colspan="2">Total</td>

This is the output of the code

Table Caption

<caption>Student Data</caption>

This is the output of the code

HTML Forms

Forms collect user input.

Form Tag

                        <form>

                          Name: <input type="text">

                        </form>

This is the output of the code

Input Types

                        <input type="text">

                        <input type="password">

                        <input type="email">

                        <input type="number">

This is the output of the code

Radio Button

                        <input type="radio" name="gender"> Male

                        <input type="radio" name="gender"> Female

This is the output of the code

Checkbox

                        <input type="checkbox"> HTML

                        <input type="checkbox"> CSS

This is the output of the code

Textarea

Select & Option

                        <select>

                          <option>India</option>

                          <option>USA</option>

                        </select>

This is the output of the code

Submit Button

This is the output of the code

HTML Input Types (Detailed)

HTML provides different input types to collect specific data.

Common Input Types

                        <input type="text">        <!-- Text -->

                        <input type="password">   <!-- Password -->

                        <input type="email">      <!-- Email -->

                        <input type="number">     <!-- Numbers -->

                        <input type="date">       <!-- Date -->

                        <input type="file">       <!-- Upload file -->

                        <input type="color">      <!-- Pick color -->

                        <input type="range">      <!-- Slider -->

This is the output of the code

Submit & Reset

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

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

This is the output of the code

Required Attribute

This is the output of the code

Placeholder

This is the output of the code

HTML Media (Audio & Video)

Media tags allow you to play sound and videos.

Audio Tag

                        <audio controls>

                          <source src="song.mp3" type="audio/mp3">

                        </audio>

This is the output of the code

Attributes:

controls
autoplay
loop
muted

Video Tag

                        <video width="400" controls>

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

                        </video>

This is the output of the code

Poster Images

This is the output of the code

HTML Semantic Elements

Semantic elements give meaning to the page structure.

Important Semantic Tags

                        <header>Header section</header>

                        <nav>Navigation links</nav>

                        <main>Main content</main>

                        <section>Section</section>

                        <article>Article</article>

                        <aside>Side content</aside>

                        <footer>Footer</footer>

This is the output of the code

Benefits

Better SEO
Better accessibility
Clean code

HTML Layout

Layout means page structure.

Div-based Layout (Old way)

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

                        <div id="content"></div>

                        <div id="footer"></div>

This is the output of the code

Semantic Layout (Modern)

                        <header></header>

                        <nav></nav>

                        <main></main>

                        <footer></footer>

This is the output of the code

Responsive Layout Basics

Use percentages
Use viewport meta tag

This is the output of the code

HTML Iframes

Iframe embeds another webpage.

Basic Iframe

This is the output of the code

YouTube Video Embed

This is the output of the code

Google Map Embed

This is the output of the code

Security Attributes

This is the output of the code

HTML Entities & Symbols

HTML entities are used to display special characters that HTML normally understands as code.

Why Entities are Needed?

Some characters are reserved in HTML:

<
>
&

Common HTML Entities

Symbol	Entity
<	<
>	>
&	&
©	©
®	®

Example

This is the output of the code

Emojis in HTML

This is the output of the code

HTML Meta Tags

Meta tags give information about the webpage.

Charset

This is the output of the code

Viewport (Responsive Design)

This is the output of the code

Description (SEO)

This is the output of the code

Keywords

This is the output of the code

HTML Head Elements

Elements inside <head> are not visible on page.

Title

<title>My Website</title>

This is the output of the code

Link (CSS)

This is the output of the code

Style

                        <style>

                          body { background: lightblue; }

                        </style>

This is the output of the code

Script

This is the output of the code

Base Tag

This is the output of the code

HTML Graphics

HTML supports drawings and graphics.

Canvas

Used for dynamic graphics

                        <canvas id="myCanvas" width="200" height="100"></canvas>

                        (Needs JavaScript)

This is the output of the code

SVG

Used for vector graphics

Canvas vs SVG

Canvas	SVG
Pixel-based	Vector-based
JS required	HTML based
Fast for games	Best for icons

HTML Accessibility

Accessibility helps disabled users.

Alt Text

This is the output of the code

Labels for Inputs

                        <label>Name:</label>

                        <input type="text">

This is the output of the code

ARIA Attributes

This is the output of the code

Keyboard Friendly

Use buttons instead of div
Proper tab order

HTML Responsive Design (Basics)

Responsive design means the website works well on mobile, tablet, and desktop.

Viewport Meta Tag

This is the output of the code

Responsive Images

This is the output of the code

Mobile-Friendly Tips

Use percentage width
Avoid fixed sizes
Use semantic tags

HTML APIs

HTML5 provides built-in APIs.

Geolocation API

Gets user location (with permission).

navigator.geolocation.getCurrentPosition();

This is the output of the code

Drag and Drop API

draggable="true"

This is the output of the code

Web Storage API

Local Storage

localStorage.setItem("name", "Satya");

This is the output of the code

Session Storage

sessionStorage.setItem("id", "101");

This is the output of the code

HTML SEO Basics

SEO helps websites rank on search engines.

SEO Best Practices

Use <h1> only once
Use semantic elements
Add meta description
Use alt text

SEO-Friendly Structure

                        <header>

                        <main>

                        <article>

                        <footer>

HTML Performance

Good performance = fast website.

Best Practices

Compress images
Remove unused code
Minimize HTML
Use lazy loading

Lazy Loading

This is the output of the code

HTML Best Practices

Use proper indentation
Close all tags
Use lowercase tags
Write clean comments
Use external CSS & JS

Deprecated HTML Tags

These tags are not recommended.

Tag	Reason
<font>	Use CSS
<center>	Use CSS
<marquee>	Outdated
<strike>	Use <del>

HTML with CSS

CSS styles HTML.

Inline CSS

This is the output of the code

Internal CSS

                        <style>

                          p { color: blue; }

                        </style>

This is the output of the code

External CSS (Best)

This is the output of the code

HTML with JavaScript

JavaScript adds functionality.

Script Tag

                        <script>

                          alert("Hello");

                        </script>

This is the output of the code

External JS

This is the output of the code

About Tagveda

1. Website Introduction

This website is created to help beginners learn HTML from scratch in a simple and practical way.

2. Purpose of the Website

Our goal is to make web development easy for students by providing clear explanations, examples, and practice exercises.

3. Who Can Use This Website

This website is designed for:

School students
Beginners in coding
Anyone who wants to learn HTML for free

4. What You Will Learn

Our comprehensive HTML course covers:

Introduction to HTML
HTML Basics
HTML Elements
HTML Attributes
Text Formatting Tags
HTML Lists
HTML Links
HTML Images
HTML Tables
HTML Forms
HTML Input Types
HTML Media
HTML Semantic Elements
HTML Layout
HTML Iframes
HTML Entities & Symbols
HTML Meta Tags
HTML Head Elements
HTML Graphics
HTML Accessibility
HTML Responsive Design
HTML APIs
HTML SEO Basics
HTML Performance
HTML Best Practices
Deprecated HTML Tags
HTML with CSS
HTML with JavaScript

5. Features of Your Website

Our website offers:

Easy language explanations
Practical examples
Mobile-friendly design
Free learning
Certificate after completion

6. Certificate Information

After completing all lessons and tests, learners will receive a certificate of completion.

7. About the Creator

Name of website founder

Saksham Satyadev Mishra

Role / Identity

Student & Web Development Learner
Aspiring Software Engineer
HTML Educator

Skills or Focus Area

HTML & basic web development
Frontend learning
Website design

Reason for Creating the Website

I created this website to help beginners learn HTML in an easy and practical way.

Experience Level

Beginner-friendly teaching approach

Final Quiz

Test your knowledge of all HTML topics with this comprehensive quiz!

You need to score at least 80% to pass and receive your certificate.

HTML Final Quiz

Certificate of Achievement

HTML Mastery Course

This is to certify that

John Doe

has successfully completed HTML Mastery Course with distinction

demonstrating comprehensive knowledge of HTML from basics to advanced concepts

Date: January 1, 2023

Tagveda Instructor

Saksham Mishra

Welcome to Tagveda

Introduction to HTML

What is HTML?

History of HTML

Why HTML is used?

HTML vs CSS vs JavaScript

Introduction to HTML Quiz

1. What does HTML stand for?

2. Who invented HTML?

3. What is the current version of HTML?

4. Which of the following is NOT true about HTML?

5. What is the role of CSS in web development?

HTML Basics

Structure of an HTML Document

<!DOCTYPE html>

<html> tag

<head> tag

<body> tag

HTML Comments

HTML Basics Quiz

1. What is the purpose of the <!DOCTYPE html> declaration?

2. Which tag is the root element of an HTML page?

3. Which section contains the visible content of a webpage?

4. What is the correct syntax for an HTML comment?

5. Which tag is used to define the title of a document?

HTML Elements

What are HTML Elements?

Types of Elements

1. Container Elements

2. Empty Elements

Nested Elements

Block vs Inline Elements

Block Elements

Inline Elements

HTML Elements Quiz

1. What is an HTML element composed of?

2. Which of the following is a container element?

3. Which of the following is an empty element?

4. What are nested elements?

5. Which of the following is a block element?

HTML Attributes

What are Attributes?

Common Attributes

id Attribute

class Attribute

Data Attributes

HTML Attributes Quiz

1. What is the purpose of HTML attributes?

2. Which attribute provides a unique identity to an element?

3. Which attribute is used to group elements?

4. Which attribute is used for inline CSS?

5. Which attribute provides tooltip text?

Text Formatting Tags

Headings

Paragraph

Bold & Strong

Italic & Emphasis

Underline

Superscript & Subscript

Line Break & Horizontal Line

Text Formatting Tags Quiz

1. Which tag is used for the main heading?

2. Which tag is used to create a paragraph?

3. Which tag is used to make text bold?

4. Which tag is used to emphasize text?

5. Which tag is used to underline text?

HTML Lists

Unordered List (<ul>)

Ordered List (<ol>)

Description List (<dl>)

Nested List

HTML Lists Quiz

1. Which tag is used to create an unordered list?

2. Which tag is used to create an ordered list?

3. Which tag is used to define list items?

4. Which type of list shows items with bullets?

5. Which type of list shows items with numbers?

HTML Links

Anchor Tag (<a>)

Open Link in New Tab