HTML Interview Questions Asked in Campus Placements

1What is HTML and why is it used?

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications.

Purpose of HTML:

Defines the structure and content of web pages
Uses tags to mark up text, images, links, and other elements
Works with CSS (styling) and JavaScript (behavior) to create complete websites
Provides semantic meaning to content for browsers and search engines

Key Characteristics:

Not a programming language - it's a markup language
Uses opening and closing tags: <tag>content</tag>
Case-insensitive but lowercase is conventional
Rendered by web browsers to display content

Example:

<!DOCTYPE html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Welcome to HTML</h1>

<p>This is a paragraph of text.</p>

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

</body>

</html>

HTML forms the foundation of all web content and is essential for web development.

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

The <!DOCTYPE html> declaration tells the browser which version of HTML the page is written in and how to render it.

Key Points:

Must be the very first line in an HTML document
Not an HTML tag - it's an instruction to the browser
Ensures the browser renders the page in standards mode
Prevents the browser from entering "quirks mode"

HTML5 Declaration (Modern):

<!DOCTYPE html>

Why It's Important:

Without it, browsers may render pages inconsistently
Older browsers might use quirks mode, leading to rendering issues
Required for HTML validation
Ensures consistent cross-browser behavior

Comparison with Older Versions:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

HTML5 simplified the DOCTYPE declaration to just <!DOCTYPE html>, making it much easier to remember and use.

3What is the difference between HTML and HTML5?

HTML5 is the latest version of HTML with many improvements and new features over previous versions.

Major Differences:

1. Semantic Elements:

HTML5 introduced new semantic tags for better document structure:

2. Multimedia Support:

HTML5: Built-in <audio> and <video> tags
Old HTML: Required Flash or other plugins

</video>

</audio>

3. Graphics and Visualization:

<canvas> - Draw graphics via JavaScript
<svg> - Inline scalable vector graphics

4. Form Enhancements:

5. Storage and Offline Support:

Local Storage and Session Storage
Application Cache (deprecated, replaced by Service Workers)
IndexedDB for client-side database

6. APIs and Features:

Geolocation API
Drag and Drop API
Web Workers for background processing
WebSocket for real-time communication

7. DOCTYPE:

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Removed Elements:

HTML5 removed outdated tags like <font>, <center>, <strike>, and <frame> in favor of CSS styling.

4What are semantic HTML tags?

Semantic HTML tags clearly describe their meaning and content to both browsers and developers, making code more readable and accessible.

Benefits of Semantic Tags:

Improved SEO - Search engines better understand content structure
Better accessibility - Screen readers can navigate more effectively
Cleaner code - More readable and maintainable
Consistent styling - Easier to apply CSS

Common Semantic Tags:

<header> - Header section of page or article

<nav> - Navigation links

<main> - Main content of the page (unique)

<article> - Self-contained content (blog post, news article)

<section> - Thematic grouping of content

<aside> - Sidebar or related content

<footer> - Footer section

<figure> - Self-contained content (images, diagrams)

<figcaption> - Caption for figure

<time> - Date/time information

<mark> - Highlighted/marked text

<details> - Collapsible content

<summary> - Summary for details element

Example - Semantic Structure:

<!DOCTYPE html>

<head>

</head>

<body>

<nav>

<ul>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<h2>Learning HTML5</h2>

<p>Published on <time datetime="2025-01-15">January 15, 2025</time></p>

<p>HTML5 brings many new features...</p>

</figure>

</article>

<aside>

<h3>Related Posts</h3>

<ul>

<li><a href="#">CSS Basics</a></li>

<li><a href="#">JavaScript Guide</a></li>

</ul>

</aside>

</main>

</footer>

</body>

</html>

Non-Semantic vs Semantic:

5How do inline and block elements work?

HTML elements are categorized as either inline or block-level based on how they display and behave.

Block-Level Elements:

Start on a new line
Take up full width available (100% by default)
Can contain inline and other block elements
Have top and bottom margins

Common Block Elements:

<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <section>, <article>,

Inline Elements:

Do not start on a new line
Only take up as much width as necessary
Cannot contain block-level elements
Sit within the flow of text

Common Inline Elements:

<span>, <a>, <strong>, <em>, <img>, <br>, <input>, <label>,

Visual Example:

<!DOCTYPE html>

<html>

<head>

<style>

div { background: lightblue; margin: 10px 0; }

span { background: lightcoral; }

</style>

</head>

<body>

<div>Block Element 1 (full width)</div>

<div>Block Element 2 (full width)</div>

<span>Inline 1</span>

<span>Inline 2</span>

<span>Inline 3</span>

<p>This is a <span>span inside</span> a paragraph.</p>

<p>This is a <strong>strong element</strong> inline.</p>

</body>

</html>

Inline-Block:

CSS allows creating elements that combine both behaviors:

<style>

.inline-block {

display: inline-block;

width: 100px;

height: 100px;

background: lightgreen;

margin: 5px;

}

</style>

Key Differences:

BlockInline

New line

Same line

Full width

Content width

Can set width/height

Cannot set width/height*

Vertical margins work

Only horizontal margins

* Except for replaced inline elements like <img>

6What are HTML attributes? Give examples.

HTML attributes provide additional information about HTML elements and modify their behavior or appearance.

Key Characteristics:

Placed inside the opening tag
Come in name/value pairs: name="value"
Values should be enclosed in quotes (double or single)
Multiple attributes are space-separated

Global Attributes (Work on any element):

<span style="color: red; font-weight: bold;">Important</span>

<p hidden>This is hidden</p>

Common Element-Specific Attributes:

Visit Example

</a>

<input type="text" name="username" placeholder="Enter name"

required maxlength="50" disabled>

</form>

<tr>

<td colspan="2">Merged cell</td>

</tr>

</table>

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

Boolean Attributes:

Some attributes don't need values - their presence means true:

<option selected>Option 1</option>

Custom Data Attributes:

<div id="product"

data-product-id="12345"

data-price="29.99"

data-category="electronics">

</div>

const product = document.getElementById('product');

console.log(product.dataset.productId); // "12345"

console.log(product.dataset.price); // "29.99"

</script>

Accessibility Attributes:

7What is the difference between <div> and <span>?

<div> and <span> are both generic container elements, but they serve different purposes based on their display behavior.

<div> - Division (Block Element):

Block-level element
Starts on a new line
Takes full width available
Used for grouping larger sections of content
Can contain other block and inline elements

<span> - Span (Inline Element):

Inline element
Does not start on a new line
Only takes up necessary width
Used for styling small portions of text or inline content
Should only contain inline elements

Visual Comparison:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: lightblue;

padding: 10px;

margin: 5px 0;

}

span {

background-color: lightcoral;

padding: 5px;

}

</style>

</head>

<body>

<div>Another div</div>

<span>Another span</span>

<span>Third span</span>

</body>

</html>

Common Use Cases:

<h1>Website Title</h1>

</div>

<p>Main content here</p>

</div>

<p>Footer information</p>

</div>

<p>

This is <span style="color: red;">red text</span> and

this is <span style="font-weight: bold;">bold text</span>

within the same paragraph.

</p>

<p>

Price: <span class="currency">$</span><span class="amount">99.99</span>

</p>

Styling Comparison:

<style>

/* DIV can have width and height */

div.box {

width: 200px;

height: 100px;

background: lightblue;

}

/* SPAN ignores width and height (unless display changed) */

span.highlight {

/* width: 200px; - This won't work! */

background: yellow;

padding: 5px;

}

/* Make span behave like block */

span.block {

display: block;

width: 200px; /* Now this works */

}

</style>

<div class="box">Div with width/height</div>

<span class="highlight">Inline span</span>

<span class="block">Block-style span</span>

Key Differences Summary:

Feature<div><span>

Display

Block

Inline

Line break

Yes (new line)

No (same line)

Width

Full width (100%)

Content width

Can contain

Block & inline

Inline only

Use case

Layout sections

Text styling

Best Practice: Use semantic HTML5 tags when possible (<header>, <nav>, <section>, etc.) instead of generic <div> elements. Use <span> only when no semantic inline element fits.

8What are self-closing tags? Give examples.

Self-closing tags (also called void elements or empty tags) are HTML elements that do not have any content between opening and closing tags, and therefore do not require a separate closing tag.

Key Characteristics:

Do not contain any content or child elements
Cannot have closing tags
In HTML5, the trailing slash is optional
In XHTML, the trailing slash is required

Common Self-Closing Tags:

<br>

<hr>

<wbr>

HTML5 vs XHTML Syntax:

<br>

<br />

<br />

Complete Example:

<!DOCTYPE html>

<head>

<title>Self-Closing Tags Example</title>

</head>

<body>

<h1>Contact Form</h1>

<form>

<br>

<label>Email:</label>

<br>

<hr>

</form>

</body>

</html>

Common Mistakes to Avoid:

<br>

Important Notes:

Self-closing tags are also called "void elements" in HTML5
They represent content by their attributes rather than enclosed content
Modern HTML5 does not require the trailing slash (/>)
However, using the slash is still valid and helps with code clarity
Never try to add content or closing tags to self-closing elements

9What is the difference between id and class?

Both id and class are HTML attributes used to identify and style elements, but they have important differences in usage and specificity.

ID Attribute:

Must be unique within a page - no two elements can have the same id
An element can have only one id
Higher CSS specificity (more powerful in styling)
Used for JavaScript targeting and URL anchors
Prefixed with # in CSS

Class Attribute:

Can be used on multiple elements
An element can have multiple classes
Lower CSS specificity than id
Better for reusable styles
Prefixed with . in CSS

Syntax Comparison:

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

<div id="main-content">Content</div>

<p class="highlight">Important text</p>

<p class="highlight">Another important text</p>

<p class="highlight warning">Multiple classes</p>

CSS Styling:

<style>

/* Targeting by ID - use # */

#header {

background-color: blue;

font-size: 24px;

}

#main-content {

padding: 20px;

margin: 10px;

}

/* Targeting by Class - use . */

.highlight {

background-color: yellow;

font-weight: bold;

}

.warning {

color: red;

border: 2px solid red;

}

/* Multiple classes work together */

.highlight.warning {

background-color: orange;

}

</style>

JavaScript Usage:

<div id="unique-element">Single Element</div>

<p class="multiple-elements">First paragraph</p>

<p class="multiple-elements">Second paragraph</p>

// Get element by ID (returns single element)

const element = document.getElementById('unique-element');

element.style.color = 'blue';

// Get elements by Class (returns collection)

const elements = document.getElementsByClassName('multiple-elements');

for (let el of elements) {

el.style.color = 'green';

}

// Modern approach

const single = document.querySelector('#unique-element');

const multiple = document.querySelectorAll('.multiple-elements');

</script>

Specificity in CSS:

<style>

/* ID has higher specificity */

#special { color: red; } /* Specificity: 100 */

.text { color: blue; } /* Specificity: 10 */

p { color: green; } /* Specificity: 1 */

</style>

This will be RED (ID wins)

</p>

URL Anchors with ID:

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

<p>Content for section 1</p>

<h2 id="section2">Section 2</h2>

<p>Content for section 2</p>

<a href="#section1">Go to Section 1</a>

<a href="#section2">Go to Section 2</a>

Real-World Example:

<!DOCTYPE html>

<html>

<head>

<style>

/* ID for unique page sections */

#header { background: #333; color: white; padding: 20px; }

#footer { background: #666; color: white; padding: 10px; }

/* Classes for reusable styles */

.btn { padding: 10px 20px; border: none; cursor: pointer; }

.btn-primary { background: blue; color: white; }

.btn-danger { background: red; color: white; }

.text-center { text-align: center; }

</style>

</head>

<body>

<h1 class="text-center">My Website</h1>

</header>

<button class="btn btn-danger">Delete</button>

<button class="btn btn-primary">Submit</button>

</main>

</footer>

</body>

</html>

Key Differences Summary:

FeatureIDClass

Uniqueness

Must be unique

Can be reused

Multiple per element

Only one

Multiple allowed

CSS selector

#idName

.className

Specificity

High (100)

Low (10)

URL anchor

Yes

Best for

Unique elements

Reusable styles

Best Practices:

Use id for unique page elements (header, footer, main navigation)
Use class for styling multiple similar elements
Prefer classes for CSS styling (more flexible and reusable)
Use IDs for JavaScript when you need to target a specific element
Avoid using IDs for styling unless absolutely necessary
Keep ID names semantic and descriptive

10What is the purpose of the <meta> tag in HTML?

The <meta> tag provides metadata about the HTML document - information about the page that is not displayed to users but is used by browsers, search engines, and other web services.

Key Characteristics:

Always placed inside the <head> section
Self-closing tag (no closing tag required)
Does not display any content on the page
Multiple meta tags can be used in one document
Essential for SEO, responsive design, and browser behavior

Character Encoding:

Viewport (Responsive Design):

SEO Meta Tags:

Social Media Meta Tags (Open Graph):

HTTP Equivalent Meta Tags:

Mobile and App Meta Tags:

Security Meta Tags:

content="default-src 'self'; script-src 'self' https://trusted.com">

Complete HTML Head Example:

<!DOCTYPE html>

<head>

<title>Learn Web Development - Complete Guide</title>

</head>

<body>

</body>

</html>

Best Practices:

Always include: charset and viewport meta tags
SEO: Write unique descriptions (150-160 characters) for each page
Mobile: Always include viewport meta tag for responsive design
Social Media: Include Open Graph tags for better link previews
Keep descriptions relevant: Search engines may penalize misleading metadata
Update regularly: Keep meta descriptions current with page content

Common Mistakes to Avoid:

<head>

</head>

<head>

</head>

Loading...

Loading...

Loading...

HTML Interview Questions Asked in Campus Placements

Questions & Answers

Table of Contents

1What is HTML and why is it used?

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

3What is the difference between HTML and HTML5?

4What are semantic HTML tags?

5How do inline and block elements work?

6What are HTML attributes? Give examples.

7What is the difference between <div> and <span>?

8What are self-closing tags? Give examples.

9What is the difference between id and class?

10What is the purpose of the <meta> tag in HTML?