HTML advance Interview Questions


What is DocType in HTML? .

First thing which we should know that it is not a HTML tag. It is an instruction to browser about version of the markup language the page is written in.
In HTML 5 we use doctype like <!DOCTYPE html>

How to vertically align text inside a flexbox?

We can do this by using display flex with some more properties:
justify-content: center; — center vertically.
flex-direction: column;
text-align: center; — to center horizontally.

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

What is Canvas in HTML 5?

Read here…

What is Shadow DOM, Shadow Tree and Shadow Root?

What is use of Detail tag?

The tag specifies additional details that the user can view or hide on demand. Use it to create an interactive widget that the user can open and close. Semantically you can use any type of content inside it and should not be visible unless the open attribute is set.

<details open><p>This is test details<p></details>

How can we get all elements with same class?

Element.getElementsByClassName() – This method returns a HTMLCollection that contains same class which given in parameter.

How can we get all elements with same tags?

Element.getElementsByTagName() – Returns HTMLCollection of elements that matches tag passed in parameter.

What is difference between getElementByClassName vs getElementsByClassName?

getElementByClassName return first match node of passing class in parameter.
getElementsByClassName return all match elements as a HTML collection.

What is query selector?

Element.querySelector() – It returns only first node that matches passed selector in parameter.
Element.querySelectorAll() – It returns Node List.

What is use of “for” property with label element?

By using for attribute You can click the associated label to focus/activate the input, as well as the input itself. Much advantage of this to increase hit area on touch-screen device.

 <label for="username">User Name</label>
<input type="text" name="username" id="username">  

How do you change the number type in the middle of a list?

The <li> tag includes two attributes – type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.

Why should we use Semantic elements?

Semantic Elements gives a meaning to the web browser rather than just 
presentation. <h1> is an semantic element, so human knows what heading is and Browser knows how to display it.On other side Non semantic elements do not provide any additional meaning to the markup.

What is empty elements?

Empty Elements are those elements which have no content. It does not have an end tag, such as the <br> element.
<br> is an empty element without a closing tag (the tag is used to line break)

What is image map in HTML?

The HTML <map> element is used with <area> elements to define an image map. we can click on that particular areas and can move to any other links.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">

Coords is attribute of area tag that is used with shape attribute. It tell cordindate value of that area. It start from 0, 0 (top left corner area).
For more details read here…

How can we create a list with roman number indexing?

We can do this with HTML Ordered List <ol> by using its type attribute.

 type="1"    for number sequence (default)
 type="A"    for uppercase letters (A to Z)
 type="a"    for lowercase letters (a to z)
 type="I"    for uppercase roman numbers (I II III …)
 type="i"    for lowercase roman numbers (i ii iii …)
 <ol type="I">

How can we change counting start of Ordered List?

We can do this with start attribute.

 <ol start="50">

What is difference between session storage and local storage?

window.localStorage –  stores data with no expiration date
window.sessionStorage – stores data for one session (data is lost when the browser tab is closed)

What is use of blockquote tag?

The HTML Element indicates that the enclosed text is an extended quotation. A URL for the source of the quotation may be given using the cite attribute.

 <blockquote cite="">
  <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
  <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>

What are all the values of _target property?

The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:

_blank - Opens the document in a new window or tab
_self - Opens document in the same window/tab (default)
_parent - Opens document in the parent frame
_top - Opens document in the full body of the window
framename - Opens the linked document in a named frame 

How can I load Iframe when clicking on a link?

An iframe can be used as the target frame for a link.The target attribute of the link must refer to the name attribute of the iframe:

 <iframe src="a.html" name="myframe"></iframe>

<p><a href="" target="myframe">JS Mount</a></p>

What is use of alt attribute of img tag?

The alt attribute is used as an alternate text for an image.It displays in case image dose not load or any internet connection issues.

What is difference between Absolute File Paths & Relative File path?

An absolute file path is the full URL to an internet file:
<img src="" alt="Demo Image">

A relative file path points to a file relative to the current page.<img src="/images/abcd.jpg" alt="Profile Picture">

How can we restrict file type in input type file field?

accept:  A string that defines the file types the file input should accept.

 <input type="file"
       id="avatar" name="avatar"
       accept="image/png, image/jpeg"> 

Do you know input type telephone, Url?

The <input type="tel"> is used for input fields that should contain a telephone number.
 <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> It will take format like 123-45-678.

The <input type="url"> is used for input fields that should contain a URL address. the url field can be automatically validated when submitted.

What is GeoLocation Api of HTML?

The HTML Geolocation API is used to locate a user’s position.

getCurrentPosition() method is used to get current position of User.
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function() {});

Which are important methods used to drag & drop data in HTML?

function drag(ev) {
The dataTransfer.setData() method sets the data type and the value of the dragged data.

function drop(ev) {
  var data = ev.dataTransfer.getData("text");;

Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop) Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method The dragged data is the id of the dragged element (“drag1”) Append the dragged element into the drop element

HTML advance Interview Questions

  1. It’s a shame you don’t have a donate button! I’d without a doubt donate to this brilliant blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed to my Google account. I look forward to new updates and will talk about this site with my Facebook group. Chat soon!|

  2. Thanks for sharing your info. I truly appreciate your efforts and I will be waiting for your further write ups thanks
    once again.

  3. I read this article completely regarding the difference between the newest and earlier technologies, it’s an awesome article.|

  4. เว็บพนัน

    I do not even know how I ended up here, but I thought this post was good. I do not know who you are but definitely, you’re going
    to a famous blogger if you are not already 😉 Cheers!


    Wow! Finally, I got a web site from where I will be capable of genuinely obtain valuable data regarding my study and knowledge.

  6. Greetings! Very useful advice in this particular article!

    It is the little changes that will make the biggest changes.
    Many thanks for sharing!

  7. Hi, I do think this is an excellent blog. I stumbled upon it 😉 I am going to come back yet again since i have bookmarked it.
    Money and freedom is the best way to change, may you be rich and continue to help
    other people.

  8. you’re really a just right webmaster. The site loading velocity is amazing.
    It kind of feels that you’re doing any distinctive trick.

    Moreover, The contents are masterpiece. you’ve performed a fantastic task
    in this matter!

  9. I got this website from my friend who informed me concerning this website
    and at the moment this time I am visiting this site and reading very informative articles at this place.

  10. I think this is one of the most significant info for me. And I’m glad to read your article.

    But want to remark on some general things, The site style is ideal,
    the articles are really excellent: D. Good job, cheers

  11. That is a great tip especially to those fresh to the blogosphere.
    Brief but very accurate information… Many thanks for sharing this one.
    A must read article!

Leave a Reply

Your email address will not be published.