HTML Top Interviews Questions and Answers

HTML is the standard markup language use for displaying designed documents in web browser. Without this language, it is nearly impossible to organize text, add videos or images in the web page.

Q1. What is HTML?

Ans. HTML or Hypertext Markup Language, was created by Berners-Lee in 1991. It is a markup language used to create and structure website templates or web pages to present content on the World Wide Web. It consists of a series of elements, and the HTML elements tell the browser how to display the content. HTML helps in making the text more interactive and dynamic. You can save an HTML page by adding .html or .html in the web page name.

Q2. What are the features of HTML?

Ans. The following are the features of HTML:

It is a markup language that provides flexibility to design web pages with text.
It is easy to use and learn.
HTML is platform-independent and can be used on Windows, Linux, Macintosh, etc.
It enables programmers to add images, video, and audio to a web page to make it more interactive.
HTML allows programmers to add a link on web pages, helping the readers to browse the information of their interest.
It is case-insensitive. You can use tags either in lower-case or upper-case.

Q3. What is the difference between HTML elements and tags?

Ans. The differences between HTML elements and tags are:

HTML Elements	Tags
1. The element is an individual component of the HTML web page or document that consists of a start tag, its attributes, an end tag, and everything in between.	1. HTML tag (either opening or closing) marks the start or end of an element.
2. They usually contain a start tag, content, and an end tag.	2. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.
3. HTML Elements hold the content.	3. HTML Tags hold the HTML element.
4. They specify the general content.	4. HTML tags are like keywords. Each tag has a unique meaning.
5. For example, <p>This is an example of a paragraph.</p>	5. For example, <a> is an opening anchor tag and </a> is a closing anchor tag.

Q4. Do all HTML tags have an end tag?

Ans. No, all HTML tags do not have an end tag. For example, the <br> tag is used to break the line, and <image> tag is used to insert an image into a document. They are considered self-closing tags and do not require an end tag.

Q5. Which HTML tags are used while displaying the data in the tabular form?

Ans. The following HTML tags are used to display the data in tabular form:

1	<table>	Defines a table.
2	<tr>	Defines a row in a table.
3	<th>	It defines a header cell in a table.
4	<td>	Defines a cell in a table.
5	<caption>	This tag defines the table caption.
6	<colgroup>	This tag specifies a group of one or more columns in a table for formatting.
7	<col>	It is used with <colgroup> element to specify column properties for each column.
8	<tbody>	This tag groups the body content in a table.
9	<thead>	It groups the header content in a table.
10	<tfooter>	It groups the footer content in a table.

Q5. Write the basic structure of the HTML template.

Ans. The basic structure of the HTML template is:

<html>

<head>

<title>Title of the page</title>

</head>

<body>content of the page</body>

</html>

Q6. What is HTML5? What are some of its new features that were not present in HTML?

Ans. HTML5 is the latest version of the Hypertext Markup Language. Some of the new features of HTML5 are:

HTML5 supports SVG, canvas, and other virtual vector graphics. In HTML, vector graphics can only be used with Flash, VML (Vector Markup Language), or Silverlight.
HTML5 allows JavaScript to run within a web browser. The previous version allowed JavaScript to run in the browser interface thread.
HTML5 is not based on SGML. It comes with enhanced parsing rules for improved compatibility.
In HTML5, web SQL databases are used to store data temporarily. Previously, only the browser cache was used.
Some elements have been removed – applet, isindex, noframes, acronym, dir, font, frame, frameset, and big are removed.
New elements have been added – time, summary, aside, audio, command, and data.

Q7. What are the most commonly used lists used while designing a page?

Ans. The following are the most commonly used lists that are used while designing a page:

unordered list (<ul> tag) – displays elements in a bulleted format.
ordered list (<ol> tag) – displays elements in a numbered format.
definition list (<dl>, <dt> and <dd> tags) – displays elements in definition form like in a dictionary.

Q8. What are HTML Attributes?

Ans. HTML attributes provide additional information about HTML elements. They are defined directly after the tag name. They only appear in opening tags and not in closing tags.

HTML attributes usually contain name/value pairs like name=”value”. The Attribute values should always be enclosed in quotation marks. The name parameter takes the property’s name to be assigned to the element. The value takes the property value or extent of the property names that can be aligned over the element.

Some commonly used HTML attributes include src Attribute, alt Attribute, id Attribute, and href Attribute.

Q9. What is semantic HTML?

Ans. Semantic HTML is a coding style. It uses HTML markup to reinforce the semantics or meaning of the content in webpages and web applications rather than just defining its look or appearance. It introduces meaning to the code we write.

For example: <form>, <table>, and <article>, these tags clearly define its content.

Q10. What is the HTML article element?

Ans. The HTML <article> Element specifies independent and self-contained content in a document, page, application, or site which is independently distributable or reusable. Since it is independent of the document or website, it can be viewed, reused, and distributed separately.

For example, syndication. The HTML article element is used in the following:

Forum post
Blog post
Newspaper article

Q11. Explain the layout of HTML.

Ans. HTML layout represents how all the elements in the document are arranged. It is a vital part of basic page design and is important for creating a website to appear professional and attractive. Every website has a specific layout to display content in a specific manner. The following HTML elements are used to define the different parts of a webpage:

<header>: define a header for a document or a section.
<nav>: defines a container for navigation links
<section>: it defines a section in a document
<article>: define an independent, self-contained article
<aside>: it defines content aside from the content
<footer>: define a footer for a document or a section
<details>: define additional details

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

Ans. The differences between block-level elements and inline elements are:

Block-level Elements	Inline Elements
They start on a new line.	Do not start on a new line and can begin within a line.
Stretch to fill the full width available to them.	Take up as much width as necessary. Its width only extends as far as it is defined by its tags.
They have a top and a bottom margin.	Inline elements do not have a top and a bottom margin.
Examples of block-level elements in HTML: <div>, <img>, <form>, <main>, <table>, <video>.	Examples of inline elements: <span>, <img>, <strong>, <code>, <input>, <time>, <i>.

Q13. How to insert an image in HTML?

Ans. Images can be inserted using an HTML page’s <img> tags. It is an empty tag with only attributes and does not require a closing tag. The <img> tag must be used inside <body>…</body> tag. The following parameters will be required to insert an image using <img> tag

src attribute – It is used to add the path to the image (URL of the image).
alt attribute – It is for adding alternate text.
Width – To add the width of the image
Height – To add the height of the image

Example:

Q14. How to align text in HTML?

Ans. HTML content is aligned on a page using the CSS text-align property. It sets the horizontal alignment of the content inside a block element or table-cell box. The text-align property works like a vertical-align but in the horizontal direction. It works on text and all other content inside the block element, such as images and buttons.

Q15. How can comments be added in CSS?

Ans. We can add comments in CSS using /* and */.

Q16. How to underline text in HTML?

Ans. We use the <u> tag to underline the text in HTML.

Q17. How do you bold text in HTML?

Ans. The <b> </b> tag or <strong> </strong> tag are used to bold text in HTML.

Q18. What are the new input types in HTML5 for forms?

Ans. The following are the new input types in HTML5 for forms:

INPUT TYPE	DESCRIPTION	HTML MARKUP
date	Allows the user to select a date	<input type=”date”>
datetime	Allows the user to select date and time using UTC date and time format	<input type=”datetime”>
datetime-local	To select the date and time as per the local time	<input type=”datetime-local”>
month	Select month and year	<input type=”month”>
time	The time of day	<input type=”time”>
week	Enables you to select the week and year	<input type=”week”>
color	Enables you to enter a simple color value	<input type=”color””>
email	Validates the input using the standard email format	<input type=”email”>
search	Searches a data set	<input type=”search”>
number	Accepts only numbers	<input type=”number”>
url	Accepts only URLs	<input type=”url”>

Q19. What is a marquee?

Ans. Marquee tag is a non-standard HTML element that causes text to scroll up, down, left, or right automatically. You can put the text which you want to scroll on a web page within the following tag:

Q20. What happens if you open the external CSS file in a browser?

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

Q21. Which tags are used to separate a section of texts?

Ans. The following three tags are used to separate a section of texts:

<br> – to separate the line of text. It breaks the current line and conveys the flow to the next line
<p> – It contains the text in the form of a new paragraph.
<blockquote> – defines a large quoted section.

Q22. Explain the use of an iframe tag.

Ans. The <iframe> tag specifies an inline frame. It is used to display a web page within a web page (to embed another document within the current HTML document).

For example – The src attribute is used to specify the URL of the document that occupies the iframe.

Syntax:

Q23. What is the difference between LocalStorage and SessionStorage Objects?

Ans. The differences between LocalStorage and SessionStorage Objects are:

LocalStorage Object	SessionStorage Object
1. It stores the data without an expiry date.	1. Stores the data for only one session.
2. The data can be shared between multiple windows of the browser.	2. Data is accessible only in the current window of the browser.
3. Data is not deleted when the browser window closes.	3. The data is deleted if the browser window closes.

Q24. What are the different media types and formats supported by HTML?

Ans. HTML supports a variety of media formats for sound, music, videos, movies, and animations. The different formats supported by HTML are:

Images: jpg, jpeg, png, gif, svg, apng, BMP ico
Audio: RealAudio, WMA, MIDI, AAC, WAV, MP3, MP4
Video: MPEG, AVI, QuickTime, RealVideo, WMV, Flash, WebM, and MP4

Q25. Explain an image map in HTML.

Ans. An image map is defined by the <map> tag. Using this the image map tag, we can linking the different web pages using a single image. We can add one or more clickable areas in a single image using <area> tags.

Q26. How to create multi-colored text on a web page?

Ans. We can use <font color =”color”> </font> to create multi-colored text on a web page for the specific texts that you want to color.

Q27. How to add a favicon in HTML?

Ans. Below is the code to add a favicon. Access the code of your webpage and in the <HEAD> section add the following code.

Q28. What is an empty element?

Ans. An empty element is an HTML element that has no content. Example <br>

Q29. What is the use of the figure tag in HTML 5?

Ans. The <figure> tag identifies self-contained content related to the main content. It adds self-contained content like photos, diagrams, illustrations, etc. The figure, its caption, and its contents are referenced as a single unit from the main flow of the document. The <figure> tag has two elements img src and figcaption. Img src is used for adding image sources in a document, while figcaption sets the caption of an image.

Q30. What is the canvas element in HTML5?

Ans. Using a scripting language such as JavaScript, the “canvas” element serves as a container for drawing visuals on web pages. It enables the rendering of bitmap pictures and 2D shapes in a dynamic and scriptable manner. In canvas, there are numerous ways to draw pathways, boxes, circles, text, and add images.