DEV Community

Cover image for Top 50 HTML Interview Questions and Answers for Beginners
Tech Webster
Tech Webster

Posted on

Top 50 HTML Interview Questions and Answers for Beginners

#interview #webdev #html #beginners

Questions List

  1. What is HTML?
  2. What is the difference between HTML and HTML5?
  3. What is the purpose of DOCTYPE in HTML?
  4. What is the basic structure of an HTML document?
  5. What is the difference between a tag and an element?
  6. What are HTML attributes?
  7. What is the difference between id and class?
  8. What are semantic HTML elements?
  9. Why is Semantic HTML important?
  10. What is the difference between div and span?
  11. What are block elements?
  12. What are inline elements?
  13. What is the purpose of the head tag?
  14. What are Meta Tags?
  15. What is the viewport meta tag?
  16. What is the difference between relative and absolute paths?
  17. What is the img tag?
  18. Why is the alt attribute important?
  19. What are HTML entities?
  20. What is the difference between Ordered and Unordered Lists?
  21. What is a Description List?
  22. What is a Hyperlink?
  23. How do you open a link in a new tab?
  24. What is the purpose of the target attribute?
  25. What is an iframe?
  26. What is the difference between GET and POST?
  27. What is a Form?
  28. What is the action attribute in forms?
  29. What is the method attribute in forms?
  30. What is the label tag?
  31. What are common input types in HTML?
  32. Difference between Radio and Checkbox?
  33. What is the placeholder attribute?
  34. What is the required attribute?
  35. What is the readonly attribute?
  36. What is the disabled attribute?
  37. What is HTML Accessibility?
  38. What is SEO in HTML?
  39. Which HTML tags help SEO?
  40. What is the difference between b and strong?
  41. What is the difference between i and em?
  42. What are empty elements?
  43. What is the purpose of comments in HTML?
  44. What is HTML5 Local Storage?
  45. What is the difference between Local Storage and Session Storage?
  46. What is the Audio tag?
  47. What is the Video tag?
  48. What is the Canvas element?
  49. What is the difference between HTML CSS and JavaScript?
  50. Why should we learn HTML?

1. What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages.

⬆ Back to Questions

2. What is the difference between HTML and HTML5?

HTML5 is the latest version of HTML.

New features:

  • Semantic tags
  • Audio & Video support
  • Canvas
  • Local Storage
  • New input types

⬆ Back to Questions

3. What is the purpose of DOCTYPE in HTML?

It tells the browser that the document uses HTML5.

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

4. What is the basic structure of an HTML document? 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

5. What is the difference between a tag and an element?

Tag 

<p>
Enter fullscreen mode Exit fullscreen mode

Element 

<p>Hello World</p>
Enter fullscreen mode Exit fullscreen mode

An element includes opening tag, content, and closing tag.

⬆ Back to Questions

6. What are HTML attributes?

Attributes provide extra information about HTML elements.

Example:

<a href="https://google.com">Google</a>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

7. What is the difference between id and class?

id

  • Unique
  • Used once per page

class

  • Reusable
  • Used multiple times

⬆ Back to Questions

8. What are semantic HTML elements?

Semantic elements describe the meaning of content.

Examples:

<header>
<nav>
<section>
<article>
<footer>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

9. Why is Semantic HTML important?

Benefits:

  • Better SEO
  • Better Accessibility
  • Cleaner code structure

⬆ Back to Questions

10. What is the difference between div and span?

div

  • Block element

span

  • Inline element

⬆ Back to Questions

11. What are block elements?

Elements that take the full available width.

Examples:

<div>
<p>
<h1>
<section>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

12. What are inline elements?

Elements that only take required width.

Examples:

<span>
<a>
<strong>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

13. What is the purpose of the head tag?

Stores metadata such as:

  • Title
  • CSS files
  • Meta tags
  • Scripts

⬆ Back to Questions

14. What are Meta Tags?

Meta tags provide information about the webpage.

Example:

<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

15. What is the viewport meta tag?

Used for responsive websites.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

16. What is the difference between relative and absolute paths?

Relative 

images/logo.png
Enter fullscreen mode Exit fullscreen mode

Absolute 

https://example.com/logo.png
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

17. What is the img tag?

Used to display images.

<img src="image.jpg" alt="Image">
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

18. Why is the alt attribute important?

  • Accessibility
  • SEO
  • Fallback text 
<img src="cat.jpg" alt="Cat Image">
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

19. What are HTML entities?

Special characters represented using codes.

Examples:

&lt;
&gt;
&nbsp;
&copy;
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

20. What is the difference between Ordered and Unordered Lists?

Ordered List 

<ol>
Enter fullscreen mode Exit fullscreen mode

Shows numbers.

Unordered List 

<ul>
Enter fullscreen mode Exit fullscreen mode

Shows bullet points.

⬆ Back to Questions

21. What is a Description List?

Used for terms and descriptions.

<dl>
<dt>HTML</dt>
<dd>Markup Language</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

22. What is a Hyperlink?

A clickable link created using:

<a>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

23. How do you open a link in a new tab? 

<a href="#" target="_blank">
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

24. What is the purpose of the target attribute?

It defines where the linked document opens.

⬆ Back to Questions

25. What is an iframe?

Used to embed another webpage.

<iframe src=""></iframe>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

26. What is the difference between GET and POST?

GET

  • Data visible in URL

POST

  • Data hidden
  • More secure

⬆ Back to Questions

27. What is a Form?

Forms are used to collect user data.

<form>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

28. What is the action attribute in forms?

Defines where the form data will be sent.

⬆ Back to Questions

29. What is the method attribute in forms?

Defines how data is submitted.

Examples:

  • GET
  • POST

⬆ Back to Questions

30. What is the label tag?

Connects text with form inputs.

<label>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

31. What are common input types in HTML?

  • text
  • password
  • email
  • number
  • radio
  • checkbox
  • file
  • date

⬆ Back to Questions

32. Difference between Radio and Checkbox?

Radio

Only one option can be selected.

Checkbox

Multiple options can be selected.

⬆ Back to Questions

33. What is the placeholder attribute?

Shows hint text inside input fields.

⬆ Back to Questions

34. What is the required attribute?

Makes a field mandatory.

⬆ Back to Questions

35. What is the readonly attribute?

Makes the field non-editable.

⬆ Back to Questions

36. What is the disabled attribute?

Disables an input field.

⬆ Back to Questions

37. What is HTML Accessibility?

Making websites usable for everyone, including people with disabilities.

⬆ Back to Questions

38. What is SEO in HTML?

SEO means optimizing webpages for search engines.

⬆ Back to Questions

39. Which HTML tags help SEO?

  • h1 to h6
  • title
  • meta
  • article
  • section

⬆ Back to Questions

40. What is the difference between b and strong?

b

Visual bold text.

strong

Important text with semantic meaning.

⬆ Back to Questions

41. What is the difference between i and em?

i

Italic text.

em

Emphasized text with meaning.

⬆ Back to Questions

42. What are empty elements?

Elements without closing tags.

Examples:

<br>
<hr>
<img>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

43. What is the purpose of comments in HTML?

Used for notes inside code.

<!-- Comment -->
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

44. What is HTML5 Local Storage?

Stores data inside the browser permanently until removed.

⬆ Back to Questions

45. What is the difference between Local Storage and Session Storage?

Local Storage

Persists until manually removed.

Session Storage

Removed when browser tab closes.

⬆ Back to Questions

46. What is the Audio tag?

Used to play audio files.

<audio>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

47. What is the Video tag?

Used to play videos.

<video>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

48. What is the Canvas element?

Used for graphics and drawing.

<canvas>
Enter fullscreen mode Exit fullscreen mode

⬆ Back to Questions

49. What is the difference between HTML CSS and JavaScript?

HTML

Structure

CSS

Styling

JavaScript

Interactivity

⬆ Back to Questions

50. Why should we learn HTML?

HTML is the foundation of every website.

Without HTML, webpages cannot be structured properly.

⬆ Back to Questions

Top comments (1)

Collapse
 
merbayerp profile image
Mustafa ERBAY •

Nice beginner-friendly collection. One small but important correction: POST is not inherently “more secure” than GET. It keeps form data out of the URL, but the request body still needs HTTPS, and sensitive operations still require proper authentication, authorization, and CSRF protection.

I’d phrase it as: GET is generally used to retrieve data and may expose parameters in the URL, while POST sends data in the request body and is commonly used for submissions or state-changing operations.

Reference: WHATWG HTML Standard — Forms
html.spec.whatwg.org/multipage/for...

Solid list overall; fixing that distinction would prevent a very common beginner misconception.