HTML (HyperText Markup Language) is the language used in developing and designing web pages. So no matter if you are new to HTML or you have some knowledge about it, it is important to know the basic concepts. In this article, you will find the most frequently asked and crucial HTML interview questions to prepare for any situation. Even if you are a beginner, our step-by-step guidance, examples, and explanations will help you gain confidence and be fully prepared for your interview.
Table of content
HTML Interview Questions for Freshers
1. What is HTML?
To build the structure of web pages, we use HTML (HyperText Markup Language), the most basic language utilized in constructing web pages. Different tags, such as <p>, <h1>, and <a>, enable us to organize content as well as provide linking, images, and so on. Hence, HTML serves as the basis of all websites, with CSS for style and JavaScript for interaction.
2. What are <HTML> Tags?
HTML tags are particular words that you put inside angle brackets, such as <p> or <h1>, and they tell the browser what to display on the page. These are used for headings, paragraphs, links, and images. Tags are of two types: open and close, for example, <p> and </p> tags. Single tags occur, for example, when an <img> is used.
3. What is the difference between <div> and <span>?
DIV: It is a block-level element. It generally contains tags that are larger in structure, like paragraphs and images. It starts on a new line.
SPAN: It is an inline element that is used to style or group small parts of text without disrupting the line flow.
4. What are semantic tags in <HTML>?
Semantic tags are those that define what is inside them and therefore make the webpage easily understandable both for humans and search engines.
Examples:
- <header>: The top-most section, like a title or navigation.
- <footer>: The bottom section, mostly composed of copyright or contact information.
- <article>: A self-contained piece of content, like a blog post.
- <section>: Groupings of related content
5. What is a <DOCTYPE> declaration?
A <DOCTYPE> declaration is the very first thing in an HTML document. It specifies the HTML version in use on that webpage so that the browser will read the contents in the proper format.
6. What is the difference between the id and class attributes?
- id: Used for one unique element on a page. Each id must be different.
Example: <div id=”header”>
- class: Can be used for multiple elements. It’s for grouping elements with similar styles.
Example: <div class=”box”>
7. What exactly does a <meta> tag signify?
A <meta> tag is used to insert meta-information in HTML documents, such as page descriptions, keywords, authors, and character sets. With all the above info, it is enabled for search engines and browsers to accept services that will present a page.
8. What are attributes in HTML?
Attributes provide information about an element. They are written inside the opening tag and define properties such as style and behavior.
9. HTML <a> tag with its use.
The use of the <a> tag is to create hyperlinks. As such, it can link other pages, websites, or resources. An href attribute describes the target address of the link.
Eg: <a href=”https://www.intellipaat.com”>Click here</a>
10. Define types of lists in HTML.
- <ol> (Ordered List): Items of a list which are enumerated or ordered.
- <ul> (Unordered List): Items of a list which are denoted with a marker or bullet points.
- <dl> (Description List): Items in a list with a term and the respective description
Future-Proof Your Career with Web Development Mastery
Transform Through Our Web Development Training
Intermediate HTML Interview Questions
11. Explain what HTML5 means and its various features.
HTML5 is the latest advancement in HTML and is capable of rendering web pages dynamic, modern, and easy to build.
Important Features of HTML5:
- Recently added Tags: for example: <header>, <footer>, etc., and <section>, which have been created to organize content better.
- Multimedia: The new <video> and <audio> tags are available for embedding audio or video.
- Canvas: You draw graphics and animations within a browser using the <canvas> tag.
- Improved Forms: With new input such as email, date, and range incorporated, forms will be easier to work with.
- Local Storage: It stores data directly for offline usage in the browser.
Geolocation: Websites can access your location.
12. What is the difference between HTML and XHTML?
| Aspect |
HTML |
XHTML |
| Syntax |
More flexible and doesn’t require all tags to be closed. |
Strict rules, all tags must be closed. |
| Case Sensitivity |
Tags can be in any case (e.g., <TITLE> or <title>). |
Tags must be in lowercase (e.g., <title>). |
| Document Structure |
Can have missing or incorrect closing tags. |
Needs properly closed and nested tags. |
13. Define <canvas> element in HTML5?
The <canvas> element in HTML5 allows you to draw graphics and animations on a web page using JavaScript.
Key Functions:
- fillRect(): Draws a rectangle.
arc(): Draws a circle or arc.
14. What are data attributes in HTML?
Data attributes are extra attributes that you can add to any HTML element to contain additional information that doesn’t impact an element in any way. They begin with data- and then followed by the name of your preference.
Example:
<div data-id=”123″ data-info=”content”>Click me</div>
15. What is the role of the <nav> tag?
The <nav> tag is used to create a section within a webpage that may consist of menus or links to other pages of the website. It makes sense to both search engines and guests that this strip is used for navigation between different parts of a site or tabs.
16. How do you create a table in HTML? What attributes can be used with table?
To create a table in HTML, you use the <table> element along with other elements like <tr>, <th>, and <td>.
- <table>: Defines the table.
- <tr>: Defines a row in the table.
- <th>: Defines a header cell.
- <td>: Defines a regular table cell.
Example:
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
Output:
Heading 1 Heading 2
Data 1 Data 2
Data 3 Data 4
Get 100% Hike!
Master Most in Demand Skills Now!
17. What is the difference between <section> and <article>?
The <section> and <article> tags both group content, but they are used differently:
- <section>: Used to group related content in a webpage, like a part of an article or a specific topic.
- <article>: Used for a self-contained piece of content that can stand alone, like a blog post or news article.
18. What is the difference between inline, block, and inline-block elements?
- Inline elements: Inline elements like <span> or <a> begin at the same line as the content they affect and do not occupy additional lines, only the amount of lines needed by them. You can’t set their width or height.
- Block elements: Block elements like <div> or <p> begin on a new line and take up the entire width of the container. You can set their width, height, margins, and padding.
- Inline-block elements: Inline-block elements combine the features of both. Although they do not begin a new line as inline elements do, you can set the width and height of the container, among other properties of the context box model, just like block forms. Example: <img> and <button>.
19. How do you specify global attributes in HTML?
Global attributes in HTML tags are those attributes that can apply to almost all types of HTML elements. Here are a few examples of common global attributes:
- id: Assigns unique names to an element.
- class: Assigns one or several class names for styling or scripting purposes.
- style: Writes either inline CSS styles for that element.
- title: Displays extra information while hovering with a mouse on an element.
- lang: Specifies the language of the element’s content.
20. What difference is there between <b> and <strong> tags in HTML?
- <b>: It applies to making text bold, not by any special definition.
- <strong>: This is usually bold by default, but it says that the text is important or very much emphasized.
Advanced HTML Interview Questions
21. What is a viewport? How to set a viewport in an HTML document?
The viewport is that area of the web page that is actually visible on the screen of a particular device. It specifies the location along with the area that is going to display a page’s content and its corresponding size.
The viewport is set within the HTML document by placing the <meta> tag with the name=”viewport” attribute. This particular tag is situated within the head part of the HTML code of the document.
22. How to import video or audio file in HTML?
- Embedding Video: A video file is embedded using the <video> tag. To improve compatibility in different browsers, it is advisable to give a few video formats.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
- Embedding Audio: Use the <audio> tag to embed an audio file.
Example:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
Note: Both tags use the controls attribute to add play, pause, and volume buttons.
23. What is the difference between <iframe> and <embed>?
Both the <iframe> tag and the <embed> tag are used to embed something in an HTML page, but they do so differently and for different purposes:
- <iframe>: Embeds another webpage inside your page.
- <embed>: Embeds multimedia content into the page, such as audio or video or capabilities for a PDF to be part of that page.
Stay Ahead with Excellence in Web Development Skills
The Ultimate Web Development Program Awaits
24. What are some best practices for optimizing HTML for performance?
- Minify HTML Files: Removing unnecessary blurbs and comments for file-size minimization.
- Correct Structure of HTML: Organize headers and footers to enhance readability and improve its SEO performance through semantic elements such as <header>, <footer>, <article>, <section>, and others.
- Optimizing Images: File formats and optimization synthesize accurate photography for size reduction.
- Defer or Async JavaScript: Using defer or async loads scripts but doesn’t stop the loading of the web page.
- Use External CSS/JS: More efficient in using external CSS and JavaScript rather than linking them through the HTML tags.
- Images and Videos Lazy Loading: Lazy load the images and videos so that they load only when scrolled to that part of the page or screen with lazy load.
- Use CDN: Use a content delivery network for resource provision. Speed up the process.
25. Give a description of template element within HTML5.
The <template> element becomes a part of HTML5 that is used to mold HTML contents during the loading of the page and later on such contents would be referred to or dynamically aggregated through JavaScript.
26. What is MathML in HTML 5?
MathML is a markup language, which is used in HTML5 to represent mathematical expressions and equations. This allows the representation of complex mathematical symbols, equations, and notations as they appear on web pages, making them accessible and formatted well.
27. How to add Scalable Vector Graphics (SVG) to your web page?
To add SVG (Scalable Vector Graphics) to your web page, there are a few straightforward methods you can use:
- Using the <img> Tag: Similar to any other image, you can incorporate an SVG file with the <img> tag.
- Inline SVG: You can directly include the SVG code in your HTML, giving you greater control over its size and style.
- Using the <object> Tag: This method allows you to embed an SVG file as an object.
Using the <iframe> Tag: You can also utilize a <iframe> to display the SVG file in a separate frame.
28. What is the role of the action attribute in HTML forms?
The action attribute in an HTML form indicates the URL to which the form data will be sent upon submission. It specifies the endpoint that will handle the form data, such as a server-side script or a specific page.
29. How to handle JavaScript events in HTML?
Data can be displayed in a tabular format with the help of the <table> tag. It can also be used to manage the layout of the web page. For example, the header section, the navigation bar, the content of the body, and the footer section.
The following HTML tags are used for when building a table on an HTML webpage:
JavaScript events can be managed in an HTML document using the <script> tag. Script events can be registered on HTML elements using an addEventListener() method. This way, certain functions are called when there is a user action (like a click or keystroke), creating interactive behavior in the webpage.
30. What are HTML Web Workers?
HTML Web Workers are JavaScript scripts that work behind the main page. They allow users to do calculations without the interface “freezing” or “slowing down.” Web Workers communicate with the main page through message passing – a much easier way for handling heavy-duty tasks without putting a dent in performance.
CTA
Conclusion
In conclusion, HTML is very important in a web developer’s career. HTML Interview Questions will surely help candidates gain an edge over others. Candidates should try and learn the tricks of the trade and practice most interview questions to showcase their skills and knowledge in the interview convincingly. Keep enlightening yourself and keep engaging with the fabulous HTML that must go with the starting ahead of others in preparation not just for interviews but also for the future.
FAQs – HTML Interview Questions
- What is HTML?
HyperText Markup Language is the basic language through which one can build or manipulate all contents of the web like images, text, links, etc.
- What are types of List in HTML?
The three types of lists in HTML are: ordered lists (<ol>), unordered lists (<ul>) and descriptions (<dl>).
- What is the difference between the <div> and <span> tags?
<div> is a block element, whereas <span> is an inline element; <div> is meant for larger chunks of content, while <span> tends to be used to style or group smaller pieces of text or content.
- What are semantic tags in HTML?
Semantic tags in HTML, such as <header>, <footer>, <article>, and <section>, add meaning to the content, enhancing the web page’s structure for both search engines and developers.
- What is the <meta> tag used for in HTML?
The <meta> tag gives metadata about the web page concerning the character encoding, author, and keywords for search engines. This is an important factor in the optimization and performance of web pages in general.