23

Frequently Asked HTML Interview Questions and Answers

HTML interview questions and answers, html interview questions for freshers, html interview questions jsmount, advanced html interview questions, top html interview questions, CSS and html interview questions, HTML 5 interview questions, Web development interview

html interview questions and answers
HTML interview questions and answers

What is DocType in HTML?

First thing which we should know that it is not a HTML tag. It is an instruction to the browser about the 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…
https://jsmount.com/html-create-canvas-graphics-with-javascript/
https://www.freecodecamp.org/news/full-overview-of-the-html-canvas-6354216fba8d/


What is Shadow DOM, Shadow Tree and Shadow Root?

http://robdodson.me/shadow-dom-the-basics/


What is the use of a 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 the same class?

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


How can we get all elements with the same tags?

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


What is the difference between getElementByClassName vs getElementsByClassName?

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


What is a query selector?

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


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

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

 <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 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 another side, Nonsemantic elements do not provide any additional meaning to the markup.


What is empty elements?

Empty Elements are those elements that 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 an image map in HTML?

The HTML <map> element is used with <area> elements to define an image map. we can click on that particular area 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">
</map>


Coords is attribute of area tag that is used with shape attributes. It tells the coordinate value of that area. It start from 0, 0 (top left corner area).
For more details read here…
https://www.w3schools.com/tags/att_area_coords.asp


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">
  <li>India</li>
  <li>USA</li>
</ol>


How can we change the counting start of the Ordered List?

We can do this with start attributes. 

 <ol start="50">
  <li>Apple</li>
  <li>Banana</li>
  <li>Milk</li>
</ol>


What is the 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 the use of a 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="https://www.huxley.net/bnw/four.html">
  <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>
</blockquote>


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="https://jsmount.com" target="myframe">JS Mount</a></p>


What is the use of the alt attribute of the IMG tag?

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


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

An absolute file path is a full URL to an internet file:
<img src="https://www.abc.com/images/demoimage.jpg" 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 the 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 the 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) {
  ev.dataTransfer.setData("text", ev.target.id);
}
The dataTransfer.setData() method sets the data type and the value of the dragged data.

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Call preventDefault() to prevent the browser default handling of the data (default is open as a link on the 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 interview questions and answers, html interview questions for freshers, html interview questions jsmount, advanced html interview questions, top html interview questions, CSS and html interview questions, HTML 5 interview questions, Web development interview

0

23 thoughts on “Frequently Asked HTML Interview Questions and Answers”

  2. Tennille Ternes

    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!|

    Reply
  3. 더킹 사이트

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

    Reply
  4. Pingback: HTML Form with Pure CSS & JavaScript | Custom Radio and Checkbox JS Mount
  5. Pingback: JavaScript Console Interview Questions | Input Output Program
  6. Carolyne Stoffey

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

    Reply
  7. Pingback: JavaScript What is x++ & var x = x++ ? Increment & Decrement Operator
  8. เว็บพนัน

    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!

    Reply
  9. sekolahbisnisonlineindonesia.com

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

    Reply
  10. 바카라사이트

    Greetings! Very useful advice in this particular article!

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

    Reply
  11. 바카라사이트

    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.

    Reply
  12. sddcmaster.com

    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!

    Reply
  14. marc_boose

    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.

    Reply
  16. 더킹카지노

    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

    Reply
  22. Torsten

    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!

    Reply

Leave a Reply

Your email address will not be published.