HTML

HTML and HTML5 Interview Questions & Answers

1) What is HTML?

Ans: HTML stands for Hyper Text Markup Language. It is a standard text formatting language used for developing web pages released in 1993. HTML is a language that is interpreted by the browser and it tells the browser what to display and how to display.

2) What are HTML tags?

Ans: Tags are the primary component of the HTML that defines how the content will be structured/ formatted.HTML tags are composed of three things: an opening tag(<), content and ending tag(>). For Example: <tag> content </tag>.

3) Do all HTML tags have an end tag?

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

4) What are HTML Attributes?

Ans: Attributes are the properties that can be added to an HTML tag. These attributes change the way the tag behaves or is displayed.

5) What are void elements in HTML?

Ans: HTML elements which do not have closing tags or do not need to be closed are Void elements. For Example <br />, <img />, <hr />, etc.

6) What is formatting in HTML?

Ans: The HTML formatting is a process of format the text for a better look and feel. It uses different tags to make text bold, italicized, underlined.

7) How many types of heading does an HTML contain?

Ans: 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.

8) Describe HTML layout structure?

Ans: Every web page has different components to display the intended content and a specific UI. But still, there are few things which are templated and are globally accepted way to structure the web page, such as:

• <header>: Stores the starting information about the web page.
• <footer>: Represents the last section of the page.
• <nav>: The navigation menu of the HTML page.
• <article>: It is a set of information.
• <section>: It is used inside the article block to define the basic structure of a page.
• <aside>: Sidebar content of the page.

9) How do you separate a section of texts in HTML?

Ans: 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.

10) Define the list types in HTML?

Ans: 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.

11) How to create a hyperlink in HTML?

Ans: The HTML provides an anchor tag <a> 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.

12) What is the ‘class’ attribute in HTML?

Ans: The class attribute is used to specify the class name for an HTML element.

13) What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML elements?

Ans: Multiple elements in HTML can have the same class value, whereas a value of id attribute of one element cannot be associated with another HTML element. Also, it is mainly used to associate the styles written in the stylesheet with the HTML elements.

14) What are the global attributes in HTML?

Ans: Global attributes are attributes that can be applied to any HTML element. Some common global attributes include:

• class : Specifies one or more class names for an element.

• id : Specifies a unique id for an element.

• style : Contains CSS styling for the element.

• title : Provides additional information about the element, typically shown as a tooltip when hovering.

• data-* : Used to store custom data private to the page or application.

15) What is an element in HTML?

Ans: An element in HTML is a set of tags that define a specific part of a web page. It consists of a start tag, content, and an end tag.

16) Are the HTML tags and elements the same thing?

Ans: No, HTML tags are used to define the structure of a web page, while HTML elements are made up of a set of tags that define a specific part of a web page.

17) What is semantic HTML?

Ans: 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.

18) What are the various formatting tags in HTML?

Ans: HTML has various formatting tags:

• <b> : makes text bold
• <i> : makes text italic
• <em> : makes text italic but with added semantics importance
• <big> : increases the font size of the text by one unit
• <small> : decreases the font size of the text by one unit
• <sub> : makes the text a subscript
• <sup> : makes the text a superscript
• <del> : displays as strike out text
• <strong> : marks the text as important
• <mark> : highlights the text
• <ins> : displays as added text

19) What is the advantage of collapsing white space?

Ans: Collapsing white space in HTML can help to reduce the size of web pages and make them load faster. It involves removing unnecessary white space between HTML elements.

20) What are HTML Entities?

Ans: HTML Entities are special characters used to represent characters that cannot be typed on a keyboard. They are often used to display special symbols and foreign characters.

21) What is the difference between <section> and <article>?

Ans: <section> is used to group related content within a page, while <article> is used to represent a self-contained piece of content that can be independently distributed or reused.

22) How do you display a table in an HTML webpage?

Ans: 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.

23) How do we insert a comment in HTML?

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

24) How do you insert a copyright symbol in HTML?

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

25) How do you create links to different sections within the same HTML web page?

Ans: 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.

26) Define an image map?

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

27) What is the purpose of the placeholder attribute in HTML5?

Ans: The placeholder attribute provides a hint to the user about what they should enter in the input field. It displays text inside the input field that disappears when the user starts typing.

28) What is the difference between block-level and inline elements in HTML?

Ans: Block-level elements take up the full width available, starting on a new line. Common block-level elements include <div>, <p>, <h1>-<h6>, and <ul>.
        Inline elements only take up as much width as necessary, and do not start on a new line. Examples include <span>, <a>, <img>, and <strong>.

29) What is the difference between <strong>, <b> tags and <em>, <i> tags?

Ans: The effect on a normal webpage of the tags <strong>, <b>  and <em>, <i> is the same. <b> and <i> tags stands for bold and italic. These two tags only apply font styling and bold tag <b>, just adds more ink to the text, these tags don't say anything about the text.

Whereas, <strong> and <em> tags represent that the span of text is of strong importance or more importance and emphatic stress respectively than the rest of the text. These tags have semantic meaning.

30) What is the significance of <head> and <body> tag in HTML?

Ans: <head> tag provides the information about the document. It should always be enclosed in the <html> tag. This tag contains the metadata about the webpage and the tags which are enclosed by head tag like <link>, <meta>, <style>, <script>, etc. are not displayed on the web page. Also, there can be only 1 <head> tag in the entire Html document and will always be before the <body> tag.

<body> tag defines the body of the HTML document. It should always be enclosed in the <html> tag. All the contents which needs to be displayed on the web page like images, text, audio, video, contents, using elements like <p>, <img>, <audio>, <heading>, <video>, <div>, etc. will always be enclosed by the <body> tag. Also, there can be only 1 body element in an HTML document and will always be after the <head> tag.

31) How is Cell Padding different from Cell Spacing?

Ans: Cell Spacing is the space or gap between two consecutive cells. Whereas, Cell Padding is the space or gap between the text/ content of the cell and the edge/ border of the cell. 

32) How can we club two or more rows or columns into a single row or column in an HTML table?

Ans: HTML provides two table attributes “rowspan” and “colspan” to make a cell span to multiple rows and columns respectively.

33) Is it possible to change an inline element into a block level element?

Ans: Yes, it is possible using the “display” property with its value as “block”, to change the inline element into a block-level element.

34) How to create a nested webpage in HTML?

Ans: The HTML <iframe> tag is used to display a nested webpage. In other words, it represents a webpage within a webpage. The HTML <iframe> tag defines an inline frame.

35) Does a hyperlink only apply to text?

Ans: No, you can use hyperlinks on text and images both. The HTML anchor tag defines a hyperlink that links one page to another page. The "href" attribute is the most important attribute of the HTML anchor tag.

36) Why do we use a style sheet in HTML?

Ans: 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.

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

Ans: Yes. To create a multicolor text on a web page you can use <font color ="color"> </font> for the specific texts you want to color.

38) Is it possible to change the color of the bullet?

Ans: The color of the bullet is always the color of the first text of the list. So, if you want to change the color of the bullet, you must change the color of the text.

39) What is a marquee?

Ans: Marquee is used to put the scrolling text on a web page. It scrolls the image or text up, down, left or right automatically. You should put the text which you want to scroll within the <marquee>......</marquee> tag.

40) What are empty elements?

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

41) Does a <!DOCTYPE html> tag is a HTML tag?

Ans: No, the <!DOCTYPE html> declaration is not an HTML tag. There are many type of HTML e.g. 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.

42) What is the purpose of the DOCTYPE declaration in HTML?

Ans: The <!DOCTYPE> declaration tells the web browser which version of HTML the page is written in. It must appear at the very top of the document, before the <html> tag. For example, <!DOCTYPE html> declares that the document is using HTML5.

43) Difference between link tag <link> and anchor tag <a>?

Ans: The anchor tag <a> is used to create a hyperlink to another webpage or to a certain part of the webpage and these links are clickable, whereas, link tag <link> defines a link between a document and an external resource and these are not clickable.

44) What is SVG in HTML?

Ans: 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.

45) What is the difference between <figure> tag and <img> tag?

Ans: The <figure> tag specifies the self-contained content, like diagrams, images, code snippets, etc. <figure> tag is used to semantically organize the contents of an image like image, image caption, etc., whereas the <img> tag is used to embed the picture in the HTML5 document.

46) How to specify the metadata in HTML5?

Ans: To specify we can use <meta> tag which is a void tag, i.e., it does not have a closing tag. Some of the attributes used with meta tags are name, content, http-equiv, etc. The below image tells how to specify the metadata.

47) Is the <datalist> tag and <select> tag same?

Ans: No. The <datalist> tag and <select> tag are different. In the case of <select> tag a user will have to choose from a list of options, whereas <datalist> when used along with the <input> tag provides a suggestion that the user selects one of the options given or can enter some entirely different value.

48) What is the canvas element in HTML5?

Ans: The <canvas> element is a container that is used to draw graphics on the web page using scripting language like JavaScript. It allows for dynamic and scriptable rendering of 2D shapes and bitmap images. There are several methods in canvas to draw paths, boxes, circles, text and add images.

49) Explain new input types provided by HTML5 for forms?

Ans: Following are the significant new data types offered by HTML5:

• Date : Only select date by using type = "date"

• Week : Pick a week by using type = "week"

• Month : Only select month by using type = "month"

• Time : Only select time by using type = "time".

• Datetime : Combination of date and time by using type = "datetime"

• Datetime-local : Combination of  date and time by using type = "datetime-local." but ignoring the timezone

• Color : Accepts multiple colors using type = "color"

• Email : Accepts one or more email addresses using type = "email"

• Number : Accepts a numerical value with additional checks like min and max using type = "number"

• Search : Allows searching queries by inputting text using type = "search"

• Tel : Allows different phone numbers by using type = "tel"

• Placeholder : To display a short hint in the input fields before entering a value using type = "placeholder"

• Range : Accepts a numerical value within a specific range using type = "range"

• Url : Accepts a web address using type = "url”

50) Which type of video formats are supported by HTML5?

Ans: HTML 5 supports three types of video format:

• mp4
• WebM
• Ogg

51) Is audio tag supported in HTML 5?

Ans: Yes. It is used to add sound or music files on the web page. There are three supported file formats for HTML 5 audio tag,

• mp3
• WAV
• Ogg

52) What is the difference between <meter> tag and <progress> tag?

Ans: The progress tag is used to represent the progress of the task only while the meter tag is used to measure data within a given range.

53) What is the difference between HTML and HTML5?

Ans: HTML5 is the latest version of HTML and includes new features and improvements over previous versions. Some key differences between HTML and HTML5 include support for multimedia elements (such as video and audio), improved semantics, and better support for mobile devices.

54) What is the use of details and summary tag?

Ans: 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.

55) Is drag and drop possible using HTML5 and how?

Ans: Yes, in HTML5 we can drag and drop an element. This can be achieved using the drag and drop-related events to be used with the element which we want to drag and drop.

56) What are the New tags in Media Elements in HTML5?

Ans: The new tags of media elements are:

• <audio> : Used for sounds, audio streams, or music, embed audio content without any additional plug-in.
• <video> : Used for video streams, embed video content etc.
• <source> : Used for multiple media resources in media elements, such as audio, video, etc.
• <embed> : Used for an external application or embedded content.
• <track> : Used for subtitles in the media elements such as video or audio.

57) What are raster images and vector images? 

Ans: Raster Images : The raster image is defined by the arrangement of pixels in a grid with exactly what color the pixel should be. Few raster file formats include PNG(.png), JPEG(.jpg) etc.

Vector Images : The vector image is defined using algorithms with shape and path definitions that can be used to render the image on-screen written in a similar markup fashion. The file extension is .svg.

58) What is the Geolocation API in HTML5?

Ans: Geolocation API is used to share the physical location of the client with websites. This helps in serving locale-based content and a unique experience to the user, based on their location. This works with a new property of the global navigator object and most of the modern browsers support this.

59) How do you add CSS styling in HTML?

Ans: 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.

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

60) In how many ways can you display HTML elements?

Ans: HTML elements can be displayed in several ways, including block, inline, inline-block, and none. The display property can specify how an element should be displayed.

61) What is the difference between “display: none” and “visibility: hidden”, when used as attributes to the HTML element?

Ans: When we use the attribute “visibility: hidden” for an HTML element then that element will be hidden from the webpage but still takes up space. Whereas, if we use the “display: none” attribute for an HTML element then the element will be hidden, and also it won’t take up any space on the webpage.

62) What is the use of the required attribute in HTML5?

Ans: It forces a user to fill text on the text field or text area before submitting the form. It is used for form validation.

63) What is the difference between HTML and XHTML?

Ans: HTML is more forgiving in terms of syntax; it doesn’t require strict adherence to the rules.

XHTML (Extensible Hypertext Markup Language) is a stricter version of HTML and follows XML syntax rules, such as properly closing all tags and being case-sensitive (all tags must be in lowercase).

Thank You