Welcome to Tagveda

HTML lists are used to display items in a proper order and organized format on a webpage. Lists help arrange related information clearly so users can read and understand content easily.

Lists are commonly used for:

• Menus
• Navigation bars
• Instructions
• Features
• Steps
• Definitions
• Categories

HTML provides different types of lists for different purposes.

Types of HTML Lists:

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

HTML also supports nested lists where one list can be placed inside another list.

Unordered List (<ul>)

An unordered list is used to display items with bullet points. The items are not shown in any specific order.

This is the output of the code

Features of Unordered Lists

• Displays bullet points
• Displays bullet points
• Easy to create
• Useful for grouping related items

Common Uses of Unordered Lists.

• Navigation menus
• Feature lists
• Product lists
• Food menus
• Category sections

Ordered List (<ol>)

An ordered list is used when items need to appear in a specific sequence or order.The items are automatically numbered by the browser.

This is the output of the code

Explanation

• <ol> creates an ordered list
• <ol> creates each list item
• Items are shown with numbers automatically

Features of Ordered Lists:

• Displays numbered items
• Maintains sequence
• Useful for step-by-step instructions
• Automatically updates numbering

Common Uses of Ordered Lists:

• Tutorials
• Cooking recipes
• Instructions
• Procedures
• Rankings

Description List (<dl>)

A description list is used to display terms and their descriptions or definitions.It is commonly used for dictionaries, glossaries, FAQs, and definitions.

Tags Used in Description List:

This is the output of the code

Features of Description Lists:

• Displays terms with explanations
• Organizes definitions properly
• Useful for educational websites
• Makes content easier to understand

Common Uses of Description Lists:

• Definitions
• FAQs
• Technical terms
• Glossaries
• Dictionary-style content

Nested List

In simple words:

When you put one list (like <ul> or <ol>) inside a <li> (list item) of another list, it is called a nested list.

Features of Nested Lists:

• Creates categories and subcategories
• Organizes content properly
• Useful for menus and structures
• Makes webpages cleaner

Common Uses of Nested Lists:

• Website menus
• Course structures
• File directories
• Categories and subcategories
• Multilevel navigation

HTML links are used to connect one webpage to another webpage, website, file, email address, or section of the same page. Links are one of the most important parts of the internet because they allow users to navigate between webpages easily.

Anchor Tag (<a>)

What is anchor tag?

The anchor tag (<a>) is used to create hyperlinks in HTML. It helps users move from one page to another page, website, file, or section.Hyperlinks are clickable elements such as text or images.The most important attribute of the anchor tag is the href attribute.The href attribute specifies the destination of the link.

This is the output of the code

Explanation:

• <a> creates the hyperlink
• href contains the destination URL
• Go to Google is the clickable text

Features of Anchor Tag:

• Creates clickable links
• Connects webpages together
• Helps website navigation
• Can link text, images, files, and sections

Open Link in New Tab

Open link in new tab means:

When you click a link, it does not replace your current page.Instead, it opens the link in a new browser tab, and your current page stays open.

This helps users keep the current webpage open while visiting another webpage.

Target Attribute

The target attribute is used to control where the linked page opens.

This is the output of the code

Benefits of Opening Links in New Tab:

• Keeps the original webpage open
• Improves user experience
• Useful for external websites
• Helps users multitask easily

Relative vs Absolute URL

URLs are addresses used to locate webpages or resources.

There are two main types of URLs in HTML:

• Absolute URL
• Relative URL

Absolute:

What is Absolute URL?

An Absolute URL is a complete web address that shows the full path to a webpage or resource on the internet.

It contains:

• Protocol (https://)
• Domain name
• Path (if needed)

Absolute URLs can work from any website because they contain the complete address.

This is the output of the code

Features of Absolute URL:

Full web address

Works from anywhere

Mostly used for external websites

Common Uses of Absolute URLs:

• Linking other websites
• Connecting external resources
• Social media links
• Online documents

Relative:

What is Ralative URL?

A Relative URL is a short path that points to a file or page within the same website.It does not include the full domain name.Relative URLs are mainly used for internal website navigation.

This is the output of the code

Features of Relative URLs

• Shorter than absolute URLs
• Easier to manage
• Useful for internal pages
• Faster to write

Common Uses of Relative URLs:

• About pages
• Contact pages
• Internal navigation
• Website menus

Email Link

What is Email Link?

An email link is used to open the user’s email app (like Gmail) with a ready-to-send email.

Explanation

• mailto: opens the email app
• The email address becomes the receiver
• A new email draft is created automatically

This is the output of the code

Features of Email Links:

• Opens email application
• Saves time for users
• Makes communication easier
• Commonly used on contact pages

Bookmark Link

What is Bookmark link?

A bookmark link is used to jump to a specific section of the same webpage.

Bookmark links are very useful for:

• Long pages
• Table of contents
• FAQs
• Quick navigation

How Bookmark Links Work:

• href="#idname" in the link
• id="idname" in the target section

Explanation:

• href="#section1" creates the bookmark link
• id="section1" marks the destination section

This is the output of the code

Features of Bookmark Links:

• Quick navigation
• Easy movement inside webpage
• Useful for long content
• Improves readability

Importance of HTML Links

• Connect webpages together
• Help website navigation
• Improve user experience
• Allow easy access to information
• Make the internet interactive

Conclusion

HTML links are one of the most essential parts of web development. They help users move between webpages, websites, sections, files, and email applications easily.By understanding anchor tags, new tab links, absolute URLs, relative URLs, email links, and bookmark links, beginners can create professional and user-friendly websites with smooth navigation and better user experience.

Images make a website more beautiful, attractive, and interactive. They help users understand content easily and improve the overall design of a webpage. In HTML, images are added using the <img> tag. Images can be photos, logos, icons, banners, screenshots, or illustrations.

Image Tag (<img>)

What is Image Tag? (<img>)

The <img> tag is used to display images on a webpage. It is an empty tag, which means it does not need a closing tag.

This is the output of the code

Image Attributes

src Attribute

What is src?

The src attribute means source. It tells the browser where the image file is stored.

alt Attribute

What is alt?

The alt attribute provides alternative text if the image does not load properly. It is also useful for screen readers and improves website accessibility.

Importance of alt

• ✔ Helps visually impaired users
• ✔ Improves SEO
• ✔ Shows text if image is missing
• ✔ Makes websites more user-friendly

Width and Height

What is Width and Height?

These attributes are used to control the size of the image.

Image as a Link

What is the use of image as a link?

An image can also work like a button or hyperlink. When the user clicks the image, another webpage or website opens.

This is the output of the code

Explanition

• <a> tag creates the link
• <img> tag displays the image
• Clicking the image opens home.html

Image Paths

What is image paths

mage path means the location of the image file that is given inside the src attribute.If the path is wrong, the image will not display.

Types of Image Paths

• Relative Path
• Absolute Path

Relative Path

What is relative path?

A relative path is used when the image is stored inside your project folder.

Advantages of Relative Path

• ✔ Faster loading
• ✔ Works offline
• ✔ Easy to manage project files
• ✔ Best for local websites

Absolute Path

What is absolute path?

An absolute path is used when the image comes from the internet or another website.

Advantages of Absolute Path

• ✔ No need to store image in project folder
• ✔ Useful for CDN and online images
• ✔ Saves storage space

Disadvantages

• ❌ Needs internet connection
• ❌ Image may disappear if website removes it

Common Image Formats:

Best Practices for Images

• ✔ Always use alt attribute
• ✔ Use correct file names
• ✔ Compress images for faster loading
• ✔ Use proper width and height
• ✔ Keep images inside a separate folder like images/
• ✔ Use meaningful image names

Summary

img tag is used to display images

src defines image location

alt provides alternative text

width and height control image size

Images can also work as links

Relative paths use local project files

Absolute paths use internet image URLs

Correct image paths are very important

Tables are used to display data in rows and columns.They help organize information in a clean and structured way.

Examples of tables:

• Student marks table
• Product price list
• School timetable
• Cricket scorecard

🔹 Basic Table

What is a Table?

A table is made using rows and columns.

• Rows go sideways
• Columns go up and down

HTML uses different tags to create tables.

This is the output of the code

Important Table Tags

🔹 Understanding Each Tag:

1. <table> Tag

What is <table> Tag?

The <table> tag is used to create a table in HTML.Everything written inside this tag becomes part of the table.

2. <tr> Tag

What is <tr> Tag

<tr> stands for Table Row.It creates a row inside the table

3.<th> Tag

What is <th> tag?

<th>stands for Table Heading.It creates heading cells.

Text inside <th> is usually:

• Bold
• Center aligned

4. <td> Tag

What is <td> tag

<td> stands for Table Data.It is used to insert normal data inside the table.

Colspan & Rowspan

These are attributes used in <td> or <th> to merge cells in a table.

Colspan

What is the use of Colspan?

colspan is used to merge columns.It merges cells sideways (→).

Rowspan

What is the use of Rowspan?

rowspan is used to merge rows.It merges cells up-down (↓).

This is the output of the code

Table Caption

What is <caption> Tag?

The <caption> tag is used to give a title to a table.It appears at the top of the table.

Forms are used to collect user input on a webpage.

Examples of form data:

• Name
• Email
• Password
• Password
• Feedback
• Gender
• Country selection

Forms are very important in websites like:

• Login pages
• Signup pages
• Contact forms
• Registration forms

Form Tag

what is <form> Tag?

The <form> tag is used to collect user input and send it to a server.Everything written inside the <form> tag becomes part of the form.

This is the output of the code

1.Input Types

What is <input> Tag?

The <input> tag is used to create input fields where users can type or select data.

This is the output of the code

2. Password Input

What is Password Input?

Used to enter passwords.The text becomes hidden using dots or stars.

3. Email Input

What is Email Input?

Used to enter email addresses.

4. Number Input

What is Number Input?

Used to enter numbers only.

Radio Button

What is radio button?

A radio button is used when the user can select only ONE option from multiple choices.

Example:

• Gender selection
• Language selection

This is the output of the code

Why is name Important?

The name attribute connects radio buttons together.If both radio buttons have the same name, only one option can be selected.

Checkbox

What is Checkbox?

A checkbox is used when the user can select multiple options.

Example:

• Skills
• Hobbies
• Subjects

This is the output of the code

Textarea

What is textarea?

A <textarea> is used to create a multi-line input box where users can write long text (like messages, comments, feedback).

It is used for:

• Messages
• Feedback
• Comments
• Descriptions

Select & Option

These tags are used to create a dropdown list (like a menu where you choose one option).

Select Tag

What is th work of select tag?

Work: Creates the dropdown box

Option

What is the work of Option Tag?

Work: Creates the dropdown box

This is the output of the code

Submit Button

What is the work of submit button?

A submit button is used to send form data to the server.

HTML provides different input types to collect specific kinds of data from users. Input fields are created using the <input> tag.Different input types help users enter the correct information easily and improve the user experience of a website.

Explaination Of Downside Written Code:

<input type="text"> used for enter normal text like name or city in form Called Text Input.

<input type="password"> used for enter passwords securely.The characters are hidden using dots or stars Called Password Input.

<input type="email">Used to enter an email address.The browser checks if the entered text is in email format Called Email Input.

<input type="number">Used to enter only numbers Called Number Input.

<input type="date">Used to select a date from a calendar Called Date Input.

<input type="file">Used to upload files like images, PDFs, or documents Called File Input.

<input type="color">Used to select a color from a color picker Called Color Input.

<input type="range">Used to create a slider for selecting values Called Range Input.

Common Input Types

This is the output of the code

Submit & Reset

HTML forms also provide buttons for submitting and resetting data.

Submit Button

The submit button sends form data to the server.

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

Reset Button

The reset button clears all form fields and restores default values.

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

This is the output of the code

Required Attribute

What is required attribute?

The required attribute makes a field compulsory.The form cannot be submitted until the user fills that field.

Benefits of Required Attribute:

• Prevents empty submissions.
• Ensures important information is entered.
• Improves form validation.

This is the output of the code

Placeholder

What is Placeholder?

A placeholder is a short hint shown inside an input box or textarea.It helps users understand what information should be entered.

This is the output of the code

Benefits of Placeholder:

• Gives guidance to users
• Improves user experience
• Makes forms easier to understand

Conclusion

HTML input types help websites collect different kinds of user data easily and correctly.Using attributes like required and placeholder makes forms more user-friendly and interactive.

HTML provides powerful media tags that allow you to easily play audio (sound/music) and video files directly on a webpage without any external software.These tags make websites more interactive, engaging, and user-friendly.

Audio Tag

What is audio tag?

The <audio> tag is used in HTML to embed sound or music into a webpage.It allows users to play, pause, and control audio files directly in the browser.

This is the output of the code

Attributes of Audio Tag

1. controls

• controls (Work: Shows media control buttons Like:Play▶ Pause⏸ Volume🔊 Fullscreen⛶)
• autoplay(Starts playing automatically.)
• loop(Starts playing automatically)
• muted(Starts media with no sound)

2. autoplay

This attribute makes the audio start playing automatically when the page loads.

Code : <audio autoplay>

⚠️ Note: Most browsers block autoplay unless the audio is muted.

3. loop

This makes the audio repeat continuously after it ends.

Code : <audio loop>

Eg: Background music in games or websites.

4. muted

This starts the audio with no sound.

Useful when you want audio to play without disturbing the user.

Video Tag

What is video tag?

The <video> tag is used in HTML to embed video content on a webpage.It allows users to watch videos directly in the browser with controls like play, pause, and volume.

This is the output of the code

🎥 Features of Video Tag

• Supports multiple video formats (MP4, WebM, Ogg)
• Built-in playback controls
• Can be resized using width and height
• Works without external plugins

Poster Images

What is poster image?

The poster attribute is used in the <video> tag to display an image before the video starts playing.It acts like a thumbnail preview for the video.

Semantic elements give meaning to the structure of a webpage.They clearly describe the purpose of different parts of the page to browsers, developers, and search engines.Using semantic tags makes the website more organized, readable, and professional.

Important Semantic Tags

This is the output of the code

Benefits of Semantic Elements

1. Better SEO

Search engines like Google can understand the webpage structure more easily.This improves website ranking in search results.

2. Better Accessibility

Screen readers can understand semantic tags better, helping visually impaired users navigate websites easily.

3. Cleaner Code

Semantic HTML makes code more organized, readable, and easier to maintain.

4. Easy Website Structure

Developers can quickly understand which part of the code belongs to the header, footer, navigation, or main content.

5. Improves User Experience

A properly structured webpage loads and works more efficiently for users.

6. Helpful for Team Projects

When multiple developers work on the same project, semantic tags make collaboration easier because the code is easy to understand.

Layout means the structure or arrangement of elements on a webpage.It defines where different sections like the header, menu, content area, sidebar, and footer will appear on the screen.

A good layout makes a website:

• Easy to read
• User-friendly
• Attractive
• Responsive on all devices

Web developers use HTML layout techniques to organize webpage content properly.

Div-based Layout (Old way)

What is Div-based Layout (Old way)?

Before HTML5 was introduced, developers mainly used <div> (division) tags to create the complete layout of websites.The <div> tag itself has no meaning.It is simply a container used to group HTML elements together.

Developers used different IDs or classes to identify sections like:

• Header
• Navigation menu
• Main content
• Sidebar
• Footer

This is the output of the code

Problems with Div-based Layout

1. Difficult to Understand

Since everything uses <div>, developers must read IDs and classes to understand the layout.

<2. Poor Readability

Large projects become confusing because too many <div> tags are used.

3. Less SEO Friendly

Search engines cannot easily identify which part is the header, navigation, or footer.

4. Accessibility Issues

Screen readers cannot clearly understand the page structure.

Semantic Layout (Modern)

What is Semantic Layout (Modern)?

Semantic Layout means using meaningful HTML5 tags to create webpage structure instead of relying only on <div> tags.Semantic tags clearly describe the purpose of each section of the webpage.

This is the output of the code

These tags improve:

• Readability
• SEO
• Accessibility
• Code organization

Responsive Layout Basics

Why we use Responsive Layout Basics?

Used for the top section of the webpage.

• Website title
• Logo
• Navigation links

An iframe (Inline Frame) is an HTML element used to display another webpage, video, map, or external content inside the current webpage.

Iframes are commonly used for:

• Embedding YouTube videos
• Showing Google Maps
• Displaying external websites
• Adding online documents
• Embedding forms or apps

Basic Iframe

What is basic iframe?

A Basic Iframe is the simplest use of the <iframe> tag to display another webpage inside your current webpage.

Important Iframe Attributes

• src(The src attribute specifies the webpage or file to display inside the iframe.) Eg: <iframe src="https://example.com"></iframe>
• width(Sets the width of the iframe.) Eg: <iframe src="https://example.com" width="500"></iframe>
• height(Sets the height of the iframe.) Eg: <iframe src="https://example.com" height="500"></iframe>
• title(Provides a title for accessibility and screen readers.) Eg: <iframe src="https://example.com" title="Example.png"></iframe>

Advantages of Iframes

• 1. Easy Content Embedding.
• 2. Saves Development Time
• 3. Interactive Content
• 4. Reusable Components

Disadvantages of Iframes

• 1. Slower Page Loading
• 2. Security Risks
• 3. SEO Limitations

This is the output of the code

YouTube Video Embed

What is YouTube Video Embed?

YouTube Video Embed means displaying a YouTube video directly on your webpage using an <iframe>.Instead of sending users to YouTube, the video can play inside your website.

This is the output of the code

Benefits of YouTube Embed

• 1. Videos Play Directly on Website
• 2. Better User Experience
• 3. Useful for Tutorials
• 4. Saves Server Storage

Google Map Embed

What is Google Map Embed?

Google Map Embed means showing a Google Map directly on your webpage using an <iframe>.

This helps users find:

• Locations
• Shops
• Offices
• Schools
• Restaurants

This is the output of the code

Benefits of Google Map Embed

• 1. Easy Navigation
• 2. Professional Appearance
• 3. Helpful for Customers
• 4. Interactive Features

Security Attributes

What is security attributes?

Security attributes are used to protect your webpage when embedding external content using <iframe>.

They help prevent:

• Malicious scripts
• Unsafe websites
• Unauthorized actions
• Data theft

Important Security Attributes

sandbox:The sandbox attribute restricts what the iframe content can do.

Example:

HTML entities are special codes used to display reserved characters, symbols, and emojis on a webpage. Sometimes, certain characters in HTML are treated as part of the code instead of normal text. To solve this problem, HTML entities are used.HTML entities always start with an ampersand (&) and end with a semicolon (;).

Why HTML Entities are Needed?

Some characters are reserved in HTML because they are used in tags and coding syntax. If we directly write these characters in HTML, the browser may misunderstand them as HTML code.

Reserved characters include:

• < Less than symbol
• > Greater than symbol
• >& Ampersand symbol

Common HTML Entities

Example

This is the output of the code

Emojis in HTML

HTML also supports emojis using entity numbers. Emojis make webpages more attractive and interactive.

Meta tags provide information about the webpage to browsers and search engines.They are written inside the <head> section of an HTML document.

Meta tags help with:

• Proper text display
• Responsive design
• SEO (Search Engine Optimization)
• Better search engine ranking
• Website description and keywords

Charset

Why we use Charset?

Charset defines how text, letters, numbers, symbols, and emojis are encoded and displayed on a webpage.Without the correct charset, some characters may appear as strange symbols or broken text.

The most commonly used charset is UTF-8 because it supports:

• English letters
• Hindi characters
• Emojis 😊
• Special symbols
• Almost all world languages

This is the output of the code

Explanation

• UTF-8 → Universal character encoding standard
• charset → Defines character encoding
• meta → Meta information tag

Benefits of UTF-8

• Supports multiple languages
• Displays emojis correctly
• Prevents text corruption
• Recommended for modern websites

Viewport (Responsive Design)

What is viewport?

Viewport is the visible area of the screen where a webpage is displayed.

Different devices have different screen sizes:

• Mobile phones
• Tablets
• Laptops
• Desktop computers

The viewport meta tag helps the webpage adjust properly on all devices.

This is the output of the code

Explanation

• width=device-width → Sets webpage width according to device width
• initial-scale=1.0 → Sets the default zoom level

Benefits of Viewport Tag

• Makes websites mobile-friendly
• Improves responsive design
• Prevents zooming issues
• Gives better user experience
• Important for modern web development

Description (SEO)

Waht is Description (SEO)?

Description is a short summary of a webpage.Search engines like Google use this description to understand webpage content.The description often appears in search results below the webpage title.

This is the output of the code

Explanation

• name="description" → Defines webpage description
• content="" → Contains summary text of the webpage

Benefits of Description Meta Tag

• Improves SEO
• Helps users understand webpage content
• Can increase click rate in search results
• Makes webpage more professional

Keywords

Waht is keywords?

Keywords are important words related to the content of a webpage.They help search engines identify the main topic of the webpage.

This is the output of the code

Explanation

• keywords → Important searchable terms
• content="" → Contains related topic words

Benefits of Keywords

• Helps organize webpage topics
• Improves search relevance
• Describes website content clearly
• Useful for content categorization

Conclusion

HTML meta tags are very important for every webpage because they provide useful information to browsers and search engines. Meta tags help webpages display text correctly, adjust properly on different screen sizes, improve website SEO, and describe webpage content clearly.

Important meta tags like:

• charset help display characters and symbols correctly,
• viewport makes websites responsive and mobile-friendly,
• description improves search engine visibility,
• keywords describe the main topic of the webpage.

Using proper meta tags makes a website more professional, user-friendly, and optimized for modern web development.

The <head> section contains important information about the webpage.Elements inside the <head> tag are not directly visible on the webpage, but they help browsers, search engines, CSS, and JavaScript work properly.

The <head> section usually contains:

• Title
• Meta tags
• CSS links
• Style tags
• JavaScript files
• Base URL settings

Title

What is title?

The <title> tag defines the name of a webpage.

The title appears:

• On the browser tab
• In search engine results
• When bookmarking a webpage

A good title helps users and search engines understand the webpage content.

This is the output of the code

Explanation

• <title> → Defines webpage title
• Text inside title → Name shown on browser tab

Benefits of Title Tag

• Improves SEO
• Helps users identify the webpage
• Appears in search engine results
• Makes website look professional

Link (CSS)

What is Link (css)?

The <Link> tag is used to connect an external CSS file with an HTML document.CSS (Cascading Style Sheets) is used to design and style webpages.Instead of writing CSS inside HTML every time, developers usually create a separate CSS file and attach it using the <Link> tag.

This is the output of the code

Explanation

• rel="stylesheet" → Defines relationship as stylesheet
• href="style.css" → Location of CSS file

Benefits of Using External CSS

• Keeps HTML clean
• Makes styling easier
• Reusable CSS for multiple pages
• Faster website maintenance
• Better webpage organization

Style

What is style tag?

The <style> tag is used to write CSS directly inside an HTML document.

It changes the appearance and design of HTML elements such as:

• Colors
• Fonts
• Backgrounds
• Borders
• Spacing

The style tag is usually placed inside the <head> section.

This is the output of the code

Benefits of Style Tag

• Quick styling inside one file
• Useful for small projects
• No need for external CSS file
• Easy testing and practice

Script

What is script tag?

The <script> tag is used to add JavaScript to a webpage.JavaScript makes webpages interactive and functional.

With JavaScript, websites can:

• Show alerts
• Create animations
• Validate forms
• Handle button clicks
• Build interactive games
• Update content dynamically

This is the output of the code

Explanation

• Script → Adds JavaScript
• src="script.js" → Connects external JavaScript file

Benefits of Script Tag

• Adds functionality to webpages
• Makes websites interactive
• Improves user experience
• Helps create dynamic websites

Base Tag

What is base tag?

The<base> tag tag defines a default URL or default target for all relative links on a webpage.It helps browsers understand the main base path of the website.

This is the output of the code

Benefits of Base Tag

• Simplifies relative links
• Helps manage website paths
• Useful for large websites
• Reduces repeated URLs

Important Note

Only one <base> tag should normally be used in a webpage.

Conclusion

HTML head elements are very important because they control the webpage behind the scenes. They help define the webpage title, connect CSS files, add styles, include JavaScript functionality, and manage webpage links.

Using head elements properly makes a website

• More organized
• Responsive
• Interactive
• Professional
• SEO-friendly

HTML supports graphics and drawings that help make webpages more interactive, attractive, and visually appealing.

Using HTML graphics, developers can create:

• Shapes
• Animations
• Charts
• Icons
• Games
• Logos
• Interactive designs

The two most common technologies used for graphics in HTML are:

• Canvas
• SVG

Canvas

The <canvas> tag is used to draw graphics on a webpage using JavaScript.

Canvas provides a blank drawing area where developers can create:

• Lines
• Circles
• Rectangles
• Animations
• Games
• Images
• Interactive graphics

Canvas itself only creates the drawing space.JavaScript is required to actually draw anything inside the canvas.

This is the output of the code

Explanation

• canvas → Creates drawing area
• id="myCanvas" → Identifies the canvas
• width="200" → Canvas width
• height="100" → Canvas height

What This Code Does

• Creates a canvas
• Uses JavaScript to access canvas
• Draws a blue rectangle

Features of Canvas

• Fast rendering
• Good for animations
• Best for games
• Supports real-time graphics
• Works well for image editing tools

Advantages of Canvas

• High performance
• Smooth animations
• Great for game development
• Suitable for complex graphics

Disadvantages of Canvas

• Needs JavaScript
• Graphics are pixel-based
• Shapes cannot be easily edited later

SVG

SVG stands for Scalable Vector Graphics.SVG is used to draw shapes, icons, logos, and graphics using HTML/XML code.Unlike Canvas, SVG graphics are vector-based, meaning they are created using mathematical shapes instead of pixels.SVG graphics stay clear and sharp even when zoomed in or resized.

• Resolution independent
• Scalable without losing quality
• Easy to edit
• Supports animation
• Works with CSS and JavaScript

Advantages of SVG

• Best for logos and icons
• Small file size
• High-quality graphics
• Easy customization

Disadvantages of SVG

• Not ideal for heavy game graphics
• Can become slower with very complex designs

Canvas vs SVG

Conclusion

HTML graphics help developers create modern, interactive, and visually attractive websites. The two main graphic technologies are Canvas and SVG.

• Canvas is best for games, animations, and fast graphics rendering.
• SVG is best for icons, logos, and scalable designs.

Both technologies are very important in modern web development and are widely used in websites, applications, and interactive user interfaces.

HTML Accessibility means designing web pages so that everyone can use them easily, including people with disabilities. Accessibility helps users who may have difficulty seeing, hearing, moving, or understanding content. A good accessible website works properly with screen readers, keyboards, and other assistive technologies. Accessibility also improves the overall user experience for everyone.Web accessibility is important because the internet should be usable by all people. Proper accessibility makes websites easier to navigate, understand, and interact with on different devices and for different users.

Alt Text

What is alt text?

Alt text (alternative text) is a short description added to an image. It helps screen readers explain the image to visually impaired users. Alt text is also useful if the image does not load properly because the browser will show the text instead.

This is the output of the code

Why Alt Text is Important?

• Helps visually impaired users understand images
• Improves website accessibility
• Helps search engines understand images
• Useful when images fail to load
• Makes web pages more user-friendly

Good Alt Text Tips

• Keep descriptions short and clear
• Describe the important part of the image
• Avoid unnecessary words like “image of”
• Write meaningful descriptions

Labels for Inputs

What is labels for inputs?

Labels are text descriptions connected to form fields such as text boxes, checkboxes, radio buttons, and password fields. Labels tell users what information they need to enter.

This is the output of the code

Why Labels are Important?

• Help users understand form fields clearly
• Improve accessibility for screen reader users
• Make forms easier to use
• Increase user friendliness
• Help users click labels to focus on inputs

ARIA Attributes

What aria attributes?

ARIA stands for Accessible Rich Internet Applications. ARIA attributes help improve accessibility for users who use screen readers or assistive technologies. They provide extra information about elements on a webpage.

Here, the screen reader will read “Close” instead of just saying “X”.

This is the output of the code

Common ARIA Attributes

Why ARIA is Important?

• Helps screen readers understand web elements
• Improves accessibility of interactive content
• Makes websites easier to navigate
• Supports users with disabilities
• Enhances user experience

Keyboard Friendly Design

A keyboard-friendly website allows users to navigate without using a mouse. Many users depend on keyboards or assistive devices to browse websites.

Important Rules

Use Buttons Instead of Divs

Buttons are naturally keyboard accessible.

Example

Buttons can be focused using the keyboard and activated with the Enter or Space key.

Proper Tab Order

Tab order is the order in which users move through elements when pressing the Tab key.

Good Practices

• Keep navigation order logical
• Avoid random tab movement
• Place important elements first
• Use semantic HTML elements

Additional Accessibility Tips

Use Proper Headings

Use Enough Color Contrast

Add Captions to Videos

Make Links Clear

Example

Clear links help users understand the purpose of the link.

Conclusion

HTML Accessibility is an important part of web development. Accessible websites are easier to use for everyone, including people with disabilities. By using alt text, labels, ARIA attributes, keyboard-friendly elements, proper headings, and clear navigation, developers can create websites that are inclusive, professional, and user-friendly.Accessibility is not only about following rules but also about making the internet available to all users equally.

HTML Responsive Design means creating websites that automatically adjust and look good on all screen sizes such as mobile phones, tablets, laptops, and desktop computers. A responsive website improves readability, user experience, and accessibility because users can easily use the website on any device without zooming or scrolling sideways.Today, most people browse websites using smartphones, so responsive design is very important in modern web development.

Viewport Meta Tag

What is viewport meta tag?

The viewport meta tag tells the browser how to control the page’s size and scaling on different devices. It helps the webpage fit properly on mobile screens and prevents the page from appearing too zoomed out.Without the viewport tag, websites may look very small on phones because browsers try to display the full desktop-sized page.

This is the output of the code

Explanation

• width=device-width → Sets the width of the page according to the device screen width.
• initial-scale=1.0 → Sets the initial zoom level when the page first loads.

This tag should usually be placed inside the <head> section of the HTML document.

Benefits of Viewport Meta Tag

• Makes websites mobile-friendly
• Improves readability on small screens
• Helps responsive layouts work correctly
• Prevents unnecessary zooming
• Improves user experience

Responsive Images

What is responsive images?

Responsive images are images that automatically resize themselves according to the screen size of the device. They prevent images from overflowing outside the screen and help webpages look clean and professional.Responsive images are very useful because users open websites on many different screen sizes.

This is the output of the code

Explanation

• max-width:100% → Makes the image shrink when needed so it never becomes wider than its container.
• height:auto → Maintains the correct image proportions.

Advantages of Responsive Images

• Images fit properly on all devices
• Faster loading on smaller screens
• Better user experience
• Cleaner website layout
• Prevents horizontal scrolling

Mobile-Friendly Tips

Creating a mobile-friendly website is an important part of responsive web design. A mobile-friendly website is easy to read, easy to navigate, and works smoothly on smaller screens.

Common Mobile-Friendly Tips

1. Use Percentage Width

Instead of fixed widths like 500px, use percentages such as 100% so elements can resize automatically.

Example

2. Avoid Fixed Sizes

Avoid fixed heights and widths because they may not fit properly on small devices.

3. Use Semantic Tags

Semantic HTML tags make the structure of the webpage clearer for browsers, developers, and screen readers.

4. Use Flexible Layouts

Flexible layouts automatically adjust content according to screen size.

Common methods:

• Flexbox
• CSS Grid
• Media Queries

5. Make Text Readable

Use readable font sizes and enough spacing between elements.

6. Optimize Buttons and Links

Buttons should be large enough to tap easily on touchscreens.

7. Test on Different Devices

Always test the website on Mobile phones,Tablets,Laptops,Desktop computers

Conclusion

Responsive Design is an essential part of modern web development. By using viewport meta tags, responsive images, flexible layouts, and mobile-friendly techniques, developers can create websites that look attractive and work properly on every device. Responsive websites provide a better experience for users and help websites become more professional and accessible.

HTML APIs are tools provided by the web browser that help developers perform powerful and interactive tasks using JavaScript. APIs make websites smarter, faster, and more user-friendly. With the help of APIs, websites can access device features, store information, create animations, handle multimedia, and much more.APIs are very important in modern web development because they allow websites to behave like real applications. Many popular websites and apps use APIs to improve user experience.

Geolocation API

What is Geolocation API ?

The Geolocation API is used to get the current location of the user with their permission. It can detect the user's latitude and longitude using GPS, Wi-Fi, or mobile network information.

This API is commonly used in:

• Maps and navigation apps
• Food delivery apps
• Weather websites
• Ride booking services
• Nearby store finders

Before accessing the location, the browser asks the user for permission to protect privacy and security.

This is the output of the code

Drag and Drop API

What is drag and drop API?

The Drag and Drop API allows users to drag an element and drop it into another place on a webpage. It helps make websites more interactive and user-friendly.

Using this API, users can:

• Move images
• Rearrange items
• Upload files by dragging
• Create games and interactive apps
• Build task management boards

The draggable="true" attribute is used to make an element draggable.

This is the output of the code

Web Storage API

The Web Storage API allows websites to store data directly inside the browser. This helps websites remember information even after refreshing the page.

There are two main types of Web Storage:

• Local Storage
• Local Storage

Web storage is faster and easier than using cookies for storing small amounts of data.

Local Storage

What is local storage?

Local Storage stores data permanently in the browser until the user removes it manually. Even if the browser is closed and reopened, the stored data remains available.

It is commonly used for:

• Saving user preferences
• Dark mode settings
• Remembering usernames
• Storing game progress
• Saving website settings

This is the output of the code

Session Storage

What is session storage?

Session Storage stores data temporarily while the browser tab is open. Once the tab or browser is closed, the stored data is automatically deleted.

It is useful for:

• Temporary login information
• Form data
• Shopping cart during a session
• One-time website data

Session storage is safer for temporary information because the data does not stay permanently.

This is the output of the code

Advantages of HTML APIs

• Make websites interactive and modern
• Help websites store and manage data
• Improve user experience
• Allow access to browser features
• Used in real-world web applications

Conclusion

HTML APIs are powerful browser tools that help developers create advanced and interactive websites. APIs like Geolocation, Drag and Drop, and Web Storage are widely used in modern web development to improve functionality and user experience. Learning these APIs is an important step toward becoming a skilled web developer.

SEO stands for Search Engine Optimization. It is the process of improving a website so that it can rank higher on search engines like Google, Bing, and Yahoo. Good SEO helps more people find your website when they search for information online.

SEO is very important because websites with better SEO usually get:

• More visitors
• Better visibility
• Higher rankings
• Improved user experience
• Faster website growth

HTML plays a very important role in SEO because search engines read HTML code to understand the content of a webpage.

SEO Best Practices

Use <h1> only once

The <h1> tag is the main heading of the webpage. It tells search engines what the page is mainly about.

Using only one <h1> tag helps search engines clearly understand the main topic of the page.

Why It Is Important

• Improves search engine understanding
• Improves search engine understanding
• Helps users quickly identify the topic

2. Use Semantic Elements

What are Semantic Elements?

Semantic elements are HTML tags that clearly describe the meaning of the content inside them. These elements help both users and search engines understand the webpage structure better.

Common semantic elements include:

• <header>
• <main>
• <section>
• <article>
• <nav>
• <footer>

3. Add Meta Description

What is a Meta Description?

A meta description is a short summary of a webpage. Search engines often display this text in search results below the page title.

A good meta description:

• Explains the webpage content
• Attracts users to click
• Improves SEO performance

4. Use Alt Text for Images

What is Alt Text?

Alt text (alternative text) is a description added to images using the alt attribute. It helps search engines understand images and also improves accessibility for visually impaired users.

Benefits of Alt Text

• Improves SEO
• Helps screen readers
• Displays text if image fails to load
• Makes websites more accessible

SEO-Friendly Structure

What is SEO-friendly structure?

SEO-friendly structure means organizing your website in a clean and understandable way so that search engines can easily read and rank the content.

A properly structured website:

• Loads faster
• Is easier to navigate
• Improves user experience
• Helps search engines index pages correctly

Search engines prefer websites that use proper HTML structure and semantic elements.

This structure clearly separates:

• Header content
• Main content
• Articles
• Footer information

This helps both users and search engines understand the webpage easily.

Conclusion

HTML SEO Basics are important for creating websites that rank better on search engines and provide a good user experience. Using semantic elements, proper headings, meta descriptions, and alt text helps search engines understand webpages more effectively. Learning SEO basics is an important step in becoming a professional web developer and creating successful websites.

HTML Performance means making a website load fast and work smoothly on all devices. A fast website gives users a better experience and helps reduce loading time. Good performance is important because visitors may leave a website if it takes too long to open. Search engines like Google also prefer faster websites, which can improve SEO rankings.

Why Performance is Important?

• Faster websites improve user experience.
• Pages open quickly even on slow internet connections.
• Better performance can improve SEO rankings.
• Reduces data usage on mobile devices
• Makes websites smoother and more responsive.

Best Practices for Better Performance

Compress Images

Large images slow down a website. Compressing images reduces their file size while keeping good quality.

• Use JPG or WebP for photos.
• Use PNG only when transparency is needed.
• Resize images before uploading.

Remove Unused Code

Extra HTML, CSS, and JavaScript files can make a website slower. Remove unnecessary code and files that are not being used.

Benefits:

• Faster loading speed
• Cleaner code
• Easier maintenance

Minimize HTML

Minimizing HTML means removing unnecessary spaces, comments, and lines from the code to make the file smaller.

Best Practices

• Compress images
• Remove unused code
• Minimize HTML
• Use lazy loading

Example

Lazy Loading

What is lazy loding?

Lazy Loading means loading content (like images or videos) only when they are needed, not all at once. This improves website speed and saves internet data. It is especially useful for pages that contain many images.

Without lazy loading:

• All images load immediately.
• Website becomes slower.
• More internet data is used.

With lazy loading:

• Images load only when visible on the screen.
• Faster initial page loading.
• Better performance on mobile devices.

This is the output of the code

Advantages of Lazy Loading

• Improves website speed
• Saves bandwidth and data
• Reduces server load
• Makes scrolling smoother
• Improves user experience

Conclusion

HTML Performance is an important part of web development because it helps websites load faster and work smoothly on all devices. By using techniques like compressing images, removing unused code, minimizing HTML, and applying lazy loading, developers can improve website speed and user experience. A fast website keeps visitors happy, reduces loading time, saves internet data, and can even improve search engine rankings. Good performance makes a website more efficient, professional, and user-friendly for everyone.

HTML Best Practices are guidelines that help developers write clean, organized, and easy-to-understand code. Following best practices improves website performance, readability, accessibility, and maintenance. Good coding habits also help teams work together more efficiently and reduce errors in web pages.

Why Best Practices are Important?

• Makes code easier to read and understand
• Helps avoid coding mistakes
• Improves website performance
• Makes websites easier to maintain
• Helps developers work faster and more efficiently

Use Lowercase Tags

HTML tags should be written in lowercase letters because it is the standard and improves consistency.

Example:

Write Clean Comments

Comments are notes written inside the code to explain sections or remind developers about something important.

Use External CSS & JavaScript

Instead of writing all CSS and JavaScript inside the HTML file, it is better to keep them in separate files.

Example

Advantages:

• Keeps HTML clean and organized
• Improves website performance
• Makes code reusable
• Easier to update styles and scripts

Conclusion

Following HTML Best Practices helps developers create clean, fast, and professional websites. Proper indentation, closing tags, lowercase tags, clean comments, and external CSS & JavaScript files make the code easier to read, maintain, and improve. Good coding practices not only help developers but also provide a better experience for website users.

Some HTML tags are now considered deprecated, which means they are no longer recommended in modern web development. These tags may still work in some browsers, but developers should avoid using them because better and cleaner alternatives are available in HTML5 and CSS. Using modern methods helps websites look more professional, load faster, and become easier to maintain.

Why Deprecated Tags Should Be Avoided

• They make HTML code outdated and harder to maintain.
• Modern browsers focus more on HTML5 and CSS standards.
• CSS provides better styling options and cleaner design.
• Websites become more responsive and mobile-friendly.
• Semantic HTML improves accessibility and SEO performance.

Why Deprecated Tags Should Be Avoided

Using deprecated tags can create many problems in modern web development. Some of the major reasons are:

1. Poor Code Structure

Deprecated tags mix content and design together, making the code messy and difficult to understand.

2. Difficult Website Maintenance

If styling is written directly inside HTML tags, changing the design later becomes harder because every page must be edited manually.

3. Not Mobile-Friendly

Modern responsive websites need flexible layouts that work on phones, tablets, and desktops. Deprecated tags do not support responsive design properly.

4. Reduced Accessibility

Semantic and modern HTML improves accessibility for screen readers and users with disabilities. Deprecated tags do not provide meaningful structure.

5. SEO Problems

Search engines prefer websites built with modern HTML5 standards because they are cleaner and easier to understand.

6. Browser Compatibility Issues

Some deprecated tags may not work correctly in modern browsers and could stop working completely in future updates.

Conclusion

Deprecated HTML tags are old tags that are no longer recommended in modern web development. Although some browsers still support them, developers should avoid using them because they create outdated, messy, and less responsive websites. Modern HTML5 and CSS provide cleaner, faster, and more professional ways to design webpages. By using CSS for styling and semantic HTML for structure, developers can create websites that are easier to maintain, mobile-friendly, accessible, and optimized for search engines.

CSS (Cascading Style Sheets) is used to style and design HTML webpages.HTML creates the structure of the webpage, while CSS makes the webpage look attractive and visually organized. Using CSS, developers can change colors, fonts, spacing, layouts, animations, and many other design elements. CSS helps websites look modern, responsive, and user-friendly on different devices like mobiles, tablets, and computers.

Inline CSS

What is Inline CSS?

Inline CSS is used to apply styles directly inside an HTML element by using the style attribute.

This method is useful when you want to style a single element quickly without creating a separate CSS file or writing styles in the <style> section.

Inline CSS affects only the specific tag where the style is written. It is simple and easy for beginners, but it is not recommended for large websites because it makes the HTML code lengthy and difficult to manage.

This is the output of the code

Internal CSS

What is intternal CSS?

Internal CSS is used to apply styles inside the same HTML file using the <style> tag.

This is the output of the code

Explanation

In this example, the paragraph text color becomes red because the color:red; property is written inside the style attribute.

Advantages of Inline CSS

• Easy to use for small changes
• Useful for testing styles quickly
• No separate CSS file needed

Disadvantages of Inline CSS

• Makes HTML code messy
• Difficult to reuse styles
• Not suitable for large projects

External CSS (Best)

What is external css?

Internal CSS is used to apply styles inside the same HTML document using the <style> tag.

The <style> tag is usually written inside the <head> section of the HTML file.

This method is helpful when a single webpage needs unique styling. Internal CSS allows multiple HTML elements to share the same style rules, making the code cleaner than inline CSS.

This is the output of the code

Explanation

In this example, all paragraph (<p>) elements on the webpage will appear in blue color because the style rule is written inside the <style> tag.

Advantages of Internal CSS

• Keeps styling separate from HTML content
• Easier to manage than inline CSS
• Useful for single-page websites

Disadvantages of Internal CSS

• Styles cannot be reused across multiple pages
• Large style sections can make the file bigger

Conclusion

CSS is an important part of web development because it improves the appearance and user experience of websites.Inline CSS is good for quick styling, Internal CSS is useful for single webpages, and External CSS is the best choice for professional and large websites because it keeps the code organized and reusable. By learning CSS with HTML, developers can create beautiful, responsive, and modern webpages easily.

JavaScript is a programming language used to add functionality and interactivity to HTML webpages.While HTML creates the structure of a webpage and CSS designs it, JavaScript makes the webpage dynamic and interactive. Using JavaScript, developers can create buttons, forms, sliders, animations, pop-up messages, games, and many other interactive features.JavaScript is one of the most important technologies in web development because it helps websites respond to user actions and provide a better user experience.

Script Tag

What is script tag?

The <script> tag is used to add JavaScript code directly inside an HTML document.This tag allows the browser to read and execute JavaScript code when the webpage loads.The <script> tag is usually placed inside the <head> section or at the end of the <body> section of an HTML file. Placing it at the bottom helps the webpage load faster.

This is the output of the code

Explanation

In this example, the alert() function displays a pop-up message saying “Hello” when the webpage opens.

Advantages of Using Script Tag

• Easy to write small JavaScript programs
• Useful for testing code quickly
• No separate file required

Disadvantages of Using Script Tag

• Makes HTML code lengthy
• Difficult to manage large programs
• Not suitable for large websites

Common Uses of JavaScript in HTML

• Showing alert messages
• Validating forms
• Changing webpage content
• Creating animations
• Responding to button clicks

External JS

What is external js?

External JavaScript means writing JavaScript code in a separate file with a .js extension and linking it to the HTML document.This is the most recommended method for using JavaScript because it keeps the HTML file clean and organized.External JavaScript files can be reused across multiple webpages, which makes website development easier and faster.

This is the output of the code

Explanation

In this example, the HTML file connects to an external JavaScript file named app.js. All JavaScript code written inside app.js will run on the webpage.

Advantages of External JS

• Keeps HTML clean and readable
• JavaScript code can be reused
• Easier to maintain and update
• Best for large and professional websites
• Improves code organization

Disadvantages of External JS

• Requires a separate .js file
• The script may not work if the file path is incorrect

Example of app.js File

Uses of External JavaScript

• Creating interactive websites
• Adding form validation
• Building games and applications
• Making webpages dynamic
• Handling user events like clicks and typing

Conclusion

JavaScript is an essential part of modern web development because it adds functionality and interactivity to webpages.The <script> tag is useful for small programs and quick testing, while External JavaScript is the best method for large and professional websites because it keeps the code clean, reusable, and easy to manage. By combining HTML, CSS, and JavaScript, developers can create attractive, interactive, and powerful websites.

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:

1. Introduction to HTML
2. HTML Basics
3. HTML Elements
4. HTML Attributes
5. Text Formatting Tags
6. HTML Lists
7. HTML Links
8. HTML Images
9. HTML Tables
10. HTML Forms
11. HTML Input Types
12. HTML Media
13. HTML Semantic Elements
14. HTML Layout
15. HTML Iframes
16. HTML Entities & Symbols
17. HTML Meta Tags
18. HTML Head Elements
19. HTML Graphics
20. HTML Accessibility
21. HTML Responsive Design
22. HTML APIs
23. HTML SEO Basics
24. HTML Performance
25. HTML Best Practices
26. Deprecated HTML Tags
27. HTML with CSS
28. 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

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

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