HTML Interview Questions and Answers for Fresher- Part 2

by

Frontend interviews are something that you can prepare yourself in quiet an effective way ‘if you know the right path’ and resources.

In this post, we will continue with Part 2 of HTML interview questions and answers for fresher and mid-level web developers.

Note*** If you landed directly on this post, Check out the Part-1 of Top HTML interview questions and answers where we’ve covered the most basic and common ones.

Prepare HTML Interview Questions and Answers for Freshers in 2121

Discloser*** In this ultimate list of HTML interview questions and answers, Some explanations have been extracted from the references word-for-word, and only rephrased for your clarity and better understanding.

HTML Interview Questions and Answers for Freshers:-

Q11) What are the HTML tags used to display information in a tabular form?

To display a set of data in tabular form, we use a ‘<table>’ tag. The list of HTML tags used to display data in the tabular form includes:
Tags Description
<table> It is used to define a table with rows and columns.
<tr> This tag defines a row in a table.
<th> It is used to define a header cell in a table.
<td> Used to define a cell in a table.
<tr> This tag defines a row in a table.
<col> Used with <colgroup> element to specify column attributes and properties for each column
<tbody> It is used to group the body content in a table.
<thead> Used to group the header content in a table.
<caption> It defines the caption of a table.
<colgroup> Used to group one or more columns in a table for formatting.
<tfooter> It is used to group the footer content in a table.

Q12. What is Responsive Web Design?

With Responsive Web Design principles using HTML and CSS, we create web pages and websites that automatically resize, hide, shrink, or enlarge. This makes it look good on all the small, medium and large screen devices (For eg: desktops, tablets, and phones).

The Viewport:

To create a responsive website, we add a meta tag to make the web pages responsive according to different screen size and viewports.

Use of ‘meta’ tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Useful Link:

Q13. How to create a Link in HTML to visit other pages?

HTML provides an anchor tag using which we create one or more hyperlinks. These anchor tags create links using which we can traverse from one page to another web-page. The ‘href’ attribute contains the URL of the desired resources. Anchor tags can behave and appear in multiple ways:
  • Unvisited Link: By default, it is displayed, underlined and blue.
  • Visited Link: By default, It is displayed, underlined and purple
  • Active Link: It is displayed, underlined and red.
Syntax:

<a href=”www.abcde.com”>Link Text</a>

Q14. How do you pick a date in HTML?

Using the <input type=”date” /> , we can define a date picker in an html web page.

Q15. Do you know about the ‘datalist’ element?

The <datalist> tag allows us to create a dropdown list of multiple items. Using the <datalist> element, we can pick anyone in them either by clicking on the item or by typing in an <input> element linked with the <datalist>.

It’s a perfect solution to provide an “autocomplete” feature for <input> elements. As the users will input data, they will see a drop-down list of pre-defined options matching with their input characters.

Live in Action:
<html>
  <body>
<h2>The datalist element</h1>
    <label for="skill">Choose your Skills from the List >></label>
    <input list="skills" name="skill" id="skill">
    <datalist id="skills">
        <option value="Front end development">
        <option value="Back end development">
        <option value="Python Developer">
        <option value="Java Developer">
        <option value="Tester and QA">
        <option value="Database Specialist">
        <option value="Business Analyst">
    </datalist>
    <input id="btn-submit" type="submit">

    <p><strong><em>Hey***:</strong> If you are using Safari 12.0 web browser, switch to another browser to see the
        element in action.</em /></p>
    </body>
</html>
/* Some CSS to Beautify... */
body {
    background-color: skyblue;
}
h2 {
    text-align: center;
    text-decoration: underline;
    color: blue;
}

input {
    padding: 6px 14px;
}
input#btn-submit {
    background-color: green;
    font-weight: 700;
    color: white;
    border-radius: 4px;
    border: 3px solid green;
}

Useful Link:

Q16. What is the difference between ‘fieldset’ and ‘frameset’?

Both ‘fieldset’ and ‘frameset’ are used for different purposes-
fieldset frameset
The <fieldset> HTML element is majorly used with a form tag. It used to group related elements in a form.

The <fieldset> tag draws a box around the related elements and we can provide a name to be displayed for the group of related elements using the <legend> tag.

 The <frameset> is deprecated in HTML5 and not supported in HTML5.

Instead of using a <frameset> element, we can opt for an <iframe> element that is used to embed another web document or website within the current HTML page.
Syntax:

<fieldset>
  <legend>Personal Info:</legend>
    …
    Other Elements…
    …
</fieldset>
 Syntax:

<frameset> is deprecated now! Use <iframe> instead…

<iframe src=”demo_iframe.htm” title=”Iframe Example”></iframe>
Useful Links:

Q17. Is there any possible solution to display web pages in another browser window as you click a link?

One possible solution is to use the ‘target’ attribute of an ‘anchor tag’ <a>. By default, as the user clicks the link, the linked page will be displayed in the current browser window.

To change this behavior, we can change the target of the link using the ‘target’ attribute. It specifies where to open the linked document.

Syntax:

<a href=”https://shubhamklogic.com/” target=”_blank“>Your Link</a>

The ‘target’ attribute can contain any one of the following values:
  • _self : It is the default value
  • _blank : Used to open the document in a new window or tab
  • _parent : Opens the document in the parent frame
  • _top : Opens the document in the full body of the window

Q18. List 5 block-level and 5 inline elements in HTML?

Here are the 5+1 block-level element of HTML5 :
  • Table : <table>
  • Unordered List : <ul>
  • Paragraph : <p>
  • List items : <li>
  • Blockquote : <blockquote>
  • Headers : <h1> to <h6>
Here are the 5+1 in-line elements of HTML5-
  • Strong : <strong>
  • Span : <span>
  • Input : <input>
  • Image : <img>
  • Anchor : <a>
  • Code : <code>

Q19. Explain the difference between ‘script’ and ‘noscript’ tag?

Its one of the most confusing HTML interview questions. Although their name suggests a bit about what they do, but remember these points-
script noscript
The HTML <script> tag is used to define scripting code (such as JavaScript code) in client-side i.e. for browsers.

It is majorly used with JavaScript to manipulate images, validate HTML forms, and change the web-page content dynamically.

 The HTML <noscript> tag is majorly used to manage the browsers which do recognize <script> tag but do not support scripting (and languages as JavaScript).

In such cases, the <noscript> tag plays an important role to display an alternative message to the front-end user.
For Example:
<script type="text/javascript">
  document.write("Hello Programmer!!!");
</script>

<noscript>OOPs!!! Your browser does not support JavaScript!</noscript>
<p>A browser, that doesn’t support JavaScript, will show the text inside the ‘noscript’ element.</p>

Q20. What are different methods of submitting a form data? Explain pros and cons of all!

The HTML ‘form’ tag has a ‘method’ attribute that specifies how to send the form-data to the server or resource specified in the ‘action’ attribute).

The ‘method’ attribute can hold any one of two values-
1) GET
2) POST

If we use the method=‘GET’, then the form-data will be sent as URL variables, however, if we use method=‘POST’ then the form-data gets appended in the body of the HTTP request.

In simple words, when submitting using the POST method, data will be submitted to the server in a hidden form.

Advantages of GET:
  • Using Get methods, you can easily request for required data.
  • It allows you to save the results of an HTML form.
Advantages of POST:
  • Using POST method, you can send user-generated data to the web-server.
  • POST is a secure method as its requests do not get saved in browser history.
Disadvantages of GET:
  • We can’t send documents, PDFs or images using GET method.
  • The length of the URL is limited (generally to 255 characters).
Disadvantages of POST:
  • Many firewall setups don’t allow to submit data using POST methods.
  • POST method takes decent time when uploading the large binary file.

Q21) What is the difference between SVG and HTML5 Canvas?

It’s another mostly asked question by interviewers. So let’s understand them with examples-

SVG Canvas
SVG gives better visual results and performance on larger surfaces with fewer numbers of objects. Canvas gives better visual results on a smaller surface with a larger number of objects.
We can easily modify any SVG through scripts and CSS. However, Canvas elements can only be modified through scripts.
SVG is Vector-based. As its full name already suggests (Scalable Vector Graphics). Canvas is composed of pixels and provides Raster-based visual results.
In terms of scalability, SVG wins the race. SVG documents or visuals can be printed with high quality at any resolution. Canvas documents, images and visuals don’t look too good when scaling them larger. Hence it is not suitable to print outputs on higher resolutions.
In clean words:
  • SVG : It’s like a “drawing program”. In a drawing app, all of its components or shapes (such as Square, Circle, Rectangles) are specified with some drawing instructions and any part of a shape can be changed. Drawings are basically a shape-oriented thing.
  • Canvas: It’s like a “painting program”. Once the desired pixels hit the screen, that is your drawing. You cannot change any shape except by overwriting them with other pixels. At its core, Paintings are pixel-oriented.
Live in Action:
<h2>Creating Icon using SVG- ShubhamKLogic.com</h2>
<div class='search' id='s'>
  <svg id='r' viewbox='0 0 3000.29 592.05' xmlns='http://www.w3.org/2000/svg'>
    <path d='M2409,211.5c0,116.25,94.24,210.5,210.5,210.5a209.45,209.45,0,0,0,115.68-34.66c.55.62,1,1.31,1.55,1.9L2848,500.47A42.79,42.79,0,1,0,2908.47,440L2797.24,328.73c-.59-.59-1.28-1-1.9-1.55A209.46,209.46,0,0,0,2830,211.5C2830,95.24,2735.75,1,2619.5,1S2409,95.24,2409,211.5 M2482,211.5A137.53,137.53,0,1,1,2619.5,349,137.53,137.53,0,0,1,2482,211.5' id='a' transform='translate(-19 7)'></path>
    <rect height='462.05' id='b' width='2860.29' x='30' y='30'></rect>
  </svg>
  <span>
    [ ShubhamKLogic- allows you to smash the icon ]
  </span>
</div>

body {
  background: -webkit-linear-gradient(to left, #00d2ff, #3a7bd5);
  background: linear-gradient(to left, #00d2ff, #3a7bd5);
}
h2{
  color:white;
  text-align:center;
  letter-spacing: 2px;
  text-decoration: underline;
}
#r {
  width: 330px;
  margin: 0 auto;
  cursor: pointer;
}
#a {
  fill: rgba(255,255,255,0);
  stroke: #fff;
  stroke-width: 20px;
  cursor: pointer;
}
#a.active {
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 40px;
}
#b {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 40px;
  visibility: hidden;
}
input {
  position: absolute;
  top: -55px;
  left: 15px;
  margin: 0 auto;
  padding: 10px;
  width: 260px;
  background-color: rgba(0,0,0,0);
  color: #fff;
  font-family: 'Dosis', sans-serif;
  font-weight: 800;
  font-size: 23px;
  border: none;
  box-shadow: none;
  outline: none;
  opacity: 1;
  transition-duration: 1s;
}
input.on {
  top: 5px;
  opacity: 1;
}
.search {
  width: 330px;
  height: 100px;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: 0 auto;
}
.search:after {
  content: "\00d7";
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  right: 25px;
  font-weight: bold;
  top: -55px;
  color: #fff;
  cursor: pointer;
  z-index: -1;
  border-radius: 100%;
  transition-duration: 0.5s;
  text-align: right;
  width: 50px;
  height: 35px;
}
.x.search:after {
  top: 5px;
}
span {
  color: #fff;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Dosis', sans-serif;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
}

function wish(){
  alert("Hey, Best of Luck with Coding!");
}
var a = document.querySelector("div.search");
a.addEventListener("click",wish);

What Next? 

Technical front-end interviews are difficult. That’s a tough fact.

Not only do you need to have a solid grasp of computer science fundamentals, but also need to have a clear-cut understanding of things like web performance, security, APIs, CSS layout engines and a bit of server-level transactions as well.

Learning HTML5 helps to develop high-quality Responsive websites and web-apps using technologies such as- PHP, Angular, React, Node.js with a database integration.

Found Helpful?

I’ve put so much effort into writing this article to provide value to the programming community. If you found this helpful? Smash the Yellow Icon, Copy its Link, and share with social media friends, It’ll be very helpful for all. Thanks!!!

Sharing is Caring conclusion-and-sharing-request

Leave a Comment