HTML 50+ Interview QA

date

May 25, 2024

slug

HTML-Interview-QA

status

Published

1. What is HTML?

HTML (HyperText Markup Language) is the standard Markup Language for creating web pages. It is one of the core technologies for the World Wide Web alongside CSS and JS.

Example -


<!DOCTYPE html>
<html>
<head>
	<title>Web Page Title</title>
</head>
<body>
	<p>Web Page Content</p>
</body>
</html>

2. What are HTML Tags?

HTML Tags are the keywords present on a webpage that describe how your web browser structure and displays the contents.

3. What is the difference between tags and elements?

HTML Tags are just opening or closing entities.

Example - <table></table>, <audio></audio>, <video></video, etc.

HTML Elements contain an opening tag, content, and a closing tag.

Example - <h1>HTML largest heading goes here..</h1>, <p>HTML paragraph goes here..</p>, etc.

4. What are Attributes?

HTML Attributes are special words that act as modifiers used inside the opening tag to control the element's behavior.

Example - <a href="http://domain-name.com">Hyperlink Text</a>

5. What is DOCTYPE?

A DOCTYPE is an instruction that tells the web browser what type of document should be displayed.

Example - <!DOCTYPE html>, <!DOCTYPE xml>, etc.

6. Are HTML tags case-sensitive?

No, HTML tags are not case-sensitive.

7. What is the Head element in HTML?

The Head element is one of the most important tags in HTML used to contain metadata for a document, like page titles, meta descriptions, favicon, stylesheets, and scripts.

8. Can we have multiple body tags in a single HTML document?

No, there can be only one body tag in an HTML document.

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

HTML defines six levels of heading. They are h1, h2, h3, h4, h5, and h6 with h1 being the highest level and h6 the least.

Example -


<!DOCTYPE html>
<html>
<head>
    <title>Headings Elements</title>
</head>
<body>
    <h1>The h1 heading content goes here</h1>
    <h2>The h2 heading content goes here</h2>
    <h3>The h3 heading content goes here</h3>
    <h4>The h4 heading content goes here</h4>
    <h5>The h5 heading content goes here</h5>
    <h6>The h6 heading content goes here</h6>
</body>
</html>

10. What are the Formatting tags in HTML?

Formatting tags are used to set text styles like bold, italic, and highlight.

Example -


<!DOCTYPE html>
<html>
<head>
    <title>Formatting elements</title>
</head>
<body>
    <p><b>Bold text</b> other text goes here</p>
    <p><i>Italic text</i> other text goes here</p>
    <p><mark>Marked text</mark> other text goes here</p>
    <p><del>Strick text</del> other text goes here</p>
    <p><ins>Underlined text</ins> other text goes here</p>
    <p><sub>Subscript text</sub> other text goes here</p>
    <p><sup>Superscript text</sup> other text goes here</p>
</body>
</html>

Output -

Formatting Tags

11. How to display a web page inside a web page?

The iframe tag is used to display a web page inside a web page.

Example - <iframe src="https://domain.com" width="100%" height="500px"></iframe>

12. What is the difference between <strong> and <b> tags?

The <b> tag represents just visually bold text but the <strong> tag describes bold text that is more important.

13. What are Global Attributes in HTML?

Global Attributes are those attributes that are common to all HTML elements like class, id, title, style, lang, data, etc.

14. What is the difference between the ‘id’ attribute and the ‘class’ attribute?

The ‘id’ attribute is used to select only one element in a webpage.

The ‘class’ attribute is used to select multiple elements having similar functionalities.

15. What are the different types of lists in HTML?

There are three types of lists in HTML.

Unordered list

Ordered list

Description list

Ordered list

The <ol> element represents an ordered list in a document. The <li> element defines a list item within a list.

Example -


<ol>
    <li>Pacific Ocean</li>
    <li>Atlantic Ocean</li>
    <li>Indian Ocean</li>
    <li>Southern Ocean</li>
    <li>Arctic Ocean</li>
</ol>

Unordered list

The <ul> element defines an unordered list in an HTML document.

Example -


<ul>
    <li>Mathematics</li>
    <li>Physics</li>
    <li>Geography</li>
</ul>

Description list

The <dl> element specifies a description list on a web page.

Example -


<dl>
    <dt>Football</dt>
    <dd>Outdoor game</dd>
    <dt>Table tennis</dt>
    <dd>Indoor game</dd>
</dl>

16. What are Form Tags in HTML?

The HTML Form Tag is used to create an interactive form on a webpage.

Example -


<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements</title>
</head>
<body>
<form action="my-form-script.php" method="post">
	<label>Full Name</label><br>
	<input type="text" name="fullname" value="" placeholder="John Doe" required><br>
	<label>Country</label><br>
	<select name="country">
		<option value="">Select Country</option>
		<option value="aus">Australia</option>
		<option value="ind">India</option>
		<option value="usa">USA</option>
	</select><br>
	<label>Message</label><br>
	<textarea name="message"></textarea><br>
	<button type="submit">Submit Form</button>
</form>
</body>
</html>

Output -

Form Tags

17. What is the difference between "display: none" and "visibility: hidden"?

Both are used to hide elements but “display: none” removes elements from the document.

18. What is the difference between Cell Padding and Cell Spacing?

Cell Padding is the space between the cell content and its borders whereas Cell Spacing is the space between each cell.

19. Is it possible to change an inline element into a block-level element?

Yes, it is possible.

20. How many ways can we specify the CSS styles on a webpage?

We can specify CSS styles on a webpage in three different ways.

Inline CSS

Internal CSS

External CSS

21. How to include a JavaScript file in HTML?

Script Tag is used to include a JavaScript file in HTML.

22. How to include an external stylesheet in an HTML document?

Link Tag is used to include an external stylesheet in an HTML document.

Example -

index.html


<!DOCTYPE html>
<html>
<head>
	<title>External CSS example</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>It is an HTML heading element</h1>
	<p>It is an HTML paragraph element</p>
</body>
</html>

style.css


body {
	background-color: lightred;
}
h1 {
	color: darkred;
	font-size: 80px;
}

23. How do you create a hyperlink in HTML?

The Anchor Tag <a> is used to create a hyperlink in HTML.

Examples -

<a href="http://uri1">Hyperlink text goes here</a>

<a href="http://uri2" target=”_blank”>Another hyperlink text goes here</a>

24. What are the various markup languages available?

HTML, XML, MathML, SGML, and XHTML are the most common among the various markup languages available.

25. What is the difference between <em> and <i> tags?

The <em> tag defines emphasized text whereas <i> tag defines italic text.

26. What are the different formats in which colors can be declared in HTML?

In HTML, colors can be specified using predefined color names, HEX values, RGB values, HSL values, RGBA values, and HSLA values.

27. What are the HTML tags used to display a table?

The <table>, <tr>,<td>,<thead>,<tfoot>, and <caption> tags are used to display a table in an HTML document.

28. What is the difference between inline elements and block elements?

A block-level element always starts on a new line, and it always takes up the full width available.

An inline element does not start on a new line and it only takes up as much width as necessary.

29. How many h1 tags are allowed in a webpage?

Only one h1 tag is allowed in a webpage.

30. How do you insert a copyright symbol in an HTML document?

The Unicode "©" is used to insert a copyright symbol in an HTML document.

31. What is Microdata in HTML?

Microdata provides a simple mechanism to label content in an HTML document.

32. What are Semantic Elements?

Semantic Elements refer to the elements that provide meaning to a webpage rather than just presentation.

33. What is DOM?

Document Object Model(DOM) is a programming interface for web documents like HTML, XML, and SVG documents.

34. What is SVG in HTML?

Scalable Vector Graphic (SVG) offers a powerful way to add scalable and interactive graphics to your HTML documents.

Example -


<svg width="100%" height="200">
    <rect width="100%" height="200" style="fill:yellow; stroke-width:4; stroke:gray" />
    Sorry, your browser does not support inline SVG.
</svg>

35. What is the difference between HTML and XHTML?

XHTML is a stricter and standardized version of HTML that follows XML rules.

36. What are Meta Tags?

HTML Meta Tags describe information about a webpage's content to users and search engines.

Examples -


<head>
    <meta charset="UTF-8">
    <meta name="description" content="50 most asked HTML interview questions and answers">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

37. What are Empty Tags?

HTML elements with no closing tag are known as empty tags. For eg: <br>, <img>, <hr>, <meta>, <link>, etc.

38. What are Unicodes in HTML?

Unicodes are standard character sets used to represent special characters and symbols on your web pages.

39. What is the Required attribute in HTML?

The Required attribute is a boolean attribute that specifies an input field must be filled out before submitting the HTML form.

Example -

<input type="text" name="full-name" value="" placeholder="John Doe" required>

40. What is a favicon used for?

A Favicon is a small 16×16 pixel icon that represents your favorite brand icon for your website.

41. What are the new elements introduced in HTML5?

List of HTML5 elements:

<article> - Defines an article section in a document

<aside> - Defines content related to the main content in an HTML web page

<audio> - Embeds and controls a sound content

<figure> - Represents self-contained content

<footer> - Specifies a footer for a section or HTML document

<header> - Represents a header for a section or HTML document

<main> - Defines the main section in a document

<nav> - Defines a section for navigation links

<section> - Defines a division/section in a document

<svg> - Represents a section for scalable vector graphics

<video> - Embeds a video file in a document

42. What are some input types introduced in HTML5?

List of different input types:

<input type="color"> - Displays a color picker

<input type="date"> - Creates an input field for date

<input type="email"> - Defines an input field for email

<input type="password"> - Represents an input field for password

<input type="search"> - Creates an input field that accepts a search string

<input type="tel"> - Defines a input field for telephone number

<input type="time"> - Creates an input field that accepts a time value

<input type="url"> - Defines an input field that accepts a URL address value

43. What are the multimedia elements in HTML5?

List of embedded elements:

<audio> - Embeds sound content, such as music and other audio streams

<canvas> - Draws graphics using JavaScript

<embed> - Embeds external files, such as a web page, a media player, or a plug-in application

<picture> - Defines a container for multiple image resources

<svg> - Defines a container for scalable vector graphics(SVG)

<video> - Embeds video content, such as movies, animation, and screencast

44. What CSS libraries have you used?

List of CSS libraries:

Bootstrap

Tailwind CSS

Bulma

Foundation

45. How to optimize website loading speed?

Tips for improving website loading speed:

Optimize images and videos

Use a Content Delivery Network(CDN)

Minify CSS and JavaScript files

Minimize HTTP requests

Use website caching

46. What are the JavaScript libraries have you used?

List of JavaScript libraries:

jQuery

Bootstrap

Chart.js

Anime.js

47. What are event attributes in HTML?

The event attributes are applied to HTML elements for the execution of JavaScript when certain events occur, for example, onclick, onscroll, onload, onmousehover, etc.

48. What is W3C HTML validation?

It is a free service by W3C that helps users to validate web documents.

49. Can an inline element contain a block-level element?

No, it is logically incorrect.

50. What is CDN?

A Content Delivery Network (CDN) is a geographically distributed group of servers that speed up the delivery of web content, including web pages, scripts, stylesheets, images, videos, etc.

Example -

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

Prince

HTML 50+ Interview QA

1. What is HTML?

2. What are HTML Tags?

3. What is the difference between tags and elements?

4. What are Attributes?

5. What is DOCTYPE?

6. Are HTML tags case-sensitive?

7. What is the Head element in HTML?

8. Can we have multiple body tags in a single HTML document?

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

10. What are the Formatting tags in HTML?

11. How to display a web page inside a web page?

12. What is the difference between <strong> and <b> tags?

13. What are Global Attributes in HTML?

14. What is the difference between the ‘id’ attribute and the ‘class’ attribute?

15. What are the different types of lists in HTML?

16. What are Form Tags in HTML?

17. What is the difference between "display: none" and "visibility: hidden"?

18. What is the difference between Cell Padding and Cell Spacing?

19. Is it possible to change an inline element into a block-level element?

20. How many ways can we specify the CSS styles on a webpage?

21. How to include a JavaScript file in HTML?

22. How to include an external stylesheet in an HTML document?

23. How do you create a hyperlink in HTML?

24. What are the various markup languages available?

25. What is the difference between <em> and <i> tags?

26. What are the different formats in which colors can be declared in HTML?

27. What are the HTML tags used to display a table?

28. What is the difference between inline elements and block elements?

29. How many h1 tags are allowed in a webpage?

30. How do you insert a copyright symbol in an HTML document?

31. What is Microdata in HTML?

32. What are Semantic Elements?

33. What is DOM?

34. What is SVG in HTML?

35. What is the difference between HTML and XHTML?

36. What are Meta Tags?

37. What are Empty Tags?

38. What are Unicodes in HTML?

39. What is the Required attribute in HTML?

40. What is a favicon used for?

41. What are the new elements introduced in HTML5?

42. What are some input types introduced in HTML5?

43. What are the multimedia elements in HTML5?

44. What CSS libraries have you used?

45. How to optimize website loading speed?

46. What are the JavaScript libraries have you used?

47. What are event attributes in HTML?

48. What is W3C HTML validation?

49. Can an inline element contain a block-level element?

50. What is CDN?