If you are into web development and want to have a career as a web developer, then HTML is the first step to your goals. Every web page you see on the internet is made up of HTML. HTML is not a programming language; it is more like a text which can be easily interpreted by the web browser. The web-development market is not static every year new tools introduces which obsolete the old ones, but HTML is one of its kind, and it can not be replaced easily. Even in web-development interviews, the interviewer asks a lot of HTML Interview Questions, because it is the core of web development, and it is also effortless to ask questions from HTML.
Top HTML Interview Questions and Answers
Here in this article, we have mentioned the frequently asked HTML interview questions, and we recommend you to read these HTML interview questions and answers before you appear in the interview.
1. What is HTML?
Question: What is the latest version of HTML?
Answer: The latest version of HTML is HTML5, and it was published by W3C recommendation on October 28, 2014.
Question: What is HTML 5?
Answer: HTML 5 is the latest edition of HTML and the latest language used by WWW.
Question: Can I hide my HTML code from the user?
Answer: No, the browser needs our code to display the web pages and the browser allows the users to see the code.
Question: Give some new features introduced in HTML5?
- It has introduced new elements and attributes.
- New semantic elements like <header> and <footer>
- It comes with bi-directional communication for web applications
- It introduced Server-Sent Events (SSE)
- It allows us to add audio and video to the web pages.
Question: Give some difference between HTML and HTML5?
|It has a large document||Its document is less than HTML|
|There were no <audio> and <video> tags in HTML||In HTML5 we got new features like <audio> and <video>|
|HTML is supported on every browser, even on old once.||We need updated browsers to run HTML5|
|There were no web sockets in HTML||In HTML5 we got a full-duplex communication channel|
|In HTML we have not any vector technology||HTML5 comes with an integral vector technology|
Check Difference Between HTML and HTML5 Check Here
Question: Why do we write Doctype at the top of each HTML page?
Answer: Doctype is a special syntax given to HTML pages, it is a syntax because <!DOCTYPE> is not a tag. The Doctype statement in HTML tells the browser to open this web page in a standard model and it acquaints the web page with the latest edition of HTML without specifying the specific versions.
Question: What happens if we do not mention <!DOCTYPE> in an HTML page?
Answer: We would not be able to avail of the latest features of HTML and get stuck with the old ones. If there is no <!DOCTYPE>, the browser will get no information about the version of the HTML used in that specific web page.
Question: What are tags?
Answer: Tags are kind of pre-defined code in HTML they start with < sign and end with > sign, it tells browser what to do. Once we have opened a tag, we have to close it and to close a tag we use / symbol. Most of the HTML tag come in pairs. E.g. <h1> </h1>, <p> </p>, etc.
Question: Do all HTML tags come in pairs?
Answer: No, some tags like <img>, <br> etc. does not have any pair.
Question: Name all the lists we use in HTML.
- Ordered list
- Unordered list
- Definition list
- Menu list
- Directory list
Question: Name new media elements in HTML5.
Question: Why we use canvas element in HTML5?
Answer: HTML5 has a new element known as a canvas which is used to create charts, graphs, photoshop 2-D images and lots more.
Question: What are comments in HTML and how to insert one?
Answer: Comments are the special statements in HTML which do not execute and not display on the web browser. We write comment inside <! > tag, for example: <!—Comment —>
Question: What is the key difference between HTML elements and tags?
Answer: Elements are the predefined code that renders the text in different formats, and when an element enclosed by brackets <> they make tags.
Question: Name all the heading HTML consist.
Answer: HTML has 6 headings from <h1> to <h6> and each heading has its own size, the size descended from <h1> to <h6>.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Question: How can we format the HTML text?
Answer: HTML provides us tags like <strong>, <em> <i> to format the text, so it could become more legible and provide a rich interface.
Question: Mention some new Form elements introduced in HTML5.
Answer: Web pages use forms to collect data from the user to the appropriate operations that can be performed at the back end. Though before HTML5, HTML use different kinds of forms elements like text field, password, drop-down menus, etc.
In HTML5 some new elements are introduced such as <datalist>, <keygen> and <output>
Question: Name the types of Web storage in HTML5.
Answer: HTML5 has two types of Web storage:
- Session storage: In session storage data store temporarily until the browser is closed. Once we closed the browser the data get lost
- Local Storage: In local storage data does not get deleted even the browser is closed, to delete the data we have to manually visit the browser setting.
Question: Give two advantages of HTML5 web storage.
- It has a storage of 10 MB which is more than what a cookie could have
- The storage data can be transferred through HTTP requests.
Question: Give a key difference between Semantic and Non-Semantic Elements:
- Semantic elements give a clear meaning to their content and only work on a specific flow. For example, <img> element as by its name itself this element is used to insert images in web pages and it gives a proper meaning.
- Non-Semantic elements in HTML does not give a proper meaning. For example, <spam> and <div>.
Question: Can we get the Geographical Position of a user using HTML?
Answer: Yes, HTML 5 provides us with a feature Geolocation API that can retrieve the location of a user.
Question: Can we apply a hyperlink to images?
Answer: Yes, a hyperlink can be applied to images.
Question: Mention the Hierarchy of applying a Style sheet to an HTML page.
- The inline sheet comes first.
- Embedded sheet.
- External Sheet.
Question: Can we show all characters using HTML?
Answer: No, it depends on the Operating system on which that browser is running.
Question: What is an image map?
Answer: In a single image, we can create different clickable areas and each area can refer to a different web page this method of mapping different web pages on a single image known as an image map.
Question: Is HTML a programming language?
Answer: No, it is not a programming language, though its code gets interpreted by our browser, code execution is not enough to be a programming language.
Question: How does the browser interpret the white space?
Answer: The browser does not consider white space when it is between two different tags, but it becomes a character when it used inside a tag.
Question: How can we create such links that scroll to the same page?
Answer: To scroll on the same page we use the # symbol along with the <a> tag. First, we assign a link using <a> tag and href attribute then again create a <a> tag having the same name.
<a href = ”#gothere” > Go There </a> <a name =”gothere”>
Question: Why do we use alternative text in image mapping?
Answer: In image mapping, the user can get easily confused with, which are links to which webpage so we provide an alternate text to each area so the user can figure out which area links to which page.
Question: Can we run old HTML files on a new browser?
Answer: Yes, but it could be possible some of the text won’t get executed, because of the new features.
Question: What happens if the user operating system does not support some HTML characters?
Answer: The user won’t be able to read the character because the operating system will show some random square or circle-like characters.
Question: Which two attributes a <li> tag consist of?
Answer: <li> tag has two attributes type and value. The type attribute used to change the type of numbering and the value attribute is used to change the number of indexing.
Question: What are bullets in HTML?
Answer: Bullets in HTML represented with an Unordered list. We can set the attribute of the unordered list to a disc, square, or circle.
Question: What is an empty HTML element?
Answer: An HTML element with no content or test associated with it is known as an empty HTML element for example <br>
Question: What are nested tables and how to create those?
Answer: When we create a table inside a table, we call it a nested table.
<table> <tr> <td> ‘’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’</td> <td>’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’’ <table> <tr> <td>’’’’’’’’’’’ </td> <td> ‘’’’’’’’’’’’’’’’’’’’’’</td> </tr> </table> </td> </tr> </table>
Question: How can we create multicolor text on a web page?
Answer: To create a multicolor text we have to change the color of each text for that we have to individually visit every text and change its color using <font color =” color”> text </font>.
Question: In HTML why do we have numeric as well as character values for different attributes?
Answer: In HTML we can use both ASCII values as well as name values for an attribute. Though ASCII values are sufficient for the attribute we require name values too because they are easy to remember.
Question: How can we insert a copyright symbol using an ASCII number?
Question: Can we change the color of the bullets?
Answer: Yes, but indirectly the color of the bullet depends upon the color of the list text, so in order to change the color of the bullet we need to change the color of the list text.
Question: What is a marquee?
Answer: In HTML, we use the <marquee> tag to display running text or images.
Question: How can we link a .css file in our HTML code?
Answer: To link a .css file in our HTML we use <link> tag and href attribute, the the link tag should be inside <head> tag.
<head> <link href="/css/style.css" type="text/css" rel="stylesheet" /> </head>
Question: What is Non-Breaking Space in HTML?
Answer: While writing any text in content if we add more than one space at once, the HTML remove all the extra spaces and keep only one of those, this removal of spaces problem can be solved with Non-Breaking Space (&NBSP;), to add more than one space we use
Question: What is the key difference between cell padding and cell spacing?
- Cell Padding refers to the gap between the text content and the cell border or wall
- Cell Spacing is a gap between two cells of the same table.
Question: What is CSS?
Answer: CSS stands for Cascading Style Sheet and it is used by HTML to style its black and white text. CSS provides an interactive interface to the HTML and plays a vital role while creating a web page.
Question: What happens if two tags overlap?
Answer: If two tags get overlap the tag which is written first will come under the HTML consideration and the content of the second tag adjust according to the first tag. This could cause many problems and you will not get satisfactory results.
Question: What is Applet?
Answer: The applet is a Java program that can be embedded into a web page, it includes some functionality on the webpage and provides a dynamic approach to the web pages. The Applet executes at the client-side and which means it can be easily run on the browser.
Question: What happens if there is no text in between a tag?
Answer: If there is no text only tag, so there is nothing to format and we would get nothing on the screen when we execute the HTML file on the browser.
Question: Can we link a single <a> with two different web pages?
Answer: No, when we create <a> tag it accepts only one href attribute.
Question: Comment on text field size.
Answer: The default size of a text field is 13 characters but it has an attribute name size that can alter the character size from 1 character to many characters. The maximum size of a character depends upon the browser width.
Question: What is the case when the text shows out of the browser?
Answer: When a text is inside a table with a fixed width, in this case, the text content of the table can be extended beyond the browser window.
Question: Write an HTML code that uses a picture as a background.
Answer: <body background = “image.gif”>
Question: What do you know about logical and physical tags in HTML?
Answer: There are two types of Character tags:
- Physical tags
- Logical tags
Physical Tags: Physical tags are used to display the physical characteristic of the text, for example, <b> tag is used to bold the text, and <i> tag is used to give an italic structure to the text. Physical tags used when we what to change the physical structure of the tags.
<i>, <b>, <u>, <sub>, <sup>, etc. are the examples of physical tags
Logical Tags: Logical tags are used to show the logical meaning of the text. However, they can also change the physical structure of the text but they generally used to show the logical meaning of the text. For example <em> is a logical tag that is similar to <i>, but it provides a logical meaning to the text.
How the logical tags change the structure of text also depends on the browser.
<strong>, <em>, <abbr>, <cite>, <dfn>, etc are teh examples of logical tags.
Question: What is the difference between HTML and XHTML?
|HTML is a markup language that is widely used to create web-pages||XHTML is a part of XML versions it is just a mirror and extended version of HTML, which can also be used to create web pages.|
|It is case insensitive, means <b> and <B> both are same.||It is case sensitives.|
|In HTML the display content should be residing in the body block.||In XHTML display content could be placed in any block|
|In HTML there are no restricted rules of how to structure the content.||In XHTML there are certain strict rules, to structure to content.|
Question: What do you know about HTML SVG?
Answer: It is an HTML tag, which acts as a container for vector graphics. It stands for Scalable Vector Graphics, and it is used to create graphics in XML format. Using the <SVG> we can create different graphic designs such as boxes, circles, text, and graphical images.
<svg width="200" height="200"> <rect width="200" height="200" style="fill:rgb(10,10,200);stroke-width:10;stroke:rgb(0,0,0)" /> </svg>
Question: How can we create buttons using HTML?
Answer: HTML provides us with a <button> tag which can create a clickable button on the web page. Buttons can also be used inside the form tags to create submit form icon.
Question: Is it possible that the content of the page will appear outside the browser display.
Answer: If we only use HTML then there some cases could arise when the content of the page does not fit on a single screen. For instance, if there is a table cell that has a large width, and the browser is not able to show the complete table on the browser. But now we have more responsive web pages which auto adjust the page content according to the user device screen and browser.
Question: List the tags which can be used to separate block of text.
Answer: There are various HTML tags which can separate two blocks of content or text.
- <p> </p>: Paragraph tags
- <div> </div>: division tags
- <hr> : Horozontal Line tag
- <br> : Break tags
Question: Create a link that redirects the user to send a mail to user xyz.@mail.com.
Answer: To create such links we can add the mailto command in the href attribute of <a> tag.
href="mailto : firstname.lastname@example.org">text to be clicked</
Question: What happens if multiple style definitions performed on a single tag?
Answer: Here the tag will follow the hierarchical precedence, and that style definition will be performed on the tag which is the closest. For instance, if there is a selector and inline style for a tag then the inline styling will take priority because it is closer to the tag.
Question: What happens if you open a .css file in the browser?
Answer: The bowser read the .css file as a text file and display the file code as it is written. The code will not execute, because to execute the code on the browser we need tags and the browser execute the code according to the respective tags.
Question: Why do we use <span> tag?
Answer: The span tag comes in very handy when we want to perform some inline operation on a specific text. However, it does not provide any specific visual and contextual changes, but it can be used to provide a class or Id name to the element.
<p>She has a <span style="color:blue">blue</span> pen</p>
Top HTML 5 Interview Questions and Answers
HTML 5 is the latest edition of HTML, it introduced in 2014 by W3C and brought many new tags and properties to build content-rich interactive web pages. Now companies hire only those developers who are updated with the latest versions of technologies. If you are going for a web-developer job interview then there is a high possibility that the interviewer would ask you questions from HTML 5.
Here we have provided the top HTML 5 interview questions which will definitely help you to crack your interview.
Questions: Name some objectives behind releasing HTML 5.
- To provide better syntax and tags so the structure of a page could be improved.
- Make HTML consistent for all the browsers.
- Make sure that the new version of HTML(HTML5) has backward compatibility with the old standard tags.
- Make it easy to handle errors in the structure.
Question: List the new features introduced in HTML5.
- It provides new tags for audio, graphic, and video content. <audio>,
- It comes with better error handling.
- Introduce new tags, to replace trivial scripting.
- Introduced new attributes such as <article>, <bdi>, <meter>, etc. for better document structure.
- Update the parsing rules.
Questions: List the most important technologies introduced in HTML5.
- Offline Application
- SVG(Scalable Vector Events)
- File and Geolocation API
- Web Intents
- Web Sockets
- Web storage, and workers.
Questions: What do you know about web workers?
Question: List all the content models introduced in HTML 5.
Answer: HTML 5 introduced 7 major Content models and all the elements are part of a block or inline content models.
Metadata: It set the presentation and behavior of the rest of the content.
<base>, <link>, <meta>, <title>, <style>.
Embedded: It imports the resources in the document.
<audio>, <video>, <canvas>, <iframe>,<img>,<math>, <svg>
Interactive: It includes elements of User Interfaces and interactions.
<a>, <audio>, <video>, <button>,<iframe>, <textarea>,...
Heading: Use to provide content header.
Phrasing: Provide inline elements which have backward compatibility with HTML4.
<span>, <strong>,<lable>,<br/>, <sub>..
Question: Name the HTML tag where we put the metadata.
Answer: metadata is always put at the head of the HTML document because it set the structure and behavior of the rest of the content so it should execute first.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>Its a paragraph</p> </body> </html>
Question: Explain <header> tag.
Answer: It is a block tag and used when we want to contain more than one heading tag in a single block.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <header> <h2> Main Heading</h2> <h3> Sub heading</h3> </header> </body> </html>
Question: Explain footer elements.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> All body content .... ... .. <footer> <a href="about.html"> About Us</a> <a href="tc.html"> Term and Conditions</a> </footer> </body> </html>
Question: Name the major HTML4 tags which are not supported in HTML5.
Question: Applet is not supported by HTML5 so what happens to that website that uses Applet tags?
Answer: However HTML5 does not support applet, still it is supported by HTML4, and mostly all the browsers are capable of parsing both HTML versions. So those web pages which are using applet will keep working till the web browser give support for HTML 4.
Questions: Can we have multiple Header and Footer tags on the same web page?
Answer: Yes, we can use multiple headers and footer tags on the web page. For each article, block, or section we can have headers and footers tags.
Question: Write an HTML code to embed audio on the web page.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <audio src ="music.mp3" controls> Not supported</audio> </body> </html>
The text “Not supported” will render if the browser is not able to identify the audio element.
Question: Write an HTML code that can embed multiple audio formats for single audio.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> </audio> </body> </html>
Here the browser will play that audio file in which format it supports and recognizes first.
Questions: What are the various major attributes of the <audio> tag?
Answer: We can use 3 major attributes with audio tag
Control: This attribute display the controls buttons for audio such as play, pause buttons.
autoplay: the autoplay attribute plays the audio automatically without the user’s permission as soon as it is loaded by the web browser.
loop: The attribute will automatically replay the audio once the audio is finished.
Question: Write the HTML code which displays a process bar with 50% complete loading.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <label>Process:</label> <progress value="50" max="100"></progress> </body> </html>
Question: What do you know about web storages introduced in HTML 5?
HTML web storage is more secure and faster than cookies, and they even have a larger size to store the user’s private data.
There are two types of HTML web storage.
- Session Storage
- Local Storage
The data of Session Storge get destroyed as soon as the user closes the browser.
The data stored in the Local Storage remain in the user browser until the user deletes it explicitly.
Question: Give some difference between canvas and svg
|It renders poor quality text.||It renders it’s all its elements with high quality|
|Highly used in graphical games.||Does not used in games because it renders slowly.|
<!DOCTYPE html> <html> <body> <svg width="400" height="100"> <rect width="400" height="100" /> Not supported </svg> </body> </html>
<!DOCTYPE html> <html> <body> <canvas width="100" height="200" style="border:2px solid #000000;"> Not Supported. </canvas> </body> </html>
Question: How can we optimize our website resources?
Answer: To optimize our website resources we can reduce the download size and number of concurrent requests made on our website. To perform these two operating we can use some distinct techniques such as:
- File Compression
- File concatenation
- Refining code
- CDN hosting
Question: What do you know about HTML5 Geolocation?
Answer: It is an API introduced in HTML5, which is capable of obtaining the user’s geographical location. However there are some privacy issues with this API, the API will work on the user browser only if the users give permission to “access the location”.
The location data retrieved by the geolocation API can be represented in two ways:
- Geodetic: It present user location in latitude and longitude
- Civic: It presents user location in a more human-readable format.
|Position||55.5, 17.9||New York|
|Elevation||20 meters||6th floor|
|Heading||300 degrees||Central Park|
Question: What do you know about Drag and Drop in HTML5?
Answer: Drag and Drop are the HTML5 APIs that allow the user to grab any object on the page, drag it and drop it to a different location.
The user is only able to drag those HTML elements which have the draggable attribute.
<img draggable ='true'/ src='img.png'>
The drag object of the page can only drop to some specific location where the ondragover event is specified.
Question: Write an HTML code to draw a red circle with a 100 unit radius.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <label>Circle:</label> <svg height ='2000' width ='2000'> <circle cx="120" cy="120" r="100" fill="red"/> </svg> </body> </html>
Question: Write an HTML code to print a blue color rectangle box of 400X200 units.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <label>Rectangle:</label> <svg height ='2000' width ='2000'> <rect width ="400" height="200 "fill="blue"/> </svg> </body> </html>
Question: Write an HTML code to draw a line between these two coordinates (20,50) and (200, 300).
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <svg height="210" width="500"> <line x1="20" y1="50" x2="200" y2="300" style="stroke:rgb(255,0,0); stroke-width:4" /> </svg> </svg> </body> </html>
Question: What do you know about <animate> tag?
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <svg height="210" width="500"> <rect width ="40" height="10" fill="red"/> <animate attributeName="y" from ="0" to="500" dur="3s" fill="freeze" repeatCount="3"/> </svg> </svg> </body> </html>
<animate> tags comes with 6 attributes:
attributeName: It specifies in which direction the animation will move.
from: It specifies the starting coordinates of the animation.
to: It specifies the endpoint of the animation.
due: It specifies how long the animation will run.
fill: It specifies the returns of value to its initial position.
repeatCount: It specifies how many times the animation will repeat.
The update in any language does not change the overall language syntax or replace all the old features; however, each upgrade can bring new features and can drop some old ones. This is a similar case with HTML5, in HTML 5 W3C which is responsible for standardizing and maintaining HTML, introduced some new features and dropped some obsolete elements and tags. Here in this article, we have tried to cover all the old and new HTML Interview questions which are frequently asked during the interviews.
Hope you like this article, if you have any suggestions, please let us know by commenting down below.
People are also reading:
- HTML Cheat Sheet
- Difference between HTML and HTML5
- Best Front End Development Interview Questions
- Best Angular Interview Questions
- Best Node.JS Frameworks
- Python Frameworks
- Infosys Interview Questions
- SSIS Interview Questions & Answers
- Top JQuery Interview Questions and Answers