HTML is one part of the web development process. It is easy to learn, and many tutorials are available online. However, the interview experience can be quite different,
Here, we have put down several of the most common HTML Interview questions and answers, ones which you are likely to be asked during interviews. We’ve divided these questions into beginner, intermediate and advanced level HTML interview questions.
Top HTML Interview Questions and Answers
HTML Beginners Interview Questions
1. Define HTML.
HTML stands for HyperText Markup Language. HTML is a standard text formatting language that creates and displays a variety of pages on the web.
2. What are the components of HTML?
HTML consists of two components: the first is the content, and the second is the tag. Together, they help display pages with the required information.
3. Define HTML tags.
HTML tags help place content in a proper format. Tags are opened and closed with < and > respectively. / is also used in the closing tag. For example:
<head>
</head>4. Are all HTML tags applied in pairs?
No. The HTML tags are not always applied in pairs because some don’t need a closing tag. For instance, for the <img> tag, the closing tags are not required.
5. Define the standard list that is referred to while designing a page.
The standard list that is referred to while designing a page includes any or combination of the following:
- Menu list
- Directory list
- Ordered list
- Unordered list
- Definition list
6. Why do characters display incorrectly on all systems?
In some cases, the browser running does not support the character, and thus the character is displayed as boxes.
Intermediate Level HTML Interview Questions
7. Define an image map.
An image map helps link 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.
8. What is white space?
White space is the empty sequence of space characters. This white space is considered a single space character in the HTML. White space helps the browser collapse multiple spaces into one single space, and thereby the indent lines of the text can be taken care of conveniently.
9. Can some attribute value best to predefined values?
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.
10. How can we create links to different sections within the same web page?
We can create several links to different sections within the same web page by using the <a> tag along and using the # symbol.
11. Can we keep list elements straight in the HTML file?
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.
12. Which is the web page that is printed and pointed mostly as the web address in the magazine?
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 helps users browse all other pages on the website from the same link.
13. Why do we use alternate text in the image mapping?
Alternate text is used to apply descriptive text to each of the hotspot links.
14. Can HTML files work well on the new browser?
Of course, the HTML files could work on a new browser, but the new browser must be compliant with the HTML standards. It may be possible that new browsers do not support the features of HTML and therefore won’t work well.
15. Do you think that the hyperlink only applies to the text-only?
No, the hyperlink does not apply to the text-only but also to 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.
16. How can symbols be represented in case the user’s operating system does not support a character?
Symbols can be represented in the form of an image instead.
17. What are the two attributes of the number type in the middle of a list?
The two attributes of the number type in the middle of a list include the type and value. The type attribute is used to change the numbering type for any list item, while the value attribute is used for changing the number index for any list item.
18. What is the purpose of a style sheet?
A style sheet helps create a well-defined template that is both consistent and transportable. These style sheet templates can be linked to various web pages, which makes it easier to maintain and change the look of the web page.
19. What are the different list types of the ordered list?
The different list types of the ordered list include roman numerals and alphabetical. On the other hand, the unordered list attributes can be set through circle, square, or disc.
20. How do we create colored text on a webpage?
By using the <font color=“color”> tags for the text where the color needs to be applied.
21. What are the advantages of grouping several checkboxes?
There are several advantages to grouping several checkboxes. These include:
- Organizing checkboxes.
- Applying particular names on the checkbox buttons to differentiate them easily from a group.
- Supporting the creation of a different group of checkboxes on a single webpage with different names.
22. How does overlapping affect the sets of tags?
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.
23. What is the limit to a text field size?
The limit is 13 characters. The size attribute can be set to as low as 1.
Advanced HTML Interview Questions
24. Define Applets.
Applets are small programs that are embedded with web pages so that they can perform particular functions, including animation, information processing, and even computation. Applets are written using the Java language.
25. Where can you specify colors for table borders?
The specification of color for table borders can be made in the style sheet, and in its absence, the same color as the text will apply.
26. Can style sheets help align images and wrap text?
Yes, the style sheet can apply tables to position text and images to align them.
27. How do you change the color of bullets?
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 change.
28. How is the maximum size value determined?
The maximum size value can be determined by the browser width.
29. What happens if the size attribute is set to zero?
If the size attribute is set to zero, then the size will be set to the default size of 13 characters.
30. What are the similarities between the border and rule attributes?
If the border attribute is set to a non-zero value, then the default cell borders with the thickness of one pixel will be added automatically. Similarly, if the rule attribute is added to the <table> tag, then the border attribute will not be included, and the default one-pixel border will be set and appear on the screen.
31. What is a Marquee and how is it applied?
A Marquee helps set scrolling text on the web page. To apply a marquee, you use the <marquee> tag.
32. Can the text appear outside the browser?
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.
33. Can the stylesheet limit the number of style definitions?
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.
34. Is there a hierarchy that is followed on the style sheets?
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 the inline style, takes priority over the embedded style sheet. The third definition is the external style sheets, which take priority over the others.
35. Can we group various selectors with different class names?
Yes, we can group the various selectors with different class names and the same style definition by using commas.
36. Can the external CSS file be opened in the browser?
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 HTML document.
37. Can the list-style-type property affect the paragraph?
No, the list-style-type property cannot affect the paragraph, and will ignore this non-list element.
38. Define the Canvas element?
A canvas element supports the creation of charts and graphs. It helps create 2D images that can be placed directly through the HTML5 code.
HTML Coding Interview Questions and Answers
39. Write a program to create nested web pages in HTML.
A webpage inside of another 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>
<iframesrc="https://hackr.io/"height="400"width="600"></iframe>
</body>
</html>40. Explain SVG with HTML code.
HTML SVG is a 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 and 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> 41. Explain the button tag with the help of code.
The 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> 42. What are the different types of headings in HTML?
<!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>43. Explain the script tag.
The script tag embeds client-side script. It 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>44. How do you insert an image in a HTML webpage?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image Example</h2>
<img src="tulip.jpeg">
</body>
</html>45. How do you insert an Emoji in a web page?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Emoji Example</h2>
<p>😀</p>
</body>
</html> 46. Explain HTML forms.
Forms are designed to get 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>
<inputtype="submit"value="Submit">
</form>
</body>
</html> 47. How are hyperlinks inserted in a web page?
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> 48. How do you add color to text?
<!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> 49. Explain ordered and unordered lists.
An unordered list is written with the <ul> tag and each element of the list is with a <li> tag. The list items are displayed as bullets.
An ordered list is written between <ol> tag and each element of the list is written with a <li> tag. 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>50. Explain Description Lists.
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> 51. Define and implement the alt attribute.
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> Conclusion
These HTML and HTML5 interview questions and answers should be all you need to get started preparing for your interview. If you’d like, consider enrolling in this Udemy course.
Don’t forget to actually code to put your learnings to the test. Good luck!
Frequently Asked Questions
1. How many tags are in HTML?
There are well over 100 tags in HTML. The most frequently used ones are listed in the HTML questions and answers above.
2. What are the basic interview questions in HTML?
The HTML basic interview questions at the top of the list above cover almost everything you need to know as far as the fundamentals are concerned.
3. What is the HR tag in HTML?
The HR tag adds a horizontal rule or thematic break. It is created using the <hr>.
People are also reading:
- HTML Courses
- Difference between HTML vs HTML5 vs XHTML
- Jquery Interview Questions
- Javascript Certification
- Best Javascript Libraries
- Java vs Javascript
- Javascript Courses
- CSS Cheat Sheet
- Difference between CSS2 and CSS3
