Top 40 HTML Interview Questions and Answers

1. How do you add a video to an HTML page?

To add a video to your page you can use the tag.

2. What is the hierarchy of style sheets?

In style sheets, the style tag takes priority, and external style sheets take the least priority.

3. How does one insert a copyright sign?

You can insert a copyright symbol by using the & copy to any HTML document.

4. Can you create links to different sections within the same document?

Yes, this can be easily done by using the tag along the referencing symbol #. This will create different links within the same web page

5. What are the media formats supported by HTML?

HTML supports various media types and formats such as,

Audio: WMA, MIDI, AAC, WAV, MP3, MP4

Video: MPEG, AVI, WMV, WebM, QuickTime, MP4, etc. Image: jpg, jpeg, png, gif, SVG

6. Why should you use an Embed tag?

The tag is used for embedding image, video or audio files inside an HTML document. This tag requires a closing tag.

7. Demonstrate how to create a box in HTML.

<!DOCTYPE html>

<html>

<head>

<style> div {

background-color: lightblue;

width: 300px; border: 15px green; padding: 50px;

margin: 20px;

}

</style>

</head>

<body>

<h2>Creating a Box Model</h2>

<p>Welcome.</p>

<div>Congratulations, this is how you create a Box Model</div>

</body> </html>

8. What is HTML encoding?

It is used to forward header information to the server so as to display text not HTML code. This encoding parses non-ASCII special characters and replace them with the standard form.

9. Explain why we need to use doctype in HTML.

Doctype is used for declaring document-type objects. This also tells the web browser the type of HTML and version used to build the page.

<!DOCTYPE html>

<html>

<head>

margin: 6px 0;

}

</style>

</head>

<body>

</body> </html>

11. What is the difference between cell padding and spacing?

Cell spacing is referred to as the space between two cells of the same table while cell padding is referred to as the space between the contents of a cell or cell border.

12. Define what is MathML

MathML stands for Mathematics Markup Language used for performing mathematical equations in web browsers.

13. Define Void elements

Void elements are elements that have only the start tags and don’t contain any content within them.

14. Where can you use hyperlinks?

You can use hyperlinks in text and images. The “href” attribute is the most commonly used to define HTML anchor tags.

15. What is an entity?

An entity is a group of characters that is used to represent special characters or symbols which can’t be typed using the standard keyboard. These are strings that start with “&” symbol and end with a “;” symbol.

16. Create a table example in HTML5.

<!DOCTYPE html>

<html>

<head>

<title>Table</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</body> </html>

17. Write a basic HTML template

A basic HTML structure template looks like this:

<head>

<title>Page title</title>

</head>

<body>Body of contents</body> </html>

18. What happens when you overlap a set of tags?

When you overlap two or more sets of tags, the first tag will be recognized. This will cause problems and lead to web browser not interpreting the page correctly thus causing inconsistencies on the web page.

19. What is the difference between ruler and border attributes?

When the border attribute is set to zero, the default cell borders and thickness will be applied, whereas if a rule attribute is added to a tag, the border attribute will not be included. The default one-pixel border will be shown instead.

20. Define what is a Box model

A box model provides the description for how elements are sized and displayed on the page. Each page may have a width, height, padding, borders, and margins. This is related to the CSS styling property.

21. What is an attribute?

An attribute in HTML is a property that can be added to an HTML tag. Attributes can change the way tags are displayed.

22. What is the tag used for?

The element is used to define and specify content in a document that is independent of the document. This element is used for defining blog posts, articles, and long-form posts.

23. Can you create multi-colored text in HTML?

Yes, you can use the following syntax to create different multi-colored texts.

24. What is a marquee?

Marquee is used for scrolling text on a web page. By using the tag, one can scroll either left, right, down, or up automatically.

25. List the types of CSS that can be included in an HTML doc.

There are three types of CSS elements that can be included.

These are:

Inline CSS - This is used for styling small contents. It is mainly used for styling attributes inside the HTML elements in the body section.

Internal CSS - This is used for adding tags in the section of the document. It is mainly for styling a single page that has a unique style.

External CSS - This is used when applying to multiple pages.

26. Define what is DOM

DOM is short for Document Object Model.

DOM defines the following:

HTML elements as objects
Events of all HTML elements

27. What is the default size for the text field?

The default size for a text field is about 20 characters long. But if you include the size attribute one can set the size value to be as low as 1 and as high as the width of the browser width.

28. How do you underline text in HTML?

You can underline text by simply using the tag.

29. What is the advantage of collapsing the white space in HTML?

Collapsing whitespaces in HTML is beneficial because it reduces the time for transmitting information between the server and the client.

30. Create an example of how to use the Geolocation API in HTML5.

<!DOCTYPE html>

<html>

<head>

<title> location page</title>

</head>

<body>

<p>Click this button below to get your location.</p>

<button onclick="getLocation()"> My Location </button>

var x = document.getElementById("location"); function getLocation() { if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

} else {

x.innerHTML = "Geolocation is not supported by this browser.";

}

function showPosition(position) {

x.innerHTML = "At Latitude: " + position.coords.latitude +

"<br>At Longitude: " + position.coords.longitude;

}

</script>

</body> </html>

31. Define Web Worker in HTML

Web worker is a multithread object used for executing JavaScript. It runs in the background and doesn’t affect the performance of the webpage or application.

32. Define applets

Applets are small programs that are embedded within web pages. They perform different functions such as animations, computations, and information processing.

33. What is multipart data?

Multipart form data is an enctype attribute of the tag that specifies the method of encoding for form data. It is part of the two ways of encoding HTML forms.

34. What are the benefits of grouping checkboxes?

Grouping checkboxes has several advantages including -

Simplified processing
Improved organization
Consistency
Optimized user experience

35. How do you center text in HTML5?

Since the tag is deprecated, you can use the CSS text-align property to the desired element.

36. When do you use frames?

Frames make page navigation easier. If the links of the page are placed under frames, they will appear at the top of the page or at the bottom of the browser.

37. Why is SVG the most preferred for image formats?

SVG is easy to scale, can be edited in any text editor, and the image quality is high no matter what the resolution is.

38. Create a CSS example where you set the background color of an HTML document to yellow.

<!DOCTYPE html>

<html>

<head>

<style>

Body {

background-color :yellow;

}

</style>

</head> <body>

<h1>Yellow Home Page</h1>

</body> </html>

39. Create a JavaScript script that changes the text size.

<body>

<p id="demo">Example.</p>

document.getElementById("demo").style.fontSize = "60px"; </script>

</body>

HTML