Top 30 Commonly Asked HTML Interview Questions

Question

23 |

1. What is HTML?

24 | 25 | 30 |

Answer 1

26 |

HTML stands for HyperText Markup Language. It is used to create web pages and web applications. 27 | HTML describes the structure of a web page using markup. HTML elements represent different parts 28 | of the page, such as headings, paragraphs, links, and more.

29 |

Answer 2

37 |

You create a hyperlink using the <a> tag. The href attribute 38 | specifies the destination URL.

39 |

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

40 |

Answer 3

48 |

CSS can be included in an HTML document in three ways: inline styles, internal styles using the 49 | <style> tag, or external stylesheets using the <link> tag. 50 |

51 |

Answer 4

59 |

You can add an image using the <img> tag with the src attribute 60 | to specify the image source.

61 |

<img src="image.jpg" alt="Description of image">

62 |

Answer 5

70 |

HTML provides two types of lists: ordered lists (<ol>) and unordered lists 71 | (<ul>). List items are added using the <li> tag.

72 |

Answer 6

83 |

The <meta> tag provides metadata about the HTML document, such as charset, 84 | description, and keywords. It helps with SEO and rendering of the page.

85 |

Answer 7

93 |

The <div> tag is a block-level element, while the <span> 94 | tag is an inline element. <div> is used for grouping larger content, and 95 | <span> for smaller text within a line. 96 |

97 |

Answer 8

105 |

The <form> tag is used to create a form for user input. It typically includes 106 | input fields, checkboxes, radio buttons, and a submit button.

107 |

Answer 9

115 |

A table is created using the <table> tag, with rows created using 116 | <tr>, and data cells within each row using <td>. 117 |

118 |

Answer 10

126 |

Semantic HTML elements clearly describe their meaning in a human- and machine-readable way, like 127 | <article>, <section>, and <footer>, as 128 | opposed to non-semantic elements like <div> or <span>. 129 |

130 |

Answer 11

141 |

The <!DOCTYPE> declaration informs the browser about the version of HTML being 142 | used, ensuring proper rendering of the page.

143 |

Answer 12

151 |

HTML5 APIs are a set of web technologies that allow for more dynamic interactions, including Web 152 | Storage, Geolocation, and Canvas APIs, enabling features like offline storage, location-based 153 | services, and drawing graphics.

154 |

Answer 13

162 |

Responsive design in HTML is achieved using CSS media queries and viewport settings to make web 163 | pages adapt to different screen sizes and devices.

164 |

Answer 14

172 |

The id attribute is used for uniquely identifying a single element, while the 173 | class attribute can be used for multiple elements. id should be used 174 | for one-time identification, whereas class is used for applying styles or behaviors 175 | to a group of elements. 176 |

177 |

Answer 15

185 |

Local storage and session storage are part of HTML5’s Web Storage API. Local storage persists 186 | data across sessions until explicitly deleted, while session storage stores data for the 187 | duration of the page session. You can use the localStorage.setItem() and 188 | sessionStorage.setItem() methods to store data. 189 |

190 |

Answer 16

200 |

Custom data attributes start with data-. They are used to store extra information 201 | on an HTML element that doesn't have any visual impact. For example, <div 202 | data-user-id="123"> stores the user ID as a custom attribute. These 203 | attributes can 204 | be accessed via JavaScript using the dataset property.

205 |

Answer 17

213 |

The <picture> element allows you to specify multiple image sources for 214 | responsive design. You can provide different image formats or resolutions that are used based on 215 | media conditions, such as screen size or pixel density. Inside the <picture> 216 | tag, you use <source> elements with a srcset attribute to define 217 | different image resources. For example:

218 |

<picture>
219 |       <source media="(min-width: 800px)" srcset="large.jpg">
220 |       <source media="(min-width: 400px)" srcset="medium.jpg">
221 |       <img src="small.jpg" alt="Responsive image">
222 |     </picture>

223 |

Answer 18

231 |

The rel attribute in the <link> tag specifies the relationship 232 | between the current document and the linked resource. For example, rel="stylesheet" 233 | tells the browser that the linked file is a CSS stylesheet. There are other values for 234 | rel, 235 | like rel="icon" for linking favicons and rel="nofollow" for links you 236 | don't want search engines to follow. 237 |

238 |

Answer 19

246 |

The srcset attribute in the <img> tag is used to define a list of 247 | image sources with varying resolutions or sizes. The browser selects the appropriate image 248 | based on the user's device screen size and resolution. For example:

249 |

<img src="small.jpg" 
250 |       srcset="medium.jpg 768w, large.jpg 1280w" 
251 |       sizes="(max-width: 600px) 480px, 800px" alt="Responsive image">

252 |

Answer 20

260 |

The Shadow DOM is a web standard that allows you to encapsulate a section of the DOM tree in a 261 | separate "shadow" root. This is useful for building reusable components where the internal 262 | structure is isolated from the main document's styles and scripts. For example, custom elements 263 | can use shadow DOM to prevent style leakage. To create a shadow DOM, use JavaScript:

264 |

let shadow = element.attachShadow({ mode: 'open' });
265 |     shadow.innerHTML = '<p>This is shadow DOM content</p>';

266 |

Answer 21

274 |

ARIA (Accessible Rich Internet Applications) roles and attributes improve web accessibility for 275 | users with disabilities. ARIA roles, such as role="button" or 276 | role="navigation", 277 | define the purpose of elements for screen readers. ARIA attributes like aria-label 278 | and aria-hidden provide additional context or hide elements from assistive 279 | technologies. 280 | Example: 281 |

282 |

<button aria-label="Close window">X</button>

283 |

Answer 22

291 |

To optimize HTML performance, you can follow best practices like minimizing the use of inline 292 | styles, reducing the number of HTTP requests, compressing images, using async or defer 293 | attributes 294 | for JavaScript, and using external stylesheets. Enabling caching and using a content delivery 295 | network (CDN) can also help speed up page load times.

296 |

Answer 23

305 |

The <article> element represents a self-contained composition that could be 306 | distributed independently, such as a blog post or news article. The <section> 307 | element defines a thematic grouping of content within a document. The <aside> 308 | element is used for content that is tangentially related to the main content, such as sidebars 309 | or 310 | related links.

311 |

Answer 24

319 |

The <template> element is used to store HTML fragments that are not rendered 320 | when the page initially loads. The content inside the <template> can be 321 | cloned and inserted into the document later using JavaScript. This is useful for creating 322 | dynamic content. Example:

323 |

<template id="my-template">
324 |       <div>This content will be rendered later.</div>
325 |     </template>
326 |     
327 |

332 |

Answer 25

340 |

Best practices for structuring an HTML5 document include using semantic HTML tags like 341 | <header>, <footer>, <article>, and 342 | <section> to define meaningful sections of a page. Always include a DOCTYPE 343 | declaration, and use <meta> tags for character encoding and viewport settings 344 | to ensure proper display on all devices. 345 |

346 |

Answer 26

354 |

The <!DOCTYPE html> declaration tells the browser that the document is 355 | written in HTML5. It ensures that the browser renders the page in standards mode, which 356 | avoids quirks mode where old or incorrect HTML rendering might occur.

357 |

Answer 27

366 |

Comments in HTML are added using . Anything written 367 | between these tags will not be rendered on the webpage. Comments are useful for annotating code 368 | and leaving notes for yourself or other developers. Example:

369 |

<!-- This is a comment -->

370 |

Answer 28

378 |

Block-level elements, like <div>, <p>, and 379 | <h1>, take up the full width of their container and always start on a new 380 | line. 381 | Inline-level elements, like <span> and <a>, take up only 382 | as 383 | much width as necessary and do not start on a new line. Block elements can contain inline 384 | elements, 385 | but inline elements cannot contain block elements. 386 |

387 |

Answer 29

395 |

The <meta> tag is used to provide metadata about the HTML document. Metadata 396 | is 397 | information about the data itself and is not displayed on the page. Common uses include 398 | specifying the character set (e.g., UTF-8), the viewport for responsive design, and descriptions 399 | for 400 | search engine optimization (SEO). Example:

401 |

<meta charset="UTF-8">
402 | <meta name="viewport" content="width=device-width, initial-scale=1">
403 | <meta name="description" content="This is a description of the page.">

404 |

Answer 30

412 |

Semantic HTML refers to using HTML elements according to their intended meaning rather than 413 | for their appearance. For example, using <article> for content that could 414 | be distributed independently, rather than a <div>. This enhances 415 | accessibility, SEO, and code readability, making it easier for browsers and assistive 416 | technologies 417 | to interpret the content.

418 |

Answer 31

426 |

The <ol> element creates an ordered list, where items are numbered 427 | automatically. The <ul> element creates an unordered list, where items 428 | are usually marked with bullet points. Both elements use <li> tags to 429 | represent list items. Example:

430 |

<ul>
431 |   <li>Item 1</li>
432 |   <li>Item 2</li>
433 | </ul>
434 | 
435 | <ol>
436 |   <li>Item 1</li>
437 |   <li>Item 2</li>
438 | </ol>

439 |

Answer 32

447 |

The <head> section contains metadata and links to resources that the browser 448 | uses to render the page, but it is not visible to users. It usually includes elements such as 449 | <meta> tags, <title>, stylesheets, and scripts. The 450 | content of the <head> is essential for performance, SEO, and usability. 451 |

452 |

Answer 33

460 |

A table in HTML is created using the <table> element, with rows defined by 461 | <tr>, and data cells defined by <td>. Table headers 462 | use <th>. Example: 463 |

464 |

<table>
465 |   <tr>
466 |     <th>Name</th>
467 |     <th>Age</th>
468 |   </tr>
469 |   <tr>
470 |     <td>John</td>
471 |     <td>25</td>
472 |   </tr>
473 | </table>

474 |

Answer 34

482 |

The <iframe> tag is used to embed another HTML document inside the current 483 | document. This is often used for embedding external content, such as videos or maps, from 484 | other websites. Example:

485 |

<iframe src="https://example.com" width="600" height="400">
486 |   <p>Your browser does not support iframes.</p>
487 | </iframe>

488 |

Answer 35

496 |

A hyperlink is created using the <a> tag. The href attribute 497 | specifies the URL of the page the link points to. The link text is placed between the 498 | opening and closing <a> tags. Example:

499 |

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

500 |

Top 30 Commonly Asked HTML Interview Questions

Easy

1. What is HTML?

2. How do you create a hyperlink in HTML?

3. How do you include CSS in an HTML document?

4. How do you add an image to an HTML page?

5. How do you create a list in HTML?

Medium

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

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

8. What does the <form> tag do?

9. How do you create a table in HTML?

10. What are semantic HTML elements?

Advanced

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

12. What are HTML5 APIs and how do they work?

13. How do you handle responsive design in HTML?

14. What is the difference between the id and class attributes, and when should each be used?

15. How do you implement HTML5 local storage and session storage?

16. What are custom data attributes and how are they used in HTML?

17. How do you use the <picture> element for responsive images?

18. What is the purpose of the rel attribute in the <link> tag?

19. How do you use the srcset attribute in the <img> tag for responsive images?

20. What is the Shadow DOM and how can it be used in HTML?

21. How do you implement ARIA roles and attributes for accessibility in HTML?

22. How can you optimize HTML performance for faster page load times?

23. What is the difference between <article>, <section>, and <aside> elements in 302 | HTML5?

24. How do you use the <template> element in HTML?

25. What are the best practices for structuring an HTML5 document?

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

27. How do you add comments in HTML?

28. What are the differences between block-level and inline-level elements?

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

30. What is semantic HTML, and why is it important?

31. What is the difference between <ol> and <ul> elements in HTML?

32. What is the purpose of the <head> section in an HTML document?

33. How do you create a table in HTML?

34. What is the purpose of the <iframe> tag in HTML?

35. How do you create a hyperlink in HTML?