Here are some of the commonly asked HTML interview questions. These HTML interview questions may be helpful for both freshers and experienced HTML developers. There can be a lot more HTML interview questions and answers. But here I have tried to include most commonly asked question. Hope this will be helpful for you.
Common HTML Interview Questions
1) What is a doctype?
The doctype specifies the rules for the markup language, so that the browsers render the content correctly. Or it is an instruction to the browser.
2) What are the different type of doctype?
In HTML 4, there are 3 types of doctype, namely strict, transitional and frameset.
3) What is the doctype in HTML 5?
< !doctype html>
4) What is the difference between HTML 4 and HTML5?
* More semantic tags like header, footer, nav
* New elements like article, aside, audio, bdi, canvas, command, data, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr
* New types of form controls: dates and times, email, url, search, number, range, tel, color[58]
* New attributes like charset (on meta), async (on script)
* Global attributes (that can be applied for every element): id, tabindex, hidden, data attributes (custom data attributes)
* Ability to use inline SVG and MathML in text/html
* HTML5 APIs like geolocation, webworkers, canvas, drag and drop, local storage, app cache etc..
5) What is the difference between standard/strict mode and quirks mode?
Quirks mode in browser allows you to render your page as in old browsers. This is for backward compatibility.
6) What is semantic HTML?
Semantic HTML, or “semantically-correct HTML”, is HTML where the tags used to structure content are selected and applied appropriately to the meaning of the content. For example ‘p’ for paragraph.
7) When should you use section, div or article?
* <section> , group of content inside is related to a single theme, and should appear as an entry in an outline of the page. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a web app’s tabbed interface. A section normally has a heading (title) and maybe a footer too.
*<article> , represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.
8) How can you highlight text in html?
Use mark element.
9) Can we generate public key in html?
html has a keygen element that facilitate generation of key and submission via a form.
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params"></keygen>
10) What is the use of data- attribute?
Data attribute allow you to store extra information/ data in the DOM. You can write valid html with embedded private data. You can easily access data attribute by using javascript and hence a lot of libraries like knockout uses it.
11) What is block level elements and inline elements?
Block level elements are those elements which occupy the available full width and it have specific margin, padding and line-height.
Inline elements width will be as per the inner content of the element.
12) Give examples for inline element
Block level elements: div, p, h1-h6 tags
Inline elements: span, a tags
13) What is meta tag? Why it is used?
Thetag provides metadata about the HTML document. Meta elements are used to specify page description, keywords, author of the document, last modified, and other metadata. It can be used by browsers, how to display content or reload page, search engine purposes (keywords), page redirection or other web services.
14) What is the difference between svg and canvas?
SVG stands for scalable vector graphics. It’s a text based graphic language which draws images using text, lines, dots etc. This makes images lightweight and renders faster.
Canvas is an HTML tag, with which can draw graphics or do some animations with the help of Javascript.
15) What is local storage in HTML5?
Modern browsers have storage called “Local storage” in which you can store this information. HTML5 API helps to store data locally and retrieve when required.
16) What is the life time of local storage?
Local storage does not have a life time. it will be there unless and until clear it from the browser or it is removed JavaScript code.
17) How to add comment in HTML?
18) img tag is an inline element or block level element?
It is an inline element.
19) How can we make an inline element to block level element?
Use display: block in css
20) Give examples for self closing elements in HTML
input, img
21) What are the ways to reduce page load time?
There are many ways but few are here. Reduce image sizes, remove unnecessary widgets, HTTP compression, put CSS at the top and script references at the bottom or in external files, reduce lookups, minimize redirects, use caching, optimize css and js, use image sprites etc…
22) What are the differences between session storage and local storage?
LocalStorage and sessionStorage are new objects, both are used for storing data, but vary in scope and duration. LocalStorage is permanent and website-specific. Whereas sessionStorage only lasts as long as tab or site is open. Local storage is cleared only when the user deletes the browser cache or when the web settings or scripts are changed.
23) What is the difference between ul and ol in html?
Ul stands for unordered list, where as ol is ordered list. Ul list will be displayed with bullets. But ol lists will be displayed with numbers.
24) What is the difference between Get and Post methods of form?
Get
With GET the form data is encoded into a URL by the browser. The form data is visible in the URL allowing it to be bookmarked and stored in web history. The form data is restricted to ASCII codes. Because URL lengths are limited there can be limitations on how much form data can be sent.
Post
With POST all the name value pairs are submitted in the message body of the HTTP request which has no restrictions on the length of the string. The name value pairs cannot be seen in the web browser bar.
POST and GET correspond to different HTTP requests and they differ in how they are submitted. Since the data is encoded in differently, different decoding may be needed.
HTML interview questions are meant for both freshers and experienced UI /HTML developers. These HTML interview questions will surely help you to answer in your interviews. Please do ask any clarifications on HTML interview questions.. Share, if you know any other HTML interview questions… Sharing is caring!! 🙂
