HTML Interview Questions?
Basic HTML Interview Questions & Answers
Here are some common questions and answers about HTML that you might encounter in a job interview, especially if you're just starting out in web development. This list also includes a few questions about CSS to help you improve your skills in HTML and web design.
1. What is HTML?
HTML, also termed Hyper Text Markup Language is a language used on the World Wide Web. It is a common text formatting language utilized for designing and displaying web pages.
Today, text can become more dynamic and interactive because of HTML. It can change text into links, tables, and images. By prefixing the web page name with.html or.html, HTML pages can be stored.
2. What are the main features of HTML?
HTML has the following features and characteristics:
- It is a markup language that allows for the creation of text-based web pages.
- HTML is simple to use and understand.
- While using HTML, programmers can make a web page more interactive by adding images, video, and audio.
- HTML is platform-independent and may be used on Windows, Linux, and others.
- It is not case-sensitive. Tags can be used in either lower or higher case.
- HTML allows programmers to include a link on web pages, allowing readers to search for material of interest.
3. What are HTML tags, and how to use them?
An HTML tag comprises an opening tag, a content tag, and a closing tag. Some tags aren’t closed.
Two things are contained in HTML documents: content and tags.
A web browser examines an HTML document from top to bottom and from left to right. HTML tags are used to construct HTML documents and render their features. It has its own set of attributes.
<tag> content </tag> Content is added between tags to display data on a web page.
4. What Is the difference between HTML elements & HTML tags?
Here is a tabular comparison of HTML elements vs HTML tags to understand the differences between the two easily:
| HTML Elements | HTML Tags |
| HTML Elements are standalone parts of an HTML web page, including a start tag, attributes, content, and an end tag. | HTML Tags indicate the beginning or end of an element. They begin with '<' and end with '>'. What's in between '<' and '>' is a tag. |
| HTML Elements consist of a start tag, content, and an end tag. | HTML Tags serve as keywords, each with a specific meaning. |
| Content is held within HTML elements. | HTML Tags encapsulate HTML elements. |
| HTML Elements define the overall content of a web page. | HTML Tags are similar to keywords, as each tag has a distinct purpose. |
| Example: <p> This is an example of a paragraph.</p> | Example: <a> represents the opening anchor tag, and </a> represents the closing anchor tag. |
5. What Is HTML formatting?
HTML formatting is the method of formatting text to make it look and feel better. It employs various tags to make text bold, italic, and underlined.
For example:
<b> This text is bold </b>
<i> This text is italic </i>
<u> This text is underlined </u>6. Do all HTML tags have an end tag?
No, not all HTML tags have an end tag. Some are self-closing tags that do not require an end tag.
The br> tag, for instance, is used to break a line, and the image> tag is used to insert an image into a page.
7. Which HTML tags are used to display the data in tabular format?
To display the data in tabular form, the following HTML tags are used:
| 1. | <table> - | Represents a table |
| 2. | <tr> - | Defines a row in a table |
| 3. | <th> - | Used for a header cell in a table |
| 4. | <td> - | Defines a cell in the table |
| 5. | <caption> - | Represents the table caption |
| 6. | <col> - | Used with <colgroup> element to specify each column property |
| 7. | <tbody> - | Groups the body content in the table |
| 8. | <thead> - | Groups the header content in the table |
| 9. | <tfooter> - | Groups the footer content in a table |
This is one of the most common HTML interview questions for freshers, as they should know about all types of tags used.
8. What are HTML attributes & how to use them?
Each HTML tag has a unique attribute that affects how the tag operates or appears.
For example, a type attribute on an input> tag can be used to indicate whether it’s a text field, checkbox, radio button, etc.
Inside the two angled brackets, attributes are specified directly after the tag’s name. They should only be used in opening or self-closing tags. They can never appear in closing tags.
Using Attributes:
<!-- Text field -->
<input type="text" />
<!-- Checkbox -->
<input type="checkbox" />
<!-- Radio button -->
<input type="radio" value="on" />9. What is the basic structure of an HTML template?
The basic structure of an HTML template is as follows you must know while preparing for HTML interview questions and answers for freshers:
<html>
<head>
<title>Page Title </title>
</head>
<body>Page content</body>
</html>10. How many heading tags are there in HTML?
There are basically six different types of heading tags used in HTML. Each form of heading tag has a different font size than the others. For instance, H1 is the biggest heading, while H6 is the smallest one.
Example:
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>11. How to create an HTML hyperlink?
The HTML language has an anchor tag for creating a hyperlink that connects one page to another. These tags can appear in the following formats:
- Unvisited Link– Displays underlined and blue
- Visited Link– Displays underlined and purple
- Active Link– Displays underlined and red
12. What is the difference between Block Level Elements & Inline Elements in HTML?
You must know the differences between block level and inline elements because this can be asked among the interview questions on HTML.
Here is a tabular comparison of block-level elements vs inline elements to understand the differences between the two easily:
| Block Element | Inline Element |
| A block-level element is represented by a block that stretches to occupy the entire width available to it, i.e., the width of its container, and will always begin on a new line. For Example: <div>, <img>, <section>, <form>, <nav> | Inline elements are defined and only take up the space that is required. Looking at how text flows on a page is the simplest method to understand how they work. For Example: <span>, <b>, <strong>, <a>, <input> |
13. What are HTML comments?
You can add code comments to your HTML document to help you comprehend the code. These are not visible in the browser, but they assist in notifying yourself and other developers about the purpose of a part of HTML.
The beginning of the comment is denoted by !-, and the end is denoted by — >. Anything in the middle will be ignored, even if it contains valid HTML.
For Example:
<!-- This is a comment! -->
<!-- Comments spanning multiple lines -->
<!-- This part is ignored in the browser -->14. What is HTML5? What are new features in it that are not available with HTML?
HTML5 is the most recent version of the Hypertext Markup Language (HTML). HTML5’s new features include the following:
- SVG, canvas, and other virtual vector graphics are supported by HTML5.
- Vector graphics could only be employed with Flash, VML, or Silverlight in HTML.
- JavaScript can now run within a web browser, thanks to HTML5.
- HTML5 does not use SGML. It has better parsing rules for more compatibility.
- Web SQL databases are used in HTML5 to temporarily store data.
15. What is Semantic HTML?
Semantic HTML is a code that uses HTML markup in web pages and web apps to reinforce semantics. It also defines the meaning of the text rather than just defining its look or form.
Overall, semantic HTML gives meaning to the code that we write.
For Example:
<form>, <table>, and <article>, these tags clearly indicate the content.16. How to create a nested webpage in HTML?
A nested webpage is displayed using the HTML iframe tag. In other words, it symbolizes a webpage within a webpage. An inline frame is defined by the HTML iframe> tag.
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML example</h2>
Height and width attributes specify the iframe size:
<iframe src="https://www.arfitechnology.com/" height="200" width="300"></iframe>
</body>
</html>You must practice such concepts before going to the job interview so that you are well-prepared for the top HTML interview questions and answers.
17. In HTML, can hyperlinks only be applied to text?
No, hyperlinks can be placed in both text and graphics. The HTML anchor tag specifies a hyperlink connecting one page to another.
The “href” attribute of the HTML anchor element is the most crucial.
Syntax:
<a href = "..........."> Link Text </a>18. What is a style sheet in HTML?
A style sheet creates a uniform, transportable, and visually appealing style template. These templates can be used on a variety of web pages.
It covers the appearance and formatting of a markup-language document. The Cascading Style Sheet (CSS) is the most well-known type of style sheet, and it is used to style web pages.
The style sheet provides the following formatting elements:
- Font
- bold, italics, underline
- Justification
- Color
- Superscript and subscript
19. What is an image map in HTML?
An image map connects multiple web pages with a single image. It is represented by <map> tag. You can describe the image shapes you want to include in an image mapping.
20. What is a marquee in HTML?
A marquee represents the scrolling text on a web page. It automatically scrolls the image or text up, down, left, or right.
You should put the text to scroll within the <marquee>……</marquee> tag.
21. What is a span tag in HTML? Explain with an example.
The span tag is used:
- To make text colorful
- To give the text a background
- Any text in a different color is highlighted.
Example:
<p>
<span style="color:#ffffff;">
In this page we use span.
</span>
</p>22. What is the difference between DIV and SPAN In HTML?
The difference between SPAN & DIV is that a SPAN element is inline and typically used for a tiny block of HTML within a line, such as within a paragraph.
On the other hand, A DIV or division element is a block line, comparable to having a line break before and after it.
For Example:
<div id="HTML">
This is <span class="Web Dev">interview</span>
</div>23. Who wrote the first version of HTML?
Tim Berners-Lee wrote the first-ever version of HTML in 1993. Since then, different versions of HTML have been introduced.
24. What is the purpose of using HTML?
HTML can be used for various purposes, including writing code that is clear and easy to understand. This language allows you to isolate meaning from text and style by writing descriptive and semantic code.
25. When was HTML invented?
HTML, or Hyper Text Markup Language, was invented in 1993.
26. How to insert a picture onto a web page’s background image?
To include a picture in the background image, place the following tag code after the </head> tag:
<body background = “image.gif”>Now, substitute image.gif with the name of your picture file. This will make the image the background image of your web page.
27. How do you make the text on a webpage that, when clicked, sends an email?
To do so, use the mailto command within the href tag. Convert the text into a clickable link to send an email. It is possible to write it as follows:
<a href=”mailto:youremailaddress@xyz.com”>text to be clicked</a>28. What is the HTML layout?
The HTML layout describes how the web page is organized. Every website has a distinct layout that helps viewers focus on specific material.
The HTML5 components listed below define the distinct portions of a webpage.
- <header>: This tag is used to specify a document or section’s header.
- <nav>: A container for navigation links is defined by this tag.
- <section>: It’s used to specify a portion of a document
- <article>: It’s a term for a self-contained, self-contained piece.
- <aside>: It’s used to define content that’s not part of the main content (like a sidebar)
- <footer>: This tag is used to specify a document’s or section’s footer.
29. What are empty elements in HTML?
Empty elements are HTML elements that have no content. For example, <br>, <hr>, and so on.
So, these are some of the popular and top HTML interview questions for freshers. Mastering these questions will surely place you in a good firm as a fresher web developer.
HTML Interview Questions and Answers for Experienced
Now, moving to some typical interview questions on HTML for experienced professionals.
30. Where is the iframe tag used?
An inline frame is specified via the <iframe> tag. It displays a web page within a web page. For instance, the src element specifies the URL of the document that occupies the iframe.
Syntax:
<iframe src=”URL”></iframe>
31. What is the difference between LocalStorage and SessionStorage objects?
Here is a tabular comparison of LocalStorage and SessionStorage objects in HTML to understand the differences easily:
| LocalStorage Object | SessionStorage Object |
|---|---|
| It keeps data that has no expiration date. | It only stores data for one session. |
| The data can be shared across numerous browser windows. | Data is only available in the current browser window. |
| When the browser window is closed, no data is removed. | If the browser is closed, the data is destroyed. |
32. How many types of CSS can be included in HTML?
There are three methods for incorporating CSS into HTML:
- Inline CSS
This approach is used to style smaller contexts. To use inline styles, provide the style attribute in the appropriate tag.
- External Style Sheet
When the style is applied to many pages, an external style sheet is used. Using the <link> tag, each page must link to the style sheet. The <link> tag is placed within the head section.
Syntax:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>- Internal Style Sheet
An internal style sheet is employed when a single document has a distinct style. Internal style sheets must be placed in the head section of an HTML page using the <style> tag.
Syntax:
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>33. What is the difference between cell spacing & cell padding?
This is yet another important thing that you must know and have in your list of HTML interview questions and answers for experienced professionals.
The distance or gap between two cells in the same table is called cell spacing. On the other hand, Cell Padding is defined as the gap or space between the cell’s content and the cell wall or cell border.
For Example:
<table border cellspacing=3>
<table border cellpadding=3>
<table border cellspacing=3 cellpadding=3>34. Which HTML tag is used to separate sections of text?
Using the <br> tag, you can separate the lines of text.
Other tags, including <p> tag and <blockquote> tag, are also used to separate the text.
35. How many types of media formats does HTML support?
HTML supports a wide range of media forms, including music, video, movies, sounds, and animations.
HTML supports the following formats:
- Images: jpg, jpeg, png, gif, SVG, apng, BMP icon
- Audio: RealAudio, WMA, MIDI, AAC, WAV, MP3
- Video: MPEG, AVI, QuickTime, RealVideo, WMV, Flash, WebM, and MP4
36. How are active links different from normal links in HTML?
Some browsers recognize it when the mouse cursor is above an active link. Others recognize active links when the link has the attention. Those without a mouse cursor above the link are considered normal. Blue is the default color for normal and active links.
37. What happens if the external CSS file is opened in a browser?
When you open the CSS file in a browser, nothing happens. It fails since the file has a different extension. So the only way to use an external CSS file is to reference it within another HTML document using the </link> tag.
38. Is there any chance that the text will appear outside of the browser window?
The text is wrapped by default to fit within the browser window. However, if the text is part of a table cell with a fixed width, it may expand beyond the browser window.
39.What is the difference between HTML & XHTML?
This is among the crucial interview questions on HTML and you must know the correct answer.
Please find the tabular comparison of HTML vs XHTML to know the differences better:
| HTML | XHTML |
|---|---|
| HTML is an abbreviation for Hypertext Markup Language | XHTML is an abbreviation for Extensible Hypertext Markup Language |
| It is derived from SGML (Standard Generalized Markup Language) | It combines both XML and HTML features |
| HTML is a type of static Web Page language | XHTML is a dynamic Web Page language |
| It employs the document file format | It employs markup language |
| HTML is all about displaying data | XHTML is all about describing the data |
| HTML is not case-sensitive | XHTML is case-sensitive. Each tag and attribute should be written in lowercase. |
40. How to include a favicon in HTML?
The code for adding a favicon is provided below. Enter the following code in your webpage’s <head> section.
<link rel=”icon” type=”image/png” href=”/favicon.png”/>
<link rel=”icon” type=”image/png” href=”https://example.com/favicon.png”/>41. What is the use of a figure tag in HTML5?
The <figure> tag is used to identify self-contained information connected to the main content. It includes self-contained information such as images, diagrams, illustrations, etc.
The graphic, caption, and contents are all referred to as a single unit in the document’s main flow. The image src and figcaption elements are part of the <figure> tag. Img src is used to insert an image source into a document, whereas figcaption is used to change the caption of an image.
For Example:
<figure>
<img src=”pancakes.jpg” alt=”Blueberry Pancakes”>
<figcaption>A Stack of Blueberry Pancakes</figcaption>
</figure>42. What is a datalist tag in HTML?
In HTML files, the <datalist> tag enables auto-complete functionality. It allows users to include an auto-complete form based on predetermined options. It can be combined with an input tag to allow users to conveniently fill out forms with predetermined options.
For Example: If you press A, it will show the car list starting with an A letter.
<label for=”car”>Choose your car from the list:</label>
<input list=”cars” name=”car” id=”car”>
<datalist id=”cars”>
<option value=”Honda”>
<option value=”Hyundai”>
<option value=”Maruti”>
<option value=”Audi”>
<option value=”BMW”>
</datalist>If you have been working as a web developer for some years now, then this is going to be one of the top HTML interview questions and answers for experienced professionals.
43. What is the benefit of collapsing white space?
In HTML, white spaces are interpreted as a single space character. You can indent lines of text without worrying about numerous spaces because the browser combines several spaces into a single space. It allows you to structure the HTML code and make it much more readable.
44. What is the connection between border and rule attributes?
If the border attribute is set to a non-zero value, default cell boundaries with one-pixel thickness are automatically placed between cells. When the rules attribute is introduced, a default 1-pixel border appears if the border attribute is not specified.
45. What are the limitations of text field size?
A text field’s default size is roughly 13 characters. If you add the size attribute, however, you can set the size value to as low as 1. The browser width will decide the maximum size value.
Furthermore, if the size attribute is set to 0, the size is set to the default size of 13 characters.
46. What is HTML SVG?
HTML SVG is a two-dimensional vector graphics format. An X, Y coordinate system is utilized for vector diagrams such as pie charts and 2-dimensional graphs. XML text files define SVG pictures and their actions.
Syntax:
<!DOCTYPE html>
<html>
<body>
<h2>HTML SVG example</h2>
<svg width="400" height="400">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="red" />
</svg>
</body>
</html>47. What is a canvas element in HTML5?
The <canvas> element is a container for drawing pictures on a web page using a programming language such as JavaScript. It allows you to render 2D shapes and bitmap pictures dynamic and scriptable. You may draw paths, boxes, circles, text, and images on canvas using various methods.
48. What are lists in HTML?
HTML lists are used to organize a collection of similar objects into lists. It is identified by a tag.
Some types of HTML lists:
- Ordered List
- Unordered List
- Description List
- Menu List
- Directory List
49. What is the use of a figure tag in HTML?
It is one of the top HTML interview questions that can be asked of experienced professionals.
The figure tag includes a photograph in a document on a web page. It manages a collection of diagrams, images, code listings, and embedded material.
Syntax:
<p>The Taj Mahal is widely recognized as "The jewel of Muslim art in India.”</p>
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
</figure>50. What are the logical and physical tags in HTML?
Logical tags are used to convey the meaning of the content included. The logical tag is illustrated with the <strong> </strong> tag.
On the other hand, physical tags instruct the browser on how to display the text contained within the physical tag.
Examples of physical tags include:
- <b>
- <big>
- <i>
51. What is the benefit of grouping multiple checkboxes together?
The checkboxes do not affect one another. However, placing these checkboxes together aids in their organization. Checkbox buttons can be given a name and are not required to be part of a group. A single web page can contain a variety of checkbox groups.
52. Which are the best HTML editors?
These are some of the most used HTML editors:
- UltraEdit
- Sublime Text
- Atom
- Visual Studio Code
- NoteTab
- TinyMCE
So, these are the top HTML interview questions and answers for experienced. We hope that this set of questions is enough to crack your interview at a glance.
HTML and Web Development Full Course FAQs
Today, most web pages are built on HTML. Using this programming language, we instruct browsers to organize material into titles, headings, paragraphs, images, links, lists, forms, tables, and more.
Right? Well, the ever-rising demand for HTML has motivated newbies and experienced professionals to become a web developer. As a result, they look forward to kickstarting their career as a good web developer in one of the leading organizations.
The first step to becoming a web developer is cracking the interview process. Right? So, to help you achieve your goal, we’ve curated the list of the top HTML interview questions and answers for both freshers and experienced. These questions will give you a detailed insight into HTML from its basic to the advanced level.
Web developers are in high demand these days. So, there are ample perks individuals can experience while choosing HTML.
- Make things more accessible
- Better collaboration
- Develop a unique website
- Build a career in web development
- Become a front-end web developer
Well, a web developer’s salary differs from region to region. For instance, a web developer’s salary in India is initially Rs 35,000 and keeps increasing with experience.
- HTML
- CSS
- JavaScript
- jQuery
- Bootstrap
- Computer literacy
- Strong numeracy skills
- Creative ability
- Attention to detail
- Strong communication skills
- Excellent problem-solving skills
- A logical approach to work
There are plenty of reasons to build a career in web development, including:
- A huge demand these days
- Greater flexibility
- Earn a better living
- Get diverse learning & growth opportunities
- Web developers are creative
Arfi Technology Pvt. Ltd. is a highly trusted IT company in India that offers the best online/offline training for web development.