html case study based questions

HTML Tutorial
HTML Exercises
HTML Attributes
Global Attributes
Event Attributes

HTML Interview Questions

DOM Audio/Video
HTML Examples
Color Picker
A to Z Guide
HTML Formatter

HTML Interview Questions and Answers (2024)

HTML Interview Questions and Answers (2024) - Intermediate Level
HTML Interview Questions and Answers (2024) – Advanced Level

CSS Interview Questions

CSS Interview Questions and Answers

JavaScript Interview Questions

JavaScript Interview Questions and Answers
JavaScript Interview Questions and Answers (2024) - Intermediate Level
JavaScript Interview Questions and Answers (2024) - Advanced Level

TypeScript Interview Questions

TypeScript Interview Questions and Answers (2024)

jQuery Interview Questions

jQuery Interview Questions and Answers (2024)
jQuery Interview Questions and Answers | Set-2
jQuery Interview Questions and Answers | Set-3

Angular Interview Questions

AngularJS Interview Questions and Answers (2024)

React Interview Questions

React Interview Questions and Answers
React Interview Questions and Answers (2024) - Intermediate Level
React Interview Question and Answers (2024) - Advance Level

Node Interview Questions

Node.js Interview Questions and Answers
Node Interview Questions and Answers (2024) - Intermediate Level
Node Interview Questions and Answers (2024) - Advanced Level

MERN Interview Questions

MERN Stack Interview Questions

PHP Interview Questions

PHP Interview Questions and Answers (2024)
PHP Interview Questions and Answers (2024) | Set-2

Tailwind CSS Interview Questions

Tailwind CSS Interview Questions and Answers
Frontend Developer Interview Questions

In this article, you will learn HTML interview questions and answers that are most frequently asked in interviews. Before proceeding to learn HTML interview questions, first learn the complete HTML Tutorial .

HTML Interview Questions and Answers

This article contains the list of the top 20 most common & frequently asked HTML & HTML 5 interview questions with their explanations for beginner level.

2. Difference between HTML and XHTML

3. what are the various markup languages available.

HTML : Hypertext Markup Language
KML: Key whole Markup Language
MathML : Mathematical Markup Language
SGML : Standard Generalized Markup Language
XHTML : eXtensible Hypertext Markup Language
XML : eXtensible Markup Language

4. What is the difference between HTML and HTML 5?

Please refer to the Difference between HTML and HTML5 article for a detailed description.

5. What is the current version of HTML?

HTML 5 is the fifth and current version of HTML.

6. What is !DOCTYPE?

A doctype or document-type declaration is an instruction that tells the web browser about the markup language in which the current page is written. The doctype is not an element or tag, it lets the browser know about the version of or standard of HTML or any other markup language that is being used in the document. The DOCTYPE for HTML5 is case-insensitive and can be written as shown below:

Please refer to the HTML Doctypes article for a detailed description.

7. What are elements and tags, and what are the differences between them?

HTML Tags : Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags.

HTML elements : Elements enclose the contents in between the tags. They consist of some kind of structure or expression. It generally consists of a start tag, content, and an end tag.

Difference between HTML Tag & HTML Element:

8. What are the various heading tags and their importance?

There are 6 levels of headings defined by HTML. These six heading elements are H1, H2, H3, H4, H5, and H6; with H1 being at the highest level and H6 at the least.

Importance of Heading:

Search Engines use headings for indexing the structure and content of the webpage.
Headings are used for highlighting important topics.
They provide valuable information and tell us about the structure of the document.

9. How to redirect to a particular section of a page using HTML?

One can use the anchor tag to redirect to a particular section on the same page. You need to add “id attribute” to the section that you want to show and use the same id in href attribute with “#” in the anchor tag. So that On click a particular link, you will be redirected to the section that has the same id mentioned in the anchor tag.

Example: When the user clicks on the “Contact Us” link, he will be redirected to the “Contact Us section” on the same page.

Please refer to the How to redirect to a particular section of a page using HTML or jQuery article for a detailed description.

10. What are attributes?

An attribute is used to provide extra or additional information about an element.

All HTML elements can have attributes. Attributes provide additional information about an element.
It takes 2 parameters ie., name and value. These define the properties of the element and are placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the property value or extent of the property names that can be aligned over the element.
Every name has some value that must be written within quotes.

11. Are <b> and <strong> tags same? If not, then why?

HTML strong tag: The strong tag is one of the elements of HTML used in formatting HTML texts. It is used to show the importance of the text by making it bold or highlighting it semantically.

HTML bold tag: The bold tag or <b> is also one of the formatting elements of HTML. The text written under the <b> tag makes the text bold presentationally to draw attention.

The main difference between the <bold> tag & <strong> tag is that the strong tag semantically emphasizes the important word or section of words while the bold tag is just offset text conventionally styled in bold . Click Here to know more.

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

<i> tag: It is one of the elements of HTML which is used in formatting HTML texts. It is used to define a text in technical terms, alternative mood or voice, a thought, etc.

<em> tag : It is also one of the elements of HTML used in formatting texts. It is used to define emphasized text or statements.

By default, the visual result is the same but the main difference between these two tags is that the <em> tag semantically emphasizes the important word or section of words while the <i> tag is just offset text conventionally styled in italic to show alternative mood or voice. Click Here to know the difference between them.

13. How are comments added in HTML?

The comment tag (<!– Comment –>) is used to insert comments in the HTML code.

Types of HTML Comments: There are three types of comments in HTML which are:

Single-line comment
Multi-lines comment
Using <comment> tag

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

The color of an element can be defined in the following ways:

Built-In Color
RGBA Format
Hexadecimal Notation
Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color.
Saturation: It takes a percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
Lightness: It takes a percentage value, where 100% represents white, while 0% represents black.

15. How to create a link in HTML?

A Link is a connection from one Web resource to another. A link has two ends, An anchor and a direction. The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource such as an image, a video clip, a sound bite, a program, an HTML document, or an element within an HTML document.

HTML Link Syntax: Links are specified in HTML using the “a” tag.

Explanation:

href: The href attribute is used to specify the destination address of the link used.
Text link: The text link is the visible part of the link.

16. What is the use of the target attribute in the <link> tag?

The HTML <link> target Attribute is used to specify the window or a frame where the linked document is loaded. It is not supported by HTML 5.

Attribute Values:

_blank: It opens the link in a new window.
_self: It opens the linked document in the same frame.
_parent: It opens the linked document in the parent frameset.
_top: It opens the linked document in the full body of the window.
framename: It opens the linked document in the named frame.

17. What is the use of alt attribute in images?

The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image.

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

<table>: It is used to define a table.
<tr>: It is used to define a row in a table.
<th>: It is used to define a header cell in a table.
<td>: It is used to define a cell in a table.
<caption>: It is used to define the table caption.
<colgroup>: It is used to define 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 define a group of 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.

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

A list is a record of short pieces of related information used to display the data or any information on web pages in the ordered or unordered form. HTML offers 3 ways for specifying lists of information. All lists must contain one or more list elements. The types of lists that can be used in HTML are:

Unordered List: It will list the items using plain bullets.
Ordered List: It will use different schemes of numbers to list your items.
Definition List: It arranges your items in the same way as they are arranged in a dictionary.

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

Every element in HTML has a default display value which depends upon the element type. Block or inline is the default display value for most of the elements.

Block-Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can.

div element: The div element is used as a container for other HTML elements. It has no required attributes. Style , class, and id are the commonly used attributes.
span element: The span element is used as a container for text. It has no required attributes. Style , class, and id are the commonly used attributes.

Please Login to comment...

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Crack the top 30+ HTML interview questions and answers

Now that we have a general sense of what a frontend interview entails, let’s dive into HTML. We know that HTML is just one part of the picture, but it is the foundation of web development; having a strong grasp on this is the only way to progress with web development. Let’s take a deep dive into 30+ HTML related questions you can expect to see in a coding interview.

1. What is HTML?

HTML , which stands for Hyper Text Markup Language, is a standard text formatting language used to create pages on the web. The language allows text to be more interactive and dynamic. Beyond that, it can turn text into images, tables, links, and more.

2. What are W3C and WHATWG?

The World Wide Web Consortium (W3C) is a community of developers that works towards setting a set of global standards for development.

WHATWG (Web Hypertext Application Technology Working Group, was created during a W3C workshop led by Apple, Mozilla, and Opera in 2004. WHATWG is a community of developers that focuses on specifically setting HTML standards to fulfill the needs of users.

3. What is the basic structure of the HTML template?

4. What are attributes?

Each tag can take in additional attributes that change the way the tag behaves. For example, an input tag has a type attribute, which allows you to specify whether the input field is a text field, checkbox, or radio button among other options.

5. How do you use attributes?

Attributes are specified within the HTML tag, inside the two brackets. An attribute field is followed by an equals sign and the value of the attribute is closed by double quotes ” . Make sure not to include any spaces before and after the equals sign for good practice. You can use multiple attributes one after another, separated by a space.

Here’s an example:

6. What are entities in HTML?

HTML character entities are used to replace reserved characters in HTML. You can also replace characters that are not present on your keyboard by using entities.

7. How can you reduce a page’s load time?

A basic rule to optimize our page’s loading time is to reduce the download size of our elements on the web page, as well as reduce the number of HTTP requests.

We can also follow some of the techniques below:

File compression
File concatenation
Re-organizing and refining code
Using internal and external style sheets and minimizing inline CSS
Using a CDN for media files
Hosting our website’s assets on different domains while also reducing DNS lookups

8. What is HTML5?

HTML5 is the most recent version of the Hypertext Markup Language. HTML5 introduces several new features:

Adding new attributes
Allow offline editing
Adding new parsing rules to enhance flexibility
Support (Web SQL)
Support Protocol and MIME handler registration, allowing you to change the way of user interaction with documents.

9. What are the advantages of using HTML5?

HTML5 makes it significantly easier to build interactive websites when embedding video, audio, and graphics on your webpage. HTML5 supports multimedia technology and graphical content to the web without having to use third-party plugins like Flash.

More features:

Geolocation
Offline application cache
Error handling
Browser support and compatibility
Client-side database

Supports new API:

Browser History management
Drag and Drop
3D drawing on webpage
Time media playback

Supported applications include:

Web workers - JavaScript
Local file access
Application cache
Local data storage
Local SQL database

10. What are semantic elements in HTML5?

Semantic HTML provides meaning to a webpage rather than just the presentation aspect of a webpage. For example, a p tag indicates that the text is a paragraph. This is both semantic and presentation in nature as the browser knows how to display a paragraph, and people know what paragraphs are.

In contrast, tags like <b> and <i> are not semantic because they only tell the browser what the text should look like in terms of presentation. They do not provide additional meaning to the markup semantically.

11. What is an API for HTML5?

An API, which stands for Application Programming Interfaces, is a way to build various web applications through pre-built components. Developers can more quickly build their applications by using components from existing APIs into their new site.

12. Some APIs in HTML5 are:

Data transfer API
User Interaction
Command API
Text Track API
HTML Geolocation
HTML Local Storage
Constraint Validation API

13. What is the purpose of <!Doctype html> ?

Doctype is declared at the top of every HTML5 page, instructing the web browser on the version and type of HTML being used in the document. This is important because it allows the browser to read and load the document properly.

There are three types of Doctypes:

Strict Doctype
Frameset Doctype
Transitional Doctype

Succeed in your frontend interview.

Avoid waiting another 6 months to apply by taking our HTML coding interview course. Educative’s text-based courses are easy to skim and feature live coding environments, making learning quick and efficient.

HTML for Front-end Interviews

14. What are tags?

HTML tags are composed of an opening tag, content, and an ending tag. HTML tags are utilized to create HTML documents and render specific properties for a text element. Each HTML tag has a different set of properties.

Syntax: <tag> content </tag>

15. What is the anchor tag?

In HTML, the anchor tag is used to link between two different sections of a page or two different web pages altogether. The form for the anchor tag is as seen below:

16. Which HTML tag is used to display data in a tabular form?

To display data in a tabular form, we can use the HTML table tag. Here is the list of tags involved when creating a table:

<table> : defines a table
<tr> : defines a table row
<th> : defines a header cell
<td> : defines a cell
<caption> : defines a table caption
<colgroup> : specifies a group of one or more columns in a table for formatting
<col> : used with <colgroup> to specific properties for each column
<tbody> : groups the body content in a table
<thead> : groups the header content in a table
<tfooter> : groups the footer content in a table

17. What is an iFrame?

The <iframe> tag is used to display a webpage within a web page. By using the <iframe> tag, we can insert outside documents into the main HTML document easily. A common example of the <iframe> tag is banner ads on websites from a third party platform. Using iframes can introduce security risks because the website is now vulnerable to cross-site attacks.

18. What are the media element tags introduced by HTML5?

Here’s a list of new element tags introduced by HTML5:

<audio> : Used for multimedia sounds, audio streams, music, embed audio content without having to utilize an additional plugin like the flash player
<source> : Used for multiple media resources in media elements, including audio, video, picture, and more
<embed> : Used for external applications or embedded content like a plug-in
<video> : Used for video content like video streams, movie clips, and more
<track> : Used for adding subtitles containing text in video or audio elements.

19. What are the common lists used when designing a webpage?

There are several different types of lists used when designing a webpage. Here are the most common ones:

Ordered list : List is displayed in a number format from 1 to n. Ordered list can be created using the ol tag.

Unordered list : List is displayed using bullet points. Unordered list can be created using the ul tag.

Definition list : List is displayed in definition form like a dictionary. The dl , dt , and dd tags are used to create a definition list.

20. What is the canvas element in HTML5?

The <canvas> element is a container to draw graphics on web pages using a scripting language like Python or JavaScript. The element allows for scriptable and dynamic rendering of 2D shapes and images. In canvas, there are several different approaches to drawing paths, boxes, circles, text, and more.

Other / Miscellaneous

21. What is a stylesheet?

A stylesheet is created to build a consistent and concise style template that can be applied to your web pages. A stylesheet provides extra elements in terms of the design, look, and formatting of your document. Typically, we use CSS to specify the template in your stylesheet.

22. How many types of headings can an HTML document support?

An HTML document can support six level of heading from <h1> to <h6> .

23. Using an anchor tag, how can you open a URL into a new tab when clicked?

To direct a user to an URL into a new tab upon being clicked, we can set the target attribute equal to _blank . See the example below:

24. What is an SVG?

SVG, which stands for Scalable Vector Graphics, is an XML based format to draw vector images. SVG images are defined with XML text files, which we can create and edit with a text editor. We can use SVG to create vector-like diagrams: pie charts, 2-dimension graphs, etc.

Congratulations on reviewing these problems! The questions above should give you a strong sense of what lies ahead in an interview. These are the most common questions, but there is still a lot more to learn!

To get you up to speed, we’ve compiled a list of more HTML questions you might expect to see in a front-end interview. Be sure to prepare as many as you can and recognize the patterns that will speed up your process.

All of these questions and more are answered in Educative’s definitive HTML study guide for coding interviews.

Do all HTML tags have an end tag?

What is formatting in HTML?

What is the difference between HTML elements and tags?

What is an image map?

How to create a nested webpage in HTML?

What is the difference between DIV and SPAN in HTML?

How to make a picture of a background image of a web page?

What are empty elements?

What is the use of a span tag? Give one example.

Why is a URL encoded in HTML?

Which type of video formats are supported by HTML5?

What is the use of figcaption tag in HTML 5?

What is the purpose of using alternative texts in images?

How to create a new HTML element?

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

What is the advantage of collapsing white space?

When is it appropriate to use frames?

What is the hierarchy that is being followed when it comes to style sheets?

How do you create text on a webpage that allows you to send an email when clicked?

How are active links different from normal links?

What are the different tags to separate sections of text?

How can we comment in HTML?

What are inline elements and block-level elements in HTML?

Having a good foundation of your HTML understanding is vital if you want to pass the frontend coding interview and not get stuck on the basics. Once you feel up to speed on HTML, you’ll want to move onto to CSS, JavaScript, and advanced web dev concepts that unite them all.

If you are looking for a one-stop-shop for your frontend interview prep, check out our frontend interview prep course, HTML for Front-end Interviews . It walks you through all the need-to-know concepts with hands-on practice, real-world examples, and more.

Keep reading about HTML and coding interviews

Acing the JavaScript Interview: top questions explained
Revamp Your Front-End Skills: hands-on with HTML5 and CSS3
Ace the top JavaScript design patterns for coding interviews

Learn in-demand tech skills in half the time

Mock Interview

Skill Paths

Assessments

Learn to Code

Tech Interview Prep

Generative AI

Data Science

Machine Learning

GitHub Students Scholarship

Early Access Courses

For Individuals

Try for Free

Gift a Subscription

Become an Author

Become an Affiliate

Earn Referral Credits

Cheatsheets

Frequently Asked Questions

Cookie Policy

Business Terms of Service

Data Processing Agreement

Download Interview guide PDF

Html interview questions, download pdf.

This article covers the most frequently asked HTML and HTML5 questions asked in interviews.

Before starting with the interview questions on HTML Language, let’s first go through HTML, what is HTML, the career opportunities it provides, etc.

What is HTML?

HTML stands for HyperText 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.

HTML is an important language to learn if anyone wants to work in the web development domain [Web designers, Web Developers]. HTML alone is not sufficient for a web developer because HTML only defines the structure of the data that will be rendered on the browser in a webpage, to make it visually appealing and to make it functional, we will need to use CSS and Javascript respectively.

The latest version of HTML is HTML5. There are two main components in HTML language, Tags and Attributes. The below image shows some basic HTML tags and attributes.

HTML Interview Questions and Answers

1. are the html tags and elements the same thing.

No. HTML elements are defined by a starting tag, may contain some content and a closing tag.For example, <h1>Heading 1</h1> is a HTML element but just <h1> is a starting tag and </h1> is a closing tag.

2. What are tags and attributes in HTML?

Tags are the primary component of the HTML that defines how the content will be structured/ formatted, whereas Attributes are used along with the HTML tags to define the characteristics of the element. For example, <p align=” center”>Interview questions</p>, in this the ‘align’ is the attribute using which we will align the paragraph to show in the center of the view.

3. What are void elements in HTML?

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

4. What is the advantage of collapsing white space?

In HTML, a blank sequence of whitespace characters is treated as a single space character, Because the browser collapses multiple spaces into a single space character and this helps a developer to indent lines of text without worrying about multiple spaces and maintain readability and understandability of HTML codes.

5. What are HTML Entities?

In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. To use these characters in our webpage we need to use the character entities called HTML Entities. Below are a few mapping between the reserved character and its respective entity character to be used.

Software Dev
Data Science

6. What are different types of lists in HTML?

7. What is the ‘class’ attribute in HTML?

The class attribute is used to specify the class name for an HTML element. Multiple elements in HTML can have the same class value. Also, it is mainly used to associate the styles written in the stylesheet with the HTML elements.

8. What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML elements?

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.

9. Define multipart form data?

Multipart form data is one of the values of the enctype attribute. It is used to send the file data to the server-side for processing. The other valid values of the enctype attribute are text/plain and application/x-www-form-urlencoded.

10. Describe HTML layout structure.

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.

11. How to optimize website assets loading?

To optimize website load time we need to optimize its asset loading and for that:

CDN hosting - A CDN or content delivery network is geographically distributed servers to help reduce latency.
File compression - This is a method that helps to reduce the size of an asset to reduce the data transfer
File concatenation - This reduces the number of HTTP calls
Minify scripts - This reduces the overall file size of js and CSS files
Parallel downloads - Hosting assets in multiple subdomains can help to bypass the download limit of 6 assets per domain of all modern browsers. This can be configured but most general users never modify these settings.
Lazy Loading - Instead of loading all the assets at once, the non-critical assets can be loaded on a need basis.

12. What are the various formatting tags in HTML?

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

13. What are the different kinds of Doctypes available?

The three kinds of Doctypes which are available:

Strict Doctype
Transitional Doctype
Frameset Doctype

14. Please explain how to indicate the character set being used by a document in HTML?

The character set is defined in <meta> tag inside <head> element.

15. What is the difference between <strong>, <b> tags and <em>, <i> tags?

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.

16. What is the significance of <head> and <body> tag in HTML?

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

17. Can we display a web page inside a web page or Is nesting of webpages possible?

Yes, we can display a web page inside another HTML web page. HTML provides a tag <iframe> using which we can achieve this functionality.

18. How is Cell Padding different from Cell Spacing?

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. Please refer to the above figure example to find the difference.

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

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

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

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

21. In how many ways can we position an HTML element? Or what are the permissible values of the position attribute?

There are mainly 7 values of position attribute that can be used to position an HTML element:

static : Default value. Here the element is positioned according to the normal flow of the document.
absolute : Here the element is positioned relative to its parent element. The final position is determined by the values of left, right, top, bottom.
fixed : This is similar to absolute except here the elements are positioned relative to the <html> element.
relative : Here the element is positioned according to the normal flow of the document and positioned relative to its original/ normal position.
initial : This resets the property to its default value.
inherit : Here the element inherits or takes the property of its parent.

22. In how many ways you can display HTML elements?

inline : Using this we can display any block-level element as an inline element. The height and width attribute values of the element will not affect.
block : using this, we can display any inline element as a block-level element.
inline-block : This property is similar to inline, except by using the display as inline-block, we can actually format the element using height and width values.
flex : It displays the container and element as a flexible structure. It follows flexbox property.
inline-flex : It displays the flex container as an inline element while its content follows the flexbox properties.
grid : It displays the HTML elements as a grid container.
none : Using this property we can hide the HTML element.

Below are some of the display types which are rarely used:

inline-table
table-column
inline-grid
table-caption

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

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.

24. How to specify the link in HTML and explain the target attribute?

HTML provides a hyperlink - <a> tag to specify the links in a webpage. The ‘href’ attribute is used to specify the link and the ‘target’ attribute is used to specify, where do we want to open the linked document. The ‘target’ attribute can have the following values:

_self : This is a default value. It opens the document in the same window or tab as it was clicked.
_blank : It opens the document in a new window or tab.
_parent : It opens the document in a parent frame.
_top : It opens the document in a full-body window.

25. In how many ways can we specify the CSS styles for the HTML element?

There are three ways in which we can specify the styles for HTML elements:

Inline : Here we use the ‘style’ attribute inside the HTML element.
Internal: Here we use the <style> tag inside the <head> tag. To apply the style we bind the elements using ‘id’ or ‘class’ attributes.
External : Here we use the <link> tag inside <head> tag to reference the CSS file into our HTML code. Again the binding between elements and styles is done using ‘id’ or ‘class’ attributes.

26. Difference between link tag <link> and anchor tag <a>?

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.

27. How to include javascript code in HTML?

HTML provides a <script> tag using which we can run the javascript code and make our HTML page more dynamic.

28. When to use scripts in the head and when to use scripts in the body?

If the scripts contain some event-triggered functions or jquery library then we should use them in the head section. If the script writes the content on the page or is not inside a function then it should be placed inside the body section at the bottom. In short, follow below three points:

Place library scripts or event scripts in the head section.
Place normal scripts that do not write anything on the page, in the head section until there is any performance issue.
Place scripts that render something on the web page at the bottom of the body section.

29. What are forms and how to create forms in HTML?

The HTML form is used to collect the user inputs. HTML provides a <form> tag to create forms. To take input from the user we use the <input> tag inside the form so that all collected user data can be sent to the server for processing. There are different input types like ‘button’, ‘checkbox’, ‘number’, ‘text’, ‘password’, ‘submit’ etc.

30. How to handle events in HTML?

HTML allows event trigger actions in browsers using javascript or JQuery. There are a lot of events like ‘onclick’, ‘ondrag’, ‘onchange’, etc.

HTML5 Interview Questions

1. what are some of the advantages of html5 over its previous versions.

Some advantages of HTML5 are:-

It has Multimedia Support.
It has the capabilities to store offline data using SQL databases and application cache.
Javascript can be run in the background.
HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
Included new Semantic tags and form control tags.

2. How can we include audio or video in a webpage?

HTML5 provides two tags: <audio> and <video> tags using which we can add the audio or video directly in the webpage.

3. Inline and block elements in HTML5?

4. What is the difference between <figure> tag and <img> tag?

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.

5. How to specify the metadata in HTML5?

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.

6. Is the <datalist> tag and <select> tag same?

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.

7. Define Image Map?

Image Map lets a developer map/link different parts of images with the different web pages. It can be achieved by the <map> tag in HTML5, using which we can link images with clickable areas.

8. What are Semantic Elements?

Semantic elements are those which describe the particular meaning to the browser and the developer. Elements like <form>, <table>, <article>, <figure>, etc., are semantic elements.

9. Convert the below data into Tabular format in HTML5?

S.no., Language, Mostly used for

1, HTML, FrontEnd

2, CSS, FrontEnd

3, Python, BackEnd

10. What is the difference between <meter> tag and <progress> tag?

<progress> tag should be used when we want to show the completion progress of a task, whereas if we just want a scalar measurement within a known range or fraction value. Also, we can specify multiple extra attributes for <meter> tags like ‘form’, ‘low’, ‘high’, ‘min’, etc.

11. Is drag and drop possible using HTML5 and how?

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.

12. Difference between SVG and Canvas HTML5 element?

13. what type of audio files can be played using html5.

HTML5 supports the following three types of audio file formats:

14. What are the significant goals of the HTML5 specification?

These were the target area of the HTML5 specs:

Introduction of new element tags to better structure the web page such as <header> tag.
Forming a standard in cross-browser behavior and support for different devices and platforms
Backward compatible with the older version HTML web pages
Introduction of basic interactive elements without the dependency of plugins such as <video> tag instead of the flash plugin.

15. Explain the concept of web storage in HTML5.

This web storage helps in storing some of the static data in the local storage of the browser so that we do not need to fetch it from the server every time we need it. There is a size limit based on different browsers. This helps in decreasing the load time and a smooth user experience. There are two types of web storage that are used to store data locally in HTML5:

Local Storage - This helps in storing data that will be retained even though the user reopens the browser. It is stored for each webapp on different browsers.
Session Storage - This is used for one session only. After the user closes the browser this gets deleted.

16. What is Microdata in HTML5?

It is used to help extract data for site crawlers and search engines. It is basically a group of name-value pairs. The groups are called items, and each name-value pair is a property. Most of the search engines like Google, Microsoft, Yandex, etc follow schema.org vocabulary to extract this microdata.

itemid – The unique, global identifier of an item.
itemprop – Used to add properties to an item.
itemref – Provides a list of element ids with additional properties.
itemscope – It defines the scope of the itemtype associated with it.
itemtype – Specifies the URL of the vocabulary that will be used to define itemprop.

The above example will be parsed by Google as

17. Which tag is used for representing the result of a calculation? Explain its attributes.

The <output> tag is used for representing the result of a calculation. It has the following attributes:

for - It defines the relationship between the elements used in calculation and result.
form - This is used to define the form the output element belongs to.
name - The name of the output element.

The above example looks like

18. What is new about the relationship between the <header> and <h1> tags in HTML5?

As HTML5 was all about better semantics and arrangements of the tags and elements, the <header> tag specifies the header section of the webpage. Unlike in previous version there was one <h1> element for the entire webpage, now this is the header for one section such as <article> or <section>. According to the HTML5 specification, each <header> element must at least have one <h1> tag.

19. Explain HTML5 Graphics.

HTML5 supports two kinds of graphics:

Canvas - It is like drawing on a whitepaper or a blank webpage. We can add different graphic designs on web pages with available methods for drawing various geometrical shapes.
SVG - Scalable Vector Graphics are used mostly for diagrams or icons. It follows the XML format.

Both of the above examples produce this output and represent two different approaches provided by HTML5 to implement graphical aspects in the webpage.

20. Explain new input types provided by HTML5 for forms?

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”

21. What are the New tags in Media Elements in HTML5?

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

22. Why do you think the addition of drag-and-drop functionality in HTML5 is important? How will you make an image draggable in HTML5?

The drag and drop functionality is a very intuitive way to select local files. This is similar to what most of the OS have copy functionality thus making it very easy for the user to comprehend. Before the native drag and drop API, this was achievable by writing complex Javascript programming or external frameworks like jQuery.

To enable this functionality there is a draggable attribute in the <img> tag and need to set ondrop and ondragover attribute to an eventhandler available in scripts.

23. Why do we need the MathML element in HTML5?

MathML stands for Mathematical Markup Language. It is used for displaying mathematical expressions on web pages. For this <math> tag is used.

This displays the equation a2 + b2 + 2ab = 0.

24. What are the server-sent events in HTML5?

The events pushed from the webserver to the browsers are called server-sent events. DOM elements can be continuously updated using these events. This has a major advantage over straight-up polling. In polling, there is a lot of overhead since every time it is establishing an HTTP connection and tearing it down whereas, in server-sent events, there is one long-lived HTTP connection. To use a server-sent event, <eventsource> element is used. The src attribute of this element specifies the URL from which sends a data stream having the events.

25. What are Web Workers?

These are added to bring parallelism and async capability. It runs in the background to do the computationally expensive tasks without yielding to make the page responsive. It is achieved by starting a separate thread for such tasks. These are not meant to perform UI operations. There are three types of web workers:

Dedicated Workers - These are workers that are utilized by a single script.
Shared Workers -These are workers that are utilized by multiple scripts running in different windows, IFrames, etc.
Service Workers - These act as proxy servers between web applications, the browser, and the network. Mostly used for push notifications and sync APIs.

26. What is the usage of a novalidate attribute for the form tag that is introduced in HTML5?

Its value is a boolean type that indicates whether or not the data being submitted by the form will be validated beforehand. By making this false, forms can be submitted without validation which helps users to resume later also.

27. What are raster images and vector images?

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

28. How to support SVG in old browsers?

To support old browsers instead of defining the resource of svg in src attribute of <img> tag, it should be defined in srcset attribute and in src the fallback png file should be defined.

29. What are different approaches to make an image responsive?

Art direction - Using <picture> element the landscape image fully shown in desktop layout can be zoomed in with the main subject in focus for a portrait layout.

Bigger Screen (>650px)

For any other screen

Resolution switching - Instead of zoom and crop the images can be scaled accordingly using vector graphics. Also, this can be further optimized to serve different pixel density screens as well.

For example SVG

30. What is a manifest file in HTML5?

The manifest file is used to list down resources that can be cached. Browsers use this information to make the web page load faster than the first time. There are 3 sections in the manifest file

CACHE Manifest - Files needs to be cached
Network - File never to be cached, always need a network connection.
Fallback - Fallback files in case a page is inaccessible

31. What is the Geolocation API in HTML5?

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.

32. Write HTML5 code to demonstrate the use of Geolocation API.

The above example asks for user permission for accessing the location data via geolocation API and after clicking the button the coordinates of the physical location of the client get displayed.

33. Explain Web Components and it’s usage.

These are used to create reusable custom elements which are very difficult in traditional HTML. It consists of three technologies:

Custom elements - These are JavaScript APIs that help in defining custom elements and their behavior.
Shadow DOM - These are JavaScript APIs that attach an encapsulated shadow DOM tree to an element to keep the element’s features private and unaffected by other parts.

Here 2 custom elements are defined <open-shadow> and <closed-shadow> which takes their text content and inserts them into a shadow DOM as content of a <p> element.

HTML templates - The markup templates are written using <template> and <slot> elements which can be reused multiple times as the basis of a custom element's structure.

Here we are reusing the <my-paragraph> template.

References:

Mozilla MDN

Additional Resource

Practice Coding
Features of HTML
HTML Projects
HTML5 Features
Different types of css
Top Web Developer Interview Questions
How To Become Front End Developer
Difference Between HTML and HTML5
Difference Between Frontend and Backend
Difference Between HTML and JavaScript
Difference Between HTML and XML
Difference Between HTML and XHTML
Difference Between HTML and CSS
View All Technical Interview Questions

If you have used inline, internal, and external all the 3 stylings in HTML for a single element then which style will be applied?

Comments in HTML is done by:

Which of the following is the correct HTML syntax for adding background color?

Which is the correct HTML syntax for adding a link to the image?

Which of the following are not semantic tags?

Which is the correct attribute to change the size of text?

What are the correct extensions for saving an HTML file?

HTML attribute values are case-sensitive?

Using which attribute we can add a tooltip in the HTML element.

Which of the following is not a value of the attribute display?

Which of the following is correct about custom attributes in HTML5?

Which of the following attribute triggers an event when all the media data of a media element is loaded?

Which attribute defines the accelerator key to be used for keyboard access to an element.

How to set the playback speed of audio/video?

Which one is not a semantic html5 element?

Which of the following method cancels an ongoing watchPosition call?

Which of the following attribute triggers events when the document has changed?

Why iframe is used?

Which of the following attribute specifies if the user can edit the element's content or not?

Which of the following attribute triggers events before the document is printed?

Practice Questions
Programming
System Design
Fast Track Courses
Online Interviewbit Compilers
Online C Compiler
Online C++ Compiler
Online Java Compiler
Online Javascript Compiler
Online Python Compiler
Interview Preparation
Java Interview Questions
Sql Interview Questions
Python Interview Questions
Javascript Interview Questions
Angular Interview Questions
Networking Interview Questions
Selenium Interview Questions
Data Structure Interview Questions
Data Science Interview Questions
System Design Interview Questions
Hr Interview Questions
Html Interview Questions
C Interview Questions
Amazon Interview Questions
Facebook Interview Questions
Google Interview Questions
Tcs Interview Questions
Accenture Interview Questions
Infosys Interview Questions
Capgemini Interview Questions
Wipro Interview Questions
Cognizant Interview Questions
Deloitte Interview Questions
Zoho Interview Questions
Hcl Interview Questions
Highest Paying Jobs In India
Exciting C Projects Ideas With Source Code
Top Java 8 Features
Angular Vs React
10 Best Data Structures And Algorithms Books
Best Full Stack Developer Courses
Best Data Science Courses
Python Commands List
Data Scientist Salary
Maximum Subarray Sum Kadane’s Algorithm
Python Cheat Sheet
C++ Cheat Sheet
Javascript Cheat Sheet
Git Cheat Sheet
Java Cheat Sheet
Data Structure Mcq
C Programming Mcq
Javascript Mcq

1 Million +

Top 100+ HTML Interview Questions and Answers

Explore a comprehensive list of HTML interview questions and answers, designed for beginners and professionals to enhance their web development skills.

I am looking to hire

I am looking for a job

HTML Interview Questions and Answers is a comprehensive collection of questions and answers designed for individuals preparing for interviews in web development and design roles. HTML Interview Questions and Answers cover a wide range of topics related to HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications.

Basic HTML Interview Questions and Answers

HTML Interview Questions for freshers provide an overview of fundamental concepts and elements within HTML (HyperText Markup Language), the standard markup language for creating web pages and web applications. HTML Interview Questions for freshers aim to equip candidates with knowledge about HTML syntax, tags, attributes, and best practices.

What is HTML and what does it stand for?

View Answer

Hide Answer

HTML stands for HyperText Markup Language. HTML is the standard markup language used to create and design web pages by defining the structure and layout through various tags and attributes.

Can you explain the basic structure of an HTML document?

The basic structure of an HTML document includes the <!DOCTYPE html> declaration, followed by <html> tag, which contains the <head> section and the <body> section. The <head> section holds meta-information and links to scripts and stylesheets, while the <body> section contains the content displayed on the web page.

What are HTML tags?

HTML tags are the building blocks of HTML, used to define elements within a web page. These tags are enclosed in angle brackets, such as <tagname>, and usually come in pairs with a start tag and an end tag.

How do you create a hyperlink in HTML?

You create a hyperlink in HTML using the <a> tag, specifying the URL in the href attribute. This element allows users to navigate to other web pages or resources.

What is the purpose of the doctype declaration in HTML?

The doctype declaration in HTML tells the web browser which version of HTML the page is written in. It ensures the browser renders the page correctly according to the HTML standards.

How do you insert an image into an HTML page?

You insert an image into an HTML page using the <img> tag and specifying the image source with the src attribute. The alt attribute provides alternative text if the image cannot be displayed.

What are the differences between <div> and <span> tags in HTML?

The difference between <div> and <span> tags in HTML is that <div> is a block-level element used for grouping and styling large sections of content, while <span> is an inline element used to style small portions of text or other elements within a block.

How do you create a table in HTML?

You create a table in HTML using the <table> tag, along with <tr> for table rows, <td> for table cells, and optionally <th> for table headers. These elements structure the table layout.

What is the function of the <head> section in an HTML document?

The function of the <head> section in an HTML document is to contain meta-information about the document, links to stylesheets, external files, and scripts that are not displayed directly on the web page.

Your engineers should not be hiring. They should be coding.

Help your team focus on what they were hired for. Flexiple will manage your entire hiring process and scale your tech team.

How do you use HTML to create a list?

You use HTML to create a list by using the <ul> tag for an unordered list, with <li> tags for each item, or the <ol> tag for an ordered list, also with <li> tags for each item.

What is the difference between ordered and unordered lists in HTML?

The ordered lists (<ol>) display items in a numbered format. The unordered lists (<ul>) display items with bullet points.

How do you add a comment in an HTML document?

You add a comment in an HTML document by enclosing the comment text within . Comments are not displayed in the web browser but can be seen in the page source.

What is the purpose of the <form> tag in HTML?

The purpose of the <form> tag in HTML is to create an interactive form where users can enter data. This data can then be sent to a server for processing.

How do you make text bold in HTML?

You make text bold in HTML using the <strong> or <b> tag, which increases the emphasis or simply style the text as bold without implying importance.

What is the difference between the <strong> and <b> tags in HTML?

The <strong> indicates importance and semantic emphasis. The <b> is used purely for visual styling without conveying any special importance.

How do you create a dropdown list in HTML?

You create a dropdown list in HTML using the <select> tag, which contains multiple <option> tags for each item in the list. Users can select one of the options from the dropdown.

What is an iframe in HTML, and how do you use it?

An iframe in HTML is an inline frame used to embed another document within the current HTML document. You use it with the <iframe> tag, specifying the source of the document with the src attribute.

How do you make a webpage responsive using HTML?

You make a webpage responsive using HTML by employing responsive meta tags in the <head> section, like <meta name="viewport" content="width=device-width, initial-scale=1.0">, and by using flexible layouts, images, and CSS media queries.

What are semantic HTML tags?

Semantic HTML tags provide information about the contents of those tags that goes beyond just how they look on a page. Examples include <article>, <footer>, <header>, <nav>, and <section>, which define parts of a web page or its structure.

How do you define a header section in an HTML document?

To define a header section in an HTML document using the <header> tag, which typically contains introductory content, navigation links, or logos.

What is the purpose of the <footer> tag in HTML?

The purpose of the <footer> tag in HTML is to define the footer section of a document or section, usually containing copyright information, contact details, or links to related documents.

How do you include JavaScript in an HTML document?

To include JavaScript in an HTML document by using the <script> tag, either by embedding the script directly within the tag or by specifying the path to an external JavaScript file with the src attribute.

What is the difference between the <section> and <article> tags in HTML?

The <section> is used for grouping thematically related content. The <article> is used for self-contained, independently distributable content.

How do you embed a video in an HTML document?

To embed a video in an HTML document using the <video> tag, specifying the source of the video with the src attribute and adding controls with the controls attribute.

What are entities in HTML, and why are they used?

Entities in HTML are used to represent special characters that are reserved in HTML or not easily entered with a keyboard. They start with & and end with ‘;’ like & for the ampersand symbol.

How do you create a line break in HTML?

To create a line break in HTML using the <br> tag, which inserts a single line break in the text.

What is the purpose of the <nav> element in HTML?

The purpose of the <nav> element in HTML is to define a section of a page that links to other pages or to parts within the page, which is often used for navigation menus.

How do you specify the character encoding in an HTML document?

To specify the character encoding in an HTML document with a <meta> tag in the <head> section, using the charset attribute, like <meta charset="UTF-8">.

What are data attributes in HTML, and how are they used?

Data attributes in HTML are used to store custom data directly within HTML elements, accessible by JavaScript. They are prefixed with data-, followed by the attribute name.

How do you make an HTML element invisible without removing it from the document?

To make an HTML element invisible without removing it from the document by using the CSS display: none; or visibility: hidden; property. display: none; removes the element from the document layout, while visibility: hidden; makes it invisible but still takes up space in the layout.

Intermediate-level HTML Interview Questions and Answers

Intermediate HTML Interview Questions delve into the nuanced aspects of HTML, requiring a more profound understanding of the language beyond basic tags and attributes. The intermediate HTML Interview Questions section targets professionals with a foundational knowledge of HTML, aiming to evaluate their proficiency with complex structures, semantic HTML5 elements, and the integration of HTML with other web technologies such as CSS and JavaScript.

How do you apply CSS styles to an HTML document?

To apply CSS styles to an HTML document in three ways: inline styles using the style attribute directly within HTML tags, internal styles using the <style> tag within the <head> section, and external styles by linking to a CSS file with the <link> tag.

What is the difference between classes and IDs in HTML?

The classes can be used multiple times within a document to group elements for styling. The IDs are unique identifiers for a single element.

Can you explain the concept of the Document Object Model (DOM)?

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; thus, programming languages can interact with the page.

How do you implement HTML forms for user input?

To implement HTML forms for user input using the <form> tag, which contains form elements like <input>, <textarea>, <button>, and <select> that allow users to enter data.

What are the methods for including JavaScript in an HTML document?

The methods for including JavaScript in an HTML document are by embedding script directly within the <script> tag or by linking to an external JavaScript file using the src attribute of the <script> tag.

How do you ensure your HTML page is accessible to people with disabilities?

Ensure your HTML page is accessible to people with disabilities by using semantic HTML tags, ensuring proper use of <a> tags for navigable content, providing alternative text for images with the alt attribute, and ensuring forms are labeled correctly.

What is the purpose of the <meta> tag in HTML?

The purpose of the <meta> tag in HTML is to provide metadata about the HTML document, such as character encoding, author, and viewport settings, that is not displayed directly on the webpage but is useful for browsers and search engines.

How do you use HTML5 semantic elements to improve page structure?

To use HTML5 semantic elements to improve page structure by using tags like <header>, <footer>, <article>, <section>, and <nav>. These elements define the different parts of a web page, making it more readable and accessible.

What are some new form elements introduced in HTML5?

Some new form elements introduced in HTML5 include <datalist>, for providing an "autocomplete" feature; <range>, for inputting a value within a specific range; and <email>, <url>, <date>, <time>, <color>, for more specific user input types.

How do you use the <canvas> element in HTML5?

To use the <canvas> element in HTML5 by specifying it in the HTML to define a drawing area, and then using JavaScript to draw graphics on it, such as animations, game graphics, or other visual images.

What are Web Workers in HTML5, and how do you use them?

Web Workers in HTML5 are used to run scripts in background threads. You use them by creating a new Worker object in your JavaScript code and specifying the script to be run in this background thread, allowing for tasks to be performed without interfering with the user interface.

How do you handle browser compatibility in your HTML coding?

To handle browser compatibility in your HTML coding by using cross-browser compatible HTML and CSS code, employing feature detection libraries like Modernizr, and providing fallbacks or polyfills for unsupported HTML5 features in older browsers.

What is the significance of HTML5 Web Storage?

The significance of HTML5 Web Storage is that it allows for data to be stored locally within the user's browser, enabling web applications to store data persistently or session-based, improving performance and user experience without reliance on server-based cookies.

How do you implement audio and video in HTML5?

To implement audio and video in HTML5 using the <audio> and <video> tags, respectively, specifying the source files with the src attribute or within <source> tags for multiple formats to ensure compatibility across different browsers.

What are some HTML5 APIs, and how are they used?

Some HTML5 APIs include the Geolocation API for identifying the user's location, the Drag and Drop API for enabling drag and drop functionality, and the Canvas API for drawing graphics programmatically. These APIs are used to enhance web applications with modern, interactive features.

How do you optimize an HTML page's load time?

Optimize an HTML page's load time by minimizing the size of images and other media files, compressing CSS and JavaScript files, reducing HTTP requests by combining files where possible, and using lazy loading for images and scripts that are not immediately necessary.

What is the role of the <aside> tag in an HTML document?

The role of the <aside> tag in an HTML document is to define content aside from the content it is placed in, typically used for sidebars, call-out boxes, or content that is related to the main content but not integral to it.

How do you create a navigation bar using HTML and CSS?

To create a navigation bar using HTML and CSS by using the <nav> element to define the navigation section and using <ul>, <li>, and <a> elements to create the menu items. CSS is used to style the navigation bar, including layout, colors, and hover effects.

What are the differences between <blockquote> and <q> tags?

The <blockquote> is used for longer quotes that are block-level, often used with a citation using the cite attribute. The<q> is used for shorter, inline quotations.

How do you use the <datalist> element in HTML5?

To use the <datalist> element in HTML5 by associating it with an <input> element. This provides a list of predefined options to the user as they type, facilitating an autocomplete feature.

What is the purpose of the contenteditable attribute in HTML5?

The purpose of the contenteditable attribute in HTML5 is to specify editable elements on a webpage, allowing users to modify the content directly in the browser.

How do you make an HTML element draggable?

To make an HTML element draggable by setting the draggable attribute to "true". This enables the element to be dragged and dropped with the mouse or other input devices.

What is the difference between GET and POST methods in form submission?

The difference between GET and POST methods in form submission is that GET appends the form data to the URL, suitable for non-sensitive data and bookmarking, while POST sends the data as a request body, better for sensitive data as it does not display in the URL.

How do you use the <output> element in HTML forms?

To use the <output> element in HTML forms to represent the result of a calculation or user action within the form, dynamically displaying outputs that depend on user input.

What are microdata in HTML5, and how do you use them?

Microdata in HTML5 is used to add semantic markup to HTML content, allowing search engines and other applications to better understand the data and its context. You use microdata by adding specific attributes like itemscope, itemtype, and itemprop to HTML elements.

How do you structure a multi-page website using HTML?

To structure a multi-page website using HTML by creating individual HTML files for each page, using consistent naming conventions, and linking between them with <a> tags. Organize content semantically using HTML5 elements to ensure a coherent structure across pages.

What are the best practices for using headings in HTML?

The best practices for using headings in HTML involve starting with <h1> for the main title, followed by <h2> for main section titles, and so on, down to <h6> for sub-sections, ensuring a logical and hierarchical structure.

How do you use the <figure> and <figcaption> elements in HTML?

To use the <figure> and <figcaption> elements in HTML to associate an image, diagram, or illustration with a caption. <figure> wraps the content, and <figcaption> provides the descriptive text, directly relating the two.

What is the purpose of the <noscript> tag in HTML?

The purpose of the <noscript> tag in HTML is to define alternative content to be displayed in browsers that do not support JavaScript, or if JavaScript is disabled, ensuring the content remains accessible.

How do you create a custom error page using HTML?

To create a custom error page using HTML by designing a standalone HTML document that provides users with helpful information and navigation options in the event of an error, such as a 404 Not Found error. Server configurations must then redirect error responses to this custom HTML page.

Advanced HTML Interview Questions and Answers

HTML Interview Questions for experienced dive into the deeper aspects of HyperText Markup Language, addressing complex elements and attributes that developers encounter in sophisticated web development scenarios. HTML Interview Questions for the experienced section targets experienced developers, focusing on nuanced questions that go beyond basic tags and attributes.

How do you implement progressive enhancement in an HTML document?

To implement progressive enhancement in an HTML document by first ensuring that the core content and functionality are accessible to all users, regardless of their browser's capabilities. Then to enhance the website's functionality and style for browsers that support more advanced features.

Can you explain the concept of shadow DOM and its usage?

The concept of shadow DOM refers to a web standard designed to encapsulate parts of a web component by hiding them in a separate shadow tree. This technique is used to prevent styles from leaking out of the component and maintain a modular design.

What are custom elements in HTML, and how do you define them?

Custom elements in HTML are a feature that allows developers to create their tags with custom behavior and styling. You define them by using the customElements.define() method, which registers the new element and associates it with a class extending HTMLElement.

How do you ensure an HTML page follows SEO best practices?

To ensure an HTML page follows SEO best practices by using semantic HTML5 elements, ensuring proper use of <title> and <meta> tags, optimizing loading times, creating a responsive design, and ensuring all content is accessible and crawlable by search engines.

What is the role of ARIA roles and attributes in HTML?

The role of ARIA roles and attributes in HTML is to improve accessibility by providing extra context to assistive technologies about the purpose and behavior of web elements, especially those that do not convey this information semantically.

How do you use the <template> tag in HTML5?

To use the <template> tag in HTML5 to define a block of HTML code that can be reused multiple times. The content inside a <template> tag is not rendered until it is activated and instantiated by JavaScript, allowing for dynamic content generation.

What techniques do you use for optimizing HTML page rendering?

Techniques used for optimizing HTML page rendering include minimizing reflows and repaints by changing CSS properties efficiently, using efficient CSS selectors, minimizing DOM depth, and ensuring scripts are loaded asynchronously or deferred.

How can you achieve internationalization and localization in HTML content?

To can achieve internationalization and localization in HTML content by using the lang attribute to specify the language of the page or parts thereof, using Unicode for character encoding, and providing translated content or using libraries to dynamically replace text based on user preferences.

What are the security considerations when dealing with HTML and web content?

Security considerations when dealing with HTML and web content include sanitizing user input to prevent XSS attacks, using HTTPS to protect data in transit, implementing content security policies, and ensuring external resources are loaded securely.

How do you use HTML in combination with SVG for graphics?

To use HTML in combination with SVG for graphics by embedding SVG directly into an HTML document using the <svg> tag. This allows for scalable vector graphics that can be styled with CSS and interacted with using JavaScript.

What strategies do you employ for HTML email template design?

Strategies employed for HTML email template design include using tables for layout, inline CSS for styling, optimizing images for fast loading, ensuring responsiveness, and testing across various email clients to ensure compatibility.

How do you implement offline functionality using HTML5?

To implement offline functionality using HTML5 by utilizing service workers to cache key resources and employing the Web Storage API or IndexedDB for storing data locally, allowing web applications to function without an internet connection.

What is the significance of the rel attribute in link tags?

The significance of the rel attribute in link tags is to specify the relationship between the current document and the linked document or resource. It is used for defining stylesheets, preloading resources, and establishing links to authors or alternate versions of the document.

How do you use HTML to enforce content security policies?

To use HTML to enforce content security policies by adding a <meta> tag in the <head> section of the document with the HTTP-equiv attribute set to Content-Security-Policy. This tag defines approved sources of content, helping to prevent XSS attacks and data injection.

What are the best practices for structuring large-scale HTML applications?

Best practices for structuring large-scale HTML applications include using semantic HTML5 tags for clear structuring, employing a consistent naming convention for classes and IDs, modularizing components, and leveraging template and web component technologies for reusable elements.

How can you make an HTML application SEO-friendly despite heavy JavaScript usage?

You can make an HTML application SEO-friendly despite heavy JavaScript usage by ensuring server-side rendering or static rendering of key content, using progressive enhancement techniques, and employing dynamic rendering for search engine crawlers when necessary.

What is the importance of the <main> element in HTML5?

The importance of the <main> element in HTML5 lies in its role as the primary content container of a document. It is used to define the main content area that is directly related to or expands upon the central topic of a document, improving accessibility and search engine optimization.

How do you handle responsive images in HTML5?

To handle responsive images in HTML5 using the <picture> element along with <source> elements specifying different image sources for various screen sizes and resolutions, and the srcset and sizes attributes in <img> tags to provide alternative images.

What methods do you use to test the accessibility of an HTML document?

Methods to test the accessibility of an HTML document include using automated testing tools like axe or Lighthouse, manual testing with screen readers, keyboard-only navigation testing, and ensuring compliance with WCAG guidelines.

How do you dynamically load HTML content into a page?

To dynamically load HTML content into a page using JavaScript, often with XMLHttpRequest or Fetch API to retrieve content from a server, and then insert that content into the DOM using methods like innerHTML or insertAdjacentHTML.

What are service workers, and how do they interact with HTML content?

Service workers are scriptable network proxies in the browser that manage the web page or site's cache for offline use. They interact with HTML content by intercepting network requests and serving cached responses, enabling offline experiences and background syncs.

Can you explain the use of preload and prefetch in HTML?

The use of preload in HTML is to specify resources that the page will need very soon after loading, which should be loaded early in the page's lifecycle. Prefetch is used for resources that might be needed in future navigations, loaded in idle time to improve performance on subsequent page loads.

How do you manage the state in a single-page application using only HTML and JavaScript?

You manage state in a single-page application using only HTML and JavaScript by leveraging the browser's history API for navigation state, and storing application state in memory objects or using Web Storage for persistent state across sessions.

What is the impact of HTTP/2 on HTML page loading and asset delivery?

The impact of HTTP/2 on HTML page loading and asset delivery includes faster loading times due to multiplexing, header compression, and server push features. These improvements allow multiple resources to be loaded in parallel over a single connection, reducing latency and improving performance.

How do you use the <picture> element for responsive design?

You use the <picture> element for responsive design by defining multiple <source> elements within it, each with different srcset attributes targeting different screen resolutions or sizes. This allows the browser to select the most appropriate image to display based on the current viewport.

What are the considerations for using HTML with IoT devices?

Considerations for using HTML with IoT devices include ensuring minimalistic, efficient coding due to hardware limitations, optimizing for low power consumption, and designing for varied display sizes and interaction models typical of IoT devices.

How do you implement a content management system (CMS) using purely HTML?

Implementing a content management system (CMS) using purely HTML involves static site generators that compile templates and content into static HTML pages. These systems often use markdown files for content and provide a way to automatically rebuild the site when changes are made.

What is AMP, and how does it relate to HTML?

AMP, or Accelerated Mobile Pages, is a web component framework and a website publishing technology developed by Google that aims to improve the performance of web content and advertisements. It relates to HTML by using a restricted set of HTML, JavaScript, and CSS functionalities to achieve faster page loading times on mobile devices.

How do you ensure the ethical use of HTML and user data?

You ensure the ethical use of HTML and user data by designing web pages that respect user privacy, obtaining consent before collecting or storing personal data, following data protection regulations like GDPR, and being transparent about data use.

What are the upcoming features or standards in HTML that developers should be aware of?

Upcoming features or standards in HTML that developers should be aware of include new form controls, enhanced accessibility features, further advancements in web components such as custom elements and shadow DOM, and ongoing improvements to HTML5 semantic elements for better document structure and web application development.

HTML Coding Interview Questions and Answers

HTML Coding Interview Questions is a collection of questions and answers aimed at evaluating the knowledge and skills of individuals in HTML (Hypertext Markup Language), the foundational language for creating and designing web pages. HTML Coding Interview Questions guide includes a wide range of topics, from basic HTML structure and elements to more complex concepts like forms, semantic HTML, and accessibility practices.

How do you create a multi-level dropdown menu using HTML and CSS?

To create a multi-level dropdown menu using HTML and CSS by nesting <ul> elements within a parent <li> element and using CSS to control the visibility of the nested <ul> on hover or focus of the parent <li>.

Write the HTML code to embed a YouTube video on a webpage.

To embed a YouTube video on a webpage, use the <iframe> tag with the src attribute set to the video's URL. For example:

How would you structure an HTML form for user registration?

Structure an HTML form for user registration using the <form> element with <input> elements for user information such as name, email, password, and a submit button. Use <label> elements for accessibility and clarity:

Provide an example of using HTML5 Canvas to draw a circle.

To draw a circle using HTML5 Canvas, use the <canvas> tag and JavaScript to access the canvas context and draw the circle:

How do you implement a responsive navigation bar without JavaScript?

Implement a responsive navigation bar without JavaScript using HTML and CSS by employing media queries to adjust the layout and visibility of the navigation items based on the viewport size, and using the :checked pseudo-class for toggling the menu in mobile view with a hidden checkbox.

Write an HTML snippet to display data in a grid layout using CSS Grid.

To display data in a grid layout using CSS Grid, use a container element with the display: grid; style and define columns and rows. Then, add child elements for each grid item:

How do you mark up a block of text to use semantic HTML5 elements?

Mark up a block of text to use semantic HTML5 elements by using tags like <article> for independent content, <section> for sections within an article, <header> and <footer> for introductory and concluding content, and <aside> for tangentially related content:

Create an HTML table with sortable columns using only HTML and CSS.

Creating an HTML table with sortable columns using only HTML and CSS directly is limited without JavaScript for interactivity. However, you can style the table headers to indicate they are sortable and use server-side or JavaScript-based sorting when the headers are clicked.

How do you use the <audio> tag to include background music in a webpage?

You use the <audio> tag to include background music in a webpage by setting the src attribute to the music file's URL and the autoplay and loop attributes to play the music automatically and loop continuously:

Demonstrate how to create a custom checkbox using HTML and CSS.

To create a custom checkbox using HTML and CSS, hide the default checkbox input with opacity: 0; and style the label with CSS to create a custom appearance. Use the :checked pseudo-class to style the checked state:

Ideal structure for a 60‑min interview with a software engineer

Get 15 handpicked jobs in your inbox each Wednesday

Build your dream team

1-stop solution to hire developers for full-time or contract roles.

Find your dream job

Handpicked opportunities with top companies for full-time and contract jobs.

Interview Resources

Want to upskill further through more interview questions and resources? Check out our collection of resources curated just for you.

Browse Flexiple's talent pool

Explore our network of top tech talent. Find the perfect match for your dream team.

Programmers
React Native
Ruby on Rails

Build a Quiz Application with HTML, CSS, and JavaScript | Step-by-Step Guide

By Faraz - June 01, 2023

Learn how to create a quiz application from scratch using HTML, CSS, and JavaScript. Follow our step-by-step guide and build an interactive quiz experience. Source Code Included.

Quiz Application with HTML, CSS, and JavaScript.jpg

Project Introduction
JavaScript Code

Quiz applications are a fantastic way to engage and entertain users on websites. Whether you want to test knowledge, provide educational content, or simply offer a fun activity, building a quiz application using HTML, CSS, and JavaScript is an excellent choice. In this step-by-step guide, we will walk you through the process of creating a quiz application from scratch.

By the end of this tutorial, you will have a fully functional quiz application that you can customize to fit your specific needs. We will start by setting up the HTML structure, where we'll define the layout and elements required for the quiz. Then, we'll move on to designing the user interface using CSS, making the application visually appealing and engaging.

Next, we'll dive into the JavaScript implementation, where we'll handle the logic behind displaying questions, capturing user responses, and calculating the score. JavaScript will be the backbone of our quiz application, allowing us to dynamically generate content, validate user inputs, and provide interactive feedback.

Throughout this tutorial, we'll provide code snippets, examples, and clear explanations to help you understand each step of the process. Even if you're a beginner to web development, don't worry! We've designed this guide with simplicity in mind, making it accessible for anyone looking to improve their front-end development skills.

So, Let's start making an amazing quiz application using HTML, CSS, and JavaScript step by step.

Join My Telegram Channel to Download the Projects Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our quiz application.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Here is an explanation of each element:

<!DOCTYPE html> : This is a declaration that specifies the HTML version being used, in this case, HTML5.

<html> : The root element of an HTML document. It encapsulates all other elements on the page.

<head> : This element contains metadata and other information about the web page that is not directly displayed on the page itself.

<title> : This element sets the title of the web page, which appears in the browser's title bar or tab.

<body> : The main content of the web page is placed within this element.

<div class="container"> : This <div> element acts as a container for grouping and organizing other elements.

<h1> Quiz App </h1> : This <h1> heading element displays the text "Quiz App" as the main heading of the web page.

<div id="quiz"> </div> : This <div> element with the id attribute "quiz" will serve as a placeholder for dynamically generated quiz questions.

<div id="result" class="result"> </div> : This <div> element with the id attribute "result" and class attribute "result" will be used to display the quiz result.

<button id="submit" class="button"> Submit </button> : This <button> element with the id attribute "submit" and class attribute "button" represents a button labeled "Submit." Users can click this button to submit their quiz answers.

<button id="retry" class="button hide"> Retry </button> : This <button> element with the id attribute "retry" and class attribute "button hide" represents a button labeled "Retry." It is initially hidden (hide class), and will be displayed when the user wants to retry the quiz.

<button id="showAnswer" class="button hide"> Show Answer </button> : This <button> element with the id attribute "showAnswer" and class attribute "button hide" represents a button labeled "Show Answer." It is initially hidden (hide class), and will be displayed to allow users to see the correct answers.

This is the basic structure of our quiz application using HTML, and now we can move on to styling it using CSS.

css tips how to add text on an image with mix-blend-mode.jpg

Step 2 (CSS Code):

Once the basic HTML structure of the quiz application is in place, the next step is to add styling to the quiz application using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our quiz application.

Let's go through each section and explain what it does:

1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); : This line imports the Poppins font from Google Fonts, with different font weights (400, 500, and 700). The display=swap ensures that the text is displayed using fallback fonts until the Poppins font is fully loaded.

2. body : This selector targets the element of the HTML document. It sets the following properties:

font-family: 'Poppins', sans-serif; : It specifies the font family for the entire body text, using Poppins as the preferred font. If Poppins is not available, it falls back to the generic sans-serif font.
background: #b9b3a9; : It sets the background color of the body to a light grayish-brown color (#b9b3a9).
display: flex; : It makes the body a flex container.
justify-content: center; : It horizontally centers the flex items (content) within the body.

3. .container : This selector targets an element with the class "container". It sets the following properties:

width: 450px; : It sets the width of the container to 450 pixels.
padding: 20px; : It adds 20 pixels of padding around the content of the container.
margin-top: 80px; : It creates a top margin of 80 pixels for the container.
background-color: #fff; : It sets the background color of the container to white (#fff).
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); : It applies a box shadow to the container, creating a subtle shadow effect.
border-radius: 20px; : It adds rounded corners to the container, with a border radius of 20 pixels.

4. h1 : This selector targets all <h1> elements. It sets the following property:

text-align: center; : It aligns the text within the <h1> element to the center.

5. .question : This selector targets an element with the class "question". It sets the following properties:

font-weight: bold; : It makes the text within the element bold.
margin-bottom: 10px; : It adds a bottom margin of 10 pixels to the element.

6. .options : This selector targets an element with the class "options". It sets the following property:

margin-bottom: 20px; : It adds a bottom margin of 20 pixels to the element.

7. .option : This selector targets an element with the class "option". It sets the following property:

display: block; : It makes the element a block-level element, causing it to take up the full width available.

8. .button : This selector targets an element with the class "button". It sets the following properties:

display: inline-block; : It makes the element an inline block.
padding: 10px 20px; : It adds 10 pixels of padding on the top and bottom and 20 pixels of padding on the left and right.
background-color: #428bca; : It sets the background color of the button to a shade of blue (#428bca).
color: #fff; : It sets the text color of the button to white (#fff).
border: none; : It removes the border around the button.
cursor: pointer; : It changes the cursor to a pointer when hovering over the button.
font-size: 16px; : It sets the font size of the button text to 16 pixels.
border-radius: 4px; : It adds rounded corners to the button, with a border radius of 4 pixels.
transition: background-color 0.3s; : It adds a transition effect to the background color property, with a duration of 0.3 seconds.
margin-right: 10px; : It adds a right margin of 10 pixels to the button.

9. .button:hover : This selector targets the button when it is being hovered over. It sets the following property:

background-color: #3071a9; : It changes the background color of the button to a darker shade of blue when hovered.

10. .result : This selector targets an element with the class "result". It sets the following properties:

text-align: center; : It aligns the text within the element to the center.
margin-top: 20px; : It adds a top margin of 20 pixels to the element.

11. .hide : This selector targets an element with the class "hide". It sets the following property:

display: none; : It hides the element by setting its display property to "none".

This will give our quiz application an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript to sets up a simple quiz game. Let's go through the code step by step:

The code defines an array called quizData that contains multiple objects. Each object represents a question in the quiz and has properties such as question (the question itself), options (an array of answer options), and answer (the correct answer).

The code then defines variables to store references to various elements in the HTML document, such as the quizContainer , resultContainer , submitButton , retryButton , and showAnswerButton . These elements are identified using their respective IDs.

Two variables, currentQuestion and score , are initialized to keep track of the current question being displayed and the player's score, respectively. Additionally, an array called incorrectAnswers is created to store any incorrect answers provided by the player.

The code includes a function called shuffleArray , which takes an array as input and shuffles its elements randomly. This function is used to randomize the order of answer options for each question.

The displayQuestion function is defined to render the current question and its answer options on the page. It retrieves the question data from the quizData array based on the currentQuestion index. It creates HTML elements dynamically to display the question and options, and appends them to the quizContainer .

The checkAnswer function is responsible for validating the player's answer. It retrieves the selected option using a CSS selector, checks if an option is selected, compares the selected answer with the correct answer from quizData , and increments the score or adds the question to the incorrectAnswers array accordingly. It then updates the currentQuestion index, clears the selected option, and either displays the next question or the result if there are no more questions.

The displayResult function is called when all the questions have been answered. It hides the quiz container and submit button, and shows the retry and show answer buttons. It displays the player's score and the number of questions in the resultContainer .

The retryQuiz function is called when the player clicks the retry button. It resets the currentQuestion , score, and incorrectAnswers to their initial values, displays the quiz container and submit button, and hides the retry and show answer buttons. It also clears the result container and calls displayQuestion to start the quiz again.

The showAnswer function is called when the player clicks the show answer button. It hides the quiz container, submit button, and show answer button. It generates HTML to display the player's score and lists all the incorrect answers with the corresponding correct answers.

Event listeners are attached to the submit, retry, and show answer buttons, which call their respective functions when clicked.

Finally, the displayQuestion function is called initially to start the quiz by displaying the first question.

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

Final Output:

See the Pen JavaScript Quiz Application by Faraz ( @codewithfaraz ) on CodePen .

Create Responsive Carousels Slider with Owl Carousel.webp

Conclusion:

Congratulations on completing this step-by-step guide on building a quiz application using HTML, CSS, and JavaScript! You have learned essential techniques and concepts that will enable you to create interactive and engaging quiz experiences for your website visitors.

Throughout this tutorial, we started by setting up the HTML structure, organizing the elements required for the quiz and providing a solid foundation for our application. We then moved on to designing the user interface using CSS, allowing us to style the quiz and make it visually appealing.

The JavaScript implementation was a crucial part of our quiz application, as it provided the logic to display questions, capture user responses, and calculate scores. By leveraging JavaScript's capabilities, we were able to create dynamic and interactive functionalities that enhance the user experience.

Remember, this guide serves as a starting point for your quiz application. Feel free to experiment with different designs, features, and functionalities to make your quiz application unique and tailored to your specific audience.

Building a quiz application not only provides entertainment but also offers educational opportunities and a way to engage with your website visitors. By integrating quizzes into your website, you can assess knowledge, provide learning materials, or simply create an enjoyable experience for your users.

We hope you found this guide valuable and that it has helped you develop your front-end development skills. Keep exploring and building upon what you've learned here, and don't hesitate to dive deeper into HTML, CSS, and JavaScript to expand your web development repertoire.

Now it's time for you to take the knowledge and skills you've acquired and start building your very own quiz application. Get creative, have fun, and provide an engaging quiz experience for your users. Happy coding!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks! Faraz 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, latest post.

Create a Dashboard with Sliders and Music Player using HTML, CSS, and JavaScript

Learn how to create a responsive dashboard with interactive sliders and a music player using HTML, CSS, and JavaScript. Step-by-step tutorial included.

Crafting an Engaging Pet Food Shop Template: HTML, CSS, JavaScript

May 20, 2024

How to Create a Scrollable Sticky Sidebar with HTML, CSS, and JavaScript

May 18, 2024

Creating a Shopping Cart Concept Using HTML, CSS, Vue, and Slick.js

Creating a Responsive Bootstrap Dashboard: Source Code Included

May 14, 2024

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

Learn to add a sleek scroll down button to your website using HTML, CSS, and JavaScript. Step-by-step guide with code examples.

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)

March 10, 2024

Create Shimmering Effect Button: HTML & CSS Tutorial (Source Code)

March 07, 2024

How to Create a Liquid Button with HTML, CSS, and JavaScript (Source Code)

March 01, 2024

Create Your Own Bubble Shooter Game with HTML and JavaScript

Learn how to develop a bubble shooter game using HTML and JavaScript with our easy-to-follow tutorial. Perfect for beginners in game development.

Build a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

April 01, 2024

Building a Fruit Slicer Game with HTML, CSS, and JavaScript (Source Code)

December 25, 2023

Create Connect Four Game Using HTML, CSS, and JavaScript (Source Code)

December 07, 2023

Creating a Candy Crush Clone: HTML, CSS, and JavaScript Tutorial (Source Code)

November 17, 2023

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

Master the art of color picking with Vibrant.js. This tutorial guides you through building a custom color extractor tool using HTML, CSS, and JavaScript.

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

November 30, 2023

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

October 30, 2023

URL Keeper with HTML, CSS, and JavaScript (Source Code)

October 26, 2023

Creating a Responsive Footer with Tailwind CSS (Source Code)

Learn how to design a modern footer for your website using Tailwind CSS with our detailed tutorial. Perfect for beginners in web development.

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

How to Create a Responsive Footer for Your Website with Bootstrap 5

August 19, 2022

60 Best HTML Interview Questions and Answers in 2023

Published: November 15, 2023

HTML is the core language of the World Wide Web, so web development candidates must have a robust comprehension of it. When you ask HTML interview questions, you‘re looking for insight into how technically proficient the prospective employee is. To successfully do so, you’ll have to ask the right questions.

person studies html interview questions before a job search

Reviewing popular HTML interview questions and the best answers is an excellent way to ensure you're fully prepared to speak with candidates. Or maybe, you're the one interviewing for a developer role instead — in which case, congratulations and best of luck!

Streamline Your Coding: 25 HTML & CSS Hacks [Free Guide]

Whether you hone in on HTML5 or the intricacies of attributes, understanding the best responses to these popular HTML interview questions will help streamline finding the right person for the role.

60 Best HTML Interview Questions and Answers

What does the acronym HTML stand for?
Describe HTML to us.
Why do you use HTML tags?
Do HTML tags require an end tag?
What's the primary difference between elements and tags?
What are some list types you may use when designing a page in HTML?
Block-level elements vs. inline elements: what's the difference?
Is it possible for a single text link to point toward two different website pages?
Can you write the basic structure of the HTML template?
What is an HTML attribute?
Can attribute values get set to any number, or are there specific values they accept only?
What is an HTML anchor tag, and why is it used?
When are HTML comments used?
If you want to display data in tabular form, which HTML tags would you use?
How do you make an HTML hyperlink?
How many ways could you specify CSS styles for an HTML element?
Does a hyperlink apply to images, text, or both?
What is a style sheet?
What’s the difference between a logical and physical tag?
How would you keep HTML list elements straightened out?
What is the class attribute, and why is it used?
What is an HTML layout structure? Explain it.
Can all character entities be properly displayed on all systems?
How can you optimize website assets loading with HTML?
Why are meta tags useful in HTML?
What is an Iframe?
What are HTML forms? Why are they useful?
How many types of headings are there in HTML?
What is an HTML entity?
What are the HTML formatting tags?

Basic HTML Interview Questions

If you’re interviewing for a web developer role, you’ll likely have to answer some of these questions. Your interviewer is using your answers to gauge your level of understanding regarding HTML.

Don't forget to share this post!

Onchange Event in HTML: How to Use It [+Examples]

HTML Dialog: How to Create a Dialog Box in HTML

How to Create a Landing Page in HTML & CSS [+ 15 Templates]

HTML Audio Tag: How to Add Audio to Your Website

How to Add an Image & Background Image in HTML

How to Call a JavaScript Function in HTML

How to Embed Google Map in HTML [Step-By-Step Guide]

How to Create a Range Slider in HTML + CSS

How to Create an HTML Tooltip [+ Code Templates]

How to Make an HTML Text Box [Examples]

Tangible tips and coding templates from experts to help you code better and faster.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

Computer Networks

Computer Networking: Case Study Questions

Categories Computer Networks , Networking , Computer Networks

This post contains case study questions on Computer Networking.

Case study 1:.

Web server is a special computer system running on HTTP through web pages. The web page is a medium to carry data from one computer system to another. The working of the webserver starts from the client or user. The client sends their request through the web browser to the webserver. Web server takes this request, processes it and then sends back processed data to the client. The server gathers all of our web page information and sends it to the user, which we see on our computer system in the form of a web page. When the client sends a request for processing to the web server, a domain name and IP address are important to the webserver. The domain name and IP address are used to identify the user on a large network.

IP addresses
Computer systems
Webpages of a site
A medium to carry data from one computer to another
Home address
Domain name
Both b and c
Hypertext Transfer Protocol
Hypertext Transfer Procedure
Hyperlink Transfer Protocol
Hyperlink Transfer Procedure
Domain name system
Routing information protocol
Network time protocol
None of the above
Domain Name Security
Domain Number System
Document Name System
Domain Name System

Case Study 2:

In mid 80’s another federal agency, the NSF created a new high capacity network called NSFnet, which was more capable than ARPANET. The only drawback of NSFnet was that it allowed only academic research on its network and not any kind of private business on it. Now, several private organisations and people started working to build their own networks, named private networks, which were later (in 1990’s) connected with ARPANET and NSFnet to form the Internet. The Internet really became popular in 1990’s after the development of World Wide Web.

National Senior Foundation Network
National Science Framework Network
National Science Foundation Network
National Science Formation Network
Advanced Research Premium Agency NETwork
Advanced Research Projects Agency NETwork
Advanced Review Projects Agency NETwork
Advanced Research Protection Agency NETwork
A single network
A vast collection of different networks
Interconnection of local area networks
Interconnection of wide area networks
Internet architecture board
Internet society
Internet service provider
Different computer
Leased line
Digital subscriber line
Digital signal line
Digital leased line

Case Study 3:

TCP/IP, or the Transmission Control Protocol/Internet Protocol, is a suite of communication protocols used to interconnect network devices on the internet. TCP/IP can also be used as a communications protocol in a private computer network (an intranet or an extranet).

TCP defines how applications can create channels of communication across a network. It also manages how a message is assembled into smaller packets before they are then transmitted over the internet and reassembled in the right order at the destination address.

IP defines how to address and route each packet to make sure it reaches the right destination. Each gateway computer on the network checks this IP address to determine where to forward the message. TCP/IP uses the client-server model of communication in which a user or machine (a client) is provided a service (like sending a webpage) by another computer (a server) in the network. Collectively, the TCP/IP suite of protocols is classified as stateless, which means each client request is considered new because it is unrelated to previous requests. Being stateless frees up network paths so they can be used continuously.

All of the above
Remote procedure call
Internet relay chat
Resource reservation protocol
Local procedure call
communication between computers on a network
metropolitan communication
sesson layer
transport layer
network layer
data link layer

Case Study 4:

A blog is a publication of personal views, thoughts, and experience on web links. It is a kind of personal diary note about an individual. The contents published on a blog are organized in a reverse manner, it means recent posts appear first and the older posts are further downwards.

Blogger – a person who posts a blog in the form of text, audio, video, weblinks, etc is known as a blogger. Bloggers have followers who follow them to get instant messages post by the blogger.

In most cases, celebrities, business tycoons, famous politicians, social workers, speakers, etc are the successful blogger because people follow them to know about their success stories and ideas.

social networking
social networking sites
e-commerce websites
search engines
entertainment sites
social network
entertainment
search engine
none of these

Which of the following is an example of micro-blogging?

Which of the following is not used as blogging platform?

discussion boards

Case Study 5:

An email is a service of sending or receiving emails or messages in the form of text, audio, video, etc over the internet. Various service providers are providing email services to users. The most popular service providers in India are Gmail, Yahoo, Hotmail, Rediff, etc.

An email address for an email account is a unique ID. This email ID is used to send and receive mails over the Internet. Each email address has two primary components: username and domain name. The username comes first, followed by the @) symbol and then the domain name.

none of the above

Which of the following is the correct format of email address?

name@website@info
[email protected]
www.nameofwebsite.com
name.website.com
multipurpose internet mail extensions
multipurpose internet mail email
multipurpose internet mail end
multipurpose internet mail extra
mail server
user agents

NVT stands for

network virtual transmission
network virtual test
network virtual terminal
network virtual tell

Case study 6:

In 1989, Tim Berners Lee, a researcher, proposed the idea of World Wide Web). Tim Berners Lee and his team are credited with inventing Hyper Text Transfer Protocol (HTTP), HTML and the technology for a web server and a web browser. Using hyperlinks embedded in hypertext the web developers were able to connect web pages. They could design attractive webpages containing text, sound and graphics. This change witnessed a massive expansion of the Internet in the 1990s.

A program that can display a webpage
A program used to view HTML documents
It enables a user to access the resources of internet
a) is same every time whenever it displays
b) generates on demand by a program or a request from browser
c) both is same every time whenever it displays and generates on demand by a program or a request from browser
d) is different always in a predefined order
a) unique reference label
b) uniform reference label
c) uniform resource locator
d) unique resource locator
a) asynchronous javascript and xml
b) advanced JSP and xml
c) asynchronous JSP and xml
d) advanced javascript and xml
a) convention for representing and interacting with objects in html documents
b) application programming interface
c) hierarchy of objects in ASP.NET
d) scripting language
a) VBScript
a) sent from a website and stored in user’s web browser while a user is browsing a website
b) sent from user and stored in the server while a user is browsing a website
c) sent from root server to all servers
d) sent from the root server to other root servers

Case study 7:

E-business, commonly known as electronic or online business is a business where an online transaction takes place. In this transaction process, the buyer and the seller do not engage personally, but the sale happens through the internet. In 1996, Intel’s marketing and internet team coined the term “E-business

E-Commerce stands for electronic commerce and is a process through which an individual can buy, sell, deal, order and pay for the products and services over the internet. In this kind of transaction, the seller does not have to face the buyer to communicate. Few examples of e-commerce are online shopping, online ticket booking, online banking, social networking, etc.

doing business
sale of goods
doing business electronically
all of the above

Which of the following is not a major type of e-commerce?

consolidation
preservation
reinvention

The primary source of financing during the early years of e-commerce was _______

large retail films
venture capital funds
initial public offerings
small products
digital products
specialty products
fresh products
value proposition
competitive advantage
market strategy
universal standards

Case study 8:

Due to the rapid rise of the internet and digitization, Governments all over the world are initiating steps to involve IT in all governmental processes. This is the concept of e-government. This is to ensure that the Govt. administration becomes a swifter and more transparent process. It also helps saves huge costs.

E-Group is a feature provided by many social network services which helps you create, post, comment to and read from their “own interest” and “niche-specific forums”, often over a virtual network. “Groups” create a smaller network within a larger network and the users of the social network services can create, join, leave and report groups accordingly. “Groups” are maintained by “owners, moderators, or managers”, who can edit posts to “discussion threads” and “regulate member behavior” within the group.

can be defined as the “application of e-commerce technologies to government and public services .”
is the same as internet governance
can be defined as “increasing the participation in internet use by socially excluded groups”
Individuals in society
computer networks
Tax Deduction Account Number
Tax Deduction and Collection Account Number
Taxable Account Number
Tax Account Number
who conduct seminars
who get together on weekends
who have regular video conferences
having the ability to access and contribute to forum topics

Case study 9:

Coursera has partnered with museums, universities, and other institutions to offer students free classes on an astounding variety of topics. Students can browse the list of available topics or simply answer the question “What would you like to learn about?”, then when they answer that question they are led to a list of available courses on that topic. Students who are nervous about getting in over their heads can relax.

Mobile Online Open Courses
Massive Online Open Courses
Mobile Open Online Courses
Massive Open Online Courses
Blended learning
Distance learning
Synchronous learning
Asynchronous learning
Induction to the company for new employees
Microsoft excel training
Team-building exercise
Building your assertiveness skills at work
Learners using technology in a classroom environment lead by a tutor
Training course done by youtube tutorials
An online learning environment accessed through the internet (i.e. webinars)
An online learning course
MasterClass
SimplyCoding

Case study 10:

Search Engines allow us to filter the tons of information available on the internet and get the most accurate results. And while most people don’t pay too much attention to search engines, they immensely contribute to the accuracy of results and the experience you enjoy while scouring through the internet.

Besides being the most popular search engine covering over 90% of the worldwide market, Google boasts outstanding features that make it the best search engine in the market. It boasts cutting-edge algorithms, easy-to-use interface, and personalized user experience. The platform is renowned for continually updating its search engine results and features to give users the best experience.

Software systems that are designed to search for information on the world wide web
Used to search documents
Used to search videos
Single word
Search engine pages
Search engine result pages
Web crawler
Web indexer
Web organizer
Web manager
Ink directory
Search optimizer
Generating cached files
Affecting the visibility
Getting meta tags
All of these

Insertion Sort

Mobile telecommunication technologies, you may also like.

Switching Techniques used in computer network

Communication Channels

Login with your site account

Remember Me

Not a member yet? Register now

Register a new account

I accept the Terms of Service

Are you a member? Login now

Chapter 7 - Unit 1

Html - advanced features: list and image formatting, class 7 - apc understanding computer studies, choose the correct option.

............... is used to view HTML documents.

Web browser

Reason — Web browser is an application software that understands HTML language and generates the webpage defined by the HTML in the document.

Which of the following syntax is used to insert images in HTML documents?

<image src = "URL/Path">
<img source = "URL/Path">
<image source = "URL/Path">

Reason — <img src = "URL/Path"> is the correct syntax to insert images in HTML documents.

Which of the following the tags is used to display the content in an ordered list?

<ol> <li> String of text </li> ............... </ol>

<ordl> <li> String of text </li> ............... </ordl>
<odls> <li> String of text </li> ............... </odls>
<orderlist> <li> String of text </li> ............... </orderlist>

Reason — To display the content in an ordered list, all the items inside <li> tags must be enclosed within <ol> tags.

Which of the following format is used to insert pictures in HTML documents?

Reason — *.jpg is the correct extension of jpg images.

............... HTML tag allows adding white space to the left and right of the images.

Reason — HSpace allows adding white space to the left and right of the images.

State whether the following statements are True/False

You can display an HTML document in bulleted form by using bullet styles taking bulleted list from MS Word. False

A browser interprets the HTML codes on web page. True

In an ordered list, the contents are displayed in bulleted form. False

You can add a visual appeal by inserting images in an HTML document. True

By default, border is added to a picture in an HTML document. False

You can also insert pictures in HTML documents from an external source. True

Name the following

Two ways to display HTML list

Unordered list
Ordered list

Two attributes of the Marquee tag

Two ways to customize the pictures in HTML documents

Adding border
Adding text

Write down the syntax of the following with reference to HTML. Give an example for each task.

Ordered List

Online Chatting

Unordered List

Marquee Tag in left direction

Understanding Information Technology

Marquee Tag in downward direction

Inserting a picture

Case-Study Based Questions

Pawan wants to design the web page which is as shown below. It contains the text and the image of a bird. He has created an HTML code for the same. But he is confused with some elements, attributes and tags. The incomplete code is given below.

Help him complete his code by answering the following questions:

(a) Identify (i)

(b) Write the text colour in (ii)

(d) Write the complete path of the image file which is saved in D: drive.

(a) My Birds

Reason — (i) is the title of the page and in the image of the web page it is given as "My Birds" at the top of the tab.

(b) #0000FF

Reason — The font colour of heading text in body is blue. Hexa-decimal code for blue colour is #0000FF.

Reason — This is the heading just above the picture of the bird.

(d) D:/bird.jpg

Define the following

Left direction of Marquee Tag

Left direction of Marquee Tag means that the block of text will scroll towards left hand side from the extreme right hand side of the web page.

Right direction of Marquee Tag

Right direction of Marquee Tag means that the block of text will scroll towards right hand side from the extreme left hand side of the web page.

In an ordered list, each item is displayed along with the numbers or letters instead of bullets. The entire content of the list is enclosed in <ol> and </ol> tags and each item is enclosed in <li> and </li> tags.

For example:

Scroll Behaviour of Marquee Tag

In this attribute, the string of the text keeps on scrolling across the screen and scrolls back on the web page. It is important to know that the scroll is the default behaviour of the marquee. This movement of scroll is the same as left direction.

Slide Behaviour of Marquee Tag

In this attribute, the string of text starts scrolling from the right side of the screen and stops as soon as it reaches the left side of the web page. Generally, a loop is used when the behaviour is set to slide. The loop determines the number of times the string of text has to scroll and it stops as soon as the loop is completed.

Short Answer Questions

What are the different attributes of Marquee tags? Name them.

The different attributes of marquee tag are as follows:

Direction — It has four attributes- left, right, up and down.
Behaviour — It has three attributes - alternate, scroll and slide.

Name the default alignment when a picture is inserted in an HTML document.

By default, the picture is left aligned .

What are the different ways of adding text with the pictures in an HTML document? Name them.

The different ways of adding text with the pictures in an HTML document are:

align = "top"
align = "middle"
align = "bottom"

Question 4(a)

Distinguish between Ordered list and Unordered list.

Question 4(b)

Distinguish between Alternate and Scroll behavior of Marquee tag

Question 4(c)

Distinguish between Hspace and Vspace in the pictures of an HTML document

Write all the steps

To insert pictures in an HTML document

To insert pictures in an HTML document, we can use <img> tag, which is an empty tag. To add an image to the web page, we need to specify the complete path of the source.

To add borders to pictures in an HTML document

To add borders to pictures in an HTML document, we can use the border tag.

To add space around pictures/images in an HTML document

To add space around pictures/images in an HTML document, we can use the tags 'Hspace' and 'Vspace'. Hspace adds white space to the left and right of the pictures and Vspace adds white space above and below the pictures.

To resize the pictures/images in an HTML document

To resize the pictures/images in an HTML document, we can use the attributes 'Height' and 'Width' with <img> tag.

The Site is down as we are performing important server maintenance, during which time the server will be unavailable for approximately 24 hours. Please hold off on any critical actions until we are finished. As always your feedback is appreciated.

Study Packages
NCERT Solutions
Sample Papers
Online Test

Questions Bank
Computers Science
Test Series
Ncert Solutions
Solved Papers
Current Affairs
JEE Main & Advanced
Pre-Primary
MP State Exams
UP State Exams
Rajasthan State Exams
Jharkhand State Exams
Chhattisgarh State Exams
Bihar State Exams
Haryana State Exams
Gujarat State Exams
MH State Exams
Himachal State Exams
Delhi State Exams
Uttarakhand State Exams
Punjab State Exams
J&K State Exams

8th Class Computers Science HTML Question Bank

Done introduction to html total questions - 25.

question_answer 1) The correct syntax of HTML tags is ____.

A) (HTML) done clear

B) <%HTML%> done clear

C) "HTML" done clear

D) <HTML> done clear

question_answer 2) Besides <B> which of the following tags can make text bold on a webpage?

A) <fat> done clear

B) <strong> done clear

C) <dark> done clear

D) <solid> done clear

question_answer 3) You should use _____ attributes to change the size of an image in HTML.

A) Diagonal coordinates done clear

B) Height and width done clear

C) Top left and bottom right coordinates done clear

D) Bigger and smaller dimensions done clear

question_answer 4) A vlink is a ____ link.

A) Active done clear

B) Virtual done clear

C) Visited done clear

D) Verified done clear

question_answer 5) To define the font style Arial, use__________.

A) <text style="Arial"> done clear

B) <font face="Arial"> done clear

C) <text=Arial> done clear

D) <font=Arial> done clear

question_answer 6) If you use _________, by default the items will be displayed in bulleted form.

A) <ol> and </ol> done clear

B) <b> and </b> done clear

C) <li> and </li> done clear

D) <th> and </th> done clear

question_answer 7) Select the INCORRECT match.

A) Start and end an HTML file - <HTML>...</HTML> done clear

B) Make paragraphs - <P>...</P> done clear

C) Putting a horizontal line - <LINE> done clear

D) Adding an image - <imgsrc="imagefilename"> done clear

question_answer 8) The SRC attribute of <img> tag is used to _________.

A) Specify the location of the image to be included in a webpage done clear

B) Specify width of the image done clear

C) Specify height of the image done clear

D) Specify vertical space around the image done clear

question_answer 9) Hspace attribute of <img> tag adds _____ side of an image.

A) Space to the left and right done clear

B) Space to the top and bottom done clear

C) Height to all sides done clear

D) None of these done clear

question_answer 10) Which of the following attributes of <body> tag specifies the background color of the document?

A) Background done clear

B) Text done clear

C) Bgcolor done clear

D) Link done clear

question_answer 11) The <i> tag makes text ____.

A) Bold done clear

B) Inline done clear

C) Underline done clear

D) Italic done clear

question_answer 12) Link attribute of <body> tag specifies the color of ____ links in a document.

A) Visited done clear

B) Active done clear

C) Unvisited done clear

D) External done clear

question_answer 13) Which of the following is NOT a valid value for the align attribute of <hr> tag?

A) Left done clear

B) Center done clear

C) Right done clear

D) Top done clear

question_answer 14) Which of the following HTML codes is CORRECT in context of tags and their attributes?

C) <image source = "Fish.JPG"< image> done clear

question_answer 15) Type is an attribute of <li> tag, which specifies the style of bullet point of items in a list. Which of the following values of Type attribute is invalid?

A) Line done clear

B) Circle done clear

C) Disc done clear

D) i done clear

question_answer 16) Noshade is an attribute of_________ tag and src is an attribute of ___________ tag.

A) <hr>, <img> done clear

B) <img>, <hr> done clear

C) <body>, <ol> done clear

D) <ul>, <br> done clear

question_answer 17) Which of the following statements will let the image placed against the right margin?

A) < i m g s r c="m y I m a g e . g i f" align="wrap"> done clear

C) <img src="myImage.gif" wrap="right"> done clear

D) <img src="myImage.gif" - right"> done clear

question_answer 18) Which of the following is an empty element?

A) <Dt> done clear

B) <Li> done clear

C) <Dd> done clear

D) All of these done clear

question_answer 19) <ol> tag will create a/an ______.

A) Ordered List done clear

B) Bullet List done clear

C) Menu List done clear

D) Descriptive List done clear

question_answer 20) Which of the following attributes of <ol> tag specifies that the items of a list would appear in descending order?

A) reverce done clear

B) rev done clear

C) reversed done clear

D) opposite done clear

A) (i) - (b), (ii) - (a), (iii) - (e), (iv) - (c), (v) - (d) done clear

B) (i) - (b), (ii) - (d), (iii) - (c), (iv) - (a), (v) - (e) done clear

C) (i) - (b), (ii) - (a), (iii) - (c), (iv) - (d), (v) - (e) done clear

D) (i) - (b), (ii) - (c), (iii) - (a), (iv) - (e), (v) - (d) done clear

question_answer 23) Which of the given options can give the following output? \[{{4}_{a}}{{7}_{b}}\]

question_answer 24) Which of the following HTML statements specifies a background image for an HTML document?

A) <body background = "abc.jpg"> done clear

B) <body bgcolor = "abc.jpg"> done clear

C) <body = abc.jpg> done clear

D) <body bk ground = "abc.jpg"> done clear

A) \[\begin{align} & a\,\,Green\,\,tea \\ & b\,\,Ginger\,\,tea \\ & c\,\,Turmeric\,\,tea \\ \end{align}\] done clear

B) \[\begin{align} & 1\,\,Green\,\,tea \\ & 2\,\,Ginger\,\,tea \\ & 3\,\,Turmeric\,\,tea \\ \end{align}\] done clear

D) \[\begin{align} & I\,\,Green\,\,tea \\ & II\,\,Ginger\,\,tea \\ & III\,\,Turmeric\,\,tea \\ \end{align}\] done clear

Study Package

Question - Introduction to HTML

Reset Password.

OTP has been sent to your mobile number and is valid for one hour

Mobile Number Verified

Your mobile number is verified.

47 case interview examples (from McKinsey, BCG, Bain, etc.)

Case interview examples - McKinsey, BCG, Bain, etc.

One of the best ways to prepare for case interviews at firms like McKinsey, BCG, or Bain, is by studying case interview examples.

There are a lot of free sample cases out there, but it's really hard to know where to start. So in this article, we have listed all the best free case examples available, in one place.

The below list of resources includes interactive case interview samples provided by consulting firms, video case interview demonstrations, case books, and materials developed by the team here at IGotAnOffer. Let's continue to the list.

McKinsey examples
BCG examples
Bain examples
Deloitte examples
Other firms' examples
Case books from consulting clubs
Case interview preparation

Click here to practise 1-on-1 with MBB ex-interviewers

1. mckinsey case interview examples.

Beautify case interview (McKinsey website)
Diconsa case interview (McKinsey website)
Electro-light case interview (McKinsey website)
GlobaPharm case interview (McKinsey website)
National Education case interview (McKinsey website)
Talbot Trucks case interview (McKinsey website)
Shops Corporation case interview (McKinsey website)
Conservation Forever case interview (McKinsey website)
McKinsey case interview guide (by IGotAnOffer)
McKinsey live case interview extract (by IGotAnOffer) - See below

2. BCG case interview examples

Foods Inc and GenCo case samples (BCG website)
Chateau Boomerang written case interview (BCG website)
BCG case interview guide (by IGotAnOffer)
Written cases guide (by IGotAnOffer)
BCG live case interview with notes (by IGotAnOffer)
BCG mock case interview with ex-BCG associate director - Public sector case (by IGotAnOffer)
BCG mock case interview: Revenue problem case (by IGotAnOffer) - See below

3. Bain case interview examples

CoffeeCo practice case (Bain website)
FashionCo practice case (Bain website)
Associate Consultant mock interview video (Bain website)
Consultant mock interview video (Bain website)
Written case interview tips (Bain website)
Bain case interview guide (by IGotAnOffer)
Digital transformation case with ex-Bain consultant
Bain case mock interview with ex-Bain manager (below)

4. Deloitte case interview examples

Engagement Strategy practice case (Deloitte website)
Recreation Unlimited practice case (Deloitte website)
Strategic Vision practice case (Deloitte website)
Retail Strategy practice case (Deloitte website)
Finance Strategy practice case (Deloitte website)
Talent Management practice case (Deloitte website)
Enterprise Resource Management practice case (Deloitte website)
Footloose written case (by Deloitte)
Deloitte case interview guide (by IGotAnOffer)

5. Accenture case interview examples

Case interview workbook (by Accenture)
Accenture case interview guide (by IGotAnOffer)

6. OC&C case interview examples

Leisure Club case example (by OC&C)
Imported Spirits case example (by OC&C)

7. Oliver Wyman case interview examples

Wumbleworld case sample (Oliver Wyman website)
Aqualine case sample (Oliver Wyman website)
Oliver Wyman case interview guide (by IGotAnOffer)

8. A.T. Kearney case interview examples

Promotion planning case question (A.T. Kearney website)
Consulting case book and examples (by A.T. Kearney)
AT Kearney case interview guide (by IGotAnOffer)

9. Strategy& / PWC case interview examples

Presentation overview with sample questions (by Strategy& / PWC)
Strategy& / PWC case interview guide (by IGotAnOffer)

10. L.E.K. Consulting case interview examples

Case interview example video walkthrough (L.E.K. website)
Market sizing case example video walkthrough (L.E.K. website)

11. Roland Berger case interview examples

Transit oriented development case webinar part 1 (Roland Berger website)
Transit oriented development case webinar part 2 (Roland Berger website)
3D printed hip implants case webinar part 1 (Roland Berger website)
3D printed hip implants case webinar part 2 (Roland Berger website)
Roland Berger case interview guide (by IGotAnOffer)

12. Capital One case interview examples

Case interview example video walkthrough (Capital One website)
Capital One case interview guide (by IGotAnOffer)

13. Consulting clubs case interview examples

Berkeley case book (2006)
Columbia case book (2006)
Darden case book (2012)
Darden case book (2018)
Duke case book (2010)
Duke case book (2014)
ESADE case book (2011)
Goizueta case book (2006)
Illinois case book (2015)
LBS case book (2006)
MIT case book (2001)
Notre Dame case book (2017)
Ross case book (2010)
Wharton case book (2010)

Practice with experts

Using case interview examples is a key part of your interview preparation, but it isn’t enough.

At some point you’ll want to practise with friends or family who can give some useful feedback. However, if you really want the best possible preparation for your case interview, you'll also want to work with ex-consultants who have experience running interviews at McKinsey, Bain, BCG, etc.

If you know anyone who fits that description, fantastic! But for most of us, it's tough to find the right connections to make this happen. And it might also be difficult to practice multiple hours with that person unless you know them really well.

Here's the good news. We've already made the connections for you. We’ve created a coaching service where you can do mock case interviews 1-on-1 with ex-interviewers from MBB firms . Start scheduling sessions today!

The IGotAnOffer team

Interview coach and candidate conduct a video call

Book Solutions
State Boards

Case Study Question for Class 10 Computer

Understudies can discover the chapter astute vital questions for course 10th Computer within the table underneath. These imperative questions incorporate questions that are regularly inquired in a long time. Moreover, arrangements are to give for these questions, with extraordinary accentuation on ease-of-study. Tap on the joins underneath to begin investigating.

Case Study Question for Class 10 Computer all Chapters

Case study 01:.

Mr. Harish, an accountant, works in an IT firm and due to the pandemic, has been asked to work from home. He has set up his online office at his home. He has purchased a laptop, web camera and other accessories. Now he has started working from home and performs his various duties online. ( CBSE Sample Paper 2022 )

(i) Mr. Harish wants to hold an online meeting with the company’s client such that he can interact as well as see them. Which web service should he avail?

Ans: Video conferencing such as Skype, Zoom etc

(ii) Mr.Pritish sends an email to Harish requesting him to prepare the balance sheet. Which network protocol is involved during this email communication?

Ans: SMTP(Simple Mail Transfer Protocol) and POP(Post Office Protocol)

(iii) The company’s financial head needs to send some high security documents to Mr. Harish. He uses an application which supports the ___________ protocol.

Ans: SSH(Secure Shell)

(iv) In order to gather some information on latest accounting trends, Mr. Harish has to do some research. He can do this by locating sites online using a _________.

Ans: Search engine / web browser

(v) Joseph, the company secretary sends a link to Mr. Harish which contains important company files. What should he do in order to access the files?

Ans: Download the files from the link

We have a strong team of experienced Teachers who are here to solve all your exam preparation doubts

Sikkim scert class 3 english chapter 1 i wish solution, case study questions class 6 maths factors and multiples, assertion and reason questions class 6 maths factors and multiples, case study questions class 6 maths number system.

Username or Email Address

Remember Me

SUGGESTED TOPICS
The Magazine
Newsletters
Managing Yourself
Managing Teams
Work-life Balance
The Big Idea
Data & Visuals
Reading Lists
Case Selections
HBR Learning
Topic Feeds
Account Settings
Email Preferences

Your Team Members Aren’t Participating in Meetings. Here’s What to Do.

Luis Velasquez

Ask yourself: What do people need to feel that their contributions are valued?

Traditional advice for leaders who want to increase meeting participation call for clarifying expectations, setting clear agendas, and asking open-ended questions. While these strategies have their merits, they might not always work because they’re usually based on the leader’s assumptions about what the team needs, rather than facts about what they actually need. Managers who want their teams to be more engaged in meetings need to foster a safe, inclusive team culture, which requires a deep understanding of their team’s unique dynamics. The author presents several strategies for encouraging employees to engage during meetings.

Sue, a former client of mine, was starting a new VP role at a fintech organization. She found out quickly that the team she inherited had a lower level of participation, collaboration, questioning, and general engagement than the one she had left behind. This was particularly evident in team meetings.

Luis Velasquez , MBA, Ph.D. is an executive coach who works with senior leaders and their teams to become more cohesive, effective, and resilient. He is the founder and managing partner of Velas Coaching LLC , a leadership facilitator at the Stanford University Graduate School of Business, a former University professor, and research scientist. Connect with him on LinkedIn.

Partner Center

MyServiceNSW
Manage account
Logout of MyServiceNSW

Testing and what to do if you have COVID-19

How to get a test if you think you might have COVID-19, and what to do if you test positive.

COVID-19 update – 23 May 2024

COVID-19 remains at moderate levels.

Read the latest data from NSW Health .

Continue to protect other people. Please stay home if you have any cold or flu symptoms. Wear a mask if you need to leave home.

Learn how to keep yourself and others COVID-safe .

Getting a test for COVID-19

Which covid test should i do.

Guidance on which test is best for you.

Information for people exposed to COVID-19

Understand your risk and what you can do to protect yourself and your loved ones.

Symptoms and how it spreads

Learn about the symptoms of COVID-19, when they appear and how it spreads.

Advice for higher risk groups

Some people are at higher risk of severe illness from COVID-19. Find information on how to protect yourself and others from becoming very unwell.

If you're at higher risk of severe illness, talk to your doctor about PCR tests.

Managing your COVID-19 illness

What to do if you test positive.

Advice on how you can safely manage mild symptoms at home.

Antiviral medicines

Find out if you're eligible for antiviral medicines and how to access them.

Information on long-term symptoms you may experience due to COVID-19, and where to seek support.

COVID-19 guidance for families

Advice for parents and carers on COVID safety in schools and early childhood education services.

Advice for workers

What to do if you test positive and information about returning to work.

Guidance for businesses

What you need to do as an employer to manage the risk to colleagues and customers.

Easy Read and in-language resources

Easy read information on covid-19, in-language and translated covid-19 support, contact us and find translation help.

Service NSW – information and advice for NSW residents and businesses. Phone 13 77 88
Healthdirect – government-funded 24-hour health advice. Phone 1800 022 222
Disability Gateway – information for people with disability. Phone 1800 643 787
Mental health support, services and programs
Service NSW Savings Finder – find rebates and vouchers relevant to you
Business Concierge – tailored advice from Business Connect advisors. Phone 13 77 88
Translating and Interpreting Service (TIS National) – free service provided by the Australian Government. Phone 13 14 50

Study Finds That 52 Percent of ChatGPT Answers to Programming Questions Are Wrong

Ah yes. and yet..., not so smart.

In recent years, computer programmers have flocked to chatbots like OpenAI's ChatGPT to help them code, dealing a blow to places like Stack Overflow, which had to lay off nearly 30 percent of its staff last year.

The only problem? A team of researchers from Purdue University presented research this month at the Computer-Human Interaction conference that shows that 52 percent of programming answers generated by ChatGPT are incorrect.

That's a staggeringly large proportion for a program that people are relying on to be accurate and precise, underlining what other end users like writers and teachers are experiencing: AI platforms like ChatGPT often hallucinate totally incorrectly answers out of thin air .

For the study, the researchers looked over 517 questions in Stack Overflow and analyzed ChatGPT's attempt to answer them.

"We found that 52 percent of ChatGPT answers contain misinformation, 77 percent of the answers are more verbose than human answers, and 78 percent of the answers suffer from different degrees of inconsistency to human answers," they wrote.

Robot vs Human

The team also performed a linguistic analysis of 2,000 randomly selected ChatGPT answers and found they were "more formal and analytical" while portraying "less negative sentiment" — the sort of bland and cheery tone AI tends to produce.

What's especially troubling is that many human programmers seem to prefer the ChatGPT answers. The Purdue researchers polled 12 programmers — admittedly a small sample size — and found they preferred ChatGPT at a rate of 35 percent and didn't catch AI-generated mistakes at 39 percent.

Why is this happening? It might just be that ChatGPT is more polite than people online.

"The follow-up semi-structured interviews revealed that the polite language, articulated and text-book style answers, and comprehensiveness are some of the main reasons that made ChatGPT answers look more convincing, so the participants lowered their guard and overlooked some misinformation in ChatGPT answers," the researchers wrote.

The study demonstrates that ChatGPT still has major flaws — but that's cold comfort to people laid off from Stack Overflow or programmers who have to fix AI-generated mistakes in code.

More on OpenAI: Machine Learning Researcher Links OpenAI to Drug-Fueled Sex Parties

Share This Article

IMAGES

Case Study Sample Questions
Best Case Study Based Questions Class 12 CS
14 Best Case Study Questions to Ask Your Top Customers
14 Best Case Study Questions to Ask Your Top Customers
49 Free Case Study Templates ( + Case Study Format Examples + )
strategy case study questions

VIDEO

Case Study Based Questions (Part 1.2) ( Class 10th Maths)
How to Solve Case Study in MINIMUM Time like a Pro!🔥 Class 12 Maths
Case study based Part 1 ( Class 10th Maths)
Case Study Based Questions CBSE Class 12 Board 2024 #boardexams #exampreparation #physics #omisir
Answer Key of Case study based questions cbse class 10 Maths Exam #class10maths #casestudy
Real numbers class 10 ||case study based Questions||Ch-1 real numbers case based Questions class 10

COMMENTS

HTML Exercises, Practice Questions and Solutions
Embark on your HTML learning journey by accessing our online practice portal. Choose exercises suited to your skill level, dive into coding challenges, and receive immediate feedback to reinforce your understanding. Our user-friendly platform makes learning HTML engaging and personalized, allowing you to develop your skills effectively.
W3.CSS Case Study
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
PDF HTML5 Case Studies (Full)
HTML5 Case Studies: Case studies illustrating development ... developments to HTML and CSS. 2 About HTML5 As described in Wikipedia [1] HTML5 is a markup language for structuring ... Case Study 5: The HTML5-Based e-Lecture Framework by Qingqi Wang Case Study 6: 3Dactyl: Using WebGL to Represent Human Movement in 3D by ...
15 HTML Questions for Testing Your Knowledge
Answer:itemscope. When the itemscope attribute is specified on an HTML element, it informs search engines and web browsers that descendants of the HTML element may be carrying machine-readable information about the HTML element. Search engine like Google, Microsoft, and Yahoo! use microdata markup to improve their search results.
Chapter 7: HTML: An Introduction
Case-Study Based Questions Question 1. Generally, the web browser displays an HTML document with background white and foreground black. However, you can change the appearance of the document by changing the background as well as the text colour.
HTML Exercises
We have gathered a variety of HTML exercises (with answers) for each HTML Chapter. Try to solve an exercise by editing some code. Get a "hint" if you're stuck, or show the answer to see what you've done wrong. Count Your Score. You will get 1 point for each correct answer. Your score and total score will always be displayed.
HTML Interview Questions and Answers (2024)
It is extended from SGML. It is extended from XML and HTML. 5. The format is a document file format. The format is a markup language. 6. All tags and attributes are not necessarily to be in lower or upper case. In this, every tag and attribute should be in lower case. 7.
Projects using HTML / CSS
Beans and Brews Cafe. Awaken your creativity and web design prowess as you craft a captivating coffee cafe web page using HTML-CSS, blending the rich aroma of coffee with the perfect blend of aesthetics and functionality to create a delightful online experience for coffee enthusiasts. Problem Name. Status. Difficulty. Project - I. Easy. Task - 1.
Crack the top 30+ HTML interview questions and answers
The interview questions broadly fall into the following categories: Skills demo. These aim to see you in action to assess the efficiency of your workflow. Ability to adapt. These questions judge your knowledge of the current tech trends and how well you can work with new technologies.
Top HTML and HTML5 Interview Questions (2024)
Prepare from this list of HTML & HTML5 Interview Questions asked at top companies for freshers and experienced candidates and ace your Interview. ... 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 ...
Top 100+ HTML Interview Questions and Answers
HTML Interview Questions for freshers provide an overview of fundamental concepts and elements within HTML (HyperText Markup Language), the standard markup language for creating web pages and web applications. HTML Interview Questions for freshers aim to equip candidates with knowledge about HTML syntax, tags, attributes, and best practices.
PDF Class: X Session: 2020-21 Computer Applications (Code 165) Sample
7 The code for inserting an image in an HTML page is <imgsrc=" " alt=" ">. The alt attribute is used for _____ ... Both the Case study based questions are compulsory. Attempt any 5 questions (out of 7 questions) from each case study. Each question carries 1 mark 14 Internet Protocols For communication over the Internet, the communicating
HTML CSS Exercises: Practice and Solution
Alongside studying HTML and CSS tutorials from w3resource, you need to practice HTML and CSS extensively to hone your Frontend Development skills. Here is a list of exercises we published till now. Subscribe to our RSS feed for more exercises. HTML Basic Exercises [HTML Tags and their Attributes, Hundreds of exercises] HTML and CSS [34 exercises]
30 Top HTML Interview Questions and Answers [2024 LIST]
Answer: HTML stands for Hypertext Markup Language. Q #2) Describe HTML. Answer: Hypertext Markup Language or HTML is a markup language that is used to create website templates or WebPages to present the content on the World Wide Web. HTML pages are saved by adding .html or .html in web page name.
Build a Quiz Application with HTML, CSS, and JavaScript
Step 2 (CSS Code): Once the basic HTML structure of the quiz application is in place, the next step is to add styling to the quiz application using CSS. Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our quiz application.
60 Best HTML Interview Questions and Answers in 2023
No, not all HTML tags require an end tag. 5. What's the primary difference between elements and tags? In HTML, tags mark the beginning or end of an element. However, an element holds the content and is the collection of the starting tag, attributes, everything in between, and the end tag. 6.
HTML: Question Bank
This post contains 1 mark questions on the topic of HTML, including head section, lists, special characters and unclosed tags in the form of MCQs, fill in the blanks and true or false statements. These questions are in accordance with the new revised format of 2020. ... HTML is a case sensitive Web language. Ans. False. HTML is a programming ...
HTML Tutorial
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more. ... Get personalized learning journey based on your current skills and goals. ... Study our free HTML Tutorial » ...
HTML
Case-Study Based Questions Question 1. In HTML, form is a systematic collection of information provided by the user. We fill various types of information in forms related to our everyday life such as name, father's name, contact number, gender, etc. While creating such forms using HTML codes, we use <input> tag and its various attributes to ...
Computer Networking: Case Study Questions
Case Study 1: Web server is a special computer system running on HTTP through web pages. The web page is a medium to carry data from one computer system to another. The working of the webserver starts from the client or user. The client sends their request through the web browser to the webserver. Web server takes this request, processes it and ...
HTML Question Paper and Answers (HTML Q&A) For CBSE Class 7, 8, 9, 10
An HTML document has two main parts. 1. Head Part- Contains all head or title tags. 2. Body Part- Contains all main tags or information. Q. 20. Give some examples of empty tags with use of empty tags. A. <br> tag is used for break a line in a web page. <hr> tag is used for create an horizontal line in a web page.
HTML
Question 2. A browser interprets the HTML codes on web page. True. Question 3. In an ordered list, the contents are displayed in bulleted form. False. Question 4. You can add a visual appeal by inserting images in an HTML document. True. Question 5. By default, border is added to a picture in an HTML document. False. Question 6
8th Class Computers Science HTML Question Bank
done Introduction to HTML Total Questions - 25. The correct syntax of HTML tags is ____. Besides <B> which of the following tags can make text bold on a webpage? You should use _____ attributes to change the size of an image in HTML.
47 case interview examples (from McKinsey, BCG, Bain, etc.)
So in this article, we have listed all the best free case examples available, in one place. The below list of resources includes interactive case interview samples provided by consulting firms, video case interview demonstrations, case books, and materials developed by the team here at IGotAnOffer. Let's continue to the list. McKinsey examples
CBSE Sample Papers for Class 10 Computer Applications Set 5 with Solutions
General Instructions: Read the following instructions carefully. This Question Paper has 5 Sections A-E. All Questions are compulsory. However, internal choices have been provided in some of the questions. Section A has 12 questions carrying 1 mark each. Section B has 7 Short Answer (SA-I) type questions carrying 2 marks each.
Case Study Question for Class 10 Computer
Case Study Question for Class 10 Computer all Chapters. Case Study 01: Mr. Harish, an accountant, works in an IT firm and due to the pandemic, has been asked to work from home. He has set up his online office at his home. He has purchased a laptop, web camera and other accessories.
Your Team Members Aren't Participating in Meetings. Here's What to Do
Connect with him on LinkedIn. Traditional advice for leaders who want to increase meeting participation call for clarifying expectations, setting clear agendas, and asking open-ended questions ...
Testing and what to do if you have COVID-19
Contacts and enquiries. Service NSW - information and advice for NSW residents and businesses. Phone 13 77 88. Healthdirect - government-funded 24-hour health advice. Phone 1800 022 222.
Fish oil supplements may cause harm, study finds. 'Is it time to dump
However, a new study finds regular use of fish oil supplements may increase, not reduce, the risk of first-time stroke and atrial fibrillation among people in good cardiovascular health. Atrial ...
Study Finds That 52 Percent of ChatGPT Answers to Programming Questions
For the study, the researchers looked over 517 questions in Stack Overflow and analyzed ChatGPT's attempt to answer them. "We found that 52 percent of ChatGPT answers contain misinformation, 77 ...

HTML Interview Questions

HTML Interview Questions and Answers (2024)

CSS Interview Questions

JavaScript Interview Questions

TypeScript Interview Questions

jQuery Interview Questions

Angular Interview Questions

React Interview Questions

Node Interview Questions

MERN Interview Questions

PHP Interview Questions

Tailwind CSS Interview Questions

HTML Interview Questions and Answers

Similar Articles

2. Difference between HTML and XHTML

4. What is the difference between HTML and HTML 5?

5. What is the current version of HTML?

6. What is !DOCTYPE?

7. What are elements and tags, and what are the differences between them?

8. What are the various heading tags and their importance?

9. How to redirect to a particular section of a page using HTML?

10. What are attributes?

11. Are <b> and <strong> tags same? If not, then why?

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

13. How are comments added in HTML?

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

15. How to create a link in HTML?

16. What is the use of the target attribute in the <link> tag?

17. What is the use of alt attribute in images?

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

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

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

Please Login to comment...

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Crack the top 30+ HTML interview questions and answers

Succeed in your frontend interview.

Other / Miscellaneous

Keep reading about HTML and coding interviews

Download Interview guide PDF

What is HTML?

HTML Interview Questions and Answers

2. What are tags and attributes in HTML?

3. What are void elements in HTML?

4. What is the advantage of collapsing white space?

5. What are HTML Entities?

6. What are different types of lists in HTML?

7. What is the ‘class’ attribute in HTML?

8. What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML elements?

9. Define multipart form data?

10. Describe HTML layout structure.

11. How to optimize website assets loading?

12. What are the various formatting tags in HTML?

13. What are the different kinds of Doctypes available?

14. Please explain how to indicate the character set being used by a document in HTML?

15. What is the difference between <strong>, <b> tags and <em>, <i> tags?

16. What is the significance of <head> and <body> tag in HTML?

17. Can we display a web page inside a web page or Is nesting of webpages possible?

18. How is Cell Padding different from Cell Spacing?

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

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

21. In how many ways can we position an HTML element? Or what are the permissible values of the position attribute?

22. In how many ways you can display HTML elements?

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

24. How to specify the link in HTML and explain the target attribute?

25. In how many ways can we specify the CSS styles for the HTML element?

26. Difference between link tag <link> and anchor tag <a>?

27. How to include javascript code in HTML?

28. When to use scripts in the head and when to use scripts in the body?

29. What are forms and how to create forms in HTML?

30. How to handle events in HTML?

HTML5 Interview Questions

2. How can we include audio or video in a webpage?

3. Inline and block elements in HTML5?

4. What is the difference between <figure> tag and <img> tag?

5. How to specify the metadata in HTML5?

6. Is the <datalist> tag and <select> tag same?

7. Define Image Map?

8. What are Semantic Elements?

9. Convert the below data into Tabular format in HTML5?