HTML stands for HyperText Markup Language. It is arguably the most widely used and popular programming language for web application development. Created in 191 by Berners-Lee but first published in 1995, HTML has evolved over the years and has seen multiple releases. HTML 4, published in 1999, was a breakthrough version in its evolution and gained a lot of popularity, seeing widespread adoption all over the globe. The latest and current version is HTML 5, which was published in 2012.

This article will discuss the top 55+ HTML Interview Questions you should know to crack those trying interviews and land your dream job.

Accelerate your career as a skilled MERN Stack Developer by enrolling in the latest Full Stack Developer - MERN Stack Master's program.

Basic HTML Interview Questions and Answers for Freshers

1. What is HTML?

HTML stands for Hypertext Markup Language, the language of the Internet. It is the standard text formatting language used for creating and displaying pages on the Internet.

HTML documents comprise the elements and the tags that format it for proper page display.

2. What are HTML tags?

We use HTML tags to place the elements in the proper and appropriate format. Tags use the symbols < and > to set them apart from the HTML content.

The HTML tags need not always be closed. For example, in the case of images, the closing tags are not required as <img> tags.

3. What are HTML Attributes?

Attributes are the properties that can be added to an HTML tag. These attributes change the way the tag behaves or is displayed. For example, a <img> tag has an src attribute, which you use to add the source from which the image should be displayed.

We add attributes right after the name of the HTML tag inside the brackets. We can only add the attributes to opening or self-closing tags but never to closing tags.

4. What is a marquee in HTML?

Marquee is used for scrolling text on a web page. It automatically scrolls the image or text up, down, left, or right. You must use </marquee> tags to apply for a marquee.

5. How do you separate a section of text in HTML?

We separate a section of text in HTML using the below tags:

  • <br> tag – It separates the line of text. It breaks the current line and shifts the flow of the text to a new line.
  • <p> tag–This tag is used to write a paragraph of text.
  • <blockquote> tag–This tag defines large quoted sections.

6. Define the list types in HTML.

The list types in HTML are as follows:

  • Ordered list–The ordered list uses <ol> tag and displays elements in a numbered format.
  • Unordered list–The unordered list uses <ul> tag and displays elements in a bulleted format.
  • Definition list–The definition list uses <dl>, <dt>, <dd> tags and displays elements in definition form like in a dictionary.

7. How do you align list elements in an HTML file?

We can align the list elements in an HTML file using indents. If you indent each nested list further than the parent list, you can easily align and determine the various lists and their elements.

8. Differentiate between an Ordered list and an Unordered list.

An unordered list uses <ul> </ul> tags, and each element of the list is written between <li> </li> tags. The list items are displayed as bullets rather than numbers.

An ordered list uses <ol> </ol> tags, and each element of the list is written between <li> </li> tags. The list items are displayed as numbers rather than bullet points.

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML List Example</h2>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
  </body>
</html>

html-list-example-23.

9. What is an element in HTML?

An element in HTML is a set of tags that define a specific part of a web page. It consists of a start tag, content, and an end tag.

10. What is the difference between HTML and CSS?

HTML creates a web page's structure and content, while CSS defines its appearance and layout.

Intermediate HTML Interview Questions and Answers

11. Are the HTML tags and elements the same thing?

No, HTML tags define the structure of a web page, while HTML elements are made up of a set of tags that define a specific part of a web page.

12. What are void elements in HTML?

Void elements in HTML are tags that do not require a closing tag. They are used to insert images, line breaks, and other content that does not require additional information.

13. What is the advantage of collapsing white space?

Collapsing white space in HTML can help reduce web pages' size and make them load faster. It involves removing unnecessary white space between HTML elements.

14. What are HTML Entities?

HTML Entities are special characters used to represent characters that cannot be typed on a keyboard. They are often used to display special symbols and foreign characters.

15. How do you display a table in an HTML webpage?

The HTML <table> tag displays data in a tabular format. It is also used to manage the layout of the page, for example, the header section, navigation bar, body content, and footer section. Given below is the list of HTML tags used for displaying a table on an HTML webpage:

Tag

Description

<table>

It defines a table.

<tr>

It defines a row in a table.

<th>

It defines a header cell in a table.

<td>

It defines a cell in a table.

<caption>

It defines the table caption.

<colgroup>

It specifies a group of one or more columns in a table for formatting.

<col>

It is used with <colgroup> element to specify column properties for each column.

<tbody>

It is used to group the body content in a table.

<thead>

It is used to group the header content in a table.

<tfooter>

It is used to group the footer content in a table.

Also Read: A Detailed Guide to HTML Tables

16. How would you display the given table on an HTML webpage?

5 pcs

10

5

1 pcs

50

5

The HTML Code for the problem depicted above is:

<table>
  <tr>
    <td>50 pcs</td>
    <td>100</td>
    <td>500</td>
  </tr>
  <tr>
    <td>10 pcs</td>
    <td>5</td>
    <td>50</td>
  </tr>
</table>

17. How do we insert a comment in HTML?

We can insert a comment in HTML by beginning with a lesser than sign and ending with a greater than sign. For example, “<!-“ and “->.”

18. How do you insert a copyright symbol in HTML?

To insert a copyright symbol in HTML, you can use the HTML entity &copy or the numeric code &#169;

19. What is white space in HTML?

An empty sequence of space characters is called white space in HTML. It is considered a single-space character.

White space helps the browser merge multiple spaces into one space, making indentation easier. It also helps better organize the content and tags, making them readable and easily understood.

20. How do you create links to different sections within the same HTML web page?

We use the <a> tag and referencing through the # symbol to create several links to different sections within the same web page.

21. How do you create a hyperlink in HTML?

We use the anchor tag <a> to create a hyperlink in HTML that links one page to another. The hyperlink can be added to images, too.

22. Define an image map.

An image map in HTML helps link different kinds of web pages using a single image. It can also be used to define shapes in the images used in the image mapping process.

23. Why do we use a style sheet in HTML?

A style sheet helps create a well-defined, consistent, and portable HTML webpage template. We can link a single style sheet template to various web pages, which makes it easier to maintain and change the website's look.

24. What is semantic HTML?

Semantic HTML is a coding style that uses HTML markup to reinforce the semantics or meaning of the content. 

For example, in semantic HTML, the <b> </b> tag is not used for bold statements as well, and the <i> </i> tag is not used for italics. Instead of these, we use <strong></strong> and <em></em> tags.

25. What is SVG in HTML?

HTML SVG describes vector or raster graphics. SVG images and their behaviors are defined in XML text files. 

We primarily use it for vector-type diagrams like pie charts and 2-dimensional graphs in an X-Y coordinate system.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
Become job-ready by opting for the decade's hottest career option. Score your dream job in no time by enrolling in our Full Stack Java Developer Master's Program today!

26. What would happen without text between the HTML tags?

There would be nothing to format if there is no text present between the tags. Therefore, nothing will appear on the screen. 

Some tags, such as those without a closing tag like the <img> tag, do not require any text between them.

27. How do you create nested web pages in HTML?

Nested web pages mean a webpage within a webpage. We can create nested web pages in HTML using the built-in iframe tag. The HTML <iframe> tag defines an inline frame. For example:

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Iframes example</h2>
    <p>
      specify the size of the iframe using the height and width attributes:
    </p>
    <iframe src="https://simplilearn.com/" height="600" width="800"></iframe>
  </body>
</html>

28. How do you add buttons in HTML?

We can use the built-in Button tag in HTML to add buttons to an HTML web page.

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Button Tag Example</h2>
    <button name="button" type="button">CLICK ME</button>
  </body>
</html>

29. What are the different types of headings in HTML?

There are six heading tags in HTML, defined with the <h1> to <h6> tags. Each type of heading tag displays a different text size from another. <h1> is the largest heading tag and <h6> is the smallest. For example:

<!DOCTYPE html>
<html>
  <body>
    <h1>This is Heading 1</h1>
    <h2>This is Heading 2</h2>
    <h3>This is Heading 3</h3>
    <h4>This is Heading 4</h4>
    <h5>This is Heading 5</h5>
    <h6>This is Heading 6</h6>
  </body>
</html>

heading-html

29. How do you insert an image in the HTML webpage?

You can insert an image in the HTML webpage by using the following code:

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Image Example</h2>
    <img src="tulip.jpeg" />
  </body>
</html>

30. What is the alt attribute in HTML?

The alt attribute displays text in place of an image whenever the image cannot be loaded due to technical issues.

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Alt Example</h2>
    <img src="tulip.jpeg" alt="Tulip Garden" />
  </body>
</html>

31. How are hyperlinks inserted in the HTML webpage?

You can insert a hyperlink in the HTML webpage by using the following code:

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Hyperlink Example</h2>
    <a href="url">link text</a>
  </body>
</html>

32. How do you add color to the text in HTML?

You can add color to the text in HTML by using the following code:

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Color Text Example</h2>
    <h1 style="color: Red">Hello HTML</h1>
    <p style="color: Blue">Line 1</p>
    <p style="color: Green">Line 2</p>
  </body>
</html>

33. How do you add CSS styling in HTML?

There are three ways to include the CSS with HTML:

  • Inline CSS: It is used when less styling is needed or in cases where only a single element has to be styled. To use inline styles add the style attribute in the relevant tag.
  • External Style Sheet: This is used when the style is applied to many elements or HTML pages. Each page must link to the style sheet using the <link> tag:
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
  • Internal Style Sheet: It is used when a single HTML document has a unique style, and several elements must be styled to follow the format. Internal styles sheet is added in the head section of an HTML page by using the <style> tag:
<head>
  <style type="text/css">
    hr {
      color: sienna;
    }
    p {
      margin-left: 20px;
    }
    body {
      background-image: url("images/back40.gif");
    }
  </style>
</head>

34. What hierarchy do the style sheets follow?

If a single selector includes three different style definitions, the definition closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which take priority over external style sheets.

35. How do you add JavaScript to an HTML webpage?

JavaScript is used to make HTML web pages more interactive and user-friendly. It is a scripting language that allows you to interact with some aspects of the page based on user input. As with CSS, there are three significant ways of including JavaScript:

  • Inline:

You can add JavaScript to your HTML elements directly whenever a certain event occurs. We can add the JavaScript code using attributes of the HTML tags that support it. Here is an example that shows an alert with a message when the user clicks on it:

<button onclick="alert('Click the Button!');">
Click!
</button>
  • Script block:

You can define a script block anywhere on the HTML code, which will get executed as soon as the browser reaches that part of the document. This is why script blocks are usually added at the bottom of HTML documents.

<html>
  <script>
    var x = 1;
    var y = 2;
    var result = x + y;
    alert("X + Y is equal to " + result);
  </script>
</html>
  • External JavaScript file:

You can also import the JavaScript code from a separate file and keep your HTML code clutter-free. This is especially useful if a large amount of scripting is added to an HTML webpage.

<html>
  <script src="my-script.js"></script>
</html>

Related Scripting Languages Interview Guides

PHP 

CSS

Laravel

C#

Advanced HTML Interview Questions and Answers

36. What are the different types of lists in HTML?

In HTML, there are three lists: ordered, unordered, and definition. Ordered lists are numbered, unordered lists are bulleted, and definition lists are lists of terms and their definitions.

37. What is the ‘class' attribute in HTML?

The ‘class' attribute in HTML defines a class for an HTML element. It can be used to apply a specific style to a group of elements on a web page.

38. What is the difference between the ‘id' and ‘class' attributes of HTML elements?

The ‘id' attribute defines a unique identifier for an HTML element, while the ‘class' attribute defines a class for a group of elements. An ‘id' can only be used once on a page, while a ‘class' can be used multiple times.

39. What is the difference between HTML and XHTML?

HTML and XHTML are both markup languages used to create web pages. However, XHTML is stricter than HTML and requires developers to write well-formed code that adheres to specific rules and guidelines. XHTML also requires all tags to be closed and all attributes to be quoted.

40. What is the difference between HTML and HTML5?

HTML5 is the latest version of HTML and includes new features and improvements over previous versions. Some key differences between HTML and HTML5 include support for multimedia elements (such as video and audio), improved semantics, and better support for mobile devices.

41. What is the role of the <head> tag in HTML?

The <head> tag defines information about the web page that is not displayed on the page itself, such as its title, keywords, and other metadata. It is located between the <html> and <body> tags and is usually the first element in the document.

42. What is the role of the <meta> tag in HTML?

The <meta> tag provides additional information about the web page, such as the author, description, and keywords. It is located within the <head> section of the HTML document.

43. What is the difference between an absolute and relative URL?

An absolute URL includes the full web address, the protocol (such as http or https) and the domain name (such as www.example.com). A relative URL, on the other hand, specifies the location of a resource relative to the current web page. For example, a relative URL might include the file path (such as /images/picture.jpg) or the relative path (such as ../images/picture.jpg).

44. What is the role of the alt attribute in HTML?

The alt attribute provides alternative text for an image in case the image cannot be displayed. This is important for accessibility, as screen readers can read the alt text to describe the image to visually impaired users.

45. What is the role of the title attribute in HTML?

The title attribute provides additional information about an element, such as a link or an image. The title text is displayed as a tooltip when a user hovers over the element.

46. What is a form in HTML?

A form is a set of input fields and other elements to collect user data. Forms can be used for various purposes, such as logging in, submitting feedback, or purchasing.

47. What are the different types of form input fields in HTML?

Several form input fields in HTML include text fields, checkboxes, radio buttons, select menus, and text areas. Each input field type is used to collect different types of data from users.

48. What is the role of the action attribute in HTML forms?

The action attribute is used to specify the URL of the script or program that will process the data submitted by the form. When the user clicks the submit button, the form data is sent to the specified URL for processing.

49. What is the role of the method attribute in HTML forms?

The method attribute specifies the HTTP method for submitting the form data. The two most common methods are GET and POST. GET retrieves data from the server, while POST sends data to the server.

50. In how many ways can you display HTML elements?

HTML elements can be displayed in several ways, including block, inline, inline-block, and none. The display property can specify how an element should be displayed.

51. What is the difference between “display: none” and “visibility: hidden” when used as attributes to the HTML element?

The main difference between “display: none” and “visibility: hidden” is that the former removes the element from the document flow, while the latter simply hides it. Elements with “display: none” are not visible and do not take up any space on the page, while elements with “visibility: hidden” are not visible but still take up space.

52. How to specify the link in HTML and explain the target attribute?

Links can be specified using the <a> tag. The href attribute is used to specify the URL of the page that the link should go to. The target attribute can specify where the linked page should open, such as in a new or similar window.

53. In how many ways can we specify the CSS styles for the HTML element?

CSS styles can be specified in several ways, including inline, internal, and external stylesheets. Inline styles are applied directly to the HTML element using the style attribute. Internal styles are defined within the <head> section of the HTML document using the <style> tag. External stylesheets are defined in a separate CSS file and linked to the HTML document using the <link> tag.

54. What is the difference between link tag <link> and anchor tag <a>?

The <link> tag links external resources, such as CSS stylesheets, to an HTML document. The <a> tag creates links to other pages or resources within the same document.

55. When to use scripts in the head and when to use scripts in the body?

Scripts can be placed in the <head> section of the HTML document or in the <body> section. Scripts that must be executed before the page is displayed, such as scripts that define variables or functions, should be placed in the <head> section. Scripts that must be executed after the page is displayed, such as scripts that manipulate the DOM, should be placed in the <body> section.

56. What are forms, and how to create forms in HTML?

Forms collect user data, such as login information or search queries. Forms can be created using the <form> tag, and input fields, such as text fields and checkboxes, can be added using various other tags.

57. How to handle events in HTML?

Events can be handled using JavaScript, which can be included in the HTML document using the <script> tag. Event listeners can be added to HTML elements using the addEventListener() method, which allows custom code to be executed in response to user actions, such as clicks or keystrokes.

58. What are some advantages of HTML5 over its previous versions?

HTML5 includes several new features and improvements over previous versions, including better multimedia support, semantic elements, and mobile device support. It also includes new APIs for working with web applications, such as the Geolocation API and the Canvas API.

HTML5 Interview Questions

1. What is new about the relationship between the <header> and <h1> tags in HTML5?

Details about the heading and title of the material on the webpage are contained in the <header> tag. This tag, which can appear as one or many tags on a single web page, contains the menu and logo for the website. It can contain other elements like <nav>, <hgroup>, <h1>, etc. While the <header> tag is often used to define the header of a page, it can also be used for other purposes, such as a footer or a sidebar.

A header tag called <h1> displays the document's structure. Search engines use headings to index the content and structure of online pages. There are six headings in total, starting with <h1> and ending with <h6>. Any heading element, including h1, may be used multiple times within both the <header> and <body> sections, but it is generally recommended to use only one <h1> element per page.

2. What are inline and block elements in HTML5?

Inline elements style or format particular content sections within block-level elements. For example, <span>, <a>, <strong>, and <em> take up only the appropriate width and do not begin on a new line. HTML Block components are used to organize a webpage's major content. They usually begin on a new line and fill the entire container width, e.g., <div>, <p>, <h1> to <h6>, <ul>, etc.

3. What is the difference between <figure> tag and <img> tag?

HTML <img> tag is used to add a picture in the webpage/website. In HTML5, you can <figure> tag to primarily group related content, such as an image and its caption or a code block and description. Examples of this type of material include diagrams, pictures, codes, and illustrations. Thus, In an HTML document, a picture is embedded using the image tag, while its content is logically organized using the figure tag.

4. How to specify the metadata in HTML5?

Metadata is a <head> element component that helps online services, search engines, and browsers understand and display content. It aids in specifying the author, viewport settings, charset, title, and other page details. Although these tags are not visible on the website, they are significant for search engines and browsers as they organize and classify content.

5. Are the <datalist> tag and <select> tag the same?

The <datalist> tag provides a list of suggested values for an <input> element, while the <select> tag creates a dropdown list where users can select one or more options from a predefined set.

6. Define Image Map.

An HTML image map allows you to make some portions of a picture clickable, serving as links to other locations. This method works well for developing interactive visuals for websites or intricate navigation systems.

Using HTML, image maps effectively produce interactive graphics by designating clickable areas inside an image. This engages users with various visual components, resulting in specific links or actions.

7. What are Semantic Elements?

HTML5 Semantics describes how to give web content a more logical structure and meaning by using specific elements such as <header>, <footer>, <nav>, <article>, <section>, etc. The tags that provide an HTML page more than just a presentation are called HTML semantics.

Semantic HTML increases search engine optimization (SEO), makes websites more accessible, and gives information a more logical structure and meaning. It improves HTML readability by providing explicit definitions for sections and page layouts.

8. What is the difference between the <meter> tag and <progress> tag?

The <progress> tag is most appropriate for displaying the progress of a single task. For tasks unrelated to task completion, including memory or disk space utilization, the <meter> works well. It displays a measurement of something, such as battery life, fuel level, or thermometer.

9. Is drag and drop possible using HTML5, and how?

With drag and drop in HTML, an element can be dropped to a different location by clicking and holding the mouse button over it and then letting go of it. 

You can enable the drag-and-drop feature in HTML 5 by following these steps:

  • Use the draggable attribute to make an element draggable: <img draggable="true">.
  • Use the ondragstart attribute to specify the drag behavior. 
  • Use the ondragover event to allow dropping by preventing the default behavior:
  • Use the ondrop event to handle the drop and retrieve the data.

10. What is the difference between SVG and Canvas HTML5 elements?

Whereas Canvas can render raster and vector graphics, SVG is only used to create vector drawings. Compared to SVG, Canvas allows for faster rendering of images and animations with less flexibility. However, Canvas is less flexible because it does not allow for easy manipulation of drawn elements after rendering.

Because of their modest size, SVG files are perfect for websites with a lot of graphical content. Generally, canvas elements are much bigger than SVG files. They consequently take longer to load and may decrease the speed of online pages.

11. What type of audio files can be played using HTML5?

HTML5 supports various audio files, including MP3, WAV, and OGG. The supported audio formats depend on the browser. While MP3, WAV, and OGG are commonly supported, not all browsers support every format.

12. What are the significant goals of the HTML5 specification?

HTML5 was intended to replace HTML 4, XHTML, and HTML DOM Level 2. The main objectives of the HTML5 specification were to improve cross-platform compatibility for PC, tablet, and smartphone users and deliver rich content (graphics, movies, etc.) without the need for extra plugins like Flash. Moreover, HTML5 introduced a more forgiving parsing model to ensure uniform cross-browser behavior, ease error handling, and facilitate compatibility with documents created using previously outdated standards.

13. Explain the concept of web storage in HTML5.

HTML5 supports two different forms of data storage: session storage and local storage. SessionStorage stores data only for the current session. The data is deleted when the tab or window is closed; local storage stores data with no expiration date and persists until deleted. Thus, LocalStorage stores data with no expiration time, while SessionStorage only retains data for the duration of the page session.

14. What is Microdata in HTML5?

Search engines use HTML microdata better to understand the composition and content of web pages, making it a crucial component of contemporary web development. Web developers can use Microdata to offer more details about particular items on a page, which helps search engines better comprehend the website's context and content.

Microdata uses a set of common attributes and values, such as itemprop and item type, to define particular elements on a web page. However, microdata improves a web page's representation in search results, not directly its ranking.

15. Which tag is used to represent the result of a calculation? Explain its attributes.

The <output> element is used to describe the outcome of a computation. A website or application can insert the results of a calculation or a user's action into the <output> HTML element. When displaying results on forms dependent on computations or user input, the <output> tag is usually utilized. 

By connecting it to particular <input> elements, The for attribute of the <output> element can be used to specify a space-separated list of element IDs that the result relates to (usually <input> elements). In HTML 5, a new tag called <output> has to have a starting and ending tag. Additionally, it supports HTML's Event and Global Attributes. JavaScript allows for dynamic content manipulation within the <output> tag.

Get access and complete hands-on experience on a plethora of software development skills in our unique Job Guarantee bootcamp. Get job-ready by enrolling in our comprehensive Full Stack Java Developer Masters program today!

16. How can we include audio or video in a webpage?

Using the <audio> tag, audio can now be incorporated into web pages in HTML5. An inline element called the <audio> tag embeds audio content in web pages, and it can include multiple sources using the <source> tag to provide fallbacks for different file formats. This element is helpful if you want to include audio on your webpage—songs, interviews, etc..

A video can be shown on a web page using the HTML <video> element. The <video> element can use width, height, and controls. Add the video's source by using the source tag with the src property. It’s important to note that other attributes like autoplay, loop, muted, and poster can also control behavior and presentation. 

17. Explain HTML5 Graphics.

Graphics are visualizations that enhance user interaction and experience and make websites and applications aesthetically pleasing. Examples of graphics include maps, flowcharts, bar graphs, engineering drawings, construction blueprints, and photos. Web graphics typically use the following technologies: PNG, Canvas API, WebCGM, JPG or JPEG, CSS, SVG, etc.

SVG: A basic SVG document comprises multiple fundamental shape elements that work together to create a graphic and the <svg> root element. SVG has elements and properties for rectangles, polygons, circles, lines, and curves. In addition, SVG allows for gradients, rotations, animations, filter and blur effects, JavaScript interactivity, and much more. 

PNG: Portable Network Graphics, or PNG for short, is a raster format. This file type is especially popular among web designers because it can handle visuals with transparent or semi-transparent backgrounds.

WebCGM: WebCGM is a CGM profile that enhances Web connectivity and is tailored for Web applications in disciplines such as technical illustration, electronic documentation, geophysical data visualization, and related areas.

Canvas API: JavaScript creates dynamic graphics through the HTML <canvas> element. All that the <canvas> element does is hold visuals. The visuals are drawn using JavaScript. Multiple ways exist to add images, text, circles, boxes, and paths to a canvas.

JPG or JPEG: JPG or JPEG, which stands for Joint Photographic Experts Group, is mostly used in digital photography and has a 10:1 compression ratio. These files have the .jpg or .jpeg extension. Because JPG files are small, programmers use them.

CSS: Cascading Style Sheets (CSS) are used to style the layout of a webpage. CSS gives you control over various design components, including text color, font size, spacing between elements, element positioning, background image and color selection, device and screen size-specific displays, and much more.

18. Explain new input types provided by HTML5 for forms.

When supported by the web browser, the new HTML5 input types provide features like inline help text, date and color picker options, data validation, and more. With the new input types, you can validate common data types like dates, email addresses, and URLs without depending as much on client-side and server-side scripting. The two fundamental HTML5 input formats are URL and email. Other than these two, there are many input types available:

  • date: Using a drop-down calendar, the user can choose a date.
  • datetime-local: It enables users to choose a local date and time.
  • datetime: This feature lets the user choose a date, time, and time zone. The user can enter time with it. Note: The datetime input type was deprecated in favor of datetime-local. The datetime input is no longer recommended.
  • week: A drop-down calendar lets the user choose a week and year.
  • email: The user can input their email address using it.
  • tel: It enables the user to input the phone number in a predetermined format.
  • month: It presents a drop-down calendar where the user may choose a month and year.
  • search: It's a text area where you can type a query.
  • URL: It lets the user type in the URL of a website.
  • color: It enables the user to choose a color from the color picker.
  • number: It lets the user enter a numerical value using the increase and decrease arrows.
  • range: It enables the user to vary the value using the slider.

19. What are the New tags in Media Elements in HTML5?

HTML5 now includes new components that make writing simple, quick code for intricate, dynamic, engaging, and successful websites possible. These new components add improved page layouts, functional features, and other enhancements.

  • <audio>: Embeds audio content directly into a webpage. It supports multiple audio formats (e.g., MP3, WAV, OGG).  It includes pause, play, and more.
  • <video>: Embeds video content into a webpage. It supports multiple video formats (e.g., MP4, WebM, Ogg).  It includes attributes like controls, autoplay, loop, and more.
  • <source>: Defines multiple media resources for <audio> and <video>. It allows browsers to choose the best-supported format.
  • <track>: Adds text tracks (e.g., captions, subtitles, descriptions) to <audio> or <video> elements. It supports attributes like kind, src, and label.
  • <embed>: Embeds external content, including multimedia like video or audio, and applications such as PDF viewers. Unlike <audio> and <video>, it is a general-purpose element.

20. Why do you think adding drag-and-drop functionality in HTML5 is important? How will you make an image draggable in HTML5?

You had to use other JavaScript frameworks, such as jQuery or more complicated JavaScript programming, to accomplish the drag-and-drop capability in regular HTML4. HTML5's drag-and-drop features are a fundamental UI concept that allows you to copy, reorganize, and remove items with your mouse. 

An element can be moved by dragging it while holding the mouse button. Let go of the mouse button to drop the element there. Set draggable=true on an object's element to enable draggable functionality. You can drag and drop almost anything on your website, including files, photos, links, and other markup.

Once you've defined the draggable="true" attributes, attach a drag start event handler to your content. This will initiate the drag sequence for each column. Use the drag enter, drag over, and drag leave event handlers to make it easier for the user to comprehend how to interact with your UI. 

21. Why do we need the MathML element in HTML5?

MathML is useful for displaying formulas on technical and mathematical websites. HTML5 supports MathML, although it must be used inside the <math> and </math> tags. This guarantees sophisticated algorithms, scientific publications, and e-learning resources have clear math information. Its goal is to include mathematical formulas in texts and on World Wide Web sites. Only Mozilla Firefox and Google Chrome are compatible with MathML. MathML support can vary; other browsers might require polyfills or third-party libraries.

22. What are the server-sent events in HTML5?

When a web page automatically receives updates from a server, it's known as a server-sent event (SSE). Servers can use HTTP connections to send clients real-time data through these events. 

When the server sends events, updates occur automatically. One-way, or unidirectional, messaging is how a server updates a webpage and communicates with a client. It was previously possible to do this, but the website would need to inquire whether any updates were available. 

23. What are Web Workers?

Web Workers provide a simple way for web content to run scripts on background threads. The worker thread can complete tasks without affecting the user interface. They can also use the XMLHttpRequest and fetch() APIs for network requests. 

After it is created, a worker can post messages to an event handler provided by the JavaScript code to convey messages to that code. Web Workers enable long-running tasks to be executed without interrupting user interactions, keeping the UI responsive.

24. What is the usage of a novalidate attribute for the form tag that is introduced in HTML5?

The novalidate attribute prohibits forms from running validation logic when they are submitted. It always allows the form submission process to proceed, even if the validation logic yields a different result. The novalidate attribute is useful when allowing users to submit forms without requiring input validation, which can help save incomplete forms for later use. Therefore, you can turn off your form's validation laws and allow users to submit the form and continue later without having to compel them to verify.

25. What are raster images and vector images?

Raster images are composed of pixels, which are tiny dots that combine tone and color to create an image. When you zoom in or magnify an image, pixels appear as tiny squares on graph paper. The number of pixels determines the image's resolution and higher pixel counts lead to better quality but larger file sizes.

Vector images are ideal for designs that must be scaled without sacrificing quality, such as logos and images, because they employ mathematical routes. Because vector graphics comprise numerous mathematical curves, they are ideal for printing. 

26. How do you support SVG in old browsers?

There are a few ways to embed SVG in an unsupported browser besides just pasting it into an HTML document. The <object> element can be used if the graphic is stored in an .svg file. Additionally, you can use the utility ReadySetRaphael.js to convert a .svg file into a Raphael-compatible format and save the result in a different.js file. You can also use modern libraries or polyfills like SVG-Inject. Further, if not, you can use Modernizr to determine the browser's capacity to render SVG and serve the script.

27. What are the different approaches to making an image responsive?

Responsive pictures provide low-resolution images to tiny screens and high-resolution images to larger panels. They are handled during the resource selection process after CSS is parsed. Techniques like srcset and media queries allow the browser to choose the appropriate image size based on device characteristics.

Media Queries: Modify the style according to the device's specs, including screen resolution, orientation, width, height, and type.

HTML srcset attribute: The image's URL for use in various contexts is specified by the srcset property. The use of <source> in <image> necessitates this property.

CSS: Set the CSS width attribute to 100% and the height to auto if you want the picture to respond by scaling up and down.

28. What is a manifest file in HTML5?

The manifest file is a basic text file that specifies which resources the browser should cache for offline access. Manifest files are always prefaced with the phrase CACHE MANIFEST and are saved under the .appcache extension. They are divided into three sections: FALLBACK, NETWORK, and CACHE. The manifest attribute in the <html> tag specifies the HTML5 cache web pages. Every time a user views a webpage that has manifest properties or is specified in the manifest file, that webpage will be cached.

It is worth mentioning that the CACHE MANIFEST syntax is now deprecated in HTML5. For offline caching, the AppCache specification has been superseded by Service Workers.

29. What is the Geolocation API in HTML5?

Geolocation is one of the greatest HTML5 APIs for determining the user's geographic location in a web application. This new HTML5 feature lets you retrieve the current user's latitude and longitude coordinates. You can see your current location on the page by having JavaScript collect these coordinates and submit them to the server. The user's position can be obtained using the getCurrentPosition() method.

30. Explain Web Components and their usage.

Web Components combine three major technologies: Custom Elements, Shadow DOM, and HTML Templates to create adaptable, customized elements with encapsulated functionality that can be reused wherever you want without the risk of code clashes. By encapsulating a web component, you can write a reusable, single-responsibility code unit on any website. 

Web component developers can greatly benefit from web components because of their ease of sharing and reuse, productivity, independence from frameworks, encapsulation, reusability, and absence of complicated dependencies. By using the same component across multiple projects, developers can simplify the program's structure and speed up the development process.

31. What are some advantages of HTML5 over its previous versions?

HTML5 is an improved version of HTML that incorporates multi-platform and multimedia compatibility capabilities while also improving HTML. Here are ways in which HTML5 is better than its previous versions:

  • HTML5 has enhanced the code structure, making it clearer and cleaner for programmers and non-programmers with its numerous new and modified tags. 
  • HTML5 offers a new cross-browser compatibility capability supported by several mainstream web browser versions rather than being limited to a particular platform or browser. 
  • HTML5 Web Storage reduces server costs by removing cookies and offering 5 MB of client-side storage space for data storage. This data is stored locally and is not transmitted via the server, making HTML5 Web Storage more secure than prior iterations. 
  • HTML5 can adjust attributes like controls, loop, autoplay, muted, src, height, width, etc., following the <audio> and <video> tags.

As you prepare for your job interview, we hope these HTML Interview Questions have provided more insight into the questions you will likely encounter.

Get Ahead of the Curve and Master Programming Today

Now that you are well-versed in the top HTML interview questions, you should seek opportunities to gain the skills you need to leverage the immense popularity of software development and build a successful career in it. Well, you needn’t look any further. We have got your back! Our comprehensive Full Stack Developer - MERN Stack, will help you with the necessary skills and more and help you become career-ready upon completion.

FAQs

1. How would you define HTML in the best possible way? 

HTML (HyperText Markup Language) is the standard markup language used for creating and structuring the content of web pages. It uses a system of tags and attributes to define the structure and layout of a webpage, allowing browsers to interpret and display the content correctly.

2. How to prepare for an HTML interview?

To prepare for an HTML interview, consider the following steps:

  1. Review the basics of HTML, including tags, attributes, and their usage.
  2. Practice writing HTML code to create various elements and layouts.
  3. Familiarize yourself with HTML5 features and improvements.
  4. Learn about semantic HTML and the importance of accessibility.
  5. Study CSS (Cascading Style Sheets) as it is often used in conjunction with HTML for styling web pages.
  6. Explore common interview questions related to HTML and be ready to explain your solutions.

3. What are the 3 required parts of HTML? 

The three required parts of HTML are:

1) DOCTYPE declaration: It defines the version of HTML being used and ensures proper rendering in different browsers.
2) <html> element: This element wraps all the content on the webpage and signifies the beginning of an HTML document.
3) <body> element: It contains the visible content of the webpage, such as text, images, links, and other elements displayed in the browser window.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 16 Dec, 2024

6 Months$ 8,000
Automation Test Engineer Masters Program

Cohort Starts: 4 Nov, 2024

8 months$ 1,499
Full Stack Java Developer Masters Program

Cohort Starts: 6 Nov, 2024

7 months$ 1,449
Full Stack (MERN Stack) Developer Masters Program

Cohort Starts: 8 Jan, 2025

6 Months$ 1,449

Recommended Reads