Easy way to IT Job

HTML Interview Questions and Answers

HTML Interview Questions and Answers

Published On: May 12, 2022

HTML stands for Hyper Text Markup Language which is a standard text formatting language used to develop web pages.

HTML skill is in-demand in companies as it defines the structure of the data that must be rendered on the browser in a web page.

The learning of HTML brings numerous opportunities and we have gathered here the most popular and frequently asked HTML Interview Questions and Answers to help you clear the technical rounds of top companies.

1. Explain tags and attributes in HTML 

The tags in HTML are the major component that defines how the content will be structured or formatted and Attributes are used with the HTML tags for defining the characteristics of the element.


2. What is the use of collapsing white space?

A blank sequence of a whitespace character in HTML is treated as a single space character as the browser collapses multiple spaces into a single space character.

It helps a developer to indent lines of text without considering multiple spaces to maintain readability in HTML codes.


3. Explain HTML layout structure

Every web page will have various components to display the intended content and a particular user interface.

There are a few things that are templated and accepted globally to structure the web page. They are

  • <header> that stores the starting information of the web page
  • <footer> that represents the last section of the page
  • <nav> that denotes navigation menu of the HTML page
  • <article> that is a set of information
  • <section> that is used inside the article block to declare the basic structure of a page
  • <aside> that is the sidebar content of the web page.

4. How will you optimize website assets loading?

The developer needs to optimize its asset loading for optimizing the website load time with the following steps

  • CDN hosting: A content delivery network is geographically distributed servers to help reduce latency.
  • File compression: It helps to reduce the size of an asset to reduce the data transfer.
  • File concatenation: It helps to reduce the number of HTTP calls
  • Minify scripts: it helps in reducing the overall file size of JavaScript and CSS files
  • Parallel downloads: Hosting assets in various subdomains will help to share the download limit of 6 assets per domain of all modern browsers.
  • Lazy loading: The non-critical assets will be loaded on a requirement basis instead of loading of all loading all the assets at once.

5. Explain the various formatting tags in HTML

HTML formatting tags are as follows

  • <b> to make text bold
  • <i> to make text italic
  • <em> to make text italic with added semantic importance
  • <big> to increase the font size of the text by one unit
  • <small> to decrease the font size of the text by one unit
  • <sub> to make the text a subscript
  • <sup> to make the text a superscript
  • <del> to display strike out text
  • <strong> to mark the text as important
  • <mark> to highlight the text
  • <ins> to display as added text

6. What are the various types of Doctypes available in HTML?

There are three kinds of Doctypes available in HTML and they are

  • Strict Doctype
  • Transitional Doctype
  • Frameset Doctype

7. What are the ways to position an HTML element?

Primarily, there are 7 values of position attribute that can be used to position an HTML element

  • Static: It is the default value and the element will be positioned as per the normal flow of the document.
  • Absolute: It is positioned to its present element and the final position is defined by the values of left, right, top, and bottom.
  • Fixed: It is the same as absolute except the elements are positioned relative to the <html> element
  • Relative: The element is positioned as per the normal flow of the document and positioned relative to its original or normal position
  • Initial: It resets the property to its default value
  • Inherit: It inherits or takes the property of its parent element.

8. How many ways are used to display HTML elements?

Following are the 7 major ways to display HTML elements

  • Inline: Any block-level element will be displayed with the inline element.
  • Block: Any inline element will be displayed as a block-level element using this block element
  • Inline-Block: The element will be formatted using height and width values
  • Flex: It shows the container and element as a flexible structure and it follows the firebox property
  • Inline-flex: It shows the flex container as an inline element along with the firebox properties
  • Grid: It shows the HTML elements as a grid container
  • None: The HTML element will be hidden using this element

Apart from them, we can use table, inline-table, table-cell, table-column, table-row, inline-grid, list-item, inherit, initial, and table-caption to display HTML elements.


9. How can you display the link in HTML along with the target attribute?

HTML offers a hyperlink with <a> tag to specify the links in a webpage. The ‘href’ is an attribute used to specify the link and the ‘target’ attribute is used to specify where we want to open the linked document. The ‘target’ attribute will have the following values:

  • _self: It is a default value to open the document in the same window or tab when we click.
  • _blank: It is used to open the document in a new window or tab
  • _parent: It is used to open the document in a parent frame
  • _top: It is used to open the document in a full-body window

10. How to add JavaScript codes in HTML?

HTML provides a <script> tag for running JavaScript code to make the HTML page more dynamic

<html>

<body>

<h1>

<span>This is a demo for </span>

<u><span id=”sample”></span></u>

</h1>

<script>

document.getElementById(“sample”).innerHTML = “script Tag”

</script>

</body>

</html>


11. Define forms and ways to create forms in HTML

The HTML form is used to gather the user inputs and HTML provides a <form> tag to create forms. We can use the <input> tag to take input from the user inside the form for collecting user data to the server for processing it. The popular input types are ‘button’, ‘checkbox’, ‘number’, ‘text’, ‘password’, ‘submit’, and so on.

<form action=”/submit_data.php”>

<label>Enter your name: </label>

<input type=”text” name=”name” />

<label>Enter Mobile number </label>

<input type=”number” name=”mobile_no”/>

<input type=”submit” value=”Submit”>

</form>


12. How will you handle events in HTML?

HTML enables the event to trigger actions in browsers using JavaScript or JQuery. There are many events like ‘onclick’, ‘ondrag’, and ‘onchange’.

Example:

<html>

<body style=”padding-top:50px”>

<h3 id=”event_demo”>0</h3>

<input type=”button” onclick=”myFunction()” value=”Click Me” />

<input type=”reset” onclick=”reset()” value=”Reset” />

</body>

<script>

function myFunction() {

var value = document.getElementById(“event_demo”).innerHTML

value = parseInt(value) + 1;

document.getElementById(“event_demo”).innerHTML = value;

}

function reset() {

document.getElementById(“event_demo”).innerHTML = 0;

}

</script>

</html>


13. What are the salient features of HTML5?

HTML5 has the following advantages

  • Multimedia support
  • Capabilities to store offline data using SQL databases and application cache
  • JavaScript can be executed in the background
  • Various shapes like rectangles, triangles, and circles can be used
  • New semantic tags and form control tags can be used

14. What is Image Map?

Image Map allows developers map or link various parts of images with the different web pages and it can be achieved by the <map> tag in HTML5. We can link images with clickable areas using Image Map

<img src=”image_url” , usemap=”#workspace” />

<map name=”workspace”>

<area shape=”rect” coords=”34, 44, 270, 350” , href=”xyz.html” />

<area shape=”rect” coords=”10, 120, 250, 360” , href=”xyz.html” />

</map>


15. Define Microdata in HTML

Microdata is used to help extract data for the site crawlers and search engines. It is normally a group of name-value pairs.

The groups are known as items and every name-value pair is a property. Popular search engines like Google, Yahoo, Microsoft, etc are following schema.org that the vocabulary to extract this microdata.

<div =”http://schema.org/SoftwareApplication”>

<span =”name”>Interviewbit Games</span> –

REQUIRES <span =”operatingSystem”>ANDROID</span><br>

<link =”applicationCategory” href=”http://schema.org/GameApplication”/>

<div =”aggregateRating” =”http://schema.org/AggregateRating”>

RATING:

<span =”ratingValue”>4.6</span> (

<span =”ratingCount”>8864</span> ratings )

</div>

<div =”offers” =”http://schema.org/Offer”>

Price: Rs.<span =”price”>1.00</span>

<meta =”priceCurrency” content=”INR” />

</div>

</div>

  • Itemid – It is unique and global identifier of an item
  • Itemprop – It is used to add properties to an item
  • Itemref: It provides a list of element ids with additional properties
  • Itemscope: It is used to define the scope of the associated with it
  • Itemtype: It is used to specify the URL of the vocabulary to be used to define

16. How to represent the result of a calculation?

The <output> tag is used to represent the result of a calculation and it has the following attributes

  • For – to define the relationship between the elements for calculating and displaying the result
  • From – to define the form of the output element belongs to
  • Name – to name the output element

Example

<form oninput = “result.value=parseInt(n1.value)+parseInt(n2.value)”>

<input type = “number” name = “n1” value = “1” /> +

<input type = “number” name = “n2” value = “2” /><br />

The output is: <output name = “result”></output>

</form>


17. Explain the new tags used in media elements in HTML5

  • <audio>: It is used to add sounds, audio streams, or music content without any additional plug-in support.
  • <video>: It is used to add video streams or embed video content
  • <source>: It is used to add multiple media sources in media elements like audio, video, etc
  • <embed>: It is used to add external application or embedded content
  • <track>: It is used to add subtitles in the media elements like video or audio

Example:

<label>

Video:

</label>

<video width=”320″ height=”240″ controls>

<source src=”video.mp4″ type=”video/mp4″>

<track src=”subtitles.vtt” kind=”subtitles” srclang=”en” label=”English”>

</video>

<br>

<label>

Embed:

</label>

<embed type=”video/webm” src=”https://www.youtube.com/embed/MpoE6s2psCw” width=”400″ height=”300″>

<br>

<label>

Audio:

</label>

<audio controls>

<source src=”audio.mp3″ type=”audio/mpeg”>

</audio>


18. Why MathML element is required in HTML5?

MathML is the acronym for Mathematical Markup Language that is used to display mathematical expressions on web pages. <math> is the tag used to add them.

Example:

<html>

<head>

</head>

<body>

<math>

<mrow>

<mrow>

<msup>

<mi> a </mi>

<mn> 2 </mn>

</msup>

<mo> + </mo>

<msup>

<mi> b </mi>

<mn> 2 </mn>

</msup>

<mo> + </mo>

<mn> 2 </mn>

<mn> a </mn>

<mn> b </mn>

</mrow>

<mo> = </mo>

<mn> 0 </mn>

</mrow>

</math>

</body>

</html>

Output

The equation: a2 + b2 + 2ab = 0


19. How to support SVG in old browsers?

Instead of defining the resource of svg in src attribute of <img> tag to support old browsers, it will be defined in srcset attribute and in src the fallback png file must be defined

<img> src = “circle.jpg” alt = “circle” srcset = “circle.svg”>


20. Define Geolocation API in HTML5

Geolocation API is used to send the physical location of the client with websites to help in serving locale-based content and a unique experience to the user based on their locations.

It works with a new property of the global navigator object and the modern browsers with the following code

var geolocation = navigator.geolocation;


Conclusion

We hope this blog that contains HTML Interview Questions and Answers is useful for you to prepare for the interviews with top companies.

Learning HTML gives you the fundamental knowledge of web designing and development.

It is the basic skill for learning many web development languages like JavaScript, PHP, Angular.JS, Node.JS, WordPress, and so on.

Get a comprehensive understanding of web development by enrolling in our HTML Training Institute in Chennai.

Just a minute!

If you have any questions that you did not find answers for, our counsellors are here to answer them. You can get all your queries answered before deciding to join SLA and move your career forward.

We are excited to get started with you

Give us your information and we will arange for a free call (at your convenience) with one of our counsellors. You can get all your queries answered before deciding to join SLA and move your career forward.