HTML Interview Questions and Answers

Posted on by Admin

HTML (HyperText Markup Language) is the standard language used to structure content on the web. It tells the browser how to display text, images, and other elements on a webpage.

  • HTML is a markup language, not a programming language.
  • It defines the structure of a webpage using tags and elements.
  • HTML is static; CSS styles it and JavaScript adds interactivity.
  • It forms the foundation of almost every website today.

Beginner HTML Questions

Here are some beginner-friendly HTML questions to help you get started.

1. What are HTML tags?

HTML tags are special keywords enclosed in angle brackets (< >) that tell a web browser how to structure and display content on a webpage.

2. What’s the difference between HTML and HTML5?

HTML is the general name for HyperText Markup Language, and HTML5 is the latest launched version in 2014. HTML5 added awesome features like:

Aspect HTML HTML5
Doctype Long & complex Simple: <!DOCTYPE html>
Multimedia Needs plugins (Flash) <audio>, <video>
Graphics No native support <canvas>, <svg>
Forms Basic inputs New inputs: email, date, etc.
Semantic Tags Uses <div> mostly <header>, <footer>, <article>
APIs None Geolocation, Web Storage, etc

3. What’s the basic structure of an HTML document?

Every HTML document needs a specific setup so browsers know how to read it. It’s like the blueprint for your web page. Here’s what goes in it:

  • <!DOCTYPE html>: Tells the browser this is an HTML5 page.
  • <html>: The main container for everything else.
  • <head>: Holds behind-the-scenes info like the page title or links to CSS and JavaScript.
  • <body>: Where all the visible stuff goes, like text, images, or links.

4. What’s the difference between a tag and an element?

A tag is just the code you write, like <p> or </p>, inside angle brackets. An element is the whole package: the opening tag, the content inside, and the closing tag. Some tags, like <img>, are self-closing and don’t need a closing partner. So, tags are the tools, and elements are what you build with them.

  • Tag: <div> or </div>, just the code.
  • Element: <div>Hi there!</div>, the tag plus content.
<p>This is an **element**.</p> <!-- <p> and </p> are **tags** -->

5. What are attributes in HTML?

Attributes are extra details you add to an opening tag to give it more powers. They look like name=”value”. For example, they can tell a link where to go or an image what picture to show. Common ones are href for links, src for images, and id to give something a unique name.

6. What is the difference between <section>, <article>, and <div>?

<div> is a generic container for styling or layout, <section> groups thematically related content, and <article> represents self-contained, independent content like blog posts or news items.

<div> <section> <article>
Generic container, no semantic meaning. Groups related content thematically. Self-contained content that stands independently.
Used for grouping elements. Usually includes a heading (<h1>–<h6>). Suitable for blog posts, news articles, comments.
Mainly for styling or layout purposes. Helps structure content logically on the page. Can be reused or syndicated.
Example: <div class="card"><p>Styled content box</p></div> Example: <section><h2>Services</h2><p>Web development and design</p></section> Example: <article><h2>Blog Post</h2><p>This is a blog article</p></article>

A hyperlink is created using the <a> (anchor) tag and an href attribute that says where the link goes. The text inside the tag is what people click on to visit another page or resource.

<a href="https://example.com/">Go to Example</a>

This makes a clickable link that says “Go to Example” and takes you to that website.

Absolute URL: An absolute URL specifies the full path to the resource, including the protocol (http, https, etc.), domain, and file path. It works independently of the current page location.

<a href="https://www.example.com/about.html">About Us</a>
  • No matter where the current page is hosted, this link always points to the full domain.

Relative URL: A relative URL specifies the path to the resource relative to the current page’s location. It is used when linking to resources within the same website/project.

<a href="/about.html">About Us</a>
  • If the current website is hosted at https://www.mysite.com, this link points to https://www.mysite.com/about.html.

8. What’s the <img> tag for?

The <img> tag puts pictures on your web page. It’s a self-closing tag, so it doesn’t need a closing part. You need two main attributes:

  • src: Tells the browser where to find the image file.
  • alt: Gives a description of the image for accessibility (like for people using screen readers) or if the image doesn’t load.

The alt text also helps Google understand your image, which is great for SEO.

<img src="mountain.jpg" alt="A beautiful **mountain** scene">

9. What’s the difference between block-level and inline elements?

Block-level and inline elements act differently on a web page:

  • Block-level elements: Take up the whole width of their space, start on a new line, and stack like boxes (e.g., <div>, <p>, <h1>). They’re great for big sections like paragraphs or headers.
  • Inline elements: Only use the space their content needs, stay on the same line, and flow with text (e.g., <span>, <a>, <img>). They’re perfect for small bits like links or images within a sentence.

10. What kinds of lists can you make in HTML?

HTML lets you create three types of lists:

  1. Ordered List (<ol>): Shows items with numbers or letters (like 1, 2, 3).
  2. Unordered List (<ul>): Uses bullets for items.
  3. Description List (<dl>): Pairs terms (<dt>) with their descriptions (<dd>).

For ordered and unordered lists, each item goes in an <li> (list item) tag.

<ol>
  <li>First **item**</li>
  <li>Second **item**</li>
</ol>
<ul>
  <li>**Bullet** point</li>
  <li>Another **point**</li>
</ul>
<dl>
  <dt>**HTML**</dt>
  <dd>**HyperText Markup Language**</dd>
</dl>

11. What is the <form> tag and what do action and method do?

The <form> tag in HTML is used to create a form that collects user input and sends it to a server for processing. It acts as a container for input elements like text boxes, checkboxes, radio buttons, and buttons.

action attribute: Defines where the form data should be sent once the user submits it.

  • Example: action=”/submit.php” will send the form data to the submit.php file on the server.

method attribute: Defines how the form data will be sent to the server.

  • GET: Appends the form data into the URL (visible in the address bar, suitable for non-sensitive data, like search queries).
  • POST: Sends data in the request body (not visible in the URL, better for sensitive or large data like passwords and file uploads).

This form asks for a name and sends it to /submit.

12. What does the <br> tag do and when should you avoid it?

The <br> tag adds a line break, moving content to the next line without starting a new paragraph.

  • It’s self-closing and handy for things like addresses or poems where you want a quick line shift without extra space.
  • It should not be used for layout or spacing. Instead, use semantic HTML and CSS for better readability and maintainability.
123 **Main St**<br>**New York**, NY

To make a hyperlink open in a new tab, add target=”_blank” to the <a> tag. This keeps the current page open while the new page loads in a separate tab. Adding rel=”noopener” is a good idea for security, so the new tab can’t mess with your original page.

<a href="https://example.com/" target="_blank" rel="noopener">Open in a **New Tab**</a>
  • Using target=”_blank” alone exposes a security risk: the new page can access the window.opener property and potentially manipulate the original page (phishing or malicious redirects).
  • We add rel=”noopener” to prevent the new page from accessing window.opener

14. What does the <title> tag do and why is it important for SEO?

The <title> tag sets the name of your web page that appears in the browser tab and helps people and search engines know what your page is about.

  • Helps Search Engines: Makes it easier for Google and others to understand your page.
  • Helps Visitors: Lets people quickly see what your page is about, so they know if they want to click.
<head>  <title>My Awesome **Website**</title></head>

15. What’s the <meta>tag?

The <meta> tag lives in the <head> and gives extra info about your web page, like what character set it uses, a description for search engines, or settings for mobile screens. It’s not visible to users but helps browsers and Google understand your page better.

<meta charset="UTF-8"> <!-- Sets the **character encoding** --><meta name="description" content="A cool **webpage**"> <!-- Helps with **SEO** -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Makes it **mobile-friendly** -->
  • Charset (<meta charset=”UTF-8″>): Defines the character encoding of the web page. UTF-8 is the most widely used because it supports almost all characters and symbols across different languages.
  • Viewport: It helps control how a page is displayed on mobile and tablet devices. Ensures the website is responsive by setting the width of the page equal to the device’s screen width.
  • Description: It provides a short summary of the web page’s content. This description often appears in search engine results (SEO).

16. How do you make a table?

A ta ble is built with the <table> tag. You use <tr> for rows, <th> for headers, and <td> for data cells. Tables organize data in a grid, like for schedules or charts. For accessibility, add <thead>, <tbody>, and <caption> to make it clear what the table is about.

An email link uses the <a> tag with a mailto: in the href attribute. When clicked, it opens the user’s email app with a new message to the email address you specify.

<a href="mailto:hello@example.com">Send an **Email**</a>

18. What’s the <em> tag?

The <em> tag emphasizes text, usually making it italic. Unlike <i>, which is just for style, <em> has meaning—it tells screen readers to stress the text, helping with accessibility and adding a bit of tone to your content.

<p>I <em>**love**</em> to **code**!</p>

19. How do you make a checkbox?

A checkbox uses <input type=”checkbox”> to let users select multiple options. Use a unique id for each checkbox and connect it to a <label> for accessibility. Use the same name to group them and checked to pre-select.

  • Each checkbox: unique id, meaningful value.
  • Label: <label for=”…”> or wrap the input.
  • Group: <fieldset> + <legend> describes the set.
  • Same name for the group (e.g., name=”hobbies”).
<input type="checkbox" id="news" name="news" checked><label for="news">Get the **Newsletter**</label>

20. What is the <label> tag and how does for/id improve accessibility?

The <label> tag provides a text description for a form input. Using for (on <label>) and id (on the input) links them so clicking the label focuses the input, and screen readers announce them together—greatly improving accessibility.

  • Without a label: Users must click the small input box, and screen readers may not identify the field clearly.
  • With a label: Clicking the text focuses the input, and screen readers read the label with the field.

How for and id work together:

They create a direct connection between a label and its input, improving usability and accessibility.

  • Each form control (like <input>) has a unique id.
  • The <label> uses the for attribute with the same value as that id.
  • This creates a direct link between the text and the input.
<label for="name">**Name**:</label><input type="text" id="name" name="name">

21. How do you make a dropdown list?

A dropdown list uses the <select> tag, with options inside <option> tags. The name attribute sends the chosen value, and value sets what goes to the server. Pair it with a <label> for accessibility.

22. What is the <blockquote> tag and when should you use cite?

The <blockquote> tag is for long quotes from somewhere else, often shown with indentation. You can add a cite attribute to note the source URL, though it’s not visible. It’s semantic, so search engines know it’s a quote, which helps with SEO.

  • Cite Attribute: Specifies the source URL of the quote.
  • Accessibility: Screen readers can detect the source, helping visually impaired users.
  • SEO & Documentation: Search engines and documentation tools can recognize and credit the quote properly.
<blockquote cite="https://example.com/">  A really **inspiring quote**.</blockquote>

23. How HTML is different from CSS?

HTML provides the structure and content of a webpage, while CSS controls its design and visual layout.

HTML

CSS

Defines the structure and content of a webpage

Styles and formats the appearance of the webpage

Uses tags to add elements like text, images, and links

Uses selectors and properties to control colors, fonts, spacing, etc.

Forms the backbone of any webpage

Enhances visual appeal and layout

Determines what appears on the page

Determines how it appears

Intermediate HTML Questions

These questions go beyond the basics, focusing on HTML5 features, semantics, forms, and attributes that improve accessibility, SEO, and user experience.

24. What are semantic HTML elements?

Semantic HTML elements clearly describe their purpose (e.g., <header>, <nav>, <article>, <footer>), making code readable, improving accessibility, and helping SEO.

  • Improves accessibility for screen readers.
  • Helps search engines understand page structure.

25. How do you add a video in HTML5?

HTML5 <video> tag lets you embed videos without extra software. Use controls for play/pause buttons, <source> for the video file, and fallback text if unsupported.

  • controls adds play, pause, and volume options.
  • <source> specifies video file and format.

26. Why is the alt attribute important in <img>?

The alt attribute in <img> describes what the image is about. It’s a big deal because:

  • Accessibility: Screen readers read it to visually impaired users.
  • SEO: Search engines use it to index images.
  • Backup: It shows up if the image doesn’t load.
<img src="cat.jpg" alt="A cute **cat** on a couch">

27. What’s the <fieldset>tag?

<fi eldset> groups related form elements, and <legend> adds a title for the group, improving form clarity and accessibility.

  • Helps users understand related fields.
  • Screen readers announce the group and its purpose.

28. What does <noscript> do and why is it still relevant?

The <noscript> tag in HTML provides fallback content for users whose browsers do not support JavaScript or have it disabled. Anything inside <noscript> is displayed only when scripts can’t run.

  • Accessibility & graceful degradation: Some users disable JavaScript for speed, privacy, or security. <noscript> ensures they don’t miss critical content.
  • SEO impact: Search engine crawlers may not fully execute scripts; fallback text in <noscript> can improve discoverability.
  • Security environments: In corporate firewalls or browsers with JS blocked, <noscript> ensures forms, links, or instructions are still visible.

29. How do you add a JavaScript file?

To add an external JavaScript file, use the <script> tag with a src attribute pointing to the file. Put it in the <head> (with defer or async) or at the end of <body> so the page loads faster without waiting for the script.

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

30. How do you add CSS styling in an HTML file?

You can add CSS styling in three ways: inline, internal, or external, to style HTML elements and control their appearance.

  1. Inline CSS: Apply styles directly to an element using the style attribute. 
    <p style="color: blue; font-size: 16px;">Hello!</p>
  2. Internal CSS: Place CSS inside a <style> tag within the <head> section. 
    <head>
  <style>
    p { color: blue; font-size: 16px; }
  </style>
</head>
  3. External CSS: Link an external .css file using the <link> tag. 
    <head>
  <link rel="stylesheet" href="styles.css">
</head>

31. When should you use <strong>/<em> vs <b>/<i>? (semantics vs presentation)

You should use <strong> and <em> when you want to give text semantic meaning, since they signal importance or emphasis to browsers, screen readers, and search engines—<strong> usually renders bold and <em> italic, but also carry meaning for accessibility.

  • <strong> and <em>: Give semantic meaning; show importance or emphasis.
  • <b> and <i>: Purely for styling; <b> makes text bold, <i> makes it italic. Useful for UI elements, foreign words, or stylistic highlights.
<b>**Bold** for looks</b><strong>**Important** stuff</strong>

32. How do you make a multi-line text input?

The <textarea> tag lets users type longer text, like a comment. You set its size with rows and cols attributes, and name sends the data when the form is submitted. You can add default text inside the tags.

33. What’s the action attribute in a form?

The action attribute in a <form> tells the browser where to send the form data when submitted, like to a server address. If you don’t include it, the data goes to the same page you’re on.

34. What’s the <base> tag?

The <base> tag goes in the <head> and sets a default starting point for all relative URLs on your page. It’s like saying, “All my links start from this address.” Be careful, as it affects every link on the page.

35. What is enctype in forms? When to use multipart/form-data?

The enctype attribute determines how form data is encoded when sent to the server, usually with method=”post”. Here are the main types:

  • application/x-www-form-urlencoded: The default, turns data into URL-friendly format.
  • multipart/form-data: Needed for uploading files.
  • text/plain: Sends data as plain text (not common).

You should use enctype=”multipart/form-data” when your form involves file uploads (via <input type=”file”>). Unlike the default encoding, this type splits the data into separate parts (one per field), allowing binary files (like images, PDFs, or videos) to be sent correctly along with text fields.

36. How do you make a hidden input field?

A hidden input field (<input type=”hidden”>) stores data that gets sent with the form but isn’t shown to users. It’s great for things like user IDs or session tokens that the server needs.

<input type="hidden" name="userID" value="12345">

37. What’s the <address>tag?

The <address> tag holds contact info for the person or group behind a page or section, like an email, website, or street address. It’s semantic, so search engines recognize it, and browsers often style it in italics. It is used to display the author’s or owner’s contact details of a document or article.

38. What’s the lang attribute in <html>?

The lang attribute in the <html> tag tells browsers and search engines the main language of your page (like en for English). It helps screen readers read the content correctly and improves SEO for targeting the right audience.

39. What’s the contenteditable attribute?

The contenteditable attribute, when set to true, lets users edit text or content right in the browser. It’s cool for things like live editing tools, but you’ll need JavaScript to save the changes.

<div contenteditable="true">Click to **edit** this **text**.</div>

40. Are <div> and <span> tags similar?

Both the tags (<div> and <span>) are used to represent the part of the web page. The <div> tag is used as the block component, and the <span> tag is used as an inline component.

<div>
    A Computer Science Portal for Geeks
    <span>
        GeeksforGeeks
    <span>
</div>

<div> tag

  • Block-level container used to divide sections of a webpage.
  • Commonly used for layout (header, footer, sections, etc.).
  • Always has opening <div> and closing </div> tags.

<span> tag

  • Inline container used to style or group small pieces of content.
  • Does not start on a new line.
  • Mainly used with class or id when no semantic tag fits.
<ol>
  <li>First **item**</li>
  <li>Second **item**</li>
</ol>
<ul>
  <li>**Bullet** point</li>
  <li>Another **point**</li>
</ul>
<dl>
  <dt>**HTML**</dt>2. Differences between <div> & <span> tag:
  <dd>**HyperText Markup Language**</dd>

</dl>

41. Differences between <div> & <span> tag?

<div> tag

<span> tag

The <div> tag is a block level element.

The <span> tag is an inline element.

It is best to attach it to a section of a web page.

It is best to attach CSS to a small section of a line on a web page.

It accepts align attribute.

It does not accept aligned attributes.

This tag should be used to wrap a section, for highlighting that section.

This tag should be used to wrap any specific word that you want to highlight on your webpage.

42. Are <div> and <span> tags similar?

Both the tags (<div> and <span>) are used to represent the part of the web page. The <div> tag is used as the block component, and the <span> tag is used as an inline component.

<div>
    A Computer Science Portal for Geeks
    <span>
        GeeksforGeeks
    <span>
</div>

<div> tag: The div tag is known as the Division tag. It is a block-level tag & is used in HTML to make divisions of content on the web page (text, images, header, footer, navigation bar, etc). Div tag has both openings (<div>) and closing (</div>) tags, and it is mandatory to close the tag.

<span> tag: The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes). A better way to use it is when no other semantic element is available.

43. What is the difference between classes and id?

id Attribute: The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id.

Syntax:

<element id="id_name">

In CSS Stylesheet:
#id_name {
    // CSS Property
}

class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name can be represented by using the “.” symbol.

Syntax:

<element class="class_name>

In CSS Stylesheet:
.class {
    // CSS Property
}

The only difference between them is that “id” is unique on a page and can only apply to at most one element, while the “class” selector can apply to multiple elements.

44. How can we create a nested webpage in HTML?

When the content of one completely different webpage is embedded into another webpage, it is called a nested webpage. The nested webpage can be created using the following 2 methods:

  • <iframe> tag: The iframe in HTML stands for Inline Frame. The “iframe” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
  • <embed> tag: The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.

45. What are the tags that can be used inside the <head> tag?

The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta information.

The HTML <head> element is a container for the following elements:

  • <title>: It defines the title of the webpage.
  • <link>: It is most often used to link an external CSS file.
  • <meta>: It is used to specify the Character set, Page description, Keywords, Author of the document, and Viewport settings. It will not be displayed but is used by browsers on how to display content or reload pages and by search engines, and other web services.
  • <base>: It is used to specify the base URL or target for relative URLs.
  • <style>: It is used to make internal CSS within our HTML webpage.
  • <script>: It is used to define within the HTML webpage.

46. What are meta tags? How are they important?

The metadata means information about data. The <meta> tag in HTML provides information about HTML Document or in simple words, it provides important information about a document. These tags are basically used to add name/value pairs to describe properties of HTML documents, such as expiry date, author name, list of keywords, document author, etc. This tag is an empty element because it only has an opening tag and no closing tag, but it carries information within its attributes. A web document can include one or more meta tags depending on information, but in general, it doesn’t affect the physical appearance of the document.

Syntax:

<meta attribute-name="value">
  • The <meta> tag contents are not visible in the browser.
  • <meta> tags are added inside the <head> section of an HTML document.
  • They are used to provide additional information (metadata) about the HTML page.
  • <meta> tags help in Search Engine Optimization (SEO).

47.What is HTML Layout?

Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.

layout

Page Layout Information:

  • Header: The part of the front end which is used at the top of the page. <header> tag is used to add header section in web pages.
  • Navigation bar: The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks.
  • Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added to the page.
  • Content Section: The content section is the main part where content is displayed.
  • Footer: The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The <footer> tag is used to set the footer on web pages.

48. What are semantic elements?

Semantic Elements have meaningful names which tell about the type of content. For instance header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instruct the browser on how to treat them.

  • article: It contains independent content which doesn’t require any other context.
  • aside: It is used to place content in a sidebar i.e. aside from the existing content.
  • details: It defines additional details that the user can hide or view.
  • figure & figcaption: It is used to add an image to a web page with a small description.
  • footer: It is located at the bottom of any article or document, they can contain contact details, copyright information, etc.
  • header: It is used for the header of a section introductory of a page.
  • main: It defines the main content of the document.
  • mark: It is used to highlight the text.
  • nav: It is used to define a set of navigation links in the form of a navigation bar or nav menu.
  • section: A page can be split into sections like Introduction, Contact Information, Details, etc and each of these sections can be in a different section tag.

49. What are HTML entities?

HTML entities provides some method to display reserved characters. Reserved characters are those characters that are either reserved for HTML or those which are not present in the basic keyboard.

For Example: ‘<‘ is already reserved in HTML language. Sometimes this character needs to display on the web page which creates ambiguity in the code. Along with these are the characteristics which are normally not present in basic keyboard ( £, ¥, €, © ), etc. HTML provides some Entity names and Entity numbers to use these symbols. Entity number is easy to learn.

50. How can we add symbols in HTML?

There are some characters in HTML that are reserved, & have special meaning when they are used in an HTML document. Like if you used less than or greater than sign in your HTML document then the browser will treat them differently. So we will use HTML entities to insert HTML symbols in a webpage.

Special Symbols

Syntax

©:copyright

&copy;

®:registered trademark

&reg;

™:trade mark

&trade;

@: at

&commat;

¶: paragraph

&para;

§: section

&sect;

ℂ: double-struck capital c

&copf;

℅: care of

&incare;

Leave a Reply

Your email address will not be published. Required fields are marked *