HTML Interview Questions and Answers for Freshers

If you wish to become a UI or web developer, then you may already know the importance of HTML5. HTML5 is one of the most simple, easy to learn, and adaptable programming languages within history. Most coders, developers, and programmers begin their coding journey by learning HTML5. Many of us even end up choosing HTML as our professional path. To do so, we end up going through interviews after interviews of proving our skill to the employer. That is why, in this article, we have collated some of the most frequently asked HTML interview questions and answers.

Without any further ado, let us look at many HTML interview questions and answers that freshers and beginners may be asked.

Table of Contents

HTML Interview Questions for Freshers:

1. What is HTML?

HyperText Markup Language, or as it is commonly known, HTML is a programming language in the World Wide Web. It is a standard formatting script that lets the coder create various pages on the web. HTML is known to make elements of the web interactive by modifying various elements and making the web page dynamic.

2. What is an HTML tag?

A tag is essentially the command through which you tell your code to perform certain functions. While writing an HTML code, a tag is what you will be using the most. Every tag is symbolized by using the ‘< >’ arrows. For instance, when you begin typing the main body of your code, you begin and end it with <body>……. </body>

3. Why do we begin our code with <!DOCTYPE>?

Unlike most other tags, the <!DOCTYPE> tag does not have a closing tag, you only have to enter it once. Simply put, this tag instructs the web browser about the HTML version that is being used. This tag must be placed at the beginning of the code, even before the <HTML> tag. This tag is not case sensitive and can be typed in lower case as well.

4. What does semantic HTML mean?

Semantic HTML is not another coding language but is a different style in which your code may be written. It makes the use of HTML markup to infuse meaning onto the code, thus, termed ‘semantic’ in nature. For instance, instead of using <b> </b> tag to make your statement bold, semantic HTML uses <strong> </strong> tag to reinforce the code with semantic representation.

5. What does a marquee mean?

When you want a certain piece of text on your webpage to scroll in any direction, you use the marquee tag ‘<marquee> </marquee>. To do so, you simply place the desired piece of text you want to scroll between the <marquee> </marquee> tag.

6. What is the relationship between the <h1> tag and the <header> tag in HTML5?

Before HTML5, only one <h1> tag would be used as the heading of a single page. After HTML5 came into the picture, <h1> tags are now used to represent top-level headings of a particular section, be it a part of the <article>, <section> or <body>. It specifies that every <header> element must at least one <h1> element.

7. How do you insert hyperlinks into your code?

The process of adding a hyperlink to your desired text is very easy. It has the following syntax:

<a href="URL"> attached text </a>

Example:

<a href="https://www.pradtutorials.com"> Prad Tutorials </a>

This will give the following output:

This link will turn purple in color once the user has visited the website linked, and will turn red in color if it is currently active.

8. What is the minimum number of tags that are required to run an HTML code?

A minimum of 3 tags needs to be used every time we create an HTML code. Without these 3 basic tags, our code will be incomplete and we will not be able to load our web page. These 3 mandatory tags are the <html>, <head>, and <body> tags and these tags need to be closed at the end of each HTML code, otherwise, your code will not run.

9. How many heading types does HTML have?

In HTML, we make use of the header tag, ‘<h>’ that is solely made for the purpose of creating headings. This tag ranges in value from 1 to 6, 1 being the biggest and 6, the smallest of them all. For instance, if the following code is typed,

<html>
  <Head>
    <title> title </title>
  </Head> <body>
    <h1> This is the size of h1 </h1>
    <h2> This is the size of h2 </h2>
    <h3> This is the size of h3 </h3>
    <h4> This is the size of h4 </h4>
    <h5> This is the size of h5 </h5>
    <h6> This is the size of h6 </h6>
      </body> </html>

The following output will be derived:

10. How to create new HTML elements?

Within HTML, we can create our own elements with the following method. We first declare our element using the script tag, <script>, and then proceed to use that defined tag within our code. For example,

<script>
document.createElement﴾"ElementX"﴿
</script>
 
And you can use this element within your code, as shown in the following code:
 
<html>
  <Head>
    <title> title </title>
  </Head> <body>
    <ElementX> Example </ElementX>
      </body> </html>

11. Write an HTML table code that derives the following output:

First Name	Last Name	Age
Jane	Doe	21

The HTML code for the above is as follows:

<html>
  <Head>
    <title> Table </title>
</Head> <body>
    <table style="width:200px; border: 1px solid black">
<tr>
<th> First Name </th>
<th> Last Name </th>
<th> Age </th>
</tr>
<tr>
<td> Jane </td>
<td> Doe </td>
<td> 21 </td>
</tr>
</table>
      </body> </html>

The following output will be derived with the aforementioned code:

12. Which lists are used when designing a web page in HTML?

There are a few types of lists that are used to design a web page in HTML. You may choose any or a combination of the following types of HTML lists:

Ordered list – This type of list displays specific elements in a numbered format. It is represented by the <ol> tag.
Unordered list – This type of list displays specific elements in a bulleted format. It is represented by the <ul> tag.
Definition list – This type of list displays specific elements in definition form like in a standard dictionary. The <dl>, <dt> and <dd> tags are used to define items in the description list.

13. Which types of CSS can be included in your HTML code?

There are three main types of including CSS with your HTML code.

External Style Sheet: This method comes into play when the CSS is being applied to multiple pages. Every page needs to link to the CSS style sheet with the <link> tag. This <link> tag goes within the <head> tag.

<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

Internal Style Sheet: This method comes into play when the CSS is being applied to a single web page. The desired page needs to link to the CSS style sheet with the <style> tag. This <style> tag goes within the <head> tag.

<head>
<style type="text/css">
hr {color:yellow}
p {margin-left:10px}
body {background-image:url("images.gif")}
</style>
</head>

Inline CSS: This method comes into play when styling smaller contexts. One can simply add the style attribute to the relevant tag to apply inline CSS.

14. Which tags are used to separate texts?

Some common ways to separate sections of text are as follows:

<br>: separates text into different lines
<p>: begins a new paragraph
<blockquote>: defines text quoted from a different source

15. Do all HTML tags come in open/close pairs?

No, they do not. Even if most tags have open/ close pairs, there are a few that do not have them, such as the <br> tag and the <img> tag, among others.

16. Which media formats are supported by HTML?

HTML is very dynamic when it comes to the media formats that it supports. It lets users use a varied repertoire of animations, images, music, sound, and movies. Following are some of the media formats supported by HTML:

Audio – .MP3, .MP4, .WAV, .AAC, .WMA, .MIDI, .RealAudio, .Ogg
Video – .MP4, .AVI, .MKV, .Ogg, .QuickTime, .RealVideo, .Flash, .MPEG-4, .MPEG, .WMV, .WebM
Image – .Webmp, .PNG, .JPG, .GIF, .BMP, .AGIF, .JPEG, .SVG

17. Explain the difference between XHTML and HTML.

HTML stands for HyperText Markup Language, whereas, XML stands for Extensible Markup Language. HTML web pages are usually static as compared to XHTML’s more interactive and dynamic web pages. Simply put, HTML displays elements on the web page, and XHTML defines and explains those elements on the web page.

18. How do you create a button in HTML?

Like every other function in HTML, even a clickable button can be made by using the button tag, <button>. It is mostly used at the end of forms and has a value of ‘submit’ or ‘reset.’ For instance, if you were to make a ‘submit’ button after a form, it would look like the following:

<html>
  <Head>
    <title> Button </title>
</Head><body>
  <b>Gender:</b> <br>
  Female: <input type="radio" name="a1">
  <br>
  Male: <input type="radio" name="a1">
    <br>
    Other: <input type="radio" name="a1"> <br>
<button name="button" type="button">Submit</button>    
</body> </html>

OUTPUT:

19. Define a Manifest file.

A Manifest file instructs the browser about what it should save as cache and what it should not save as cache. It comes in the form of a standard text file. It is separated into 3 different sections. They are:

Fallback: If any page in our code is not accessible, it goes into the fallback page sections.
Cache Manifest: After files are downloaded from this section, HTML5 caches those files.
Network: The browser can never perform caching on the files under this section as they must always be connected to a server.

20. What will happen if the list-style-type property is being used on a non-list element like a paragraph?

In this case, the list-style-property will be ignored without having any effect on the paragraph element. The paragraph element will remain as it is.

21. What is a span ‘<span>’ tag used for in HTML?

The span tag, <span>, is a useful tool that lets the developer do the following tasks:

To highlight the text of any color
To add a background on any text
To add or change the color of any text

22. Which new <input> tag types have been added in HTML5?

The new input ‘<input>’ tag type that has been added to HTML5 are tel, number, date, email, and URL. Its syntax is the same as all the other input tag types. For instance:

<input type="url">

23. How do you type out a copyright symbol into your HTML web page?

If you wish to insert a copyright symbol into your HTML page, all you need to do is type ‘&copy’ or ‘&#169’ onto your HTML code. For example:

<html>
  <Head>
    <title> Copyright </title>
</Head><body>
 &copy
<br> &#169
  </body> </html>

OUTPUT:

HTML Interview Questions and Answers for Experienced:

1. What are the different types of the <input> tag for form validation in HTML5?

Following are the different types of the <input> tag for form validation:

<input type= "text">
<input type= "url">
<input type= "image">
<input type= "date">
<input type= "datetime-local">
<input type= "hidden">
<input type= "file">
<input type= "email">
<input type= "color">
<input type= "month">
<input type= "number">
<input type= "range">
<input type= "radio">
<input type= "password">
<input type= "submit">
<input type= "search">
<input type= "reset">
<input type= "tel">
<input type= "button">
<input type= "time">
<input type= "checkbox">
<input type= "week">

2. Explain the audio tag, <audio>, in HTML5 and name its attributes.

This new element that has been added to HTML5 which can also be used in XHTML, allows the developer to ember audio files within your HTML web page, without having to add plug-ins. This <audio> tag can be used to play different formats of audio files, such as, .MP3, .OGG, .WAV, etc. We can also use the <source> tag to embed audio from other websites onto our web page. It has the following attributes:

Controls: It lets the developer control audio playback, pause/resume, volume, and seeking.
Loop: This attribute loops the audio so that it plays from the beginning as soon as it ends.
Src: This attribute lets you embed the URL of another audio file on another website.
Preload: This attribute loads the audio when the web page loads and is ready to run. This attribute will not function if the autoplay attribute exists within the code.
Autoplay: This attribute will play the audio right when the page loads.
Autobuffer: This attribute will automatically buffer the audio file once the page loads.

3. Is it possible to retrieve the geographical location of a user using HTML5?

Yes, it is possible to access and retrieve the geographical location of a user using HTML5. This is done by using a Geolocation API. The method used to retrieve it is the ‘getCurrentPosition()’ method.

4. Which are the new media elements in HTML5?

The elements that have been newly added to HTML5 are the following:

<embed> – container of external content
<source> – multiple media formats
<track> – text track for video/ audio content
<audio> – audio content
<video> – video or movie content

5. HTML5 or Flash, which is better, and why?

HTML5 is a better alternative as compared to Flash for the following reasons:

It does not require a separate plug-in
It is SEO friendly
It is fast and takes up less CPO resources
It is an open-source platform that is supported by all browsers.

6. Why is HTML5 better than HTML?

HTML5 is better than HTML for the following reasons:

It supports JavaScript to run in the background
It is much more mobile and SEO friendly
Elements like MathML and SVG can be used in HTML5
It has improved, high-level audio/ video content support
Geometrical shapes can be drawn via HTML5
The doctype declaration is short and simplified.

7. What are some of the disadvantages of using HTML5?

As good as it may be, HTML5 comes with a few of its quirks as well. They are:

It is known to have some media licensing issues.
Due to fragmentation errors, it will be displayed differently from browser to browser.
It only provides support for modern browsers.

8. What would happen if you do not add <!DOCTYPE> to your HTML5 code?

IF the developer does not add <!DOCTYPE> at the beginning of their document, all the newly added elements like <footer>, <audio>, <article>, etc. will not be supported, and thus, will not be displayed on to the web page. As a result, the browser may automatically display the web page in Strict or Quirks mode.

9. What is the difference between SessionStorage and LocalStorage objects?

When data is stored in localStorage, it is stored without an expiration date. On the contrary, data stored on sessionStorage is only saved for one single session. The data within localStorage can be shared and opened between multiple browser windows, whereas, the data within sessionStorage can only be accessed within the one active browser window. When the browser window is closed, the data stored in sessionStorage is deleted, while the data in localStorage remains unchanged.

10. Is the <div> tag different from the <span> tag? How so?

Yes, the <div> and <span> tags are different. The <div> tag is used to group larger blocks of text, while the <span> tag is used to group a smaller block of code within a line, like a paragraph.

11. Which are the two graphic types in HTML5?

The two newly added graphic types in HTML5 are SVG and Canvas.

12. Define SVG in HTML5.

Scalable Vector Graphics, commonly known as SVG, offers the developer various ways to draw paths, boxes, circles, texts, and images. As it is XML based, it treats every shape in the code as a separate object. The browser will re-render the SVG object if the developer changes any of its attributes.

SVG is used extensively in the modern digital age as there is a high demand for high-resolution pictures, charts, diagrams, etc., that will maintain its quality regardless of scale.

13. Define Canvas in HTML5.

Canvas is a graphic container that is executed on a pixel by pixel system. Essentially, it is a rectangular space that lets the user draw instantly, with the use of JavaScript. Its default size is 300 px x 150 px (W x H).

14. How can the Drag and Drop element be used in HTML5?

In HTML5, one of the most important, newly added features is the Drag and Drop option that lets the developer simply click and drag on any object in order to drop it at its desired location. The most common options used alongside the Drag and Drop operation are copy, link, and move. Jus by adding ‘<img draggable = “true”>’ before an image or an object, we can make that element draggable.

15. Name the different semantic elements of HTML5.

The newly added semantic elements in HTML5 are as follows:

<header>
<footer>
<main>
<nav>
<mark>
<time>
<section>
<summary>
<article>
<aside>
<figure>
<details>
<figcation>

16. How do you link a web page within a web page?

To display a web page inside a web page, you can use the ‘iframe’ tags, ‘<iframe> </iframe>. This frame is used by many coders to embed other web page’s content onto their own web pages. Its basic syntax is as follows:

<iframe src="URL"> </iframe>