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.
Here's an example of the tags used for the head section. It creates the header of the page:
<head>
</head>4. Are all HTML tags applied in pairs?
No. Many tags are applied in pairs, but there are instances where that's not needed. Self-closing tags, also called Void tags, contain everything they need without a closing tag.
Here's an example with the <img> tag:
<img src="image.jpg" alt="Description of the image">The same applies to line breaks with the <br> tag.
This is a line break.<br>Here is the next line.5. What are the standard types of lists used in web page design?
When designing a web page, the standard types of lists that may be used include:
Menu list
Directory list
Ordered list
Unordered list
Definition list
6. Why might characters display incorrectly on all systems?
Characters may display incorrectly as boxes or other placeholder symbols when the browser or system does not support the specific character. This typically happens if the font being used does not include that character or if the character encoding is not properly set.
To avoid this, ensure your HTML document uses the correct character encoding, such as UTF-8, which supports a wide range of characters.
In the example HTML code below, the <meta charset="UTF-8"> tag ensures that the document is interpreted with UTF-8 encoding, which helps prevent character display issues in your web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Ensures the use of UTF-8 encoding -->
<title>Character Display Example</title>
</head>
<body>
<p>Correctly displayed character: ©</p> <!-- Example of a character that requires proper encoding -->
</body>
</html>
Intermediate Level HTML Interview Questions
Most interviews will not be satisfied with only beginner-level questions. Web developers should understand HTML elements, references, and how to adapt what they include. Here are a few intermediate-level questions for an HTML interview.
7. Define an image map.
Answer: 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 in HTML, and how is it handled by browsers? How does it differ from padding?
White space in HTML refers to sequences of space characters, such as spaces, tabs, and line breaks. Browsers typically treat these sequences as a single space character when rendering the page. This means that multiple consecutive spaces are collapsed into one, which helps manage text alignment and indentation without affecting the display.
Note that white space and padding are two different things. Padding in HTML is a CSS property that creates space between the content of an element and its border. It is used to add internal spacing within an element, providing room for the content to breathe and improving the overall layout and readability.
Here's an example that shows padding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padding Example</title>
<style>
.box {
border: 2px solid black;
padding: 20px; /* Adds 20px padding on all sides */
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">
This box has padding around its content.
</div>
</body>
</html>9. Can attribute values in HTML be set to predefined values?
Yes, some HTML attributes can be assigned predefined values, such as specific keywords or options defined by HTML specifications. However, other attributes may accept any numerical value, often representing dimensions or measurements in pixels.
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.
Here's an example of a nested list with proper formatting:
<ul>
<li>Item 1
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
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, or alt text in image mapping, does a few important things. Most importantly, it helps with accessibility. Alt text is presented to visually impaired visitors who may not be able to view the image. It also helps with search exposure.
Search engines "view" images via their alt text, which can help them show up properly in Google, Bing, or GPT Search. Alternate text is also a good fallback. It shows up if an image fails to load.
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. Is it true that hyperlinks can only be applied to text?
No, hyperlinks are not limited to text; they can also be applied to images. This allows you to turn an image into a clickable link, enabling users to navigate to another page when they click on the image.
Here's an example of how to add a hyperlink to an image. I've added the image for this blog post and a link to our homepage as the example. Try changing the hyperlink to one of your own.
<a href="https://www.hackr.io">
<img src="https://cdn.hackr.io/uploads/posts/medium/1593497476624PLclJ1G.webp" alt="article image">
</a>
Follow-up question here: Can you add audio to an HTML page?
Yes, you can add audio to an HTML page using the <audio> element. This element allows you to embed audio files such as MP3s, WAVs, or OGGs, and provides controls for playing, pausing, and adjusting the volume.
In the following example, the <audio> element is used with the controls attribute to display audio playback controls. The <source> tag specifies the audio file and its type. If the browser does not support the audio element, a fallback message is displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hackr Audio Example</title>
</head>
<body>
<h2>HTML Audio Example for Hackr</h2>
<audio controls>
<source src="example.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</body>
</html>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? Where do you add them?
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.
Stylesheets are added in the header. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<link rel="stylesheet" href="styles.css"> <!-- Linking an external stylesheet -->
</head>
<body>
<!-- Your HTML content goes here -->
</body>
</html>
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
More advanced concepts will be covered in this section. I'll also include a few more advanced formatting questions, which are a natural progression in almost any HTML interview.
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? Give an example.
Yes, the style sheet can apply tables to position text and images to align them.
The <span> tag is an inline HTML element used to apply styles or group small sections of text or other inline elements without affecting the layout of surrounding elements. It does not add any visual change by itself but is commonly used with CSS to style a specific part of the content.
Here's an example of using the span tag to apply style changes with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span Example for the Hackr.io Community</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a <span class="highlight">highlighted</span> section of text.</p>
</body>
</html>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 do you use it in HTML? Why is it not often used?
A marquee creates scrolling text on a web page. You can apply a marquee effect by using the <marquee> tag.
In the example below, our HTML code will display the text "Welcome to Hackr!" moving across the screen.
But the <marquee> tag is deprecated and is not recommended for modern web development. Instead, CSS animations are preferred for creating scrolling text effects.
<marquee>Welcome to Hackr!</marquee>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. What is the <canvas> element in HTML?
The <canvas> element is used to draw graphics, such as charts and graphs, directly within a web page. It allows for creating 2D images and animations using JavaScript, providing a versatile way to render visual content directly on the web.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>HTML Coding Interview Questions and Answers
Here are a few practical questions to include in an HTML interview.
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>
<head>
<meta charset="UTF-8">
<title>HTML Iframes Example</title>
</head>
<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>40. How is SVG used in HTML, and what are its main features?
SVG (Scalable Vector Graphics) in HTML is used to create two-dimensional vector graphics. SVG images are defined using XML, allowing for precise control over shapes, lines, and colors.
Unlike raster graphics, which are pixel-based, SVG graphics are resolution-independent and can be scaled to any size without losing quality. This makes SVG ideal for creating vector diagrams, such as pie charts and 2D graphs, within an X, Y coordinate system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML SVG Example</title>
</head>
<body>
<h2>HTML SVG Example</h2>
<svg width="400" height="400">
<circle cx="200" cy="200" r="100" stroke="black" stroke-width="6" fill="red" />
</svg>
</body>
</html>41. How does the <button> tag work in HTML, and can you provide an example?
The <button> tag is used to create a clickable button within an HTML document. This button can trigger various actions when clicked, such as submitting a form or executing a JavaScript function.
Here's an example that shows how it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Tag Example</title>
</head>
<body>
<h2>HTML Button Tag Example</h2>
<button type="button">CLICK ME</button>
</body>
</html>42. What are the different types of headings in HTML? Please provide examples with code.
HTML provides six levels of headings, each represented by <h1> through <h6>. These headings range from the most important (<h1>) to the least important (<h6>). Each level of heading can be styled differently to visually distinguish their importance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Headings Example</title>
<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>
</html>43. What is the <script> tag used for in HTML? Please provide an example.
The <script> tag in HTML is used to include and execute JavaScript code within a web page. It allows you to add interactivity and dynamic functionality by embedding JavaScript directly in your HTML document or by linking to an external JavaScript file.
In my example below, I used the <script> tag to define a JavaScript snippet that calculates the sum of two variables, x and y, and then displays the result in an alert box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Script Tag Example</title>
</head>
<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 an HTML webpage?
You can use the <img> tag to add an image. Here's an example of the code below. I've included additional settings in the header to make sure the image appears at the proper scale on the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Image Example</title>
</head>
<body>
<h2>HTML Image Example</h2>
<img src="tulip.jpeg" alt="Tulip Flower" width="300" height="200">
</body>
</html>45. How do you insert an Emoji in a web page?
To insert an emoji into a web page, you can use the emoji character directly in your HTML code or utilize Unicode escape sequences.
Here’s how you can do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Example</title>
</head>
<body>
<h2>Emoji Example</h2>
<p>Here is a smiley face emoji: 😊</p>
<p>Here is a heart emoji: 💜</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
