100 must know HTML interview questions and answers in 2024
Are you a senior HTML developer looking to work with top US companies? Or, are you a company on a hiring spree for HTML developers? Whatever the case may be, you will benefit from the following deck of HTML interview questions we have carefully curated.
Hypertext Markup Language (HTML) is used to structure content on web browsers. HTML elements help create sections, paragraphs, and links. It should not be mistaken for a programming language as it doesn't offer dynamic functionality. Some of its use cases include web development, internet navigation, and web documentation. For both the applicant and the interviewer it is essential to go through the typical questions revolving around its concepts and use cases to develop a command over HTML.
Therefore, we are presenting here a comprehensive list of HTML interview questions segregated into basic, intermediate, and advanced that interviewers can use to assess the right candidate. Also, developers can keep it handy to ace the interview for the HTML developer role.
Table of contents
Basic HTML interview questions and answers (31)Intermediate HTML Interview questions and answers (39)Advanced HTML interview questions and answers (30)Basic HTML interview questions and answers
1.
How do you add comments in HTML?
To insert a comment in HTML you can simply use the lesser than sign at the beginning and the greater than sign at the end like this: “<!- comment ->”.
2.
Can you compare and contrast physical tags from logical tags?
Physical tags format and display the content inserted within the tags. They add style defined by the parameters while logical tags define the meaning or structure of the content within the tags.
3.
What is the difference between HTML and HTML5?
HTML5 is the updated version of HTML. What makes this newer version of HTML better is the added features that support audio, video, and new styling elements which differ from the old version.
4.
How can data be stored in HTML5?
There are two ways you can store data:
- Local storage - It keeps data safe, whenever someone exits the browser, the data doesn't get deleted.
- Session storage - Keeps the data only when someone is using the browser. As soon as the browser closes, the data is immediately erased.
5.
What are tags?
Tags are elements in HTML that define and format content properly.
6.
Must all HTML tags be closed?
No, not all tags need to be closed. There are self-closing tags such as , that don’t require closing tags.
7.
How do you make text paragraphs or sections?
There are two HTML tags you can use to make sections or paragraphs:
- This is used to create a line to separate text.
- This is used to create a text paragraph
8.
What are the different types of lists found in HTML?
Three types of lists can be found in HTML:
- Ordered lists - This type of list displays elements that are in numerical order or format. is the tag used to define this kind of list.
- Unordered lists - This kind of list display elements in bulleted form. is the tag used to define this kind of list.
- Definition list - This is a kind of list that displays elements in dictionary form. The tag is used to define definition lists.
9.
What is semantics in HTML?
Semantics in HTML are styles used to define the meaning of content elements in webpages. It provides meaning to the tags and code written.
10.
How do you align text in HTML?
There are two ways to align text in HTML:
Indentation - Here you can indent lists further than the parent list. This will determine the various elements that are contained.
CSS - The CSS text-align property sets the alignment of text contained inside a block element of the table.
11.
How do you underline text in HTML?
You can underline text by simply using the tag.
12.
Define an image map.
An image map is used for linking multiple web pages using a single image by using the tag. One can define the kind of shapes one wants to include in images.
13.
Define what is white space?
White space is an empty sequence of space characters. It helps the browser merge multiple spaces into one single space and makes indentation easier.
14.
Write a basic HTML template
A basic HTML structure template looks like this:
<head>
<title>Page title</title>
</head>
<body>Body of contents</body>
</html>```15.
Where can you use hyperlinks?
You can use hyperlinks in text and images. The “href” attribute is the most commonly used to define HTML anchor tags.
Example:
16.
Define what DOM is
DOM is short for Document Object Model. DOM defines the following:
- HTML elements as objects
- Events of all HTML elements
17.
How do you insert images into an HTML document?
You can insert an image by using the tag. Certain parameters are required for inserting images:
- src - used for adding a path to the image
- alt - for adding alternate text
- width - adds the image width
- height - adds the image height
Example:
18.
Define the purpose of “ALT” in an image
Alternative text's sole purpose is to add the definition of what an image is all about.
19.
What is a marquee?
Marquee is used for scrolling text on a web page. By using the tag, one can scroll either left, right, down, or up automatically.
20.
What is a style sheet?
A style sheet helps in defining HTML templates. The templates can be linked to multiple pages, making it easy to maintain and update the website look.
21.
How do you add a button in HTML?
You can add a button to an HTML page by using the button tag:
22.
What are the types of headings you can use for your HTML doc?
There are about 5 types of headings that can be used. They can be defined by the following tags:
23.
What is a span tag used for?
A tag is used for marking up a part of the text or document. It can also be used to group elements together for styling purposes.
24.
Can you change the font color in HTML?
Yes, you can change the font color by using the tag. For example;
25.
List the types of CSS that can be included in an HTML doc.
There are three types of CSS elements that can be included. These are:
- Inline CSS - This is used for styling small contents. It is mainly used for styling attributes inside the HTML elements in the body section.
- Internal CSS - This is used for adding tags in the section of the document. It is mainly for styling a single page that has a unique style.
- External CSS - This is used when applying to multiple pages.
26.
What is the default size for the text field?
The default size for a text field is about 20 characters long. But if you include the size attribute one can set the size value to be as low as 1 and as high as the width of the browser width.
27.
List the tags used to display data in the tabular form.
Below are the tags that can be used to display data:
- - tag defines the row
- - defines a table
- - defines the header
- - used to define data cell in a table
- - used for grouping the content in a table
- - used for grouping the header
- - used for grouping the footer in a table
28.
Explain the typical layout of an HTML.
Every webpage has a specific layout but the following tags and elements are used in defining different sections of a webpage:
- - used to define the header section
- - used to define the document section
- - defines the navigation links container
- - used to define text aside from the content
- - used to define the footer of a document
29.
Is a tag?
No, the is not a tag but a declaration. With it, HTML tags cannot function properly.
30.
What is the advantage of collapsing the white space in HTML?
Collapsing whitespaces in HTML is beneficial because it reduces the time for transmitting information between the server and the client.
31.
What color do clicked links appear?
The default for any link is blue. Once it has been clicked on, it turns purple.
Tired of interviewing candidates to find the best developers?
Hire top vetted developers within 4 days.
Intermediate HTML Interview questions and answers
1.
What is the hierarchy of style sheets?
In style sheets, the style tag takes priority, and external style sheets take the least priority.
2.
What is SVG?
SVG stands for scalable vector graphics. It is used to describe visuals in XML language.
3.
How do you add a video to an HTML page
To add a video to your page you can use the tag.
4.
What are the media formats supported by HTML?
HTML supports various media types and formats such as,
- Audio: WMA, MIDI, AAC, WAV, MP3, MP4
- Video: MPEG, AVI, WMV, WebM, QuickTime, MP4, etc.
- Image: jpg, jpeg, png, gif, SVG
5.
What is the tag used for?
The element is used to define and specify content in a document that is independent of the document. This element is used for defining blog posts, articles, and long-form posts.
6.
How do you open an external CSS file in a browser?
To open a CSS extension file, one needs to use the tag. This will reference the CSS file.
7.
What is the iframe tag used for?
The tag is used to define inline frames. It is mainly used to define a webpage within a webpage. Below is an example of using the tag:
8.
Can you create multi-colored text in HTML?
Yes, you can use the following syntax to create different multi-colored texts.
9.
When do you use frames?
Frames make page navigation easier. If the links of the page are placed under frames, they will appear at the top of the page or at the bottom of the browser.
10.
How can you send mail directly from the webpage?
One can easily create a clickable link text by using the “mailto” command within the href tag as follows:
11.
What is an attribute?
An attribute in HTML is a property that can be added to an HTML tag. Attributes can change the way tags are displayed.
12.
How does one insert a copyright sign?
You can insert a copyright symbol by using the © to any HTML document.
13.
Can you create links to different sections within the same document?
Yes, this can be easily done by using the tag along the referencing symbol #. This will create different links within the same web page
14.
What is the difference between cell padding and spacing?
Cell spacing is referred to as the space between two cells of the same table while cell padding is referred to as the space between the contents of a cell or cell border.
15.
What is an entity?
An entity is a group of characters that is used to represent special characters or symbols which can’t be typed using the standard keyboard. These are strings that start with “&” symbol and end with a “;” symbol.
16.
What happens when you overlap a set of tags?
When you overlap two or more sets of tags, the first tag will be recognized. This will cause problems and lead to web browser not interpreting the page correctly thus causing inconsistencies on the web page.
17.
Define applets
Applets are small programs that are embedded within web pages. They perform different functions such as animations, computations, and information processing.
18.
What are the benefits of grouping checkboxes?
Grouping checkboxes has several advantages including:
- Simplified processing
- Improved organization
- Consistency
- Optimized user experience
19.
Explain why we need to use doctype in HTML.
Doctype is used for declaring document-type objects. This also tells the web browser the type of HTML and version used to build the page.
20.
Differentiate between inline and block elements.
Inline elements are designed to take very minimal space while block elements are programmed so that they take up as much space as needed.
21.
What are the ways to insert JavaScript into your document?
There are various ways to insert JavaScript into an HTML document. It can be done either via code embedding, using inline code, or by linking to an external file.
22.
Define what is Canvas.
Canvas is an element used to create better graphics for web pages. One can simply write a JavaScript block code that can be used to create a canvas.
23.
What is a script tag used for?
The tag is used to define the script for the client side.
24.
Can text appear outside the browser?
Yes, this can happen when the width of the defined table is wider than the browser's width.
25.
Can anyone change the color of the bullets?
Yes, the color for bullets can be changed by customizing them into a different color using CSS.
26.
How do you define colors for table borders?
You can define the color for table borders in the style sheet. If this is not supported the text color will be used instead.
27.
What is the difference between ruler and border attributes?
When the border attribute is set to zero, the default cell borders and thickness will be applied, whereas if a rule attribute is added to a tag, the border attribute will not be included. The default one-pixel border will be shown instead.
28.
Create an example that shows nested web pages.
This is done by using the iframe tag:
<!DOCTYPE html> <html> <body> <h2>Nested example</h2> <p>Use the height and width attributes to specify the size of the iframe:</p> <iframesrc="https://link/"height="500"width="600"></iframe> </body> </html>
29.
What is an HTML form?
A form is designed to take a user’s input which will be sent for processing.
30.
How many tags are available in HTML?
There are more than 100 tags available.
31.
What is an application cache?
An application cache is a function that allows a developer to run their project offline through caching. This feature is mostly used for testing features.
32.
Define a cite tag.
A tag is used to mark a certain portion of text. It is mainly used when you have quoted or referenced something from a different source.
33.
Can you get a geographic location of a user in HTML?
Yes, but you would need to embed the geolocation API to your HTML document for accessing the geographic location of a user in HTML.
34.
What editor can you use to create HTML pages?
There are many available editors such as Sublime Text, Notepad ++, and Chrome editor.
35.
Define longdesc in HTML.
Longdesc is an attribute that allows you to provide a link with a comprehensive description for an image.
36.
Define the POST and GET method.
GET method is used for requesting data from a server, while the POST method is used to send data to a server.
37.
What is WebSockets?
Websockets provide bi-directional communication between web applications that operate on a single socket via JavaScript interfaces in HTML5 browsers.
38.
Define what is a Box model.
A box model provides the description for how elements are sized and displayed on the page. Each page may have a width, height, padding, borders, and margins. This is related to the CSS styling property.
39.
Why should you use an Embed tag?
The tag is used for embedding image, video or audio files inside an HTML document. This tag requires a closing tag.
Tired of interviewing candidates to find the best developers?
Hire top vetted developers within 4 days.
Advanced HTML interview questions and answers
1.
Create a CSS popup example.
<div class="popup" onclick="myFunction()">Click me! <span class="popuptext" id="NewPopup">Your text</span> </div>
2.
Create an example that adds a scroll bar in Html
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: light-green;
width: 110px;
height: 110px;
overflow: scroll;
}
</style>
</head>
<body>
<h1>Let’s create a scrollbar</h1>
<h2>scroll:</h2>
<div class="ex1">Congratulations, this is how you create a scroll bar.</div>
</body>
</html>3.
Demonstrate how to create a box in HTML.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
width: 300px;
border: 15px green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Creating a Box Model</h2>
<p>Welcome.</p>
<div>Congratulations, this is how you create a Box Model</div>
</body>
</html>4.
What is blink text?
The tag is a non-standard element used to create enclosed text.
5.
Define an anchor tag.
An anchor tag is used to link two or more web pages together using the tag.
6.
Create an example of a menu in HTML.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
</style>
</head>
<body>
<p>Menu:</p>
<div></div>
<div></div>
<div></div>
</body>
</html>7.
What is HTML encoding?
It is used to forward header information to the server so as to display text not HTML code. This encoding parses non-ASCII special characters and replace them with the standard form.
8.
Create an HTML form example.
<!DOCTYPE html> <html> <body> <form> Username: <br> <input type="text" name="username"> <br> Email id: <input type="text" name="email_id"> <br> <input type="submit" value="Submit"> </form> </body> </html>
9.
Define Void elements.
Void elements are elements that have only the start tags and don’t contain any content within them.
10.
Create a drop-down list example.
<label for="Animals">Choose a Pet:</label> <select name="Animals" id="pets"> <option value="Dog">Dog</option> <option value="Cat">Cat</option> </select>
11.
Can you change an inline element to a block element?
Yes, you can change the inline element to a block element by using the display property and setting the value to block. Example:
12.
Define what is MathML.
MathML stands for Mathematics Markup Language used for performing mathematical equations in web browsers.
13.
What is the lang attribute used for?
The lang attribute is used to specify the language used to write the content of a web page. For example: or
14.
Define Web Worker in HTML.
Web worker is a multithread object used for executing JavaScript. It runs in the background and doesn’t affect the performance of the webpage or application.
15.
What is a manifest file?
The manifest is a file that instructs the browser to cache certain web pages so they can be made available for offline mode.
16.
How do you handle JavaScript events in HTML?
Events represent an action or occurrence. Events are typically used on buttons, hyperlinks, and hovers. This is a syntax example of how to handle events:
17.
What is multipart data?
Multipart form data is an enctype attribute of the tag that specifies the method of encoding for form data. It is part of the two ways of encoding HTML forms.
18.
Create a CSS example where you set the background color of an HTML document to yellow.
<!DOCTYPE html>
<html>
<head>
<style>
Body {
background-color :yellow;
}
</style>
</head>
<body>
<h1>Yellow Home Page</h1>
</body>
</html>19.
Create an example that defines text inside element.
<p>Code example:</p>
<pre><code>var person = {
firstName:"John",
lastName:"Doe"
}</code></pre>20.
Create a JavaScript script that changes the text size.
<body>
<p id="demo">Example.</p>
<script>
document.getElementById("demo").style.fontSize = "60px";
</script>
</body>21.
What is HTML5?
HTML5 is the 5th or the latest version of Hypertext Markup Language. It is the standard markup language for creating and describing the structure of a webpage.
22.
What is the difference between HTML and HTML5?
23.
Can you link CSS to HTML5?
Yes, you can link CSS to HTML5 by using the tag in the header section.
24.
Does HTML5 have a player?
Yes, HTML5 has a player that has the ability to show engaging videos on any platform.
25.
List the new form elements that are now available in HTML5.
These are:
- - to display a list of suggestions to a text element
- - it passes encrypted data to the server by creating an encryption key
- - this element is used to point numeric values that are within a range
- displays the progress of the task
26.
What tags are no longer valid in HTML5?
- - for defining the font, size, and color of the text
- - for defining a directory list
- - o define a single-line input field
- - for defining a set of frames
- - for non-framing a section
- - used to teletype a text
- - to strikethrough a text
27.
Why is SVG the most preferred for image formats?
SVG is easy to scale, can be edited in any text editor, and the image quality is high no matter what the resolution is.
28.
How do you center text in HTML5?
Since the tag is deprecated, you can use the CSS text-align property to the desired element.
29.
Create a table example in HTML5.
This is how you create a table in HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border = "2">
<tr>
<td>row1,cell1</td>
<td>row1,cell2</td>
</tr>
<tr>
<td>row2,cell1</td>
<td>row2,cell2</td>
</tr>
</body>
</html>30.
Create an example of how to use the Geolocation API in HTML5.
<!DOCTYPE html>
<html>
<head>
<title> location page</title>
</head>
<body>
<p>Click this button below to get your location.</p>
<button onclick="getLocation()"> My Location </button>
<p id="location"></p>
<script>
var x = document.getElementById("location");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "At Latitude: " + position.coords.latitude +
"<br>At Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>Tired of interviewing candidates to find the best developers?
Hire top vetted developers within 4 days.
Conclusion
To conclude, any HTML developer always needs to be well prepared for any question that the recruiter asks. The developer interviews come in different stages and the above-mentioned questions and answers are meant to address every stage of the interview, specifically the technical one.
With this comprehensive list of questions, both the interviewers and the interviewee can have a quick reference to intermediate and advanced levels of HTML questions.
If you are a new hirer looking for alternative methods of hiring, you can opt for Turing. The company helps you hire the world’s best talent remotely. For developers looking for HTML jobs, Turing test is the route to go!
Hire Silicon Valley-caliber HTML developers at half the cost
Turing helps companies match with top-quality remote HTML developers from across the world in a matter of days. Scale your engineering team with pre-vetted HTML developers at the push of a button.
Hire Silicon Valley-caliber HTML developers at half the cost
