HTML Interview Questions and Answers (2024) – Advanced Level
This article will cover the most frequently asked interview questions in HTML. We have already created HTML Interview Questions & Answers Set – 1 & Set -2. So please read Set – 1 & Set – 2 before jumping to this article.
Pre-requisite:
The below contains the list of the top 20 most common & frequently asked HTML & HTML 5 interview questions with their explanations.
-
What is an anchor tag in HTML?
The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This hyperlink is used to link the webpage to other web pages. It’s either used to provide an absolute reference or a relative reference as its “href” value. Click Here to know more in detail.
Syntax:
<a href = "link"> Link Name </a>
Example:
HTML
<!DOCTYPE html>
<
html
>
<
body
>
<
h1
>
Welcome to
w3wiki
</
a
>
</
h1
>
<
h2
>This is anchor Tag</
h2
>
</
body
>
</
html
>
Output:
-
What are void elements?
The elements that only have start tags and do not contain any content within it, these elements are called Void Elements. It can only have attributes but does not contain any kind of content. Example of such elements are <br>, <hr>, <img>, <input>, <link>, <base>, <meta>, <param>, <area>, <embed>, <col>, <track>, <source> etc.
-
How to change an inline element into a block-level element?
We can accomplish this task by using the display property having its value as “block”, to change the element from inline to block-level element.
-
How Container tag is different from the Empty tag in HTML?
The Container tags are generally divided into three parts, i.e., the opening tag, content(which will display on the browser), and closing tag. In the content part, they can also contain some other tags. These opening and closing tags are used in pairs. For instance, <html>….</html>, <head>…</head>, <title>…</title>, <body>….</body>, etc.
Syntax:
<tag_name> …</tag_name>
The Empty Tags that do not contain any closing tags are known as empty tags. Empty tags contain only the opening tag but they perform some action in the webpage. For eg: <br>, <link>, <img>, <hr>, <meta>, <source> etc.
Syntax:
<tag_name>
Please refer to the Is container tag same as the empty tag in HTML? If not, why? article for further detail.
-
What tags are used to separate a section of text?
- <br> tag: Usually <br> tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line.
- <p> tag: The <p> tag contains the text in the form of a new paragraph.
- <blockquote> tag: It is used to define a large quoted section.
-
In how many ways you can apply CSS to your HTML file?
There are 3 ways in which we can add CSS to our HTML file, they are given below:
- Inline CSS: Inline CSS contains the CSS property in the body section attached with the element known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
- Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS ruleset should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
- External CSS: External CSS contains a separate CSS file that contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with a .css extension and should be linked to the HTML document using the link tag. This means that for each element, style can be set only once and that will be applied across web pages.
Please refer to the Types of CSS (Cascading Style Sheet) article for more details.
-
How to include one CSS file in another?
It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using the @import keyword. Click here to know more in detail.
-
How can you apply JS in your HTML?
Scripts can be placed inside the body, the head section of an HTML page, inside both head and body, or can be added externally.
- JavaScript in head: A JavaScript function is placed inside the head section of an HTML page and the function is invoked when a button is clicked.
- JavaScript in the body: A JavaScript function is placed inside the body section of an HTML page and the function is invoked when a button is clicked.
- External JavaScript: JavaScript can also be used as external files. JavaScript files have file extension .js . To use an external script put the name of the script file in the src attribute of a script tag. External scripts cannot contain script tags.
Please refer to the Where to put JavaScript in an HTML Document? article for more detail.
-
What are logical and physical tags in HTML?
Physical and Logical tags are used in HTML for better visibility and understanding of the text by the user on the web page. However, both tags differ from each other as suggested by their names.
Logical Tag: This tag is used in HTML to display the text according to the logical styles. Following are the Logical tags commonly used in HTML.
- <abbr>: It defines an abbreviation that is used to define the abbreviation or short form of an element.
- <acronym>: It is used to define an acronym.
- <address>: It defines an address element.
- <cite>: It defines citation ie., used to define the title of a work.
- <code>: It defines computer code text.
- <blockquote>: It defines a long quotation.
- <del>: It stands for delete and is used to mark a portion of text which has been deleted from the document.
- <dfn>: It represents a definition element and is used to represent a defining instance in HTML.
- <ins>: It is used to specify a block of inserted text.
- <kbd>: It defines keyboard text.
- <pre>: It defines preformatted text.
- <q>: It defines a short quotation.
- <samp>: It defines sample computer code.
- <strong>: It defines strong text.
- <var>: It defines a variable ie., used to specify the variable in a mathematical equation or in a computer program.
Physical Tag: This tag is used in HTML to provide actual physical formatting to the text. Following are the Physical tags commonly used in HTML.
- <b>: It defines bold text.
- <big>: It defines the big text.
- <i>: It defines italic text.
- <small>: It defines small text.
- <sup>: It defines superscripted text.
- <sub>: It defines subscripted text.
- <tt>: It defines teletype text.
- <u>: It is an Unarticulated Annotation ie., underline element, which is used to underline the text enclosed within the <u> tag. It is deprecated, use styles instead.
Please refer to the Physical and Logical Tags in HTML article for further details.
-
What is MathML in HTML 5?
The MathML comes in HTML5 the current MathML version is 3 it was introduced in the year 2015. The MathML stands for Mathematics Markup Language. It is used to represent the mathematical equation or expression in web browsers like other HTML elements. The 1st version of MathML was released in the year of 1998 and after that, the 2nd version was released. Basically, MathML is a complex mathematical formula or equation visual representation made easy. The MathML is supported in the HTML5, all the MathML tag must be used inside the <math> and </math> tags.
The MathML is used to describe mathematics as a basis for the machine to machine communication, it is intended to be handled by specialized authoring tools such as equation editors and it is meaningful to other applications also.
-
What is the difference between <html lang=”en’> and <html lang=”en-US’>?
The lang attribute specifies which language is used to write the content of a web page. It is used to set the language for the whole text of the web page.
The difference between <html lang=”en’> and <html lang=”en-US’> is described below:
<html lang=”en’>: The <html lang=”en’> only specifies the language code of the page meaning en or English is used for all the text on the page.
<html lang=”en-US’>: The <html lang=”en-US’> specifies the language code of the page followed by the country code which means the US style of English language is used for all the text on the page.
<html lang=”en-GB’> which means the United Kingdom style of English <html lang=”en-IN’> which means the Indian style of English
Please refer to the What is the difference between <html lang=”en’> and <html lang=”en-US’>? article for a detailed description.
-
How to create scrolling text or images on a webpage?
This task can be achieved through <marquee> tag in HTML that helps to create scrolling text or image on a webpage. It scrolls either from horizontally left to right or right to left, or vertically from top to bottom or bottom to top.
Syntax:
The marquee element comes in pairs. It means that the tag has an opening and closing elements.
<marquee> <--- contents ---> </marquee>
-
What do you mean by manifest file in HTML5?
A manifest file is a text file that tells the browser to cache certain files or webpages so that they can be used even in offline mode. HTML5 cache webpages by specifying manifest attribute in <html> tag. All the web pages that contain manifest attributes or are specified in the manifest file will be cached whenever a user visits that page. Manifest files are saved with the .appcache extension. It always starts with the CACHE MANIFEST keyword and contains three sections:
- CACHE: This section lists all the resources including webpages, CSS stylesheets, JavaScript files, and images that will be cached immediately after their first download.
- NETWORK: This section lists all the resources that will never be cached. These resources can’t be used in offline mode and always require a connection to the server.
- FALLBACK: This section lists the fallback resources that will be used in case a page is not accessible. It specifies the primary resource that will be replaced with the fallback resource specified next to it in case of server connection failure.
-
How to open a hyperlink in another window or tab in HTML?
There are several different ways to open a hyperlink in another window or tab such as using JavaScript, jQuery, or HTML. In order to open a hyperlink in another window or tab, use the target attribute and provide it value _blank in the anchor tab. Click Here to know more in detail.
Syntax:
<element target="_blank|_self|_parent|_top|framename"\>
Attribute Values:
- _blank: It opens the link in a new window.
- _self: It opens the linked document in the same frame.
- _parent: It opens the linked document in the parent frameset.
- _top: It opens the linked document in the full body of the window.
- framename: It opens the linked document in the named frame.
-
Explain Web Worker in HTML.
Web workers are multithreaded object which is used to execute Javascripts in the background without affecting the performance of the application or webpage. Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allow long tasks to be executed without affecting the responsiveness of the web page. Generally, it is used for big CPU-intensive tasks.
Types of Web Workers:
- Shared Web Workers: It can be shared by multiple scripts.
- Dedicated Web Workers: A dedicated worker is only accessible by the script which has been called it.
-
Define multipart form data.
Multipart Form Data: The ENCTYPE attribute of the <form> tag specifies the method of encoding for the form data. It is one of the two ways of encoding the HTML form. It is specifically used when file uploading is required in HTML form. It sends the form data to the server in multiple parts because of the large size of the file.
Syntax:
<form action="login.php" method="post" enctype="multipart/form-data"> </form>
-
How to add Scalable Vector Graphics to your web page?
SVG is a type of image format which is written in XML for vector-based graphics. Every element and every attribute in SVG files can be animated. There are several ways to use SVG images in HTML, which are described below:
- SVG in a <img> tag: This is the basic & simple way to insert the SVG image to a webpage. For this method, we can simply use the <img> tag and then specify the file path or image link in the src attribute. To use this method, we should have downloaded the SVG image file or SVG image link.
- SVG in a <object> tag: The <object> tag can be used to insert the SVG images by specifying the URL of the resource that will be used by the object using the data attribute.
- SVG in a <embed> tag: The <embed> tag can be used to insert the SVG image by specifying the link in the src attribute. This tag is now deprecated and removed support for browser plug-ins in most of the modern browsers.
- SVG in a <image> tag: The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files.
Please refer to the How to add Scalable Vector Graphics to your web page? article for a more detailed description.
-
What are the media element tags introduced by HTML5?
HTML5 introduced 5 most popular media element tags that are supported by the browsers, which are described below:
- <audio>: It is an inline element that is used to embed sound files into a web page.
- <video>: It is used to embed video files into a web page.
- <source>: It is used to attach multimedia files like audio, video, and pictures.
- <embed>: It is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.
- <track>: It specifies text tracks for media components audio and video.
Please refer to the What are the media element tags introduced by HTML5? article for a more detailed description.
-
How to handle JavaScript Events in HTML?
An Event is an action or occurrence recognized by the software. It can be triggered by the user or the system. Mostly Events are used on buttons, hyperlinks, hovers, page loading, etc. All this stuff gets into action(processed) with the help of event handlers.
Syntax:
Handle event in HTML :
<element onclick="myScript">
Various HTML event attributes:
Form Event
- onblur: This event occurs when an object loses focus.
<element onblur="myScript">
- onchange: This event occurs when the value of an element has been changed.
<element onchange="myScript">
- onfocus: This event occurs when elements get focused.
<element onfocus="myScript">
Event:
- onclick: This event occurs when the user clicks on an element.
<element onclick="myScript">
- onmouseover: This event occurs when the user hovers the mouse pointer over an element.
<element onmouseover="myScript">
Please refer to the How to Handle JavaScript Events in HTML? article for a more detailed description.
-
What is the difference between Cellpadding and Cellspacing in HTML Table?
Cellpadding: Cellpadding specifies the space between the border of a table cell and its contents (i.e) it defines the whitespace between the cell edge and the content of the cell.
Syntax:
<table cellpadding="value" >.....</table> where, value determines the padding (space between the border of a table and its content)
Cellspacing: Cellspacing specifies the space between cells (i.e) it defines the whitespace between the edges of the adjacent cells.
Syntax:
<table cellspacing="value" >.....</table> where, value determines the padding (space between adjacent cells)
Difference between cell padding and cell spacing:
Cellpadding
Cellspacing
It specifies the space between the border of a table cell and its contents.
It specifies the space between adjacent cells.
It is created by using HTML <table> tag but the type attribute is set to cell padding.
It is also created by using HTML <table> tag but the type attribute is set to cell spacing.
It is mainly meant for a single cell.
Cellspacing can get subjected to more than one cell.
The default cell padding value is 1
Whereas, the default cell spacing value is 2
Cellpadding is widely used and considered to be an effective mean
Cellspacing is less effective than Cellpadding.
Cellpadding is an attribute
Cellspacing is also an attribute.
Please refer to the Difference between Cellpadding and Cellspacing article in detail.
Contact Us