Top 50 HTML Interview Questions and Answers in 2021

HTML, i.e., Hypertext Markup Language is a code used to structure a web page and its content. For example, the content can be structured within a set of paragraphs, using images and database tables, a list of points.

The markup tells the web browsers how to display the web page’s images and words. It is assisted by technologies like  Cascading Style Sheets (CSS) and scripting languages like JavaScript.

If you are searching for HTML Interview Questions and Answers, then you are on the right page. We have noted the most commonly asked HTML Interview Questions and Answers. Please go through our full article so that you will not miss any of the questions.

Table of Contents

Top HTML Interview Questions and Answers

1. What is HTML?

HTML, i.e., Hypertext Markup Language is a code used to structure a web page and its content. The markup tells the web browsers how to display the web page’s images and words. Technologies like  Cascading Style Sheets (CSS) and scripting languages like JavaScript assist the HTML.

2. Tell us some of the advantages of HTML5 over its earlier versions?

Some of the advantages of HTML5 over its earlier versions are listed below:

  1. Improved code: HTML5 will allow web designers to make use of cleaner, simplified code. It has removed the div tags and replaced them with semantic HTML5 elements.
  2. Elegant forms: It has allowed the designer to use fancier forms. There will be different types of inputs, searches, and different fields for different purposes.
  3. Consistency: As websites have to adopt the new HTML5 elements. We are going to see more consistency in terms of HTML that are used to code a web page on a site compared to the other site. Thus, it makes it easier for designers and web developers to understand web page creation.
  4.  Supports rich media elements: It has the inbuilt capability to play the audio and video where we can eliminate the use of plugins.
  5. Offline Application Cache: It loads the page the user has visited even if the user is temporarily unavailable.
See also  Top 100 Power BI Interview Questions and Answers in 2021

3. What are tags in HTML, and write the syntax for tags?

HTML tags are the keywords that define how a web browser will display the content. Using tags.

HTML tags consist of three main parts: 

  1. opening tag
  2.  content 
  3. closing tag.

But some HTML tags are unclosed tags.

An HTML file must have some important tags so that a web browser can differentiate between simple text and HTML text. You can make use of as many tags as you want as per the code requirement.

The HTML tags have few properties:

  1. All HTML tags must be enclosed within < > brackets.
  2. Every tag in HTML performs different tasks.
  3. If you have mentioned an open tag <tag>, then you must use the close tag </tag>

Syntax: <tag> content <tag>

4. How to embed audio and video to a webpage?

HTML allows creating of video and audio players that don’t require any plugins. To add video and audio to a webpage is as simple as adding an image or formatting text.

The approaches to include video and audio are:

  1. The <video> element allows us to include video files to HTML. That is similar to the way the images are added.

Few common video formats are WebM, Ogg, MP4.

  1. By using the <audio> element we can embed audio to HTML. We use the audio element to play an audio file on the web page like an mp3 file.

5. Explain Formatting in HTML?

HTML Formatting is a technique of formatting the given text for a better feel and look. HTML allows us to format the text without using CSS. There are various formatting tags in HTML. The formatting tags are mainly used to make text bold,  underlined, and italicized. These tags provide a visual appearance to the text.

HTML Interview Questions and Answers

6. Differentiate between HTML tags and elements and attributes?

TagsElementsAttributes
They are used to hold the HTML element.The element holds the content.They are used to describe the character of an HTML element in detail.
Tag usually starts with < and ends with >Whatever is written within an HTML tag is called HTML elements.They are found only in the starting tag.
They are like keywords, where each tag has a unique meaning.It specifies the overall general content.They specify different additional properties to the existing HTML element.

7. Is it necessary for the HTML tags to have an end tag?

The answer is No. All HTML tags don’t have an end tag. For example,  <br> tag is mainly used to break the line. It does not have an end tag. But, most of the tags have end tags.

8. What are Void elements?

A void element in HTML is an element whose content model will not allow it to have content under any situations. Void elements can be defined with attributes. The following mentioned  is a complete list of the void elements in HTML :

  1.  area 
  2. base 
  3. br 
  4.  col 
  5.  command 
  6. embed 
  7. hr 
  8.  Img
  9.  input 
  10.  keygen 
  11.  link 
  12.  meta 
  13. param 
  14. source 
  15. track 
  16. wbr

9. Name the types of headings in HTML?

The types of headings in HTML are listed below:

  1. <h1>Heading no. 1</h1>    
  2. <h2>Heading no. 2</h2>    
  3. <h3>Heading no. 3</h3>    
  4. <h4>Heading no. 4</h4>    
  5. <h5>Heading no. 5</h5>    
  6. <h6>Heading no. 6</h6> 

10. Differentiate between Inline and Block elements in HTML?

Inline ElementsBlock Elements
They don’t force a new line to begin in the document flow.This element always starts on a new line.
Some of the inline elements are:<a><abbr><acronym><audio><b><bdi><bdo><big><br><button>Some of the Block Eements are:<address><article><aside><blockquote><canvas><dd><dl><dt>
Example: <span>Hello World</span>Example: <div>Hello World</div>
It only takes up only the width that is necessary.It takes up the full width available.

HTML Interview Questions and Answers

11. What is a hyperlink in HTML?

When you click on a link in HTML, it jumps to another document known as a hyperlink. A link does not always need to be text. An HTML link can be an image or any  HTML element.

Syntax: <a href=”url“>link text</a>

12. Differentiate between between <strong>, <b> tags and <em>, <i> tags?

<b> indicate that you want to be rendered as bold.

<strong> indicates that you won’t identify the content as important.

<em> is used to emphasize the text.

<i>  is used to display the text in italic.

13. What is an HTML table tag? List the tags used for displaying the data in tabular form?

HTML table tag is mainly used to display data in tabular form, i.e., row * column

TagDescription
<table>This tag defines the table.
<th>It is used to define a header cell in a table.
<tr>It defines the table row.
<caption>It defines the caption of the table.
<td>It defines the cell in a table.
<tfooter>It groups the footer content in the table.
<tbody>It groups the body content.
<thead>It groups the header content in the table.
<col>It specifies the column properties.

14. Explain <figure> tag and <img> tag?

The image tag embeds the image in an HTML document.

The <figure> tag describes self-contained content, like diagrams, illustrations, photos, etc.

Figure tag is used to organize the content of an image in the HTML document.

See also  Top 60 Data Analyst Interview Questions and Answers in 2021

15. Name the lists that are used to design an HTML page?

We mainly use three list types, namely,

  1. Unsorted list: It is used to group related items in no particular order.
  2. Ordered list: It groups a set of related items in a particular order.
  3. Description list: It displays name or value pairs like definitions and terms.

HTML Interview Questions and Answers

16. Explain <head> and <body> tag in HTML?

The <head> element of thr HTML is a container for metadata i.e, data about data and is placed inbetween the <html> tag and the <body> tag.

The <body> tag usually defines the document’s body. The <body> element consists of all the contents of an HTML document, like headings, images, paragraphs,  hyperlinks, t lists, tables, etc. Note:

 We can have only one <body> element in any HTML document.

Example:

<html>
<head>
  <title>Title of the document</title>
</head>
<body>
  <h1> heading</h1>
  <p>  paragraph.</p>
</body>
</html>

17. Explain the concept of an image map?

The HTML <map> tag is mainly used to define an image map. An image map can be defined as an image with clickable areas. The areas are defined with one or multiple <area> tags.

18. Difference between <datalist> tag and <select> tag?

The <datalist> element in HTML specifies a set of pre-defined options for the <input> element. It is used to provide quick choices for the input field, such as the “autocomplete” feature. It reduces errors because the user is less likely to make spelling mistakes.

The <select> element is mainly used to create a drop-down list. The <select> element is the most used element in a form to collect the user input. 

19. Which tag in HTML is used to create a nested webpage?

<iframe>tag of the HTML is used to create a nested webpage.

Example:

<iframe src="https://www.xyz.com" title="HTML interview questions and answers"></iframe>

20. Explain HTML entities?

An HTML entity can be defined as a piece of text that begins with the ampersand ( & ) and ends with the semicolon ( ; ). Entities are used to display reserved characters (HTML code) and invisible characters such as non-breaking spaces.

Entity NameDescription
&nbspNon-breaking space
&ltLess than
&gtGreater than
&ampampersand
&copycopyright
&euroeuro
&regRegistered trademark

HTML Interview Questions and Answers

21. Explain the style sheet in HTML?

Cascading Style Sheets called CSS provides an easy and effective alternative to describe different attributes for the HTML tags. Using CSS, one can specify the number of style properties for any given HTML element. Each of the properties has a name and a value that are separated by a colon (:).

22. How to keep the list elements straight in an HTML file?

By using indents, one can keep elements straight in an HTML file.

23. Explain the term attribute w.r.t HTML?

HTML attributes are defined as the modifier of an HTML element type. An attribute either alters the default functionality of an element type or provides functionality to specific element types that are not able to function correctly without them. In HTML syntax,  the attribute is added to the HTML start tag.

24. How do we use comments in HTML?

HTML comments are not usually displayed in the browser, but they help document your HTML source code.

Syntax:

<!-- Write your comments here →

25. How to create multi-colored text on the web page?

You can use <font color =”color”> </font> to create a multicolor text on a web page.

HTML Interview Questions and Answers

26. How do you create a Hyperlink in HTML?

To create a hyperlink, the HTML provides the anchor tag that can link one page to the other page. These tags appear in the following ways mentioned below:

  1. Unvisited link – It is displayed, underlined, and blue.
  2. Active link – It is displayed, underlined, and red.
  3. Visited link – It is displayed, underlined, and purple.

27. How to change the color of the bullet?

To change the color of the bullet, you have to change the color of the text.

28. What is metadata in HTML?

The <meta> tag is used to define the  metadata about an HTML document. Metadata is data or information about data. Metadata is not usually displayed on the page, but it is machine parsable. Metadata is mainly used by browsers, search engines, and other web services.

Metadata basically defines the document title, styles, scripts, character set, and other meta information.

Example:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Interview">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="xyz">
  <meta name="Interview" content="width=device-width, initial-scale=1.0">
</head>

29. What is a Marquee? 

The <marquee> element of the HTML is used to insert a scrolling area into your text. It helps to control what happens when the text reaches the edges of its content area using its attributes.

Marquee

30. Can you explain the HTML layout?

HTML Interview Questions - Layout

 HTML layouts help us to arrange web pages in a well-structured,  well-mannered way.  The HTML layout specifies the way in which the web pages are arranged. 

  1. <header> – It defines a header for a document or a section.
  2. <nav> – This defines a set of navigation links.
  3. <section> – It defines a section in a document.
  4. <article> – This defines an independent, self-contained content.
  5. <aside> – It defines content aside from the content.
  6. <footer> – This defines a footer for a document or a section
  7. <details> – It is used to define  additional details that the user can open and close them on demand
  8. <summary> -It defines a heading for the <detail> element
See also  Top 50 ETL Interview Questions and Answers in 2021

HTML Interview Questions and Answers

31. What are empty elements in HTML?

Some elements in HTML  are called empty or void, and they only have a start tag because they cannot have any content. They should not have an end tag in HTML. 

A few of the void elements in the HTML area,  br,  hr, img, input,  meta, and param.

32. Write an HTML code to create a new element?

<script>
document.createElement(“sample element”)
</script>

33. Code to make a picture of a background image of a web page?

<body background = “image.gif”>  

34. What is the use of using alternative texts in images?

The alt attribute specifies the alternate text for an image if the image can’t be displayed. The alt attribute mainly provides alternative information for an image if a user is not able to view it because of a slow connection or an error in the src attribute.

35. Why do we use span tag?

We use span tag to add color to text, highlight the color, to add background on text.

HTML Interview Questions and Answers

36. What Is the <!DOCTYPE html>?

A document type declaration, also called DOCTYPE, is an instruction that is associated with a specific XML or SGML document with a DTD(document type definition)

37. Why is URL encoded in HTML?

URL encoding usually converts the non-ASCII characters to a format that is transmitted over the Internet. URL encoding replaces the non-ASCII characters with the “%” followed by the hexadecimal digits.

38. Explain the advantages of collapsing white space?

White spaces are a blank sequence of space characters in HTML, which is basically treated as a single space character. Since the browser collapses multiple spaces into one single space, We can indent the lines of a text without worrying about multiple spaces. This allows us to organize the HTML code into a more readable format.

39. Differentiate between LocalStorage and SessionStorage Objects in HTML?

Local Storage ObjectsSession Storage Objects
The data here doesn’t expire.The data here is cleared when the session page ends.
It will not delete the data when the browser window closes.It deletes the data when the browser window closes.
The data can be shared with multiple windows of the browser.The data is accessible only in the current window of the browser.

40.  What is SVG in HTML?

SVG means scalable vector graphics. It is a file format that allows us to display vector images on our websites. This means that we can scale an SVG image up and down without losing its quality.

41. What will happen if you open the external CSS file in a browser?

When you try to open the external CSS file in your browser, the browser will not open the file because the file has a different extension. The only way we can use an external CSS file is to reference it using a tag inside another HTML document.

42. Differentiate between active links and normal links?

Active LinksNormal Links
The active link is a line of code that contains a pointer to another resource.The active link is that line of code in action that is opening another resource.

43. Is there any advantage of grouping several checkboxes together?

Though the checkboxes don’t affect each other, the grouping of the checkboxes helps to organize them. Checkbox buttons have their own name, and they do not need to belong to any group. A single web page can have many various groups of checkboxes.

44. Name the media types and formats supported by HTML?

HTML supports a huge range of media formats for music, sound, videos, animations, and movies. A few of the extensions supported by media format are:

  1. Images– png, jpg, jpeg, gif, png, SVG, BMP, BMP icons
  2. Audio– MIDI, WMA, AAC, Ogg, MP3, MP4, RealAudio, WAV.
  3. Video– AVI, WMV, QuickTime, Flash, Ogg, WebM, MPEG-4, MPEG, RealVideo

45. Can you tell us how many types of CSS can be included in HTML?

We have three ways to include CSS into HTML:

  1. Inline CSS: It is used to style small contexts. To use the inline styles, you have to add the style attribute in the related tag.
  2. External Style Sheet: It is used when the style is applied to different pages. Each of the pages has to link to the style sheets using the <link> tag.
  3. Internal Style Sheet: It is mainly used when a single document has a unique style. Internal styles sheet has to be in the head section of an HTML page by using the <style> tag.

46. Differentiate between HTML and XHTML?

HTMLXHTML
HyperText Markup LanguageExtensible HyperText Markup Language
Versions: HTML2, HTML3.2, HTML 4.0, HTML5.XHTML1, XHTML 1.1, XHTML 2, XHTML 5
Type of format: Documnet File fomat.Markup language
Type: Text ot HTMLApplication or HTML+XML

47. Explain HTML logical and Physical tags?

Logical tags in HTML are used to display the text according to the logical styles.

Physical tags tell the browser how to display the text that is enclosed in the physical tag. Some  examples of physical tags are <b>, <big>, <i>.

48. Explain how to apply JavaScript to a web page?

Step 1: Create a JavaScript file

In the project, in the same folder as the index.html page, You have to create a new file named my-project.js. All of the project’s JavaScript code will be written in .js files.

Step2: Add some sample test code to the file

In the new file my-project.js, add the code given below:

console.log('ISample works!');

This code will show the message “ISample works!” in the browser’s developer output window.

Step3: Add the file to your web page

In your index.html file, add the script tag to load the new JavaScript. The script tag should be the last line of the code before the closing body tag.

This is the line you need you have to add:

<script src="my-project.js"></script>

Step 3: Save your files

Make sure to save all your files, especially the new my-project.js and the changes to index.html.

Step 4: Open the web page in Google Chrome

In the normal operating system’s folder browser, find the index.html file. Then right-click on the file and then select “Open with Google Chrome.”

Step 6: Open the Developer Console

In Chrome, click on the options menu that is at the top right. Go to More Tools and click on Developer Tools. Click on the tab named Console, and you should see the message “Sample works!”If you didn’t t see the message, you have to double-check the steps correctly.

49. Differentiate Cell Spacing and Cell Padding in HTML?

Cell SpacingCell Padding
It mainly specifies the space between the border of the table cell and its contents.It mainly specifies the space between adjacent cells.
It is created by using the HTML <table> tag where the type attribute is set to cell padding.It is created by using the HTML <table> tag where the type attribute is set to cell spacing.
It is meant for a single cell.It is for more than one cell.
The default cell padding value is 1 The default cell spacing value is 2

50. What do you know about semantic HTML?

Semantic HTML is a coding style that makes use of HTML markup to support the semantics or meaning of the given content.

Best of luck with your HTML interview, and  I hope our HTML Interview Questions and Answers were of some help to you. You can also check our other blogs like Cybersecurity Interview Questions and Answers which might be of some help to you.

Recommended Articles