HTML Notes
1. WEB
Definition
The World Wide Web (WWW) is a system of interlinked hypertext documents accessed
over the internet using web browsers.
Key Points
• Works on client–server architecture
• Uses HTTP/HTTPS protocols for communication
• Resources are identified using URLs
Use Cases
• Online education platforms
• E-commerce websites
• Cloud-based applications
Example
Accessing [Link] using a browser.
Interview Q&A
Q: Difference between Web and Internet?
A: Internet is the infrastructure (network), while the Web is a service running on the
internet.
2. HOW THE WEB WORKS
Explanation
When a user enters a URL, the browser sends a request to the server. The server responds
with HTML, CSS, and JavaScript, which the browser renders.
Use Cases
• Loading web pages
• Fetching API data
• Downloading files
3. DNS (Domain Name System)
Definition
DNS converts human-readable domain names into IP addresses.
Key Points
• Acts like the internet’s phonebook
• Uses hierarchical structure
• Supports caching for performance
Use Cases
• Website access
• Email routing
• Load balancing
4. BROWSER
Definition
A browser is software that retrieves, interprets, and displays web content.
Key Points
• Converts HTML into DOM
• Applies CSS styling
• Executes JavaScript
Examples
Chrome, Firefox, Edge
Use Cases
• Web navigation
• Testing applications
• Running web apps
Interview Q&A
Q: What is DOM?
A: Document Object Model represents HTML as a tree structure.
5. URL
Definition
A URL specifies the address of a resource on the web.
Syntax
protocol://domain:port/path?query#fragment
Use Cases
• Page navigation
• API endpoints
• Resource identification
Interview Q&A
Q: URL vs URI?
A: URL is a type of URI that specifies location.
6. HTTP & HTTPS
HTTP Definition
HTTP is a stateless protocol for client-server communication.
HTTP Points
• Request–response model
• Supports GET, POST, PUT, DELETE
• Stateless
HTTPS Definition
HTTPS is HTTP with SSL/TLS encryption.
Use Cases
• Secure login
• Online payments
• Data privacy
Interview Q&A
Q: Why is HTTPS secure?
A: Data is encrypted using SSL/TLS.
7. HTML
Definition
HTML (HyperText Markup Language) is used to structure web pages.
Syntax Example
<h1>Hello World</h1>
Use Cases
• Page structure
• Forms
• Multimedia embedding
Interview Q&A
Q: HTML vs HTML5?
A: HTML5 adds semantic tags, multimedia support, and APIs.
8. HTML STRUCTURE
ASCII Diagram
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content
</body>
</html>
<!DOCTYPE html>
Explanation
The <!DOCTYPE html> declaration tells the browser that the document is written in
HTML5.
Why It Is Important
• Ensures the browser uses standards mode
• Prevents browser compatibility issues
• Helps render the page correctly
Interview Point
If DOCTYPE is missing, browsers may render the page in quirks mode.
<html> Tag
Explanation
The <html> tag is the root element of the HTML document. All other elements are written
inside it.
Key Points
• Wraps the entire HTML content
• Usually includes lang attribute for accessibility
Example
<html lang="en">
Interview Point
Helps search engines and screen readers understand the page language.
<head> Tag
Explanation
The <head> section contains metadata and configuration information about the webpage.
What It Contains
• <title>
• <meta> tags
• <link> (CSS)
• <script>
Why It Is Important
• Improves SEO
• Controls responsiveness
• Loads styles and scripts
Interview Point
Content inside <head> is not visible on the webpage.
<title> Tag
Explanation
The <title> tag defines the title of the webpage, which appears on the browser tab.
Use Cases
• Browser tab name
• Search engine results
• Bookmarks
Example
<title>Home Page</title>
Interview Point
Title is a ranking factor in SEO.
<body> Tag
Explanation
The <body> tag contains all visible content of the webpage.
What It Can Contain
• Text
• Images
• Forms
• Tables
• Audio / Video
Example
<body>
<h1>Welcome</h1>
</body>
Interview Point
Only one <body> tag is allowed per document.
Closing Tags (</head>, </body>, </html>)
Explanation
Closing tags indicate the end of an element.
Why They Are Important
• Maintain proper document structure
• Prevent rendering issues
• Improve readability
COMMON INTERVIEW QUESTIONS
Q1. Why is <!DOCTYPE html> required?
It ensures standards-compliant rendering.
Q2. Difference between <head> and <body>?
Head contains metadata; body contains visible content.
Q3. Can we have multiple body tags?
No, only one body tag is allowed.
META TAG
Definition
The <meta> tag is used to provide metadata about an HTML document. Metadata is
information about the page that is not displayed on the webpage but is used by browsers,
search engines, and other web services.
The <meta> tag is always placed inside the <head> section of an HTML document.
Basic Syntax
<meta name="description" content="This is a web page">
WHY META TAG IS IMPORTANT
• Helps search engines understand page content
• Improves SEO (Search Engine Optimization)
• Controls responsive behaviour
• Defines character encoding
• Enhances security and performance
9. ATTRIBUTES
Definition
Attributes provide additional information about HTML elements.
Syntax
<img src="[Link]" alt="image">
Attribute Use Cases
• Control behavior (disabled, readonly)
• Improve accessibility (alt)
• Provide metadata
Interview Q&A
Q: Why is alt important?
A: Accessibility and SEO.
10. TAGS
Definition
An HTML tag is a predefined keyword enclosed in angle brackets used to create and define
elements in a web page.
Key Points
• Tags form the basic building blocks of HTML
• They tell the browser how content should be displayed
• Most tags come in pairs
Use Cases
• Structuring content
• Displaying text, images, and links
• Enabling styling and interactivity
TYPES OF TAGS
HTML tags are mainly divided into two types:
• Paired Tags
• Unpaired Tags
PAIRED TAGS
Definition
Paired tags consist of an opening tag and a closing tag, enclosing the content.
Characteristics
• Have start and end tags
• Used for wrapping content
• Commonly used for text and layout
Examples (conceptual)
Paragraph, headings, divisions, sections
UNPAIRED TAGS (SELF-CLOSING TAGS)
Definition
Unpaired tags do not have a closing tag and are used to insert standalone elements.
Characteristics
• No closing tag
• Do not wrap content
• Perform a single function
Examples (conceptual)
Line break, horizontal line, image, input field
11. HEADING TAGS
Definition
Heading tags are used to define titles and subtitles on a webpage and create a content
hierarchy.
Heading Levels
There are six heading tags: H1 to H6
DEFAULT SIZES IN PIXELS (Browser Default)
Heading Tag Default Size (px) Usage
H1 32px Main page heading
H2 24px Section heading
H3 18.72px Subsection
H4 16px Content heading
H5 13.28px Minor heading
Heading Tag Default Size (px) Usage
H6 10.72px Least important
Use Cases
• SEO optimization
• Structuring content
• Improving readability
12. FORMATTING TAGS
Formatting tags are used to modify the appearance or meaning of text.
TEXT EMPHASIS TAGS
Makes text bold visually without semantic importance.
strong
Indicates strong importance and is recognized by screen readers and search engines.
Displays text in italics for stylistic purposes.
em
Emphasizes text with semantic meaning.
TEXT DECORATION TAGS
Underlines text.
ins
Represents inserted or newly added text.
strike (Deprecated)
Displays strikethrough text; replaced by modern alternatives.
del
Represents deleted or removed content.
SPECIAL TEXT TAGS
Used for short quotations.
mark
Highlights text for reference.
big (Deprecated)
Increases text size; not recommended.
small
Displays smaller text such as disclaimers.
sup
Displays superscript text (used in mathematics).
sub
Displays subscript text (used in chemistry).
code
Represents inline computer code text.
pre
Preserves whitespace and formatting.
13. DEPRECATED TAGS
Definition
Deprecated tags are outdated and should not be used in modern HTML.
Reasons for Deprecation
• Replaced by CSS
• Poor accessibility
• Not supported in HTML5
Examples
Font, center, marquee, strike, big
14. ELEMENT
Definition
An HTML element is a complete structure consisting of a tag and its content.
Importance
• Forms the DOM structure
• Enables styling and scripting
INLINE LEVEL ELEMENTS
Definition
Inline elements do not start on a new line and occupy only the required width.
Characteristics
• Flow within text
• Cannot contain block elements
Examples (conceptual)
Links, images, emphasized text
BLOCK LEVEL ELEMENTS
Definition
Block elements start on a new line and take full width by default.
Characteristics
• Create layout structure
• Can contain inline and block elements
Examples (conceptual)
Divisions, paragraphs, headings, sections
15. ATTRIBUTES
Definition
Attributes provide additional information about HTML elements.
Characteristics
• Written inside opening tags
• Enhance behavior and appearance
Common Attributes
ID, class, style, src, href, title
16. IMAGE TAG
Definition
Used to display images on a webpage.
ATTRIBUTES OF IMAGE TAG
Attribute Purpose
src Specifies image source
alt Displays alternate text
width Controls image width
height Controls image height
title Shows tooltip text
Use Cases
• Display graphics
• Improve UI
• SEO through alt text
17. ANCHOR TAG
Definition
Used to create hyperlinks for navigation.
ATTRIBUTES
Attribute Purpose
href Destination URL
target Open link location
title Tooltip description
download Download resource
Use Cases
• Website navigation
• External links
• File downloads
18. MARQUEE TAG (DEPRECATED)
Definition
Creates scrolling text horizontally or vertically.
Why Not Used
• Poor user experience
• Not accessible
• Replaced by CSS animations
19. SEMANTIC TAGS
Definition
Semantic tags clearly describe the meaning of content to browsers and developers.
Examples
Header, nav, main, section, article, aside, footer, time, figure, figcaption, details, summary
Advantages
• Better SEO
• Improved accessibility
• Cleaner and readable code
20. HTML LISTS
Ordered List
An Ordered List is an HTML list in which items are displayed in a specific sequence or
order, usually numbered or alphabetically labeled. It is created using the <ol> tag, and each
list item is defined using the <li> tag.
<ol type="1">
<li>HTML</li>
</ol>
Attributes: type, start
Use Cases:
• Steps
• Ranking
• Procedures
Unordered List
An Unordered List is an HTML list in which items are displayed without any specific
order, typically marked with bullets. It is created using the <ul> tag, and each item is
defined using the <li> tag.
<ul type="circle">
<li>Item</li>
</ul>
Use Cases:
• Navigation menus
• Feature lists
• Bullet points
Description List
A Description List is an HTML list used to display terms and their corresponding
descriptions. It is created using the <dl> tag, where <dt> defines the term and <dd> defines
the description of that term.
<dl>
<dt>HTML</dt>
<dd>Markup Language</dd>
</dl>
Use Cases:
• Glossary
• FAQs
• Definitions
Interview Q&A
Q: When to use dl?
A: For term–description pairs.
21. HTML TABLES
Definition
Tables display data in rows and columns.
Syntax
<table>
<tr><th>Name</th></tr>
</table>
Attributes
• border
• cellpadding
• cellspacing
rowspan & colspan
Used to merge cells.
Use Cases
• Reports
• Timetables
• Comparisons
Interview Q&A
Q: th vs td?
A: th is header, td is data cell.
22. HTML FORMS
• <form> Tag
Definition
The <form> tag is used to create an HTML form that collects user input and
sends it to a server for processing.
Syntax
<form action="[Link]" method="post"></form>
Attributes of <form> Tag
Attribute Description
Attribute Description
Action Specifies the URL where form data is sent
Method Specifies how data is sent (GET or POST)
autocomplete Enables or disables autocomplete
novalidate Disables built-in validation
Attribute Use Cases
• action → Backend API or server file
• method="post" → Secure data submission
• <label> Tag
Definition
The <label> tag defines a label for an input element.
Syntax
<label for="email">Email</label>
Attributes
Attribute Description
for Connects label with input ID
• <input> Tag
Definition
The <input> tag is used to create interactive controls to accept user data.
Syntax
<input type="text" name="username">
Common Attributes of <input>
Attribute Description
type Defines input type
name Name of input field
value Default value
placeholder Hint text
required Mandatory field
readonly Read-only field
disabled Disables input
maxlength Maximum characters
min / max Min & max values
pattern Regex validation
checked Preselect checkbox/radio
autocomplete Enables autocomplete
autofocus Focus on load
size Width of input
step Step interval
4. <input> Type Values (ALL)
Text-Based Inputs
• text
• password
• email
• search
• tel
• url
Number & Date Inputs
• number
• range
• date
• datetime-local
• month
• week
• time
Selection Inputs
• radio
• checkbox
• color
File & Button Inputs
• file
• submit
• reset
• button
• image
Hidden Input
• hidden
• <select> Tag
Definition
Creates a dropdown list.
Syntax
<select name="country">
<option>India</option>
</select>
Attributes
Attribute Description
name Name of dropdown
multiple Allows multiple selection
size Number of visible options
required Mandatory selection
disabled Disables dropdown
autofocus Auto focus
• <option> Tag
Definition
Defines an option in a dropdown.
Attributes
Attribute Description
value Value sent to server
selected Default selected option
disabled Disable option
label Short label
• <optgroup> Tag
Definition
Groups related options inside <select>.
Attributes
Attribute Description
label Group name
disabled Disable entire group
• <textarea> Tag
Definition
Creates a multi-line text input.
Syntax
<textarea rows="4" cols="30"></textarea>
Attributes
Attribute Description
rows Number of rows
cols Number of columns
maxlength Max characters
placeholder Hint text
required Mandatory
readonly Read-only
disabled Disabled field
wrap Text wrapping
• <button> Tag
Definition
Defines a clickable button.
Syntax
<button type="submit">Submit</button>
Attributes
Attribute Description
type submit / reset / button
name Button name
value Button value
disabled Disable button
autofocus Auto focus
• <fieldset> Tag
Definition
Groups related form elements.
Attributes
Attribute Description
disabled Disables group
• <legend> Tag
Definition
Defines a caption for <fieldset>.
(No specific attributes)
• <datalist> Tag
Definition
Provides predefined options for an input.
Syntax
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
</datalist>
MOST COMMON INTERVIEW QUESTIONS (WITH ANSWERS)
Q1. Difference between GET and POST?
GET sends data in URL, POST sends data securely in request body.
Q2. readonly vs disabled?
Readonly submits value, disabled does not.
Q3. What is enctype used for?
Defines how data is encoded; required for file uploads.
23. MEDIA TAGS
AUDIO TAG
Definition
The <audio> tag is used to embed sound content in a webpage such as music, podcasts, or
sound effects.
Syntax
<audio controls>
<source src="song.mp3" type="audio/mp3">
</audio>
Audio Tag – Attributes Table (In Depth)
Attribute Definition Use of Attribute (In Depth)
Displays audio Allows users to play, pause, adjust volume, and seek
controls
controls audio. Essential for user interaction and accessibility.
Starts audio Used for background music or alerts. Often restricted by
autoplay
automatically browsers unless muted to improve user experience.
Replays audio Used in background music, meditation apps, or ambient
loop
continuously sounds.
Mutes audio by Commonly used with autoplay to comply with browser
muted
default policies.
Controls audio Helps optimize performance by deciding whether audio
preload
loading behavior loads immediately or on demand.
src Audio file location Specifies the path of the audio file to be played.
Audio Use Cases
• Music streaming platforms
• Podcasts and audiobooks
• Notification sounds and alerts
VIDEO TAG
Definition
The <video> tag is used to embed video content directly into a webpage without external
plugins.
Syntax
<video controls poster="[Link]" width="400">
<source src="video.mp4" type="video/mp4">
</video>
Video Tag – Attributes Table (In Depth)
Attribute Definition Use of Attribute (In Depth)
Enables play, pause, volume, fullscreen, and seek
controls Displays video controls
options for better usability.
Plays video Used for preview videos or ads. Often combined with
autoplay
automatically muted.
Repeats video Used for promotional banners or background
loop
automatically animations.
Displays an image Improves UI by showing a thumbnail instead of a
poster
before play blank screen.
muted Mutes audio by default Required for autoplay videos in most browsers.
width /
Sets video dimensions Helps maintain layout consistency.
height
Controls loading Optimizes performance by loading metadata or full
preload
behavior video.
src Video file location Specifies the video file path.
Video Use Cases
• Online tutorials and courses
• Video streaming platforms
• Advertisements and promotional content
IFRAME TAG
Definition
The <iframe> tag is used to embed another webpage or external content inside the current
webpage.
Syntax
<iframe src="[Link]" width="400" height="300"></iframe>
Iframe Tag – Attributes Table (In Depth)
Attribute Definition Use of Attribute (In Depth)
Source URL of embedded Loads external content such as maps, videos, or
src
page tools.
width Width of iframe Controls layout and responsiveness.
height Height of iframe Ensures proper visibility of embedded content.
allowfullscreen Enables fullscreen mode Commonly used for embedded YouTube videos.
Improves performance by loading iframe only
loading Lazy or eager loading
when needed.
Enhances security by preventing scripts, forms,
sandbox Restricts iframe behavior
or popups.
referrerpolicy Controls referrer info Improves privacy and security.
Iframe Use Cases
• Embedding Google Maps
• Embedding YouTube videos
• Integrating third-party tools (payment gateways, forms)
INTERVIEW QUESTIONS WITH ANSWERS
Q1. Why is muted important with autoplay?
Browsers block autoplay with sound to protect user experience.
Q2. Difference between <video> and <iframe> for videos?
<video> hosts local files, <iframe> embeds external platforms.
Q3. Why is sandbox important in iframe?
It prevents malicious behavior and improves security.