HTML Interview Questions And Answers

Posted in HTML 5
HTML Interview Questions And Answers

Table of Contents

Many of the students who appear for the job of HTML have specific concerns as to what can be asked of them during the interview. We have made efforts to put an end to their concerns by gathering the top 50 HTML questions that are most likely to be asked during the interviews. These questions are associated with the most appropriate answers, which can help you showcase your high level of knowledge about the subject. It is advised to go through these questions before you appear in the interview so that you could sharpen your abilities to respond quickly to the interviewer and gain his respect and preference over other applicants.

Top HTML Interview Questions and Answers

The following are the 50 top HTML interview questions and answers that are picked from the various questions that were asked to the HTML interviewee by well-reputed company personnel.

Question: Define HTML?

HTML stands for HyperText Markup Language. It is the language used for WWW or World Wide Web. HTML is a standard text formatting language that creates and displays a variety of pages on the web.

Question: What constitutes HTML?

Answer: HTML constitutes mainly two components. The first component is the content, and the second component is the tag. Both these components help in the proper display of pages with the required information for the web surfers.

Question: Define HTML tags?

Answer: HTML tags help in placing the contents in the proper and most appropriate format. It makes extensive use of symbols such as less than or < or higher than or > signs to place the appropriate content on the specific portion of the web page. The use of the slash or / symbol is also made as a closing tag.

Question: Are these HTML tags applied in pairs?

Answer: No. The HTML tags are not always applied in pairs because, in some cases, there is no need for the closing tag. For instance, in the case of images, the closing tags are not required as <img> tag.

Question: Define the standard list that is referred to while designing a page?

Answer: The standard list that is referred to while designing a page includes any or combination of the below stated.

  1. Menu list.
  2. Directory list.
  3. Ordered list.
  4. Unordered list.
  5. Definition list.

Question: What is the primary function of these lists?

Answer: The primary function of these lists is to make use of different kinds of tags that could be set to compose.

Question: Can we insert a comment in HTML?

Answer: Yes, we can insert a comment in HTML by beginning with lesser than sign and ending with greater than sign. For instance, “<!-“ and “->.”

Question: Why, in some cases, the character entities do not display correctly on all systems?

Answer: In some cases, the browser running does not support the character, and thus the character is displayed as boxes. This is the condition in which the character entities do not display correctly on all the systems.

Question: Define an image map?

Answer: An image map helps in linking with the different kinds of web pages using a single image. The image map can be used for defining shapes in the images that are made part of the image mapping process.

Question: What is white space?

Answer: White space is the empty sequence of space characters. This white space is considered as a single space character in the HTML.

Question: What is the advantage of white space?

Answer: White space helps the browser to collapse multiple spaces into one single space, and thereby the indent lines of the text can be taken care of without caring for the multiple spaces that are left. Thereby using the HTML code, white space helps in better organizing the content and tags, making them readable and easy to understand.

Question: Can some attribute value best to predefined values?

Answer: Yes, some attribute values can be set to predefined values, but other attributes can accept any kind of numerical value, which represents the pixel size.

Answer: We can insert a copyright symbol on the browser page, which can be done by using the commands such as type & copy; or & # 169 in the HTML file.

Answer: We can create several links to different sections within the same web page by using the <a> tag along with referencing through the use of the # symbol.

Question: Can we keep list elements straight in the HTML file?

Answer: Yes, we can keep list elements straight in the HTML file by using indents. The indent can also be used for the sub nested list for the parent list that contains it for creating more lists and elements.

Question: Which is the web page that is printed and pointed mostly as the web address in the magazine?

Answer: The top-level page is the most popular web page that is printed and pointed mostly as the web address in the magazine because it can help the users to browse to all other pages on the website from the same link.

Question: Why do we use alternate text in the image mapping?

Answer: Alternate text is used in image mapping to remove the confusion and get clear about the hotspots that correspond to the particular link. This way, descriptive text can be applied to each of the hotspot links.

Question: Can HTML files work well on the new browser?

Answer: Of course, the HTML files could work very well on the new browser, just that the new browser is compliant to the HTML standards. It may be possible that some new browsers may not support the features of HTML and therefore, won’t work well.

Answer: No, the hyperlink does not apply to the text-only but also the images. This means that we can convert an image into a link that can allow the users to gain access to another page when clicked on it.

Question: How can the symbol be represented in case the user’s operating system does not support the needed character?

Answer: The symbols can be represented in the form of the image in the case where the operating system does not support a particular character.

Question: What are the two attributes of the number type in the middle of a list?

Answer: The two attributes of the number type in the middle of a list include the type and value. The type attribute is used for changing the numbering type for any list item, while the value attribute is used for changing the number index for any list item.

Question: What is the purpose of a style sheet?

Answer: A style sheet helps in creating a well-defined template that is both consistent as well as transportable. These style sheet templates can be linked to various web pages, which makes it easier to main and change the look of the web page.

Question: What are the different list types of the ordered list?

Answer: The different list types of the ordered list include the roman numerals and alphabetical. On the other hand, the unordered list attributes can be set through circle, square, or disc.

Question: Can we create a colorful text on a webpage?

Answer: Yes, we can create a colorful text on a webpage by using the <font color=“color”> tags for each character where the color is needed to be applied.

Question: Where are the numerical values taken in HTML?

Answer: The numerical values are taken from the ASCII values for the various characters in the HTML.

Question: What are the different advantages of grouping several checkboxes?

Answer: There are several advantages to grouping several checkboxes. These include,

  1. It helps in organizing the checkboxes.
  2. It helps in applying particular names on the checkbox buttons to differentiate them easily from a group.
  3. It supports the creation of a different group of checkboxes on a single webpage with different names.

Question: How is overlapping affect the sets of tags?

Answer: An overlapping set of tags in the HTML results in the recognition of only the first tag. Such issues occur only when the text does not display on the browser screen.

Question: Define Applets?

Answer: Applets are small programs that are embedded with the web pages so that they can perform particular functions, including animation, information processing, and even computation. The Applets are written using the Java language.

Question: If there is no text between the tags, then what will be the outcome? Give an example?

Answer: If there is no text between the tags, then there will be nothing available to format, and hence no formatting can be done. For instance, tags without closing tag like that of image tag or <img> tag do not require any text between them, and hence no formatting will be needed in such a case.

Question: Where can you specify colors for table borders?

Answer: The specification of color for table borders can be made in style sheet, and in its absence, the same as the text color will apply.

Answer: Yes, we can create a link that could connect to another web page when clicked on it. These links are called hyperlinks and use the href tag.

Question: Can style sheets help in aligning images and wrap text?

Answer: Yes, the style sheet can apply tables to position text and images for aligning them accordingly.

Answer: No, a single hyperlink can take the web browser to only one pre-specified single web page.

Question: Is there any difference between the unordered list on one side and the directory and menu list on the other side?

Answer: Yes, there is a crucial difference between the unordered list on one side and the directory and menu list on the other side, which is not including the attributes for changing the bullet style.

Question: How will you change the color of bullets?

Answer: The color of bullets is usually the color of the first character in the list. However, if you change the color of the first character with the set of <font> tags, then the bullet color and first character color from the text will also get changed.

Question: Is there any limit to a text field size?

Answer: Yes, there is a limit of 13 characters in a text field size. By setting the size attribute, the size value can be set as low as 1.

Question: How is the maximum size value determined?

Answer: The maximum size value can be determined by the browser width.

Question: What will happen if the size attribute will be set to zero?

Answer: If the size attribute is set to zero, then the size will be set to the default size of 13 characters.

Question: What are the similarities between the border and rule attributes?

Answer: If the border attribute is set to a non-zero value, then the default cell borders with the thickness of one pixel will get added automatically. Similarly, if the rule attribute is added to the <table> tag, then the border attribute will not get included, and the default one-pixel border will be set and appear on the screen.

Question: Define Marquee? How can we apply it?

Answer: A Marquee helps in setting a scrolling text on the web page. To apply for a marquee, you need to use </marquee> tags.

Question: What is the function of <br> tags?

Answer: The function of <br> tags is to separate sections of the text.

Question: Is there any other way to separate the section of text without using <br>?

Answer: Yes, there are other ways to separate sections of text which includes <p> tag and <blockquote> tag.

Question: Can the text appear outside the browser?

Answer: By default, the text cannot appear outside the browser, but, in case the text is part of a table cell with a predefined width, it could extend beyond the browser window.

Answer: An active link is when they have the focus when the mouse is placed over them, while the standard links are those who do not have the mouse cursor over the link.

Question: Can the stylesheet limit the number of style definitions?

Answer: No, the style sheets do not limit the number of style definitions for a given selector, which can be included within the brackets. However, every new style definition needs to be separated from others using the semicolon symbol.

Question: Is there any hierarchy that is followed on the style sheets?

Answer: Yes, there is a hierarchy that is followed on the style sheet, which includes three different style definitions. The first definition, which is closest to the actual tag, takes precedence. The second definition, which is Inline style, takes priority over the embedded style sheet. The third definition is the external style sheets, which take priority over the others.

Question: Can we group the various selectors with different class names?

Answer: Yes, we can group the various selectors with different class names and the same style definition by using commas.

Question: Can the external CSS file be opened in the browser?

Answer: No, the external CSS file cannot be opened in the browser because the file has a different extension. However, it can be opened only with <link/>tag within the other HTML document.

Question: Can the list-style-type property affect the paragraph?

Answer: No, the list-style-type property cannot affect the paragraph, and it will rather ignore this non-list element.

Question: Define the Canvas element?

Answer: A Canvas element supports the creation of charts, graphs, and bypasses Photoshop. It could help the creation of 2D images that can directly be placed through the HTML5 code.

HTML Coding Interview Questions and Answers

Question: Write a program to create nested webpages in HTML.

Answer: 

Representing a webpage inside of another webpage is a nested webpage. It is done using the iframe tag which creates an inline frame. 

<!DOCTYPE html>    
<html>   
<body>  
<h2>HTML Iframes example</h2>   
<p>Use the height and width attributes to specify the size of the iframe:</p>   
<iframe src="https://hackr.io/" height="400" width="600"></iframe>   
</body>   
</html>    

Question: Explain SVG with HTML code.

Answer: HTML SVG describes the two-dimensional vector and vector/raster graphics. SVG images and their behaviors are defined in XML text files. It is used for vector diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML SVG example</h2>   
<svg width="400" height="400">   
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="red" />    
</svg>
</body>   
</html> 

Question: What is the audio tag? Implement it 

Answer: The audio tag is used to add sound or music on the web page. It supports three audio type formats: mp3, WAV, Ogg.

Question: Explain the button tag with the help of code.

Answer: Button tag lets you create a clickable button in the HTML form on the webpage. 

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML Button Tag Example</h2>   
<button name="button" type="button">CLICK ME</button>
</body>   
</html> 

Question: Write HTML code to print the following table. 

Answer: 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<table >
<tr>
<th> Serial No. </th>
<th> Product Name </th>
<th> Quantity </th>
<th> Total Price </th>
</tr>
<tr>
<td> 1 </td>
<td>Rice</td>
<td> 2 Kg </td>
<td> 500 </td>
</tr>
<tr>
<td> 2 </td>
<td> Corn Flour </td>
<td> 2 Kg </td>
<td> 300 </td>
</tr>
<tr>
<td> 3 </td>
<td> Marie Biscuits </td>
<td> 2 pkt </td>
<td> 20 </td>
</tr>
<tr>
<td> 4 </td>
<td> Chilli Powder </td>
<td> 200 gm </td>
<td> 100 </td>
</tr>
<tr>
<td> 5 </td>
<td>Mangoes</td>
<td> 4 Kg</td>
<td> 700 </td>
</tr>
</table>
</body>
</html>

Question: Explain different types of headings in HTML 

Answer: 

<!DOCTYPE html>
<html>
<head>
<style>
h1{
          color: red;
}
h2{
           color: blue;
}
h3{
          color: green;
}
h4{
          color: purple;
}
h5{
          color: yellow;
}

h6{
          color: orange;
}
</style>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>

Question: Explain the script tag.

Answer: Script tag can be inside the head or body tag of the HTML code. This tag is executed when the browser reaches that part of the document.

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML Script Tag Example</h2>   
<script>
    var x = 5;
    var y = 6;
    var result = x + y;
   alert("X + Y is equal to " + result);                                                                                 
</script>
</body>   
</html>

Question: How to insert an image in the HTML webpage?

Answer: 

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML Image Example</h2>   
<img src="tulip.jpeg">
</body>   
</html>

Question: How to insert an Emoji on the webpage

Answer: 

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML Emoji Example</h2>   
<p>&#128512;</p>
</body>   
</html> 

Question: Explain HTML forms

Answer: Forms are designed to get the user input which can later be sent to the server for processing. Input can be given as text or in the form of radio buttons and can be submitted by clicking the submit button.

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML Form Example</h2>   
<form>
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname">
</form>
<p> </p>
<form>
 <input type="radio" id="male" name="gender" value="male">
 <label for="male">Male</label><br>
 <input type="radio" id="female" name="gender" value="female">
 <label for="female">Female</label><br>
 <input type="radio" id="other" name="gender" value="other">
 <label for="other">Other</label>
 <br> </br>
 <input type="submit" value="Submit">
</form>
</body>   
</html> 

Answer: Hyperlinks are defined with the HTML <a> tag.

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML Hyperlink Example</h2>   
<a href="url">link text</a>
</body>   
</html> 

Question: How to add color to the text. 

Answer: 

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML Color Text Example</h2>   
<h1 style="color:Tomato;">Hello HTML</h1>
<p style="color:DodgerBlue;">Line 1</p>
<p style="color:MediumSeaGreen;">Line 2</p>
</body>   
</html> 

Question: Differentiate between ordered list and unordered list.

Answer: An unordered list is written between <ul> </ul> tags and each element of the list is written between <li> </li> tags. The list items are displayed as bullets. 

An ordered list is written between <ol> </ol> tags and each element of the list is written between <li> </li> tags. The list items are displayed as numbers. 

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML List Example</h2> 
<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul> 
<ol>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ol>
</body>   
</html>

Question: Explain Description Lists in HTML 

Answer: The description list allows us to add a description to each element of the list. 

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term. 

<!DOCTYPE html>    
<html>   
<body>   
<h2>HTML Description List xample</h2>   
<dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
</dl>
</body>   
</html> 

Question: Define and implement the alt attribute. 

Answer: If an image cannot be displayed the alt attribute specifies the alternate text to be displayed instead.  

<!DOCTYPE html>    
<html>  
<body>   
<h2>HTML Alt Example</h2>   
<img src="tulip.jpeg" alt= "Tulip Garden">
</body>   
</html> 

This way, the above answers to the top HTML interview questions and answers could give you an insight as to what can be asked. You can overcome the fear and gain confidence for your interview, which you help you get your targeted job position. The answers stated above are clear and concise. They are not expanded and kept short so that the meaning is conveyed, and the interviewer can be given the idea that the interviewee is entirely ready for the job position.

Conclusion

In addition to the preparation of the questions and answers stated above, it is also advised to interact with the friend or relative who recently had an interview. This will help you gain information about the industry trends and expectations that the interviewers are looking for in a candidate. This way, you can improve your skills and abilities accordingly and utilize the above information to present yourself as the best talent available to the company who can meet up to their expectations and offer them high-value services. Interacting with others who recently had interviews and going through the HTML interview questions and answers stated above will help you place yourself as the best option available to the interviewer and ensure that you get the job.

Enrol for this udemy course that’s designed to help you prepare for any Front End interview Questions Challenge.

Here is a great book to help you go through top generic programming questions and answers with confidence: Cracking the Coding Interview: 189 Programming Questions and Solutions.

People are also reading:

 

Vijay Singh

Vijay Singh

My name is Vijay Singh Khatri, and I enjoy meeting new people and finding ways to help them have an uplifting experience. I have had a variety of customer service opportunities, through which I was able to have fewer returned products and increased repeat customers, when compared with co-workers. Currently working with hackr.io View all posts by the Author

Leave a comment

Your email will not be published
Cancel
Frontend Senior Pomidor
Frontend Senior Pomidor

Tags font and marquee in 2020? Seriously?