Top 30 HTML Interview Questions & Answers in 2022

HTML Interview Questions

1. What is HTML?

HTML stands for HyperText Markup Language and is the language of the internet. It is the standard text formatting language used for creating and displaying pages on the Internet

HTML documents are made up of the elements and the tags that format it for proper display on pages.

2. What are HTML tags?

We use HTML tags for placing the elements in the proper and appropriate format. Tags use the symbols <, and > to set them apart from the HTML content.

The HTML tags need not be closed always. For example, in the case of images, the closing tags are not required as <img> tag.

3. What are HTML Attributes?

Attributes are the properties that can be added to an HTML tag. These attributes change the way the tag behaves or is displayed. For example, a <img> tag has an src attribute, which you use to add the source from which the image should be displayed.

We add attributes right after the name of the HTML tag, inside the brackets. We can only add the attributes to opening or self-closing tags, but never be in closing tags.

4. What is a marquee in HTML?

Marquee is used for scrolling text on a web page. It scrolls the image or text up, down, left, or right automatically. To apply for a marquee, you have to use </marquee> tags.

5. How do you separate a section of texts in HTML?

We separate a section of texts in HTML using the below tags:

<br> tag – It is used to separate the line of text. It breaks the current line and shifts the flow of the text to a new line.
<p> tag–This tag is used to write a paragraph of text.
<blockquote> tag–This tag is used to define large quoted sections.

6. Define the list types in HTML?

The list types in HTML are as below:

Ordered list–The ordered list uses <ol> tag and displays elements in a numbered format.
Unordered list–The unordered list uses <ul> tag and displays elements in a bulleted format.
Definition list–The definition list uses <dl>, <dt>, <dd> tags and displays elements in definition form like in a dictionary.

7. How do you align list elements in an HTML file?

We can align the list elements in an HTML file by using indents. If you indent each nested list in further than the parent list, you can easily align and determine the various lists and the elements that it contains.

8. Differentiate between an Ordered list and an Unordered list?

An unordered list uses <ul> </ul> tags and each element of the list is written between <li> </li> tags. The list items are displayed as bullets rather than numbers.

An ordered list uses <ol> </ol> tags and each element of the list is written between <li> </li> tags. The list items are displayed as numbers rather than bullet points.

<!DOCTYPE html>

<html>

<body>

<h2>HTML List Example</h2>

<ul>

<li>Coffee</li>

</ul>

<ol>

<li>Coffee</li>

</ol>

</body>

</html>

html-list-example-23.

9. How do you display a table in an HTML webpage?

The HTML <table> tag is used to display data in a tabular format. It is also used to manage the layout of the page, for example, header section, navigation bar, body content, footer section. Given below are the list of HTML tags used for displaying a table in an HTML webpage:

Tag	Description
<table>	It defines a table.
<tr>	It defines a row in a table.
<th>	It defines a header cell in a table.
<td>	It defines a cell in a table.
<caption>	It defines the table caption.
<colgroup>	It specifies a group of one or more columns in a table for formatting.
<col>	It is used with <colgroup> element to specify column properties for each column.
<tbody>	It is used to group the body content in a table.
<thead>	It is used to group the header content in a table.
<tfooter>	It is used to group the footer content in a table.

10. How would you display the given table on an HTML webpage?

5 pcs	10	5
1 pcs	50	5

The HTML Code for the problem depicted above is:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

11. How do we insert a comment in HTML?

We can insert a comment in HTML by beginning with a lesser than sign and ending with a greater than sign. For example, “<!-“ and “->.”

12. How do you insert a copyright symbol in HTML?

You can insert a copyright symbol by using © or © in an HTML file.

13. What is white space in HTML?

An empty sequence of space characters is called the white space in HTML. This white space is considered as a single space character in the HTML.

White space helps the browser to merge multiple spaces into one single space, and so taking care of indentation becomes easier. White space helps in better organizing the content and tags, making them readable and easy to understand.

14. How do you create links to different sections within the same HTML web page?

We use the <a> tag, along with referencing through the use of the # symbol, to create several links to different sections within the same web page.

15. How do you create a hyperlink in HTML?

We use the anchor tag <a> to create a hyperlink in HTML that links one page to another page. The hyperlink can be added to images too.

16. Define an image map?

An image map in HTML helps in linking with the different kinds of web pages using a single image. It can be used for defining shapes in the images that are made part of the image mapping process.

17. Why do we use a style sheet in HTML?

A style sheet helps in creating a well-defined template for an HTML webpage that is both consistent as well as portable. We can link a single style sheet template to various web pages, which makes it easier to maintain and change the look of the website.

18. 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 not used for italic. Instead of these we use <strong></strong> and <em></em> tags.

19. What is SVG in HTML?

HTML SVG is used to describe the vector or raster graphics. SVG images and their behaviors are defined in XML text files.

We mostly use it for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.

</svg>

20. What would happen if there is no text between the HTML tags?

There would be nothing to format if there is no text present between the tags. Therefore, nothing will appear on the screen.

Some tags, such as the tags without a closing tag like the <img> tag, do not require any text between them.

21. How do you create nested web pages in HTML?

Nested web pages basically mean a webpage within a webpage. We can create nested web pages in HTML using the built-in iframe tag. The HTML <iframe> tag defines an inline frame. For example:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Iframes example</h2>

<p>

specify the size of the iframe using the height and width attributes:

</p>

</body>

</html>

22. How do you add buttons in HTML?

We can use the built-in Button tag in HTML to add buttons to an HTML web page.

<!DOCTYPE html>

<html>

<body>

<h2>HTML Button Tag Example</h2>

<button name="button" type="button">CLICK ME</button>

</body>

</html>

23. What are the different types of headings in HTML?

There are six types of heading tags in HTML which are defined with the <h1> to <h6> tags. Each type of heading tag displays a different text size from another. <h1> is the largest heading tag and <h6> is the smallest. For example:

<!DOCTYPE html>

<html>

<body>

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6</h6>

</body>

</html>

heading-html

24. How do you insert an image in the HTML webpage?

You can insert an image in the HTML webpage by using the following code:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Image Example</h2>

</body>

</html>

25. What is the alt attribute in HTML?

The alt attribute is used for displaying a text in place of an image whenever the image cannot be loaded due to any technical issue.

<!DOCTYPE html>

<html>

<body>

<h2>HTML Alt Example</h2>

</body>

</html>

26. How are hyperlinks inserted in the HTML webpage?

You can insert a hyperlink in the HTML webpage by using the following code:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Hyperlink Example</h2>

</body>

</html>

27. How do you add colour to the text in HTML?

You can add colour to the text in HTML by using the following code:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Color Text Example</h2>

<h1 style="color: Red">Hello HTML</h1>

</body>

</html>

28. How do you add CSS styling in HTML?

There are three ways to include the CSS with HTML:

Inline CSS: It is used when less amount of styling is needed or in cases where only a single element has to be styled. 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 elements or HTML pages. Each page must link to the style sheet using the <link> tag:

<head>

</head>

Internal Style Sheet: It is used when a single HTML document has a unique style and several elements need to be styled to follow the format. Internal styles sheet is added in the head section of an HTML page, by using the <style> tag:

<head>

hr {

color: sienna;

}

p {

margin-left: 20px;

}

body {

background-image: url("images/back40.gif");

}

</style>

</head>

29. What hierarchy do the style sheets follow?

If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.

30. How do you add JavaScript to an HTML webpage?

JavaScript is used for making HTML web pages more interactive, and user-friendly. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three major ways of including JavaScript:

Inline:

You can add JavaScript to your HTML elements directly whenever a certain event occurs. We can add the JavaScript code using attributes of the HTML tags that support it. Here is an example that shows an alert with a message when the user clicks on it:

Click!

</button>

Script block:

You can define a script block anywhere on the HTML code, which will get executed as soon as the browser reaches that part of the document. This is why script blocks are usually added at the bottom of HTML documents.

<html>

var x = 1;

var y = 2;

var result = x + y;

alert("X + Y is equal to " + result);

</script>

</html>

External JavaScript file:

You can also import the JavaScript code from a separate file and keep your HTML code clutter-free. This is especially useful if there is a large amount of scripting added to an HTML webpage.

<html>

</html>

As you get prepared for your job interview, we hope that these HTML Interview Questions have provided more insight into what types of questions you are likely to come across.