HTML Interview Questions Asked in Campus Placements

Questions & Answers

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:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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):

html

<!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:

html

<!-- HTML 4.01 Strict (Old) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 (Old) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 (Current - Much Simpler!) -->
<!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:

html

<!-- HTML5 Semantic Tags -->
<header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>

<!-- Old HTML approach -->
<div id="header">, <div id="footer">, <div class="nav">

2. Multimedia Support:

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

text

<!-- HTML5 -->
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>

3. Graphics and Visualization:

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

4. Form Enhancements:

text

<!-- New HTML5 input types -->
<input type="email">
<input type="date">
<input type="time">
<input type="number">
<input type="range">
<input type="color">
<input type="search">

<!-- Built-in validation -->
<input type="email" required>
<input type="url" pattern="https://.*">

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:

html

<!-- HTML5 - Simple -->
<!DOCTYPE html>

<!-- HTML 4 - Complex -->
<!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:

text

<!-- Document Structure -->
<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

<!-- Content -->
<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:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
</head>
<body>
<header>
<h1>My Tech Blog</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<article>
<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>
<img src="html5-logo.png" alt="HTML5 Logo">
<figcaption>The HTML5 Logo</figcaption>
</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>
<p>© 2025 My Tech Blog</p>
</footer>
</body>
</html>

Non-Semantic vs Semantic:

html

<!-- Non-semantic (Old way) -->
<div id="header">...</div>
<div class="navigation">...</div>
<div id="content">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

<!-- Semantic (Modern way) -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

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:

html

<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <section>, <article>,
<header>, <footer>, <nav>, <main>, <form>, <table>

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:

text

<span>, <a>, <strong>, <em>, <img>, 
, <input>, <label>,
<button>, <code>, <small>, <b>, <i>

Visual Example:

html

<!DOCTYPE html>
<html>
<head>
<style>
div { background: lightblue; margin: 10px 0; }
span { background: lightcoral; }
</style>
</head>
<body>
<!-- Block elements -->
<div>Block Element 1 (full width)</div>
<div>Block Element 2 (full width)</div>

<!-- Inline elements -->
<span>Inline 1</span>
<span>Inline 2</span>
<span>Inline 3</span> <!-- All on same line -->

<!-- Mixed -->
<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:

html

<style>
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background: lightgreen;
margin: 5px;
}
</style>

<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>
<div class="inline-block">Box 3</div>
<!-- These boxes sit side by side but have width/height -->

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):

html

<!-- id - Unique identifier -->
<div id="main-content"></div>

<!-- class - CSS class name(s) -->
<p class="text-large highlight">Text</p>

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

<!-- title - Tooltip text -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- data-* - Custom data attributes -->
<div data-user-id="123" data-role="admin"></div>

<!-- hidden - Hide element -->
<p hidden>This is hidden</p>

<!-- lang - Language -->
<html lang="en"></html>

Common Element-Specific Attributes:

text

<!-- Link attributes -->
<a href="https://example.com" target="_blank" rel="noopener">
Visit Example
</a>

<!-- Image attributes -->
<img src="photo.jpg" alt="Description" width="300" height="200">

<!-- Input attributes -->
<input type="text" name="username" placeholder="Enter name"
required maxlength="50" disabled>

<!-- Form attributes -->
<form action="/submit" method="POST" enctype="multipart/form-data">
<!-- form inputs -->
</form>

<!-- Table attributes -->
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td colspan="2">Merged cell</td>
</tr>
</table>

<!-- Video/Audio attributes -->
<video src="movie.mp4" controls autoplay muted loop></video>

<!-- Button attributes -->
<button type="submit" disabled>Submit</button>

Boolean Attributes:

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

text

<input type="checkbox" checked> <!-- checked="checked" also works -->
<input type="text" disabled>
<input type="text" readonly>
<input type="text" required>
<video autoplay muted></video>
<option selected>Option 1</option>

Custom Data Attributes:

javascript

<!-- Store custom data -->
<div id="product"
data-product-id="12345"
data-price="29.99"
data-category="electronics">
</div>

<script>
const product = document.getElementById('product');
console.log(product.dataset.productId); // "12345"
console.log(product.dataset.price); // "29.99"
</script>

Accessibility Attributes:

html

<img src="logo.png" alt="Company Logo" aria-label="Main logo">
<button aria-label="Close dialog">×</button>
<input type="text" aria-required="true" aria-describedby="help-text">
<div role="navigation" aria-label="Main navigation">...</div>

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:

html

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
padding: 10px;
margin: 5px 0;
}
span {
background-color: lightcoral;
padding: 5px;
}
</style>
</head>
<body>
<!-- DIV - Block element -->
<div>This is a div</div>
<div>Another div</div>
<!-- Each div starts on a new line -->

<!-- SPAN - Inline element -->
<span>This is a span</span>
<span>Another span</span>
<span>Third span</span>
<!-- All spans on the same line -->
</body>
</html>

Common Use Cases:

html

<!-- Using DIV for layout sections -->
<div class="container">
<div class="header">
<h1>Website Title</h1>
</div>

<div class="content">
<p>Main content here</p>
</div>

<div class="footer">
<p>Footer information</p>
</div>
</div>

<!-- Using SPAN for inline styling -->
<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:

html

<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:

text

<!-- Images -->
<img src="photo.jpg" alt="Description">

<!-- Line break -->



<!-- Horizontal rule -->
<hr>

<!-- Input fields -->
<input type="text" name="username">

<!-- Meta information -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Link to external resources -->
<link rel="stylesheet" href="styles.css">

<!-- Embed external content -->
<embed src="video.mp4" type="video/mp4">

<!-- Base URL -->
<base href="https://example.com/">

<!-- Area in image map -->
<area shape="rect" coords="0,0,50,50" href="link.html">

<!-- Column in table -->
<col span="2">

<!-- Source for media elements -->
<source src="audio.mp3" type="audio/mpeg">

<!-- Track for media elements -->
<track src="subtitles.vtt" kind="subtitles">

<!-- Word break opportunity -->
<wbr>

HTML5 vs XHTML Syntax:

text

<!-- HTML5 (both are valid) -->
<img src="photo.jpg" alt="Photo">
<img src="photo.jpg" alt="Photo" />



<br />

<input type="text">
<input type="text" />

<!-- XHTML (slash required) -->
<img src="photo.jpg" alt="Photo" />
<br />
<input type="text" />

Complete Example:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Self-Closing Tags Example</title>
</head>
<body>
<h1>Contact Form</h1>

<form>
<label>Name:</label>
<input type="text" name="name" placeholder="Enter your name">



<label>Email:</label>
<input type="email" name="email" placeholder="Enter your email">



<hr>

<img src="logo.png" alt="Company Logo" width="200">
</form>
</body>
</html>

Common Mistakes to Avoid:

text

<!-- WRONG - Self-closing tags don't need closing tags -->
<img src="photo.jpg"></img>

</br>
<input type="text"></input>

<!-- CORRECT -->
<img src="photo.jpg">


<input type="text">

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:

html

<!-- ID - Unique identifier -->
<div id="header">Main Header</div>
<div id="main-content">Content</div>

<!-- Class - Reusable -->
<p class="highlight">Important text</p>
<p class="highlight">Another important text</p>
<p class="highlight warning">Multiple classes</p>

CSS Styling:

css

<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:

javascript

<!-- HTML -->
<div id="unique-element">Single Element</div>
<p class="multiple-elements">First paragraph</p>
<p class="multiple-elements">Second paragraph</p>

<script>
// 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:

css

<style>
/* ID has higher specificity */
#special { color: red; } /* Specificity: 100 */
.text { color: blue; } /* Specificity: 10 */
p { color: green; } /* Specificity: 1 */
</style>

<p id="special" class="text">
This will be RED (ID wins)
</p>

URL Anchors with ID:

html

<!-- IDs can be used as URL anchors -->
<h2 id="section1">Section 1</h2>
<p>Content for section 1</p>

<h2 id="section2">Section 2</h2>
<p>Content for section 2</p>

<!-- Jump to section using # in URL -->
<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>

<!-- URL: https://example.com/page.html#section1 -->

Real-World Example:

html

<!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>
<!-- Unique sections use ID -->
<header id="header">
<h1 class="text-center">My Website</h1>
</header>

<main id="main-content">
<!-- Reusable styles use classes -->
<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Delete</button>
<button class="btn btn-primary">Submit</button>
</main>

<footer id="footer" class="text-center">
<p>© 2025 My Website</p>
</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:

text

<!-- Specify character encoding (ALWAYS include this) -->
<meta charset="UTF-8">

<!-- Older syntax (HTML4) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Viewport (Responsive Design):

text

<!-- Essential for mobile-responsive websites -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- With additional options -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">

SEO Meta Tags:

text

<!-- Page description (shown in search results) -->
<meta name="description" content="Learn HTML meta tags and their purposes. Complete guide with examples for SEO, responsive design, and browser configuration.">

<!-- Keywords (less important now, but still used) -->
<meta name="keywords" content="HTML, meta tags, SEO, web development, responsive design">

<!-- Author information -->
<meta name="author" content="John Doe">

<!-- Robots (search engine crawling instructions) -->
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="index, follow">

Social Media Meta Tags (Open Graph):

text

<!-- Facebook Open Graph -->
<meta property="og:title" content="Amazing Article Title">
<meta property="og:description" content="This article will change your life">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
<meta property="og:site_name" content="My Website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Amazing Article Title">
<meta name="twitter:description" content="This article will change your life">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@username">

HTTP Equivalent Meta Tags:

text

<!-- Refresh page after 30 seconds -->
<meta http-equiv="refresh" content="30">

<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com">

<!-- Cache control -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

<!-- Content language -->
<meta http-equiv="content-language" content="en-US">

<!-- X-UA-Compatible (IE compatibility) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Mobile and App Meta Tags:

text

<!-- iOS Web App -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App Name">

<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#4285f4">

<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Security Meta Tags:

text

<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' https://trusted.com">

<!-- Referrer Policy -->
<meta name="referrer" content="no-referrer">
<meta name="referrer" content="origin">
<meta name="referrer" content="strict-origin-when-cross-origin">

Complete HTML Head Example:

html

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Essential Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- SEO Meta Tags -->
<meta name="description" content="Learn web development with our comprehensive tutorials">
<meta name="keywords" content="web development, HTML, CSS, JavaScript, tutorials">
<meta name="author" content="Tech Academy">
<meta name="robots" content="index, follow">

<!-- Open Graph / Social Media -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:title" content="Learn Web Development">
<meta property="og:description" content="Master HTML, CSS, and JavaScript">
<meta property="og:image" content="https://example.com/og-image.jpg">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/">
<meta name="twitter:title" content="Learn Web Development">
<meta name="twitter:description" content="Master HTML, CSS, and JavaScript">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">

<!-- Mobile -->
<meta name="theme-color" content="#4285f4">
<meta name="apple-mobile-web-app-capable" content="yes">

<title>Learn Web Development - Complete Guide</title>
</head>
<body>
<!-- Page content -->
</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:

text

<!-- WRONG - Missing viewport -->
<head>
<meta charset="UTF-8">
<title>My Site</title>
</head>

<!-- CORRECT - Include viewport for mobile -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>

<!-- WRONG - Description too long -->
<meta name="description" content="This is a very long description that goes on and on with way too much text that search engines will truncate anyway and users won't read the entire thing because it's just too verbose and doesn't get to the point quickly enough.">

<!-- CORRECT - Concise description -->
<meta name="description" content="Learn web development with hands-on tutorials covering HTML, CSS, JavaScript, and modern frameworks.">

Questions & Answers

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:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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):

html

<!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:

html

<!-- HTML 4.01 Strict (Old) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 (Old) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 (Current - Much Simpler!) -->
<!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:

html

<!-- HTML5 Semantic Tags -->
<header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>

<!-- Old HTML approach -->
<div id="header">, <div id="footer">, <div class="nav">

2. Multimedia Support:

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

text

<!-- HTML5 -->
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>

3. Graphics and Visualization:

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

4. Form Enhancements:

text

<!-- New HTML5 input types -->
<input type="email">
<input type="date">
<input type="time">
<input type="number">
<input type="range">
<input type="color">
<input type="search">

<!-- Built-in validation -->
<input type="email" required>
<input type="url" pattern="https://.*">

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:

html

<!-- HTML5 - Simple -->
<!DOCTYPE html>

<!-- HTML 4 - Complex -->
<!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:

text

<!-- Document Structure -->
<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

<!-- Content -->
<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:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
</head>
<body>
<header>
<h1>My Tech Blog</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<article>
<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>
<img src="html5-logo.png" alt="HTML5 Logo">
<figcaption>The HTML5 Logo</figcaption>
</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>
<p>© 2025 My Tech Blog</p>
</footer>
</body>
</html>

Non-Semantic vs Semantic:

html

<!-- Non-semantic (Old way) -->
<div id="header">...</div>
<div class="navigation">...</div>
<div id="content">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

<!-- Semantic (Modern way) -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

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:

html

<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <section>, <article>,
<header>, <footer>, <nav>, <main>, <form>, <table>

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:

text

<span>, <a>, <strong>, <em>, <img>, 
, <input>, <label>,
<button>, <code>, <small>, <b>, <i>

Visual Example:

html

<!DOCTYPE html>
<html>
<head>
<style>
div { background: lightblue; margin: 10px 0; }
span { background: lightcoral; }
</style>
</head>
<body>
<!-- Block elements -->
<div>Block Element 1 (full width)</div>
<div>Block Element 2 (full width)</div>

<!-- Inline elements -->
<span>Inline 1</span>
<span>Inline 2</span>
<span>Inline 3</span> <!-- All on same line -->

<!-- Mixed -->
<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:

html

<style>
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background: lightgreen;
margin: 5px;
}
</style>

<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>
<div class="inline-block">Box 3</div>
<!-- These boxes sit side by side but have width/height -->

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):

html

<!-- id - Unique identifier -->
<div id="main-content"></div>

<!-- class - CSS class name(s) -->
<p class="text-large highlight">Text</p>

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

<!-- title - Tooltip text -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- data-* - Custom data attributes -->
<div data-user-id="123" data-role="admin"></div>

<!-- hidden - Hide element -->
<p hidden>This is hidden</p>

<!-- lang - Language -->
<html lang="en"></html>

Common Element-Specific Attributes:

text

<!-- Link attributes -->
<a href="https://example.com" target="_blank" rel="noopener">
Visit Example
</a>

<!-- Image attributes -->
<img src="photo.jpg" alt="Description" width="300" height="200">

<!-- Input attributes -->
<input type="text" name="username" placeholder="Enter name"
required maxlength="50" disabled>

<!-- Form attributes -->
<form action="/submit" method="POST" enctype="multipart/form-data">
<!-- form inputs -->
</form>

<!-- Table attributes -->
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td colspan="2">Merged cell</td>
</tr>
</table>

<!-- Video/Audio attributes -->
<video src="movie.mp4" controls autoplay muted loop></video>

<!-- Button attributes -->
<button type="submit" disabled>Submit</button>

Boolean Attributes:

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

text

<input type="checkbox" checked> <!-- checked="checked" also works -->
<input type="text" disabled>
<input type="text" readonly>
<input type="text" required>
<video autoplay muted></video>
<option selected>Option 1</option>

Custom Data Attributes:

javascript

<!-- Store custom data -->
<div id="product"
data-product-id="12345"
data-price="29.99"
data-category="electronics">
</div>

<script>
const product = document.getElementById('product');
console.log(product.dataset.productId); // "12345"
console.log(product.dataset.price); // "29.99"
</script>

Accessibility Attributes:

html

<img src="logo.png" alt="Company Logo" aria-label="Main logo">
<button aria-label="Close dialog">×</button>
<input type="text" aria-required="true" aria-describedby="help-text">
<div role="navigation" aria-label="Main navigation">...</div>

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:

html

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
padding: 10px;
margin: 5px 0;
}
span {
background-color: lightcoral;
padding: 5px;
}
</style>
</head>
<body>
<!-- DIV - Block element -->
<div>This is a div</div>
<div>Another div</div>
<!-- Each div starts on a new line -->

<!-- SPAN - Inline element -->
<span>This is a span</span>
<span>Another span</span>
<span>Third span</span>
<!-- All spans on the same line -->
</body>
</html>

Common Use Cases:

html

<!-- Using DIV for layout sections -->
<div class="container">
<div class="header">
<h1>Website Title</h1>
</div>

<div class="content">
<p>Main content here</p>
</div>

<div class="footer">
<p>Footer information</p>
</div>
</div>

<!-- Using SPAN for inline styling -->
<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:

html

<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:

text

<!-- Images -->
<img src="photo.jpg" alt="Description">

<!-- Line break -->



<!-- Horizontal rule -->
<hr>

<!-- Input fields -->
<input type="text" name="username">

<!-- Meta information -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Link to external resources -->
<link rel="stylesheet" href="styles.css">

<!-- Embed external content -->
<embed src="video.mp4" type="video/mp4">

<!-- Base URL -->
<base href="https://example.com/">

<!-- Area in image map -->
<area shape="rect" coords="0,0,50,50" href="link.html">

<!-- Column in table -->
<col span="2">

<!-- Source for media elements -->
<source src="audio.mp3" type="audio/mpeg">

<!-- Track for media elements -->
<track src="subtitles.vtt" kind="subtitles">

<!-- Word break opportunity -->
<wbr>

HTML5 vs XHTML Syntax:

text

<!-- HTML5 (both are valid) -->
<img src="photo.jpg" alt="Photo">
<img src="photo.jpg" alt="Photo" />



<br />

<input type="text">
<input type="text" />

<!-- XHTML (slash required) -->
<img src="photo.jpg" alt="Photo" />
<br />
<input type="text" />

Complete Example:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Self-Closing Tags Example</title>
</head>
<body>
<h1>Contact Form</h1>

<form>
<label>Name:</label>
<input type="text" name="name" placeholder="Enter your name">



<label>Email:</label>
<input type="email" name="email" placeholder="Enter your email">



<hr>

<img src="logo.png" alt="Company Logo" width="200">
</form>
</body>
</html>

Common Mistakes to Avoid:

text

<!-- WRONG - Self-closing tags don't need closing tags -->
<img src="photo.jpg"></img>

</br>
<input type="text"></input>

<!-- CORRECT -->
<img src="photo.jpg">


<input type="text">

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:

html

<!-- ID - Unique identifier -->
<div id="header">Main Header</div>
<div id="main-content">Content</div>

<!-- Class - Reusable -->
<p class="highlight">Important text</p>
<p class="highlight">Another important text</p>
<p class="highlight warning">Multiple classes</p>

CSS Styling:

css

<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:

javascript

<!-- HTML -->
<div id="unique-element">Single Element</div>
<p class="multiple-elements">First paragraph</p>
<p class="multiple-elements">Second paragraph</p>

<script>
// 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:

css

<style>
/* ID has higher specificity */
#special { color: red; } /* Specificity: 100 */
.text { color: blue; } /* Specificity: 10 */
p { color: green; } /* Specificity: 1 */
</style>

<p id="special" class="text">
This will be RED (ID wins)
</p>

URL Anchors with ID:

html

<!-- IDs can be used as URL anchors -->
<h2 id="section1">Section 1</h2>
<p>Content for section 1</p>

<h2 id="section2">Section 2</h2>
<p>Content for section 2</p>

<!-- Jump to section using # in URL -->
<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>

<!-- URL: https://example.com/page.html#section1 -->

Real-World Example:

html

<!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>
<!-- Unique sections use ID -->
<header id="header">
<h1 class="text-center">My Website</h1>
</header>

<main id="main-content">
<!-- Reusable styles use classes -->
<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Delete</button>
<button class="btn btn-primary">Submit</button>
</main>

<footer id="footer" class="text-center">
<p>© 2025 My Website</p>
</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:

text

<!-- Specify character encoding (ALWAYS include this) -->
<meta charset="UTF-8">

<!-- Older syntax (HTML4) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Viewport (Responsive Design):

text

<!-- Essential for mobile-responsive websites -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- With additional options -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">

SEO Meta Tags:

text

<!-- Page description (shown in search results) -->
<meta name="description" content="Learn HTML meta tags and their purposes. Complete guide with examples for SEO, responsive design, and browser configuration.">

<!-- Keywords (less important now, but still used) -->
<meta name="keywords" content="HTML, meta tags, SEO, web development, responsive design">

<!-- Author information -->
<meta name="author" content="John Doe">

<!-- Robots (search engine crawling instructions) -->
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="index, follow">

Social Media Meta Tags (Open Graph):

text

<!-- Facebook Open Graph -->
<meta property="og:title" content="Amazing Article Title">
<meta property="og:description" content="This article will change your life">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
<meta property="og:site_name" content="My Website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Amazing Article Title">
<meta name="twitter:description" content="This article will change your life">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@username">

HTTP Equivalent Meta Tags:

text

<!-- Refresh page after 30 seconds -->
<meta http-equiv="refresh" content="30">

<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com">

<!-- Cache control -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

<!-- Content language -->
<meta http-equiv="content-language" content="en-US">

<!-- X-UA-Compatible (IE compatibility) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Mobile and App Meta Tags:

text

<!-- iOS Web App -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App Name">

<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#4285f4">

<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Security Meta Tags:

text

<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' https://trusted.com">

<!-- Referrer Policy -->
<meta name="referrer" content="no-referrer">
<meta name="referrer" content="origin">
<meta name="referrer" content="strict-origin-when-cross-origin">

Complete HTML Head Example:

html

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Essential Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- SEO Meta Tags -->
<meta name="description" content="Learn web development with our comprehensive tutorials">
<meta name="keywords" content="web development, HTML, CSS, JavaScript, tutorials">
<meta name="author" content="Tech Academy">
<meta name="robots" content="index, follow">

<!-- Open Graph / Social Media -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:title" content="Learn Web Development">
<meta property="og:description" content="Master HTML, CSS, and JavaScript">
<meta property="og:image" content="https://example.com/og-image.jpg">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://example.com/">
<meta name="twitter:title" content="Learn Web Development">
<meta name="twitter:description" content="Master HTML, CSS, and JavaScript">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">

<!-- Mobile -->
<meta name="theme-color" content="#4285f4">
<meta name="apple-mobile-web-app-capable" content="yes">

<title>Learn Web Development - Complete Guide</title>
</head>
<body>
<!-- Page content -->
</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:

text

<!-- WRONG - Missing viewport -->
<head>
<meta charset="UTF-8">
<title>My Site</title>
</head>

<!-- CORRECT - Include viewport for mobile -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Site</title>
</head>

<!-- WRONG - Description too long -->
<meta name="description" content="This is a very long description that goes on and on with way too much text that search engines will truncate anyway and users won't read the entire thing because it's just too verbose and doesn't get to the point quickly enough.">

<!-- CORRECT - Concise description -->
<meta name="description" content="Learn web development with hands-on tutorials covering HTML, CSS, JavaScript, and modern frameworks.">

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?

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?