HTML Interview Questions and Answers
1. What is HTML?
HTML stands for HyperText Markup Language.
HTML is the standard markup language used to create and structure web pages. It defines the content and structure of a webpage, such as:
- Headings
- Paragraphs
- Images
- Links
- Tables
- Forms
- Lists
HTML uses tags to tell the browser how different pieces of content should be structured and displayed.
Example
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Here:
-
<h1>represents a heading. -
<p>represents a paragraph. -
<body>contains the visible content of the webpage.
2. What is the Purpose of the DOCTYPE Declaration?
<!DOCTYPE html> is called the Document Type Declaration.
It is placed at the beginning of an HTML document and tells the browser that the document uses HTML5.
It is a declaration, not an HTML tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Explanation
-
<!DOCTYPE html>→ Declares that the document uses HTML5. -
<html>→ The root element that contains the entire HTML document. -
<head>→ Contains metadata and information about the webpage. -
<title>→ Defines the title displayed in the browser tab. -
<body>→ Contains the visible content of the webpage. -
<h1>→ Displays the main heading.
3. What are Semantic Tags in HTML?
Semantic tags are HTML elements that clearly describe the meaning and purpose of their content to both developers and browsers.
Example
<header>Website Header</header>
<nav>Navigation Links</nav>
<main>Main Content</main>
<section>Section Content</section>
<article>Article Content</article>
<aside>Related Content</aside>
<footer>Website Footer</footer>
Common Semantic Tags
<header> → Represents the introductory or header section of a page or section.
<nav> → Contains important navigation links.
<main> → Contains the primary content of the webpage.
<section> → Represents a thematic section of related content.
<article> → Represents independent content, such as a blog post, news article, or product card.
<aside> → Contains secondary or related content, such as a sidebar or related links.
<footer> → Represents the footer of a page or section.
Why Should We Use Semantic Tags?
Better Code Readability
Developers can easily understand the page structure.Better SEO
Search engines can better understand the structure and meaning of the content.Easier Maintenance
Well-structured code is easier to maintain.Better Accessibility
Screen readers and assistive technologies can understand the page structure more effectively.
4. What is the Difference Between Semantic and Non-Semantic Tags?
Semantic Tags
Semantic tags:
- Describe the meaning of their content.
- Have meaningful names.
- Make the HTML structure easier to understand.
- Improve accessibility.
- Help search engines understand the structure of a webpage.
Examples
<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<footer></footer>
Non-Semantic Tags
Non-semantic tags do not describe the meaning of their content.
They are mainly used as generic containers for grouping and styling elements.
Examples
<div></div>
<span></span>
For example:
<div class="header">
Website Header
</div>
The <div> itself does not tell the browser that the content is a header.
A semantic alternative would be:
<header>
Website Header
</header>
The <header> clearly describes the purpose of the content.
5. What is the Difference Between HTML and HTML5?
HTML is used to create the structure of web pages, while HTML5 is the modern version of HTML that introduced several new elements and features for building modern websites and web applications.
HTML
- Older versions used longer DOCTYPE declarations.
- Multimedia often required external plugins.
- Had fewer semantic elements.
- Had fewer built-in form input types.
- Provided fewer features for modern web applications.
HTML5
- Uses the simple
<!DOCTYPE html>declaration. - Provides native support for audio and video.
- Introduced semantic elements such as
<header>,<nav>,<main>,<section>,<article>, and<footer>. - Introduced new form input types such as
email,date,number,url, andrange. - Introduced
<canvas>for drawing graphics. - Provides Web Storage such as
localStorageandsessionStorage. - Provides several APIs for modern web applications.
Example
HTML5 provides native multimedia support:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
6. What is the Difference Between <div> and <span>?
Both <div> and <span> are non-semantic HTML elements used as containers, but they behave differently by default.
<div>
<div> is a block-level element.
- Starts on a new line.
- Usually takes the full available width.
- Commonly used to group larger sections or multiple elements.
- Can contain other HTML elements.
Example
<div>Hello</div>
<div>World</div>
Output:
Hello
World
Each <div> starts on a new line.
<span>
<span> is an inline element.
- Does not start on a new line.
- Takes only the width required by its content.
- Commonly used to style or target a small portion of text.
Example
<p>
This is <span>HTML</span> interview preparation.
</p>
7. What is a Form in HTML?
An HTML form is used to collect input or information from users and submit that data for processing.
Forms are commonly used for:
- Login pages
- Registration pages
- Contact forms
- Search boxes
- Feedback forms
- Online applications
- Payment forms
Common Form Elements
<form> → Defines the form.
<label> → Provides a label for an input field.
<input> → Allows the user to enter data.
<button> → Allows the user to submit or perform an action.
Example
<form>
<label>Name:</label>
<input type="text">
<label>Email:</label>
<input type="email">
<button type="submit">Submit</button>
</form>
A form can also use important attributes such as:
-
action→ Specifies where the form data should be sent. -
method→ Specifies how the data should be submitted, such asGETorPOST.
8. What is the Difference Between GET and POST?
GET Method
The GET method is mainly used to request or retrieve data from a server.
- Data is usually appended to the URL as query parameters.
- The URL can be bookmarked and shared.
- Suitable for searching and retrieving data.
- Data is visible in the URL.
- It should not be used for sensitive information, such as passwords.
Example
<form action="/search" method="get">
<input type="text" name="query">
<button type="submit">Search</button>
</form>
If the user searches for HTML, the URL might look like:
/search?query=HTML
POST Method
The POST method is mainly used to send data to a server, especially when creating or processing data.
- Data is sent in the request body.
- Data is not normally visible in the URL.
- Commonly used for login and registration forms.
- Suitable for sending larger amounts of form data.
- Commonly used when creating or modifying resources.
Example
<form action="/register" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">Register</button>
</form>
9. What are the Types of Lists in HTML?
HTML provides three main types of lists:
- Ordered List
- Unordered List
- Description List
1. Ordered List <ol>
An ordered list is used when the order of the items is important.
-
<ol>→ Ordered List -
<li>→ List Item
Example
<ol>
<li>Wake up</li>
<li>Have breakfast</li>
<li>Go to work</li>
</ol>
Output:
1. Wake up
2. Have breakfast
3. Go to work
2. Unordered List <ul>
An unordered list is used when the order of the items is not important.
-
<ul>→ Unordered List -
<li>→ List Item
Example
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Output:
• HTML
• CSS
• JavaScript
3. Description List <dl>
A description list is used to display terms and their descriptions.
It uses three tags:
-
<dl>→ Description List -
<dt>→ Description Term -
<dd>→ Description/Definition
Example
<dl>
<dt>HTML</dt>
<dd>Used to structure web pages.</dd>
<dt>CSS</dt>
<dd>Used to style web pages.</dd>
<dt>JavaScript</dt>
<dd>Used to add interactivity to web pages.</dd>
</dl>
10. What are Class and ID in HTML?
Both class and id are HTML attributes used to identify and target elements.
Class
The class attribute is used to group multiple HTML elements that share the same style, purpose, or behavior.
A class can be used on multiple elements.
Example
<p class="highlight">This is paragraph 1.</p>
<p class="highlight">This is paragraph 2.</p>
<p class="highlight">This is paragraph 3.</p>
Here, the same highlight class is applied to multiple elements.
In CSS:
.highlight {
color: blue;
}
All three paragraphs can receive the same style.
ID
The id attribute is used to give an element a unique identifier within a page.
An id should normally be unique within the document.
Example
<h1 id="main-heading">Welcome to My Website</h1>
In CSS:
#main-heading {
color: red;
}
The # symbol is used to select an ID in CSS, while the . symbol is used to select a class.
ID vs Class
-
idis used to uniquely identify a specific element. -
classis used to group multiple elements. - An
idshould be unique within a page. - A `class can be reused on multiple elements.
Happy Learning! 🚀
