Top 50 HTML & HTML5 Interview Questions

Top 50 HTML & HTML5 Interview Questions: Here are the top interview questions of HTML & HTML5. Be prepared for the interview. You can download the entire questions in a pdf format. so guys All the best for your interview.

1) What is HTML?

HTML stands for Hyper Text Markup Language. It is a language of the World Wide Web. It is a standard text formatting language which is used to create and display pages on the Web. It makes the text more interactive and dynamic. It can turn text into images, tables, links.


2) What are Tags?

HTML tags are composed of three things: an opening tag, content and ending tag. Some tags are unclosed tags.

HTML documents contain two things:

  • content, and
  • tags

When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

Syntax

  1. <tag> content </tag>  

Content is placed between tags to display data on the web page.


3) Do all HTML tags have an end tag?

No. There are some HTML tags that don’t need a closing tag. For example: <image> tag, <br> tag.


4) What is formatting in HTML?

The HTML formatting is a process of format the text for a better look and feel. It uses different tags to make text bold, italicized, underlined.

You might like: Top 32 Selenium Interview Questions and Answers with PDF Download in 2019


5) How many types of heading does an HTML contain?

The HTML contains six types of headings which are defined with the <h1> to <h6> tags. Each type of heading tag displays different text size from another. So, <h1> is the largest heading tag and <h6> is the smallest one. For 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>     

6) Do all character entities display properly on all systems?

Top 50 HTML & HTML5 Interview Questions No, there are some character entities that cannot be displayed when the operating system that the browser is running on does not support the characters. When that happens, these characters are displayed as boxes.

7) What is an image map?

Image map lets you link to many different web pages using a single image. You can define shapes in images that you want to make part of an image mapping.

8) What is the advantage of collapsing white space?

White spaces are a blank sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the HTML code into a much more readable format.

9) Can attribute values be set to anything or are there specific values that they accept?

Some attribute values can be set to only predefined values. Other attributes can accept any numerical value that represents the number of pixels for a size.

10) How do you insert a copyright symbol on a browser page?

To insert the copyright symbol, you need to type © or & #169; in an HTML file.

11) How can we comment in HTML?

Top 50 HTML & HTML5 Interview Questions Comments are used by developers to keep a track of the code functionality and also help the other developers in understanding the code functionalities easily.

The commented out lines will not be shown in the browser. To comment a line, the line should start by this <!– and end by this –>. Comments can be of one line or of multiple lines.

For Example:

<!-- This is one line comment ?
<!-- This is multiple
        line of two or
        more line -->

12) What are inline elements and block-level elements in HTML?

Block elements are the blocks that take the full available width and always start from a new line. It will stretch itself to the full available width of the available container width. Block level elements are <div>, <p>, <img>, <section> and many more.

Inline elements are the elements that will only take the width that is required to fit into the container.

For Example, take the flow of text on the page. When the line of the text takes the full width of the container it wraps itself into a new line and again goes in the same way.

Whereas the inline element will take only that much space or width that it is needed for them. Inline elements are <span>, <label>, <a>, <b> and many more.

13) Can we change inline elements into block-level elements?

Yes, we can change inline elements into block-level elements by adding display equal to block in its CSS tag. Writing it will change the inline elements into block elements and then inline elements will also take the full width of the container.

display: block;

14) What are the different browsers that support HTML5?

All modern browsers support HTML5 elements except some old browsers. But fortunately, most of the browsers will take html5 elements as inline elements.

15) What are <br> tags in HTML?

<br> tags are used to enter a new line into the HTML contents. These tags are generally used to separate two different lines of text between each other.

16) What is a style sheet?

A style sheet is used to build a consistent, transportable, and well-designed style template. You can add these templates on several different web pages. It describes the look and formatting of a document written in markup language.


17) Can you create a multi-colored text on a web page?

Yes. To create a multicolor text on a web page you can use <font color =”color”> </font> for the specific texts you want to color.


18) Is it possible to change the color of the bullet?

The color of the bullet is always the color of the first text of the list. So, if you want to change the color of the bullet, you must change the color of the text.


19) Explain the layout of HTML?

HTML layout specifies a way in which the web page is arranged.

Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a webpage.

  • <header>: It is used to define a header for a document or a section.
  • <nav>: It is used to define a container for navigation links
  • <section>: It is used to define a section in a document
  • <article>: It is used to define an independent, self-contained article
  • <aside>: It is used to define content aside from the content (like a sidebar)
  • <footer>: It is used to define a footer for a document or a section

20) What is a marquee?

Marquee is used to put the scrolling text on a web page. It scrolls the image or text up, down, left or right automatically. You should put the text which you want to scroll within the <marquee>……</marquee> tag.

21) How do you create multicolored text in a webpage?

To create text with different colors, use the <font color=”color”>…</font> tags for every character that you want to apply color. You can use this tag combination as many times as needed, surrounding a single character or an entire word.

22) Why are there both numerical and named character entity values?

Top 50 HTML & HTML5 Interview Questions The numerical values are taken from the ASCII values for the various characters, but these can be difficult to remember. Because of this, named character entity values were created to make it easier for web page designers to use.

23) Write an HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50

<table> 
<tr> 
<td>50 pcs</td> 
<td>100</td> <td>500</td> 
</tr>
<tr> 
<td>10 pcs</td> <td>5</td> <td>50</td> 
</tr> 
</table> 

24) What is the advantage of grouping several checkboxes together?

Although checkboxes don’t affect one another, grouping checkboxes together help to organize them. Checkbox buttons can have their name and do not need to belong to a group. A single web page can have many different groups of checkboxes.

25) What will happen if you overlap sets of tags?

If two sets of HTML tags are overlapped, only the first tag will be recognized. You will find this problem when the text does not display properly on the browser screen.

26) What is Web Workers?

Web Workers is a code of JavaScript which runs in the background threads without disturbing the performance of the page. It is used for computing-heavy tasks like an access database or function.

27) What is the SVG element?

SVG is a followed XML format; it stands for Scalable Vector Graphics which is used to create vector graphics with the support for interactivity and animation.

SVG is resolution independent as it’s not losing its quality when they are resized or zoomed.

28) Explain about Canvas.

Canvas is a pixel-based graphics and it is one of the new features of HTML5.

It provides a space in the document where we can draw graphics by using JavaScript and it is resolution dependent, hence the quality will be affected when it’s zoomed or resized.

Example:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3; color: #c9cc18;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var can = document.getElementById("myCanvas");
var canvas = can.getContext("2d");
canvas.font = "20px Hind-sanserif";
canvas.fillText("Canvas Example",30,60);
</script>

</body>
</html>

29) Explain new form elements in HTML5.

The new form elements that were added into HTML5 are:

  • Datalist – It’s used as a list of options for input control.
  • Keygen – This tag defines a key-pair generator (Private/Public) field.
  • Output – It’s used to show the result of a calculation.

30) What is Quirks mode in HTML5?

Top 50 HTML & HTML5 Interview Questions If we do not include the <!DOCTYPE> element in our HTML page or Document, it will go to Quirks Mode. In this mode, the HTML element depends on the browser.

Hence the content will be displayed according to the browser.

31) What are the different new form element types in HTML 5?

Following is a list of 10 frequently used new elements in HTML 5:

  • Color
  • Date
  • Datetime-local
  • Email
  • Time
  • Url
  • Range
  • Telephone
  • Number
  • Search

32) Is there any need to change the web browsers to support HTML5?

No. Almost all browsers (updated versions) support HTML 5. For example Chrome, Firefox, Opera, Safari, IE.


33) Which type of video formats are supported by HTML5?

HTML 5 supports three types of video format:

  • mp4
  • WebM
  • Ogg

34) Is audio tag supported in HTML 5?

Yes. It is used to add sound or music files on the web page. There are three supported file formats for HTML 5 audio tag.

  1. mp3
  2. WAV
  3. Ogg

Let’s see the code to play mp3 file using HTML audio tag.

 <audio controls>    
   <source src="faded.mp3" type="audio/mpeg">    
 Your browser does not support the html audio tag.    
 </audio>     

35) What is the difference between progress and meter tag?

Top 50 HTML & HTML5 Interview Questions The progress tag is used to represent the progress of the task only while the meter tag is used to measure data within a given range.

36) What is the relationship between the border and rule attributes?

Default cell borders, with a thickness of 1 pixel, are automatically added between cells if the border attribute is set to a nonzero value. Likewise, If the border attribute is not included, a default 1-pixel border appears if the rules attribute is added to the <table> tag.

37) What is a marquee?

A marquee allows you to put a scrolling text in a web page. To do this, place whatever text you want to appear scrolling within the <marquee> and </marquee> tags.

38) How do you create text on a webpage that will allow you to send an email when clicked?

To change text into a clickable link to send email, use the mailto command within the href tag. The format is as follows:

1<A HREF=”mailto:youremailaddress”>text to be clicked</A>

39) Are <br> tags the only way to separate sections of text?

No. The <br> tag is only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text.

40) Are there instances where the text will appear outside of the browser?

By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window.

41) How are tags migrated from HTML4 to HTML5?

No.Typical HTML4Typical HTML5
1)<div id=”header”><header>
2)<div id=”menu”><nav>
3)<div id=”content”><section>
4)<div id=”post”><article>
5)<div id=”footer”><footer>

Header and Footer Example

HTML 4 Header and Footer:

 <div id="header">  
  <h1>Monday Times</h1>  
</div>  
.  
.  
.  
<div id="footer">  
  <p>© JavaTpoint. All rights reserved.</p>  
</div>   

HTML 5 Header and Footer:

 <header>  
  <h1>Monday Times</h1>  
</header>  
.  
.  
.  
<footer>  
  <p>© JavaTpoint. All rights reserved.</p>  
</footer>   

Menu Example

HTML 4 Menu:

 <div id="menu">  
  <ul>  
    <li>News</li>  
    <li>Sports</li>  
    <li>Weather</li>  
  </ul>  
</div>   

HTML 5 Menu: 

 <nav>  
  <ul>  
    <li>News</li>  
    <li>Sports</li>  
    <li>Weather</li>  
  </ul>  
</nav>  

42) If I do not put <!DOCTYPE html> will HTML 5 work?

No, the browser will not be able to identify that it is an HTML document and HTML 5 tags do not function properly.


43) What is the use of the required attribute in HTML5?

Top 50 HTML & HTML5 Interview Questions It forces a user to fill text on the text field or text area before submitting the form. It is used for form validation.

Example:

 Name: <input type="text" name="name" required>   

44) What are the new <input> types for form validation in HTML5?

The new input types for form validation are email, URL, number, tel, and date.

Example:

 <input type="email">   

45) Can several selectors with class names be grouped together?

You can define several selectors with the same style definition by separating them with commas. This same technique also works for selectors with class names.

46) What happens if you open the external CSS file in a browser?

When you try to open the external CSS file in a browser, the browser cannot open the file, because the file has a different extension. The only way to use an external CSS file is to reference it using <link/> tag within another HTML document.

47) How do you make a picture into a background image of a web page?

Top 50 HTML & HTML5 Interview Questions To do this, place a tag code after the </head> tag as follows:

1<body background = “image.gif”>

Replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page.

48) What happens if the list-style-type property is used on a non-list element like a paragraph?

If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and do not affect the paragraph.

49) When is it appropriate to use frames?

Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.

50) What happens if the number of values in the rows or cols attribute doesn’t add up to 100 percent?

The browser sizes the frames relative to the total sum of the values. If the cols attribute is set to 100%, 200% the browser displays two vertical frames with the second being twice as big as the first.