HTML Interview Questions and Answers for Beginners & Experienced.
HTML is one of the most popular languages and is used primarily to design a web page. As the programming language that powers the web, it is used to tell web browsers the structure of the page.
Keeping this in mind, we have handpicked the commonly asked HTML interview questions. The entire set has been divided into two parts:
Depending upon your total experience, you can refer to the content given below and brush up your skills before you step foot in the interview room.
Basic HTML Interview Questions
- What are attributes and how to use them?
- What is the difference between tags and elements in HTML?
- What are some of the common lists that help design a page?
- Cite differences between block-level and inline elements in HTML?
- What are the HTML tags used to display the data in the tabular format?
- What is white space and the advantage of using it?
- What is the purpose of a style sheet?
- Can HTML files work well on the new browsers?
- What is an image map?
- Explain the structure of the HTML template
- What are Forms in HTML? Mention the commonly used input types.
- Is the tag considered as a HTML tag?
- How will you change the color of bullets?
- Can the text appear outside the browser?
- What is the difference between active links and regular links?
Advanced HTML Interview Questions
- What is semantic HTML?
- How can you create a nested webpage?
- Name the tags to separate a section of texts?
- What is the difference between DIV and SPAN in HTML?
- What are the differences between ordered and unordered lists?
- What types of CSS can be included in HTML?
- What are the entities in HTML?
- What is the use of a span tag? Explain with example
- What is the advantage of collapsing white space?
- What are the differences between LocalStorage and SessionStorage Objects?
- How to insert a picture into a background image of a web page?
- What is the hierarchy followed when it comes to style sheets?
- Name some new features which were not present in HTML but are in HTML5?
- What is an Anchor tag and how can you open an URL into a new tab when clicked?
- Can we modify the attribute’s value of the HTML tag dynamically?
- Why are Meta tags used in HTML?
- Explain list elements in HTML
- What happens when you overlap sets of tags?
- Explain Canvas
- Explain five new input types provided by HTML5 for forms?
- Explain Script tag
- Explain SVG with HTML code
Conclusion
Basic HTML Interview Questions and Answers
1. What are attributes and how to use them?
HTML uses two components namely tags and the content that follows them. Every tag has a special thing called attributes that are kept within the opening and closing <>. Attributes will be right after the name of the tag.
For example, using input tags is pretty much common and used numerous times while creating forms using HTML.
Now the input could either be a text or a checkbox or a radio button. It is important to specify the type. This is where attributes come into play. They help identify the type of input. In fact "type" itself is an attribute for an "input" tag. Similarly, the "img" tag has src attribute. This outlines the source of the image. Note that attributes follow a pattern and are always in name=value pairs.
In a simple sense, HTML elements are the content between the tags whereas tags are keywords placed at the beginning and end of an HTML element.
In the context given above:
- <p> is opening tag.
- </p> is the closing tag.
- This is a paragraph: All that's in between the opening and the closing tag are HTML elements.
3. What are some of the common lists that help design a page?
The common types of list used when creating an HTML page are:
- Ordered list <ol>
- Unordered list <ul>
- Menu list <menu>
- Directory list <dir>
- Definition list <dl>
4. Cite differences between block-level and inline elements in HTML?
Conventionally, an HTML element has two parts:
Block-level element
Block-level elements begin with a newline and can have another block element within it. These have structures larger than that of inline elements. For example: <div>, <form>, <img>, etc.
Inline element
On the other hand, inline elements do not start with a newline and can only have data or another inline element within it. Example: <input>, <a>, <b>, etc.
Here is the list of HTML tags that help display data in a tabular format.
- <table>: To define a table.
- <tr>: To define a table row.
- <th>: To define a table's header cell.
- <td>: To define a cell within the table.
- <caption>: To define a caption for the table.
- <colgroup>: To specify groups of columns for table formatting.
- <col>: Used along with <colgroup> to depict the property of every column.
- <tbody>: To group the body content within a table.
- <thead>: To group the header content.
- <tfooter>: To group the footer content.
6. What is white space and the advantage of using it?
White space refers to the sequence of space characters in HTML. Every space accounts for a single space character. The main purpose of using whitespaces is to organize the content in a way that is both readable and understandable. In addition to the above, using whitespaces help collapse more than one space into a single space thereby adjusting the indented lines.
7. What is the purpose of a style sheet?
Style sheets help design the layout of the page. It is the combination of different style rules that indicate how and where will the content be displayed on the webpage. The rules are applicable either to all of the elements or specific ones based on your requirements. One thing to note is that style sheets override the existing style. Meaning that if you have the page previously styled, style sheets will override them and the new rules apply.
8. Can HTML files work well on the new browsers?
HTML files can effectively work with all browsers given that it is compatible with all of the basic standards of HTML.
9. What is an image map?
To link more than one web page in a single image, use the <map> tag. This is an image map.
10. Explain the structure of the HTML template
The structure or the layout of an HTML template is the order in which a web page displays all of the elements. While each page has its way of representing content, the standard elements that correspond to an HTML template include:
- DOCTYPE: To tell the version of HTML.
- <HTML>: Root element wrapping all code.
- <head>: The first element and apparently the most important. Header, as the name says, specifies the header content of a section or any document.
- <body>: Has all the content that is part of the web page.
11. What are Forms in HTML? Mention the commonly used input types.
A form on a web page is a section that takes users' input and dispatches it to the server for processing. Let's say, you are registering on a website. The page will open up a form, one that you fill up before say opening a bank account. The form can have multiple fields and of various kinds (text, radio button, checkbox, etc). The primary purpose is to gather user data and save it to a database.
The common input types in HTML form includes:
- Text: to provide input in the form of a text.
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> </form>
- Password: to enter a string that must be of type password and hence, secured.
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pswd">Password:</label><br> <input type="password" id="pswd" name="pswd"> </form>
- Radio: A button that mandates the selection of one option. For example, the gender of a person. It can either be male or female.
<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> </form>
- Checkbox: To select more than one option. Displayed in the form of a square box. Say you need to select your hobbies, use a checkbox.
<form> <input type="checkbox" id="hobby1" name="hobby1" value="Singing"> <label for="hobby1"> I love to sing</label><br> <input type="checkbox" id="hobby2" name="hobby2" value="Dancing"> <label for="hobby2"> I love to dance</label><br> <input type="checkbox" id="hobby3" name="hobby3" value="Reading"> <label for="hobby3"> I love to read</label> </form>
- Button: A clickable button that allows you to take a particular action.
<input type="button" onclick="alert('HTML Interview Questions!')" value="Click Here!"> - Submit: To render the details to the server.
<form action="/sub_page.php"> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <input type="submit" value="Submit"> </form>
- Reset: When you need to clear out all of the input data.
<form action="/sub_page.php"> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <input type="submit" value="Submit"> <input type="reset"> </form>
- Image/file: To enter an image or something in a file format.
<form> <label for="Newfile">Choose file:</label> <input type="file" id="Newfile" name="Newfile"> </form>
12. Is the <!DOCTYPE html> tag considered as a HTML tag?
DOCTYPE HTML is not a tag but one way of telling the browser about the type of HTML used.
13. How will you change the color of bullets?
In order to change the color of the bullets, you need to customize and set a different color for the same. Add a CSS for the bullets in your page.
ul {
list-style: none;
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: green; /* Change the color */
font-weight: italics; /* If you want it to be in Italics */
}
14. Can the text appear outside the browser?
This is true only if the width of the predefined table is wider than the browser’s width.
15. What is the difference between active links and regular links?
Both active and regular links refer to the same time. The only difference is that active links are the ones that currently have the focus. That is to say, active links have the cursor on top of them and appear blue in color.
Advanced HTML Interview Questions and Answers
16. What is semantic HTML?
Semantic HTML refers to optimal usage of the language to create or design a website. Besides offering an aesthetic appeal, semantics are meant to introduce meaning to the contents added to the page. Meaning that Semantic HTML tells the browser the meaning of enclosed content, apart from the design. Example of Semantic HTML: <header>, <article>, <h1>, <h2>, etc.
With Semantic HTML, search engines earn the ability to determine the content as well as the significance of the content loaded on the page. In a nutshell, Semantic HTML is a style of coding and is achieved through HTML markup.
17. How can you create a nested webpage?
The easiest way to create a nested webpage in HTML is by using the iFrame tag. It is an inline frame that helps embed one document or one webpage in another one.
<!DOCTYPE html> <html> <body> <h2>HTML example</h2> HTML Interview Questions: <iframe src="https://www.hackertrail.com/" height="440" width="440"></iframe> </body> </html>
- The <br> tag separates line after line. Meaning that it breaks the current flow and takes it to the next line.
- Paragraph tag <p> changes the paragraph of the text.
- Blockquote tag is a tag that allows you to enter a large quotation (if you have one) and keep it separate from the main text.
19. What is the difference between DIV and SPAN in HTML?
The main difference between DIV and SPAN is that DIV is a block line element whereas span is an inline element. The former is used before and after huge chunks of code. On the other hand, span limits itself within a line or a paragraph.
20. What are the differences between ordered and unordered lists?
As the name suggests, ordered lists are the ones that are numbered and in a given sequence. Whereas, unordered lists do not follow any order and use bullets.
21. What types of CSS can be included in HTML?
There are three types of CSS that you can include in your HTML program.
- Inline CSS: This is one where the styling is kept within the body of the element.
- Internal or embedded CSS: As and when you need to modify the appearance of a document, CSS rules are defined in the head section. Also, the styling is internal and is meant for a single document.
- External CSS: As the name says, the style property is in a separate file. It should be noted that the file has a .css extension. Link this external document to the original page and in the head section. This is best when you need to have multiple pages of the same style.
To know more about types of CSS in HTML, visit here.
22. What are the entities in HTML?
Entities in HTML are nothing but a piece of text and are used to showcase characters that are reserved or invisible. They begin with an ampersand sign and end with a semicolon. For example: blank space ( ), ampersand (&), less than (<), etc.
23. What is the use of a span tag? Explain with example
The span tag helps group elements for styling. The tag works on inline elements and helps markup text or characters in a document. The tag allows easy styling either through CSS (via class attribute) or Javascript (via id attribute) From adding color to the text or inserting a background, span tag facilitates all.
Example:
<span style="color:#008000;"> Here, we use span to change the color to green. </span>
24. What is the advantage of collapsing white space?
White spaces are a sequence of blank characters. Collapsing multiple spaces into one helps you indent your text effectively and improve the readability of the code.
25. What are the differences between LocalStorage and SessionStorage Objects?
| LocalStorage | SessionStorage |
| Stores object without any finite duration. | Stores data for one session. |
| Data remains intact even after closing the browser. | Closing the browser window will delete the data. |
| Access data in multiple windows. | Data is accessible only in the current window. |
26. How to insert a picture into a background image of a web page?
To insert an image as a background on the web page, you can either add a body background tag with the file name of the image after closing the head tag or use the CSS method.
Example : CSS Method
body {
background-image: url("html.gif");
}
Body background tag:
<body background="https://www.hackertrail.com/background.jpg">
27. What is the hierarchy followed when it comes to style sheets?
When you have all of the three types of stylesheet present within the same file, the style that is close to the actual tag has precedence over others. To clarify, inline has the highest priority and external the least.
Inline> embed> external.
28. What is the hierarchy followed when it comes to style sheets?
The features in HTML5 that have garnered maximum attention includes:
- Video and audio: Following the digital trend, HTML5 has introduced both a video <video> and an audio <audio> tag. As a result, it makes it easier for web developers to integrate visual content dynamically.
- Nav: Introduced to help link different pages on a website <nav>.
- Canvas: To draw and create visual content or embed graphics easily <canvas>.
- Footer: Add new elements in the footer section. In general, it helps add copyright information at the end of the document <footer>.
Learn more about HTML5 features here.
29. What is an Anchor tag and how can you open an URL into a new tab when clicked?
Anchor tag helps draft a connection or simply link two different pages/sections/templates. The tag is generally attached to a word and it takes the user to a different section of the same page (via id) or to a new page.
In order to direct users to a new tab, you need to set the target as blank.
<a href=”#” target=”_blank”></a>
30. Can we modify the attribute’s value of the HTML tag dynamically?
Yes, it is possible to edit and modify the value of an attribute of an HTML tag. This can be done via Javascript by setting the attribute value via element’s id or class.
Example:
<input type=“text” id=“inputField”> document.getElementById(“inputField”).attr(“type”, “password”);
It tells the browser about the document, the keywords, the author, etc. Search engines refer to metadata to learn about the page while indexing.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Enlisting top interview questions." />
</head>
<body>
<p>HTML Interview Questions!</p>
</body>
</html>
Output: HTML Interview Questions!
32. Explain list elements in HTML
There are three different list elements in HTML:
- Ordered list: Where the items are represented in a numbered or orderly format. Tag format: <ol>.
- Unordered list: Unnumbered data or data represented in bullet points. Tag format: <ul>.
- Definition list: To arrange items as we do in a dictionary. Tag format: <dl>.
If you overlap one or more sets of tags in HTML, the browser recognizes only the first tag.
34. Explain Canvas
Canvas is a new element part of HTML5. It helps in the creation of eye-catching graphics on the web page. JavaScript is used as the scripting language. With Canvas, you can create visual content dynamically and of different shapes.
Example:
<canvas id="myCanvas" width="100" height="50" style="border:1px solid #000000;"> </canvas>
Output: A rectangle of width 100 and height 50.
35. Explain five new input types provided by HTML5 for forms?
The five new input types include:
- Email: To validate whether the input is of the standard email format.
<form> <label for="myemail">Enter Your Email Address:</label> <input type="email" id="myemail" required> </form> - Url: Will only accept URL as input.
<form> <label for="myurl">Enter URL of the Website:</label> <input type="url" id="myurl" required> </form> - Number: Will only accept numbers.
<form> <label for="mynumber">Enter a Number:</label> <input type="number" min="2" max="20" step="0.5" id="mynumber"> </form> - Tel: Verify a pattern against the conventional telephone number.
<form> <label for="myphone">Telephone Number:</label> <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required> </form> - Date: To check if the input maps standard date format
<form> <label for="mydate">Select Date:</label> <input type="date" value="2021-07-01" id="mydate"> </form>
36. Explain Script tag
To declare a script within your HTML document, use the <script> tag. It helps define the script of the client-side.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript created</h2>
<p id="demo">HTML Interview Questions!</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Output: HTML Interview Questions!
37. Explain SVG with HTML code
SVG stands for Scalable Vector Graphics. It is a W3C recommendation and helps define the graphics for one or more pages. <svg> element is used as a container for SVG graphics. The primary purpose of SVG is to design vector-like diagrams such as pie charts, or 2-Dimensional graphs in an HTML document.
Example to create a circle using SVG:
<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="60" cy="60" r="40" stroke="blue" stroke-width="7" fill="red" /></svg> </body> </html>
Conclusion
We hope that the above-mentioned HTML interview questions will help you prepare for your interview. To know more about the tips to prepare for a technical interview, visit here.
Backend Technology Interview Questions
C Programming Language Interview Questions | PHP Interview Questions | .NET Core Interview Questions | NumPy Interview Questions | API Interview Questions | FastAPI Python Web Framework | Java Exception Handling Interview Questions | OOPs Interview Questions and Answers | Java Collections Interview Questions | System Design Interview Questions | Data Structure Concepts | Node.js Interview Questions | Django Interview Questions | React Interview Questions | Microservices Interview Questions | Key Backend Development Skills | Data Science Interview Questions | Python Interview Questions | Java Spring Framework Interview Questions | Spring Boot Interview Questions.
Frontend Technology Interview Questions
Angular Interview Questions | JavaScript Interview Questions | CSS Interview Questions
Database Interview Questions
SQL Interview Questions | PostgreSQL Interview Questions | MongoDB Interview Questions | MySQL Interview Questions | DBMS Interview Questions
Cloud Interview Questions
AWS Lambda Interview Questions | Azure Interview Questions | Cloud Computing Interview Questions | AWS Interview Questions
Quality Assurance Interview Questions
Moving from Manual Testing to Automated Testing | Selenium Interview Questions | Automation Testing Interview Questions
DevOps and Cyber Security Interview Questions
DevOps Interview Questions | How to Prevent Cyber Security Attacks | Guide to Ethical Hacking | Network Security Interview Questions
Design Product Interview Questions
Product Manager Interview Questions | UX Designer Interview Questions
Interview Preparation Tips
Strength and Weakness Interview Questions | I Accepted a Job Offer But Got Another Interview | Preparation Tips For the Virtual Technical Interview | 7 Tips to Improve Your GitHub Profile to Land a Job | Software Engineer Career Opportunities in Singapore | What can you expect during a whiteboard interview | How To Write A Resignation Letter | Recommendation Letter Templates and Tips.
Quick Links
Practice Skills | Best Tech Recruitment Agency in Singapore, India | Graduate Hiring | HackerTrail Litmus | Scout - Sourcing Top Tech Talent in ONE Minute | About HackerTrail | Careers | Job Openings.
