HtmlCssMonk

50 Most Important HTML Interview Questions And Answers

By – HtmlCssMonk

List of Most Popular HTML Interview Questions For Freshers and Experienced Professionals:

In this tutorial, we have covered HTML interview questions which include both the basic as well as advanced portions of HTML which are helpful for freshers as well as experienced candidates.

HTML is a very basic language from which we begin our work on Web development. Very strong knowledge of HTML is highly recommended to crack the interviews for any web development posts. I hope this informative tutorial would help you much to clear the interviews successfully at the first attempt.

Also Try-Test your Skills with Amazing Quizzes.

Let’s get started.

1- What is HTML?

HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. HTML 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 (Content is placed between tags to display data on the web page.)
  • 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 :

<tag> content </tag>  

3- What are Attributes and how do you use them?

Each tag has additional attributes that change the way the tag behaves or is displayed. For example, a <input> tag has a type attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options.
Attributes are specified directly after the name of the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags. But, they can never be in closing tags.

Example:

<!-- Text field -->
<input type="text" />
<!-- Checkbox -->
<input type="checkbox" />
<!-- Radio button -->
<input type="radio" value="on" />

4- When are comments used in HTML?

To understand the code easily, you can add code comments to your HTML document. These are not displayed in the browser, but they help you in leaving notes for yourself and other developers as to what a section of HTML is for. The start of the comment is denoted by <!– and the end is marked by — >. Anything in the middle will be completely ignored, even if it contains valid HTML.

<!-- This is a comment! -->
<!-- Comments can span multiple lines too -->
<!-- This part is ignored in the browser -->

5- What is the difference between a block-level element and an inline element?

BlockInline
A block-level element is drawn as a block that stretches to fill the full width available to it i.e, the width of its container and will always start on a new line.
Elements that are block-level by default: <div>, <img>, <section>, <form>, <nav>.
Inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page.
Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.

6- Do all HTML tags have an end tag?

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

7- What is Anchor tag and how can you open an URL into a new tab when clicked?

Anchor tag in HTML is used to link between two sections or two different web pages or website templates.

To open an URL into a new tab in the browser upon a click, we need to add target attribute equal to _blank.

<a href=”#” target=”_blank”></a>

8- How to create a Hyperlink in HTML?

The HTML provides an anchor tag to create a hyperlink that links one page to another page. These tags can appear in any of the following ways:

  • Unvisited link – It is displayed, underlined and blue.
  • Visited link – It is displayed, underlined and purple.
  • Active link – It is displayed, underlined and red.

The syntax of Hyperlink in HTML is:

<a href = "..........."> Link Text </a

9- Name some common lists that are used when designing a page.

There are many common lists used for design a page. You can choose any or a combination of the following list types:

  • Ordered list – The ordered list displays elements in a numbered format. It is represented by <ol> tag.
  • Unordered list – The unordered list displays elements in a bulleted format. It is represented by <ul> tag.
  • Definition list – The definition list displays elements in definition form like in a dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

10- What is an image map?

An image map is used for linking many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to include as part of an image mapping.

11- What is the difference between HTML elements and tags?

HTML elements communicate to the browser to render text. When the elements are enclosed by brackets <>, they form HTML tags. Most of the time, tags come in a pair and surround content.

12- What is the use of alternative text in image mapping?

When you use image maps, it can easily become confusing and difficult to determine which hotspots correspond to which links. Using alternative text lets, you put a descriptive text on each hotspot link.

13- Write the basic structure of the HTML template?

The basic structure of the HTML template is:

<html>
<head>
<title></title>
</head>
<body>
</body></html>

14- What is HTML5?

HTML5 is the latest or updated version of the markup language that defines HTML.

15- What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.

16- Does a hyperlink apply to text only?

No, hyperlinks can be used in the text as well as images. That means you can convert an image into a link that will allow users to link to another page when clicked. Surround the image within the <a href=” “>…</a> tag combinations.

17- What is the difference between DIV and SPAN in HTML?

The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line,such as inside a paragraph. Whereas, a div or division element is block-line which is equivalent to having a line-break before and after it and used to group larger chunks of code.

18- 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;

19- How to insert a copyright symbol on a browser page?

You can insert a copyright symbol by using &copy; or &#169; in an HTML file.

20- 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.

21- Is the <!DOCTYPE html> tag considered as a HTML tag?

No, the <!DOCTYPE html> declaration is not an HTML tag.

There are many type of HTML, such as, HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to instruct the web browser about the HTML page.

22- What is the use of an iframe tag?

An iframe is used to display a web page within a web page.

<iframe src="URL"></iframe>  

23- Why Meta tags are used in HTML?

Meta tags in HTML are used by the developer to tell the browser about the page description, author of the template, character set, keywords and many more.

Meta tags are used for search engine optimization to tell the search engine about the page contents.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<meta name="description" content="HTML interview questions">
<meta name="author" content="Author Name">
<meta name="copyright" content="All Rights Reserved">

24- How do you keep list elements straight in an HTML file?

You can keep the list elements straight by using indents.

25- 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.

26- Why is a URL encoded in HTML?

An URL is encoded to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters are replaced with a “%” followed by hexadecimal digits.

27- What are the entities in HTML?

The HTML character entities are used as a replacement for reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities. These characters are replaced because some characters are reserved in HTML.

28- 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>    

29- How many tags can be used to separate a section of texts?

Three tags are used to separate the texts.

  • <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> contains the text in the form of a new paragraph.
  • <blockquote> tag – It is used to define a large quoted section. If you have a large quotation, then put the entire text within <blockquote>………….</blockquote> tag.

30- What are empty elements?

HTML elements with no content are called empty elements. For example: <br>, <hr> etc.

31- Differentiate between HTML and XHTML.

The differences between HTML and XHTML are:

  • HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible Markup Language.
  • A static webpage is an HTML web page and dynamic web pages are XHTML.
  • XHTML are more stricter than HTML.
  • An XML application of HTML is defined as XHTML.
  • All modern browsers support XHTML.

32- 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 does not lose its quality when they are resized or zoomed.

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

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

34- How to make a picture of a background image of a web page?

To make a picture a background image on a web page, you should put the following tag code after the </head> tag.

<body background = "image.gif">

35- What is the use of a span tag? Give one example.

The span tag is used for following things:

  • For adding color on text
  • For adding background on text
  • Highlight any color text

Example:

<p>  
<span style="color:#ffffff;">  
In this page we use span.  
</span>  
</p>  

36- 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

37- What is Quirks mode in HTML5?

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.

38- 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.

39- 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.

40- Which type of video formats are supported by HTML5?

HTML 5 supports three types of video format:

  • mp4
  • WebM
  • Ogg

41- 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.

42- What is the use of figcaption tag in HTML 5?

The <figcaption> element is used to provide a caption to an image. It is an optional tag and can appear before or after the content within the <figure> tag.

<figure>    
  <img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>    
<figcaption>Fig.1.1 - A front view of the great Taj Mahal in Agra.</figcaption>    
</figure>    

43- What is the use of details and summary tag?

The details tag is used to specify some additional details on the web page. It can be viewed or hidden on demand. The summary tag is used with details tag.

44- What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within the HTML form on the web page. It is generally used to create a “submit” or “reset” button. Let’s see the code to display the button.

<button name="button" type="button">Click Here</button>    

45- What happens if there is no text between the tags? Does this affect the display of the HTML file?

If there is no text present between the tags, there is nothing to format. Therefore, no formatting will appear. Some tags, such as the tags without a closing tag like the <img> tag, do not require any text between them.

46- What is Cell Spacing and Cell Padding?

Cell Spacing is referred to as the space or gap between the two cells of the same table. Whereas, Cell Padding is referred to as the gap or space between the content of the cell and cell wall or cell border.

<table border cellspacing=3>
<table border cellpadding=3>
<table border cellspacing=3 cellpadding=3>

47- How many types of CSS can be included in HTML?

There are three ways to include the CSS with HTML:

  • Inline CSS: It is used for styling small contexts. To use inline styles add the style attribute in the relevant tag.
  • External Style Sheet: This is used when the style is applied to many pages. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
  • Internal Style Sheet: It is used when a single document has a unique style. Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag in the following way:

48- What are logical and physical tags in HTML?

Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is <strong> </strong> tag. When we enclose the text in the strong tag, it tells the browser that enclosed text is more important than other texts.

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

49- 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.

50- 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.


With this, we have come to the end of HTML interview questions blog. I Hope these HTML Interview Questions will help you in your interviews. In case you have attended any such interview in the recent past, do paste those interview questions in the comments section and we’ll answer them. You can also comment below if you have any questions in your mind, which you might face in your Web Development interview.


Start learning HTMLCSS and JavaScript.

Test your skills with Amazing Quizzes.

Also Read :

Leave a Comment

Your email address will not be published. Required fields are marked *