Hey there, frontend enthusiasts! 👋 Whether you're gearing up for your first interview or brushing up for your next big opportunity, mastering HTML is a must. Here's a curated list of the most common HTML interview questions with practical examples. Let's dive in! 🚀

1. What are semantic HTML tags?

Semantic tags clearly describe their purpose in a web page. They make your code more readable and improve SEO. 📝

Example:

<!-- Semantic -->
<header>
  <h1>Welcome to My Blog</h1>
</header>
<article>
  <h2>How to Code</h2>
  <p>Start by learning the basics...</p>
</article>

<!-- Non-semantic -->
<div class="header">
  <h1>Welcome to My Blog</h1>
</div>
<div class="content">
  <h2>How to Code</h2>
  <p>Start by learning the basics...</p>
</div>

Why it matters: Semantic tags improve accessibility and help search engines understand your content better.

2. What is the difference between id and class attributes?

• id: Unique identifier, used once per page.
• class: Can be reused multiple times for styling or grouping elements.

Example:

<!-- Using id -->
<div id="main-header">Welcome!</div>

<!-- Using class -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>

Pro Tip: Use id for unique elements like headers or footers, and class for reusable components.

3. What are void elements in HTML?

Void elements are self-closing and don’t have a closing tag.

Examples:

<img src="image.jpg" alt="A beautiful view">
<input type="text" placeholder="Enter your name">
<hr>

Fun Fact: Adding a closing tag to void elements is invalid HTML!

4. How do you include JavaScript in an HTML document?

There are three ways to include JavaScript:

1) Inline:

   <button onclick="alert('Hello!')">Click Me</button>

2) Internal:

   <script>
     console.log('Hello from internal script!');
   </script>

3) External:

   <script src="script.js"></script>

Pro Tip: External scripts are preferred for better separation of concerns. 🛠️

5. What is the purpose of the alt attribute in images?

The alt attribute provides alternative text for an image when it’s not displayed or for screen readers.

Example:

<img src="logo.png" alt="Company Logo">

Why it’s important: Enhances accessibility and improves SEO ranking.

6. What are the differences between inline, block, and inline-block elements in HTML?

• Inline: Doesn’t start on a new line and only takes up as much width as necessary.
• Block: Starts on a new line and takes up the full width available.
• Inline-block: Behaves like an inline element but allows setting width and height.

Example:

<!-- Inline -->
<span>This is inline</span>
<span>Another inline</span>

<!-- Block -->
<div>This is block</div>
<div>Another block</div>

<!-- Inline-block -->
<div style="display: inline-block; width: 100px;">Inline-block 1</div>
<div style="display: inline-block; width: 100px;">Inline-block 2</div>

Pro Tip: Use inline-block for layouts where you need elements side-by-side with specific dimensions.

7. What are data attributes in HTML?

Custom attributes to store extra data without cluttering your DOM.

Example:

<button data-user-id="123" onclick="handleClick(this)">Click Me</button>
<script>
  function handleClick(button) {
    alert(`User ID: ${button.dataset.userId}`);
  }
</script>

Why they’re handy: Great for passing data to JavaScript without hardcoding.

8. How can you make an HTML element accessible?

• Use proper semantic tags.
• Add aria-* attributes for better screen reader support.

Example:

<button aria-label="Submit Form">Submit</button>

Pro Tip: Test your website with screen readers for real-world accessibility. 🌟

9. What’s the difference between <link> and <a> tags?

• <link>: Defines a relationship between the document and an external resource (like CSS).
• <a>: Creates a hyperlink.

Example:

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

<!-- Anchor -->
<a href="https://dev.to">Visit DEV Community</a>

Quick Tip: Don’t confuse the two—one is for resources, the other for navigation!

10. What is the doctype declaration?

The <!DOCTYPE> declaration defines the HTML version used in the document.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <p>Hello, World!</p>
</body>
</html>

Fun Fact: Modern browsers default to HTML5 even if the doctype is missing, but it’s best to include it.

Quiz Time! 🎉

Let’s test your knowledge. Answer these in the comments below! 💬

1. What tag would you use for defining a navigation menu?

• a) <div>
• b) <nav>
• c) <section>

1. Which attribute uniquely identifies an element in the DOM?

• a) class
• b) id
• c) style

1. True or False: The <img> tag is a semantic HTML tag.

Drop your answers below and let’s discuss! 🎯