Our Objective: To list out the most frequently asked HTML Interview Questions for freshers and as well as working professionals.
Before we dive straight into talking about HTML Interview Questions, let’s have a brief introduction as to what is HTML, how it all started, and what made HTML so great that it’s still the stepping stone for the web development field. It’s always better to know a bit about the origination of a particular language, so consider this as part of your interview preparation only.
Table of Contents
A Brief Introduction
HTML stands for HyperText Markup Language. It was developed by a physicist, Tim Berners-Lee. He first published a document “HTML Tags” back in 1991. The document was comprised of 18 HTML Elements and commendably, 11 of them are still in use. Ever since its first launch, HTML has been under constant improvement and thus various versions have been launched. The current version of HTML which is HTML5 was released in public-facing form with a W3C recommendation back in 2014.
HTML is a markup language, that is the foundation of everything that we see on the Internet. It is a standard language that is used to create and display pages on the World Wide Web(www). HTML is interpreted by the browser and it further tells the browser to render the webpage. HTML is the structure of a webpage, and further styling and functioning of that webpage can be done with the help of CSS and JavaScript. All the three languages combined help us in creating one beautiful website.
It is a very important and basic language to learn to make a career in the Web Development or Web Designing field. It is a high in-demand skill and a must-to-know if you want to be a web developer. So we have covered a lot of FAQs(more than 35) which you are expected to know if you are also applying for the same position. The questions covered here are a mix of basic, intermediate, and advanced levels, which not only cater to a fresher but will also help you if you are a working professional in this field. The set of questions provided below will also cover a range of HTML5 Interview Questions.
If you want to start learning HTML now, make sure you check out this link. Here you can find out articles on how to get started with the basic layout of HTML to eventually progress further to make your webpage from scratch. It is a vital language for web development, but with continuous learning efforts, it becomes very easy to learn.
So, without any further ado, let’s have a look at them.
Most Asked HTML Interview Questions
Basic Level Questions
1) What is HTML?
HTML stands for Hypertext Markup Language, developed by Tim Berners-Lee. It is a language of the web. It is used to create and structure web pages on the internet. It can turn plain text into links, images tabes, etc. It is a language that makes the text more interactive.
2) What is the use of HTML?
- Structuring web pages
- Embedding images and videos
- Navigating the internet
- Improving client-side data storage and offline capabilities
- Game development
- Interacting with native APIs
3) What are the 3 main tags of HTML?
There are three main tags of HTML: html, head, and body tag.
<html>
<head>
</head>
<body>
</body>
</html>4) What are Tags?
A tag in HTML is used to store content within itself and helps in formatting the pages. They are always structured as an opening tag (<), the content in between followed by the closing tag (>) symbols.
<p>Some Text Here</p>An opening tag must be preceded with a closing tag and indicated with a ‘/’ symbol. When a browser loads the above HTML webpage, the only thing that will be displayed on the screen would be “Some Text Here“. Because <p> is a paragraph tag, tags are used to create HTML documents and render their properties.
5) How Elements are different from Tags?
Elements:
- The element is an individual component of the HTML web page or document that consists of a start tag, its attributes, an end tag, and everything in between.
- HTML Elements hold the content.
- For example, <h1>This is an example of an H1 heading.</h1>
Tags:
- HTML tag (either opening or closing) is used to mark the start or end of an element.
- HTML Tags hold the HTML element.
- For example, <p> is an opening anchor tag and </p> is a closing anchor tag.
6) How Attributes are different from Tags?
Tags are the primary component of the HTML that defines how the content will be structured/ formatted, whereas Attributes are used along with the HTML tags to define the characteristics of the element. For example, <p align=” center”>Interview questions</p>, in this the ‘align’ is the attribute using which we will align the paragraph to show in the center of the view.
7) Write the basic structure of the HTML template?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>8) What is doctype in HTML?
It is a special tag in HTML which is always written at the top of the HTML document, i.e. at the start of the HTML template. DOCTYPE is used to convey to the browser about the HTML version.
9) How to create a hyperlink in HTML?
For creating hyperlinks, we use the <a> tag to specify the links in a webpage. The ‘href’ attribute is used to specify the link.
<a href="http://www.techbit.in"></a>10) What do you understand by semantic and non-semantic Elements?
Semantic Elements is one style of coding, where the tags convey the meaning of the text. They clarify the function by the name only.
For example: <header>, <nav>, <article>, <footer>, <header> etc
The opposite of semantics, as in the tags that do not provide any meaning to the text are known as non-semantic tags.
For example: <div>, <span>
11) How do you insert a comment in HTML?
Comments are displayed in the browser, but they will help the reader in understanding the code better by leaving notes. To use comments on a line, the line should start by this <!— and end by this –>. Anything in the middle will be completely ignored, even if it contains valid HTML.
<!-- Single Line Comment -->
<!-- I am a
Multi Line Comment -->12) What is the extension of a saved HTML file?
HTML documents can be saved using .HTML or .htm extension.
13) What is a ‘Marquee’ Tag in HTML? file?
A scrolling text that can go in a specific direction across the screen i.e. left, right, up, or down, automatically. For this you can use the tag like this:
<marquee> Text to scroll </marquee>However, The <marquee> tag has been deprecated in HTML5 and should no longer be used. It is recommended that you use CSS instead to create a similar scrolling effect.
14) How to include javascript code in HTML?
HTML provides a <script> tag using which we can run the javascript code and make our HTML page more dynamic. JavaScript can be included in 2 ways:
Writing JS code in our HTML file:
<!DOCTYPE html>
<html>
<body>
<h1>
<span>This is a demo for </span>
<u><span id="test"></span></u>
</h1>
<script>
document.getElementById("test").innerHTML = "Internal JS"
</script>
</body>
</html>Linking a separate JS file with our HTML file:
<!DOCTYPE html>
<html>
<body>
<h1>
<span>This is a demo for </span>
<u><span id="test"></span></u>
</h1>
<script src="script.js"></script>
</body>
</html>15) What are Inline and Block elements in HTML5?
Inline elements just take up the space that is necessary for the content and does not start from a new line.
Example:- <span>, <a>, <strong>, <img>, <button>, <em>, <select>, <abbr>, <label>, <sub>, <cite>, etc.
Block elements start on a new line and take up the full width of the page available.
Example:- <div>, <p>, <header>, <footer>, <h1>…<h6>, <form>, <table>, <canvas>, <video>, <blockquote>, <pre>, <ul>, etc.
<h2>Block Level Element</h2>
<span><strong><em>Inline Element</em></strong></span>Intermediate Level Questions
16) Name all the different types of Lists in HTML?
There are many common lists used to design a page. One can choose any or a combination of the following list types:
- Ordered list – The ordered list is represented by <ol> tag. It displays elements in a numbered format.
- Unordered list – The unordered list is represented by <ul> tag. It displays elements in a bulleted format.
- Definition list – The definition list displays elements in definition form like in a dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
- Menu lists generate menu driven set of elements using <menu> tag.
- Directory lists can be created using <dir> tag.
17) How you can add space in HTML?
Simply if you want to give a single space, just give it using a spacebar. By default, HTML displays one space between words, no matter how many times you have entered the space bar.
To give extra space, Type which is known as a non-breaking space because it helps to prevent a line break at its location.
18) List out the Differences between HTML and HTML5?
| HTML | HTML5 |
|---|---|
| HTML5 is less mobile-friendly | HTML5 is more mobile-friendly |
| Does not support audio and video without the use of a flash player | Support Audio and Video with use of <audio> and <video> tag |
| As it’s the older version, it is not fast, efficient, and flexible in comparison to HTML5. | HTML5 is efficient , faster and flexible in comparison to HTML |
| Shapes like circles, rectangles, triangles, etc. are not possible to draw in HTML | Shapes like circles, rectangles, triangles, etc. are easy to draw in HTML5 |
| Does not support javascript to run in the browser | Support javascript to run in the background with the help of JS – web worker API |
19) What are void elements in HTML?
Void or Empty elements are the ones that don’t need any closing tag. They are also known as Self-Closing tags.
Example: <img/>, <hr/>, <br/>
20) What is “multipart” in form data?
Multipart form data is one of the values of the enctype attribute. It is used in forms that require a file upload. Multipart means that the data gets divided into multiple parts and then it is sent to the server.
21) In how many ways can we specify the CSS styles for the HTML element?
CSS can be used in an HTML file using 3 methods:
- Inline CSS: In this, we use “style” attribute wherever we want to add CSS.
- Internal CSS: To add internal CSS, we need to use the <style> tag, but inside the <head> tag. To apply the style we bind the elements using ‘id’ or ‘class’ attributes.
- External CSS: Here we use the <link> tag inside <head> tag to reference the CSS file into our HTML code.
22) Difference between link tag <link> and anchor tag <a>?
The anchor tag which is denoted by <a> is used to create a hyperlink to another webpage or a certain part of the webpage and these links are clickable.
The link tag which is denoted by <link> defines a link between a document and an external resource and these are not clickable.
23) How to insert a copyright symbol on a browser page?
To insert a copyright symbol use the following code in an HTML file.
©
<!-- or -->
©24) What is Datalist tag? Explain using example.
The <datalist> tag when used along with the <input> tag provides a suggestion that the user selects one of the options given or can enter some entirely different value.
<label>
Your favorite food: <br />
<input type="text" id="favfood" list="food">
<datalist class="favfood">
<option value="Pizza"></option>
<option value="Pasta"></option>
<option value="Fries"></option>
<option value="Ramen Noodles"></option>
<option value="Soup"></option>
</datalist>
</label>Advanced Level Questions
25) What are the different kinds of Doctypes available?
The three kinds of Doctypes which are available:
- Strict Doctype
- Transitional Doctype
- Frameset Doctype
26) How is nesting of webpages possible?
The HTML iframe tag is used to display a webpage within a webpage. The HTML <iframe> tag defines an inline frame. For example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>HTML Nesting Example</h2>
<p>It is possible using iframe tag</p>
<iframe src="https://techbit.in/programming/html/" height="300" width="400"></iframe>
</body>
</html>27) Difference between SVG and Canvas HTML5 element?
| SVG | Canvas |
|---|---|
| SVG is vector-based. | It is Raster-based. |
| SVG works better with a larger surface. | Canvas works better with a smaller surface. |
| SVG is highly scalable. Used in printing high quality with high resolution. | It is less scalable. |
| SVG can be modified using CSS and scripts. | Canvas can only be modified using scripts. |
28) Explain the target attribute?
The target attribute is used to define where we want to open the href link. The ‘target’ attribute can have the following values:
- _self: It opens the document in the same window or tab as it was clicked. This is a default value.
- _blank: It opens the document in a new window or tab.
- _parent: It opens the document in a parent frame.
- _top: It opens the document in a full-body window.
29) What is the difference between <meter> tag and <progress> tag? attribute?
<progress> tag should be used when we want to show the completion progress of a task or simply to show the loading bar. It is used with attributes like ‘max’ and ‘value’.
<meter> tag is just a scalar measurement within a known range or fraction value. It is also known as a gauge. Also, it can be used with multiple extra attributes like ‘form’, ‘low’, ‘high’, ‘min’, ‘optimum’ etc
30) What is the use of <figure> and <figcaption> in HTML5?
The <figure> tag is used to add self-contained elements like illustrations, diagrams, photos, code listings, etc in the web document. It is used to semantically organize the contents of an image like image, image caption, etc.,
The <figcaption> element is used to provide a caption to an image. It is an optional tag and can appear before or after the content within the <figure> tag.
<figure>
<img src="pythonprogramming.png" alt="Python Programming"/>
<figcaption>Fig 2.1- Logo For Python Programming Language</figcaption>
</figure> 31) Name new input types provided by HTML5 for forms?
Following are the new data types offered by HTML5:
- Date
- Week
- Month
- Time
- Datetime
- Datetime-local
- Color
- Number
- Search
- Tel
- Placeholder
- Range
- Url
32) What is the use of details and summary tag?
The details tag is used to specify some additional details on the web page. It can be viewed or hidden on demand. The summary tag is used with the details tag.
33) Difference between Get and Post form methods?
| GET | POST |
|---|---|
| It is not secure as it displays all the data in the address field. | It is secure. |
| While sending data, GET adds information to the URL, which can only go up to 2048 characters. | No restriction on data length. |
| Only ASCII characters allowed | Binary data is also allowed |
| It is the default method. | It is not the default method. Form method should be changed to post to use this. |
| It is used for bookmarking. | Post requests can not be used for bookmarking. |
34) What is the use of required and placeholder in HTML5?
required makes it compulsory for the user to fill in the form field, thus the form can not be submitted unless the field with required on it is empty.
Email: <input type="email" required> placeholder lets the user understand what needs to be filled in the specific form field. It displays a sample text which is added by the developer to let the user understand and fill the form correctly.
Email: <input type="email" required placeholder="abc@gmail.com"> 35) How can you create the following table using only HTML?
This table can be easily created with the help of <td> tag attributes. Rowspan and colspan can be used here to create a merged cell. More about these attributes here.
<table align="center" border="5px" cellpadding="10px" bgcolor="#F09783">
<caption>Example Table 4</caption>
<tr>
<td rowspan="3">1</td>
<td colspan="3" width="200px">2</td>
</tr>
<tr>
<td colspan="3">6</td>
</tr>
<tr>
<td colspan="3">10</td>
</tr>
</table>
36) If I do not put <!DOCTYPE html> will HTML5 still work?
No, the browser will not be able to identify that it is an HTML document and HTML5 tags do not function properly.
So with all these questions, we have come to an end. We hope that these HTML Interview Questions and Answers will not only help you in preparing for your next interview but also will help you in enhancing your HTML skills. These interview questions and answers will help you to crack the Web development interview successfully.
Make sure to comment down below if you have any doubt regarding any question or answer, or if you want to contribute to the article.
Let’s get connected on our Social Media Handles:
Here’s a link to some of our popular posts:
- How To Instantly Make Internet Speedtest App Using Speedtest Python?
- CSS 01: How To Use Bulma CSS To Style Your Next Login Form?
- 8 Best Python Books for Beginners and Advanced Programmers
- Html 04: How to add an HTML5 Boilerplate Code using Emmet?
- HTML 03: All In One HTML Elements Reference Guide
- HTML 02: HTML Tags, Elements and Attributes in an easy way
- HTML 01: How to Create A Webpage Layout using HTML
0 Comments