coding-ninja

Ace Your HTML Interview with Top 60 Questions and Detailed Answers

Prepare confidently for your upcoming html interview with our meticulously curated collection of the top 60 html interview questions and in-depth, expertly-crafted answers. at our platform, we provide you with the ultimate resource to sharpen your html skills and impress potential employers. from fundamental concepts to advanced techniques, our comprehensive guide ensures you're well-prepared to shine in your html interview and secure your dream job in web development..

HTML Basic Concepts

1. What is HTML, and what does it stand for?

2. Explain the basic structure of an HTML document.

  • <!DOCTYPE html> : Declares the document type and version.
  • <html> : The root element that contains all other HTML elements.
  • <head> : Contains meta-information about the document, such as the character encoding and the title.
  • <meta charset='UTF-8'> : Specifies the character encoding for the document (UTF-8 is commonly used for international character support).
  • <title> : Sets the title of the web page, displayed in the browser's title bar or tab.
  • <body> : Contains the visible content of the web page.

3. What are HTML tags and attributes?

  • Tags are the fundamental building blocks of HTML.
  • They are used to define and structure the content within an HTML document.
  • Tags are enclosed within angle brackets (< and >), and most come in pairs with an opening tag and a closing tag.
  • The opening tag contains the name of the element, and the closing tag has the same name but is preceded by a forward slash (/).
  • Tags tell the web browser how to display the content enclosed between them.
  • Attributes provide additional information about an HTML element.
  • Attributes are always specified in the opening tag and consist of a name and a value, separated by an equals sign (=).
  • The attribute name is followed by an equals sign (=), and the attribute value is enclosed in double or single quotes.
  • Attributes can be used to modify the behavior or appearance of an element.
  • Not all HTML elements have attributes, and the attributes available for an element depend on the element itself.

4. Differentiate between HTML, XHTML, and HTML5.

  • HTML was the original version of the markup language used to create web pages.
  • It is based on SGML (Standard Generalized Markup Language) and has a relatively loose syntax, which allows for some flexibility and error tolerance.
  • HTML documents were traditionally less strict in terms of structure and formatting.
  • HTML 4.01 was the final version of HTML before the development of XHTML.
  • In HTML, it's common for tags to not be properly closed or for attribute values not to be enclosed in quotes.
  • XHTML is essentially a stricter and cleaner version of HTML, with a focus on adherence to XML (Extensible Markup Language) standards.
  • It enforces well-formedness and requires elements to be properly nested and closed.
  • XHTML documents must adhere to a stricter set of rules and guidelines compared to HTML.
  • All tags and attributes must be in lowercase, attribute values must be enclosed in quotes, and elements must be correctly nested and closed.
  • XHTML 1.0 and 1.1 were the major versions of XHTML.
  • HTML5 is the latest and current version of HTML.
  • It was developed to address the shortcomings of previous HTML versions and to meet the needs of modern web development.
  • HTML5 introduces many new elements and attributes that make it easier to create multimedia-rich and interactive web content without relying on external plugins like Flash.
  • It provides native support for video and audio, as well as features for canvas-based graphics and offline web applications.
  • HTML5 also includes improved parsing rules, better error handling, and more leniency in terms of syntax compared to XHTML.
  • HTML5 is designed to be backward-compatible, meaning that older HTML documents should still work in modern browsers.

5. What is the purpose of DOCTYPE in HTML?

  • Document Type Definition (DTD) : The DOCTYPE declaration points to a Document Type Definition or schema that defines the rules and structure for the HTML document. It tells the web browser or parser how to interpret and render the HTML content. The DTD defines what elements and attributes are valid, how they can be nested, and how they should be processed.
  • Rendering Mode : The DOCTYPE declaration also determines the rendering mode of the web browser. Different versions of HTML and XHTML have different rendering modes and standards, including how CSS (Cascading Style Sheets) and other technologies are applied. The correct DOCTYPE declaration helps ensure that web pages are displayed consistently and correctly across different browsers.
  • Backward Compatibility : The DOCTYPE declaration allows for backward compatibility with older versions of HTML. Browsers use the DOCTYPE to determine which rendering mode to use, helping them render web pages in a way that is compatible with older specifications when necessary. This helps ensure that older web content continues to function as intended.
  • Error Handling : In the absence of a DOCTYPE declaration or with an incorrect one, web browsers may use a 'quirks mode' or 'almost standards mode' rendering, which can result in inconsistent rendering and compatibility issues. By including the correct DOCTYPE declaration, developers can ensure that their web pages are rendered consistently and according to modern standards.

6. How do you create a comment in HTML?

  • <!-- : This opening tag indicates the start of a comment.
  • This is a comment : You can replace this text with your comment content. You can include any information or notes you want, and it won't be rendered by the web browser.
  • --> : This closing tag indicates the end of the comment.

7. What is the use of the <meta> tag?

8. Describe the difference between <div> and <span> elements.

  • <div> (Division) : The <div> element is a block-level element used to group and style content as a block-level container. It is typically used to structure the layout of a web page or group related elements. It can contain other block-level and inline elements.
  • <span> : The <span> element is an inline-level element used to apply styles or markup to a specific portion of text or content within a larger block-level element. It is often used for applying CSS styles or scripting to inline content.

9. What is an HTML entity, and give an example.

  • &gt; represents the greater-than sign >.
  • &amp; represents the ampersand &.
  • &quot; represents double quotation marks (useful inside attribute values).
  • &apos; represents the apostrophe or single quotation mark ' (not supported in all browsers; use &rsquo; for better compatibility).

HTML Elements and Tags

10. List some common HTML block-level elements.

  • <div> : A generic container for grouping and styling content.
  • <p> : Represents a paragraph of text.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : Headings of varying levels.
  • <ul> : Represents an unordered (bulleted) list.
  • <ol> : Represents an ordered (numbered) list.
  • <li> : Represents a list item in <ul> or <ol>.
  • <table> : Represents a data table.
  • <form> : Represents an HTML form.
  • <header>, <footer>, <section>, <article>, <nav>, <aside> : Semantic block-level elements introduced in HTML5 for better page structure.

11. List some common HTML inline elements.

  • <a> : Creates hyperlinks.
  • <span> : Used for inline styling or grouping.
  • <strong> and <em> : Represents text with strong and emphasized importance.
  • <img> : Embeds images.
  • <br> : Inserts a line break.
  • <code> : Represents computer code.
  • <a>, <abbr>, <cite>, <time>, <q>, <sub>, <sup>, <abbr> : Various inline elements for specific purposes.

12. Explain the <a> tag and its attributes.

  • href : Specifies the URL of the linked resource.
  • target : Specifies where to open the linked resource (e.g., _blank for a new tab/window).
  • title : Provides additional information about the link (usually displayed as a tooltip).

13. What are semantic HTML elements? Provide examples.

  • <header> : Represents a header section.
  • <nav> : Represents navigation links.
  • <main> : Represents the main content of the page.
  • <article> : Represents a self-contained article or content block.
  • <section> : Represents a thematic grouping of content.
  • <aside> : Represents content that is tangentially related to the main content.
  • <footer> : Represents a footer section.

14. Explain the purpose of the <iframe> tag.

15. How do you create an ordered (numbered) list in HTML?

16. Explain the purpose of the <head> and <body> tags.

  • <head> : The <head> tag is part of the HTML document structure and contains metadata about the document, such as the document's title, character encoding, and links to external resources like stylesheets and scripts. It does not display any content directly on the web page.
  • <body> : The <body> tag contains the visible content of the web page that is displayed in the browser. This is where you place text, images, links, forms, and other elements that users can interact with or see. It represents the main content area of the webpage.

17. Describe the <table> element and its essential attributes.

  • border : Specifies the width of the table border (not recommended; use CSS for styling instead).
  • width : Sets the width of the table.
  • cellpadding : Specifies the space between the cell content and the cell border.
  • cellspacing : Specifies the space between cells.
  • summary : Provides a summary of the table for accessibility.

18. How do you create a hyperlink that opens in a new tab/window?

19. What is the purpose of the <form> element in HTML?

20. Explain the <img> element and its attributes.

  • src : Specifies the source URL of the image.
  • alt : Provides alternative text for the image, which is essential for accessibility and SEO.
  • width and height : Sets the dimensions of the image (in pixels).
  • title : Provides a tooltip when the user hovers over the image.

HTML Forms and Input

21. Describe the various input types in HTML5.

  • text : Single-line text input.
  • password : Password input (characters are hidden).
  • radio : Radio buttons for selecting one option from multiple choices.
  • checkbox : Checkboxes for selecting multiple options.
  • submit : A button to submit the form.
  • reset : A button to reset the form.
  • button : A generic button for custom actions.
  • email : Input for email addresses.
  • url : Input for website URLs.
  • number : Input for numeric values.
  • date : Input for date values.
  • color : Input for selecting a color.
  • file : Input for file uploads.
  • range : Input for selecting a value within a specified range.
  • search : Input for search queries.

22. How do you create a radio button in an HTML form?

23. Explain the difference between <input type='text'> and <input type='password'>.

  • <input type='text'> : This input type is used for plain text input. Whatever the user types is displayed as-is in the input field.
  • <input type='password'> : This input type is used for sensitive data like passwords. When the user enters text in a password field, it is masked with asterisks or dots, making it hidden from view for security reasons.

24. What is the purpose of the <textarea> element?

25. How can you disable a form element using HTML?

26. Explain the concept of form validation in HTML.

27. What is the use of the <label> element in forms?

28. How do you upload files using HTML forms?

HTML Multimedia

29. How do you embed a video in an HTML document?

  • <video> is the video element.
  • width and height specify the dimensions of the video player.
  • controls attribute adds playback controls like play, pause, and volume.
  • <source> specifies the video source and its type (in this case, an MP4 file).

30. Explain the <audio> element and its attributes.

  • controls : Adds audio playback controls.
  • <source> : Specifies the audio source and its type (in this case, an MP3 file).
  • The text 'Your browser does not support the audio tag.' is displayed if the browser doesn't support the audio element.

31. What is the purpose of the <canvas> element in HTML5?

32. How do you add a YouTube video to a webpage?

  • width and height specify the dimensions of the embedded video.
  • src contains the URL of the YouTube video you want to embed. Replace VIDEO_ID with the actual ID of the YouTube video you want to include.
  • frameborder='0' removes the border around the video.
  • allowfullscreen allows viewers to enter fullscreen mode.

HTML Lists and Tables

33. Describe the different list types in HTML.

  • Ordered Lists (<ol>) : Ordered lists are used when the items or items need to be presented in a specific sequence or order. Each list item is preceded by a number or another marker, which is typically a digit followed by a period.
  • Unordered Lists (<ul>) : Unordered lists are used for items that do not have a specific sequence or order. Each list item is preceded by a bullet point or some other marker, such as a square or a circle.
  • Definition Lists (<dl>, <dt>, and <dd>) : Definition lists are used for defining terms and providing their corresponding definitions.

34. How can you create a nested unordered list in HTML?

35. Explain the purpose of the <dl>, <dt>, and <dd> elements.

  • <dl> (Definition List) : It defines a definition list, which is typically used for glossaries, dictionaries, or lists of terms and their corresponding definitions.
  • <dt> (Definition Term) : It represents the term or name in a definition list and is typically followed by a <dd> element that contains the definition or description of the term.
  • <dd> (Definition Description) : It represents the description or definition of the term defined by the preceding <dt> element in a definition list (<dl>).

36. How do you create a basic HTML table?

  • Use the <table> element as the table container.
  • Define rows with <tr> elements.
  • Add headers using <th> within the first row.
  • Populate data cells with <td> in subsequent rows.
  • Optionally, use attributes like border, cellpadding, cellspacing, and caption for styling and descriptions.
  • Close the <table> element to complete the table.

37. What is the difference between <th> and <td> in HTML tables?

  • <th> (Table Header Cell) : It is used to represent header cells in an HTML table. Header cells are typically used to label columns or rows and are usually bold and centered by default. They are important for accessibility and SEO.
  • <td> (Table Data Cell) : It is used to represent data cells in an HTML table. Data cells contain the actual content of the table, such as text, numbers, or other elements.

38. How can you merge cells in an HTML table?

  • colspan : Specifies how many columns a cell should span horizontally.
  • rowspan : Specifies how many rows a cell should span vertically.

HTML Styling and CSS

39. How do you link an external CSS file to an HTML document?

40. Explain the purpose of the <style> element in HTML.

41. Describe the CSS box model.

  • Content : The actual content of the HTML element, such as text or images.
  • Padding : The space between the content and the element's border.
  • Border : The border around the padding and content.
  • Margin : The space between the border of the element and adjacent elements.

42. How do you change the font size in HTML using CSS?

43. What is a CSS selector, and provide examples.

  • Element Selector : Selects all instances of a specific HTML element.
  • Class Selector : Selects elements with a specific class attribute.
  • ID Selector : Selects a single element with a specific ID attribute.
  • Descendant Selector : Selects elements that are descendants of another element.

44. How can you apply inline CSS styles to HTML elements?

45. Explain the concepts of margin and padding in CSS.

  • Margin : Margin is the space outside the border of an element. It creates spacing between elements and can be used to control the layout and positioning of elements relative to each other. You can set margin values for individual sides (e.g., margin-top, margin-right, margin-bottom, margin-left) or use shorthand properties (e.g., margin for all sides).
  • Padding : Padding is the space between the content and the element's border. It affects the size of the element's content area. Padding can be set for individual sides (e.g., padding-top, padding-right, padding-bottom, padding-left) or using shorthand properties (e.g., padding for all sides).

HTML5 Features

46. List some new HTML5 semantic elements.

  • <header> : Represents the header or top section of a webpage or a section within a webpage.
  • <nav> : Represents a section containing navigation links.
  • <article> : Represents a self-contained piece of content, such as a blog post, news article, or forum post.
  • <section> : Represents a thematic grouping of content within a webpage.
  • aside> : Represents content that is tangentially related to the content around it, often used for sidebars.
  • <footer> : Represents the footer or bottom section of a webpage or a section within a webpage.

47. What is the purpose of the <nav> element?

48. Explain the use of the <video> and <audio> elements in HTML5.

  • <video> : The <video> element allows you to embed video content into a web page. You can specify multiple video sources with different formats and let the browser choose the most suitable one based on its capabilities. You can also include playback controls and define poster images.
  • <audio> : The <audio> element is used to embed audio content into a web page, similar to <video>. You can specify multiple audio sources with different formats for compatibility. It also supports playback controls.

49. Describe the HTML5 geolocation API.

50. How can you create a responsive website using HTML5 and CSS3?

  • Use Media Queries : CSS3 introduces media queries that allow you to apply different styles based on screen width or device characteristics. Define breakpoints in your CSS to adjust layouts and styles accordingly.
  • Fluid Layouts : Design your layout using relative units (percentages, ems, or viewport units) instead of fixed pixel sizes. This allows content to adapt fluidly to different screen sizes.
  • Flexible Images and Media : Use CSS to make images and media elements scale with the screen size. Set max-width: 100%; to prevent them from overflowing their containers.
  • Mobile-First Design : Start with a mobile-friendly design and progressively enhance it for larger screens using media queries. This ensures that your site works well on smaller devices.
  • Viewport Meta Tag : Include the viewport meta tag in your HTML to control the viewport's width and scaling on mobile devices.
  • CSS Flexbox and Grid : Utilize CSS Flexbox and Grid Layout to create flexible and responsive grid structures.
  • Testing : Regularly test your website on various devices and browsers to ensure compatibility and responsiveness.
  • Performance Optimization : Optimize images and minimize HTTP requests to improve loading times on mobile devices.

HTML Accessibility

51. What is web accessibility, and why is it important?

52. Explain the role of ARIA attributes in HTML for accessibility.

53. Describe the importance of alt attributes for images.

  • Accessibility : Screen readers rely on the alt attribute to convey the content and purpose of images to visually impaired users. Without a meaningful alt text, users with disabilities may miss important information.
  • SEO : Search engines use alt text to understand the content of images, which can improve a website's search engine ranking and visibility in image search results.
  • Graceful degradation : If an image fails to load, the alt text is displayed, ensuring that users still get relevant information.

HTML SEO (Search Engine Optimization)

54. What is the importance of SEO in web development?

  • Increased Visibility : SEO techniques help websites appear at or near the top of search results, making it more likely that users will visit them.
  • Enhanced User Experience : SEO best practices often overlap with good web design and usability, leading to a better overall user experience.
  • Competitive Advantage : Effective SEO can give a website a competitive edge by outperforming rival sites in search rankings.
  • Cost-Effective Marketing : Compared to paid advertising, SEO can be a cost-effective way to drive organic traffic over the long term.

55. Describe the use of HTML meta tags for SEO.

  • <title> : The <title> tag defines the title of the web page, which appears in the browser's title bar and is displayed in search engine results. It should be descriptive and relevant to the page's content.
  • <meta name='description'> : This tag provides a brief description of the page's content. It's often used as the snippet in search results.
  • <meta name='keywords'> : Though not as crucial as it once was, the <meta name='keywords'> tag can still specify a list of keywords related to the page's content.

HTML Coding Challenges

56. Create a Simple Web Page:

57. Form Validation:

58. Responsive Design:

59. HTML5 Video and Audio Player:

60. HTML Semantic Elements:

© 2023 | www.coding-ninja.com | All rights reserved

Crack the top 30+ HTML interview questions and answers

Become a Software Engineer in Months, Not Years

From your first line of code, to your first day on the job — Educative has you covered. Join 2M+ developers learning in-demand programming skills.

Frontend development continues to rise in popularity as more companies become web-oriented. As new technologies continue to innovate the frontend space, companies are on the lookout for specialized frontend developers.

When you’re preparing for your frontend development interview, you’ll be brushing up on JavaScript and the latest frameworks, but it’s important that you don’t forget about HTML , one of the foundational building blocks to web development.

You may think that you don’t need to review your HTML concepts, but during the interview, you face nuanced questions that you need to prepare for beforehand. Today, we’ll break down 30+ popular HTML interview questions to refresh your understanding of HTML before your next frontend interview.

Today we’ll cover the following:

  • Introduction to frontend interviews

The top 30+ HTML interview questions and answers

More practice questions, wrapping up and resources.

Technical front-end interviews can be incredibly difficult. In almost every scenario, HTML will not be the only concept that you are being interviewed on. You will be tested on your understanding of all components of web development, but HTML is essential to your success. HTML is the first step when it comes to preparing for coding interviews, as it is the foundation of web dev as a whole.

Though we will be focusing on HTML today, you will need to know other concepts. Refresh your understanding of. the following frontend concepts:

General networking knowledge: technologies, architectures, and paradigms such as HTTP requests, web security, REST vs RPC, and more

CSS: language basics and advanced add-ons like SASS preprocessors

JavaScript language: advanced JavaScript including concepts like callbacks and promises

Design patterns: structural, creational, behavioral, and more

Frameworks and libraries: you’ll want to speak to your personal experience with .js frameworks. and libraries

Data structures: Linked Lists, Hash tables, Trees, Graphs (know search algorithms), and more

Algorithms: study the Big-O complexity of each as you prepare

Web performance: the performance implications of your code, such as critical rendering path. service workers, image optimization, rendering performance, and more

Types of HTML & frontend interview questions

Before studying questions, it’s important to understand that coding questions fall into common patterns. Understanding those patterns makes it easier to come up with a solution quickly. 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. For instance, you may be asked about what kinds of blogs you like to read or influential Twitter developers you follow.

Knowledge. Questions to test your understanding of the industry

Personality. Gauging how well you fit the company’s values

Open-ended questions. These questions may gauge anything about your skills, interest in web development, history with programming, and more, such as,

  • What got you excited about web development?
  • What is front-end web development, and how is it different from back-end web development?
  • How do you know which HTML tag best suits which content?

Tips for HTML interview questions

Know the interview’s structure beforehand. There is no one structure for the front-end interview. So, before your interview, make sure to ask your recruiter about the format. Sometimes, your interview may use a whiteboard while others may use an online text editors. Make sure to know that environment that you will be using so that you are adjusted beforehand.

Prepare to talk about your projects. One of the first questions you will be asked in a frontend interview is around your past projects. It’s a good idea. to prepare a short speech about your projects including the tools used. This can include open source projects you’ve contributed to.

Approach coding questions with a system. For the technical questions of the interview, be sure to clarify that you understand the question. It’s a good idea to ask how you’ll be evaluated before you jump in, as it may change your strategy. Prioritize a mutual understanding with your interviewer so you can and adapt to feedback.

Approach the problem from multiple angles. An interviewee that gets stuck on one approach won’t make it too far. Don’t get set on one approach. A recruiter wants to know that you can take feedback. and adapt as needed. So, try to approach the problem from multiple angles and articulate any alternatives.

html tutorial questions 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?

html tutorial questions answers

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

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

Copyright © 2024 Educative, Inc. All rights reserved.

Table of Contents

Basic html interview questions and answers for freshers, intermediate html interview questions and answers, advanced html interview questions and answers, get ahead of the curve and master programming today, top 55+ html interview questions & answers in 2024.

Top 55+ HTML Interview Questions and Answers (2024 Updated List)

HTML stands for HyperText Markup Language. It is arguably the most widely-used and popular programming language used for web application development. Created in 191 by Berners-Lee but first published in 1995, HTML has, over the years, evolved and has seen multiple releases.HTML 4, published in 1999, was a breakthrough version in its evolution and gained a lot of popularity, seeing wide-spread adoption all over the globe. The latest and current version is HTML 5 which was published in the 2012.

In this article, we will discuss the top 55+ HTML Interview Questions you should absolutely know to crack those trying interviews and land your dream job.

HTML is critical for web development, and if you’ve ever thought about choosing that career path, you’d unquestionably have come across this language. And that’s probably why you are here in the first place.

For aspiring developers aiming to excel in the web development domain, mastering HTML is crucial. It serves as the backbone of web design, dictating the structure and layout of web pages. To navigate the complexities of HTML and broader web development technologies effectively, engaging with a java full stack developer course can be a game-changer.

So without further ado, let’s get started!

1. What is HTML?

HTML stands for HyperText Markup Language and is the language of the internet. It is the standard text formatting language used for creating and displaying pages on the Internet

HTML documents are made up of the elements and the tags that format it for proper display on pages.

2. What are HTML tags?

We use HTML tags for placing the elements in the proper and appropriate format. Tags use the symbols <, and > to set them apart from the HTML content.

The HTML tags need not be closed always. For example, in the case of images, the closing tags are not required as <img> tag.

3. What are HTML Attributes?

Attributes are the properties that can be added to an HTML tag. These attributes change the way the tag behaves or is displayed. For example, a <img> tag has an src attribute, which you use to add the source from which the image should be displayed.

We add attributes right after the name of the HTML tag, inside the brackets. We can only add the attributes to opening or self-closing tags, but never be in closing tags.

4. What is a marquee in HTML?

Marquee is used for scrolling text on a web page. It scrolls the image or text up, down, left, or right automatically. To apply for a marquee, you have to use </marquee> tags.

5. How do you separate a section of texts in HTML?

We separate a section of texts in HTML using the below tags:

  • <br> tag – It is used to separate the line of text. It breaks the current line and shifts the flow of the text to a new line.
  • <p> tag–This tag is used to write a paragraph of text.
  • <blockquote> tag–This tag is used to define large quoted sections.

6. Define the list types in HTML?

The list types in HTML are as below:

  • Ordered list–The ordered list uses <ol> tag and displays elements in a numbered format.
  • Unordered list–The unordered list uses <ul> tag and displays elements in a bulleted format.
  • Definition list–The definition list uses <dl>, <dt>, <dd> tags and displays elements in definition form like in a dictionary.

7. How do you align list elements in an HTML file?

We can align the list elements in an HTML file by using indents. If you indent each nested list in further than the parent list, you can easily align and determine the various lists and the elements that it contains.

Become a Software Development Professional

  • 23% Annual Growth
  • 1 million new jobs

Full Stack Web Developer - MEAN Stack

  • Comprehensive Blended Learning program
  • 8X higher interaction in live online classes conducted by industry experts

Full Stack Java Developer

  • Kickstart Full Stack Java Developer career with industry-aligned curriculum by experts
  • Hands-on practice through 20+ projects, assessments, and tests

Here's what learners are saying regarding our programs:

Mayur Kharad

Mayur Kharad

Product engineer , iks health.

During the lockdown, I realized I needed to upskill myself, and my journey with Simplilearn has been fantastic. I learned many things during the full stack java developer course, thanks to trainer Virendra Sharma. I've always wanted to work in this sector, and after completing my certification in Fullstack Java Development, I got placed at IKS Health through Simplilearn.

Manish Maccha

Manish Maccha

Software engineer , solventek.

I was looking for a new job with a better salary and position, so I knew I needed to upskill. My experience with Simplilearn was very good. Each topic was innovative and interesting, with quality content. After completing the full stack java developer course, I landed a new job with Neo Geo Info Technologies with a 30% salary hike.

8. Differentiate between an Ordered list and an Unordered list?

An unordered list uses <ul> </ul> tags and each element of the list is written between <li> </li> tags. The list items are displayed as bullets rather than numbers.

An ordered list uses <ol> </ol> tags and each element of the list is written between <li> </li> tags. The list items are displayed as numbers rather than bullet points.

<!DOCTYPE html>

<html>

  <body>

    <h2>HTML List Example</h2>

    <ul>

      <li>Coffee</li>

      <li>Tea</li>

      <li>Milk</li>

    </ul>

    <ol>

    </ol>

  </body>

</html>

html-list-example-23.

9. What is an element in HTML?

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

10. What is the difference between HTML and CSS?

HTML is used to create the structure and content of a web page, while CSS is used to define the appearance and layout of the page.

11. Are the HTML tags and elements the same thing?

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

12. What are void elements in HTML?

Void elements in HTML are tags that do not require a closing tag. They are used to insert images, line breaks, and other content that does not require additional information.

13. What is the advantage of collapsing white space?

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

14. What are HTML Entities?

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

15. How do you display a table in an HTML webpage?

The HTML <table> tag is used to display data in a tabular format. It is also used to manage the layout of the page, for example, header section, navigation bar, body content, footer section. Given below are the list of HTML tags used for displaying a table in an HTML webpage:

Tag

Description

<table>

It defines a table.

<tr>

It defines a row in a table.

<th>

It defines a header cell in a table.

<td>

It defines a cell in a table.

<caption>

It defines the table caption.

<colgroup>

It specifies a group of one or more columns in a table for formatting.

<col>

It is used with <colgroup> element to specify column properties for each column.

<tbody>

It is used to group the body content in a table.

<thead>

It is used to group the header content in a table.

<tfooter>

It is used to group the footer content in a table.

16. How would you display the given table on an HTML webpage?

5 pcs

10

5

1 pcs

50

5

The HTML Code for the problem depicted above is:

<table>

  <tr>

    <td>50 pcs</td>

    <td>100</td>

    <td>500</td>

  </tr>

    <td>10 pcs</td>

    <td>5</td>

    <td>50</td>

</table>

17. How do we insert a comment in HTML?

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

18. How do you insert a copyright symbol in HTML?

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

19. What is white space in HTML?

An empty sequence of space characters is called the white space in HTML. This white space is considered as a single space character in the HTML.

White space helps the browser to merge multiple spaces into one single space, and so taking care of indentation becomes easier. White space helps in better organizing the content and tags, making them readable and easy to understand.

20. How do you create links to different sections within the same HTML web page?

We use the <a> tag, along with referencing through the use of the # symbol, to create several links to different sections within the same web page.

21. How do you create a hyperlink in HTML?

We use the anchor tag <a> to create a hyperlink in HTML that links one page to another page. The hyperlink can be added to images too. 

22. Define an image map?

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

23. Why do we use a style sheet in HTML?

A style sheet helps in creating a well-defined template for an HTML webpage that is both consistent as well as portable. We can link a single style sheet template to various web pages, which makes it easier to maintain and change the look of the website.

24. What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. 

For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is not used for italic. Instead of these we use <strong></strong> and <em></em> tags.

25. What is SVG in HTML?

HTML SVG is used to describe the vector or raster graphics. SVG images and their behaviors are defined in XML text files. 

We mostly use it for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.

<svg width="100" height="100">

  <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />

</svg>

26. What would happen if there is no text between the HTML tags?

There would be nothing to format if there is no text present between the tags. Therefore, nothing will appear on the screen. 

Some tags, such as the tags without a closing tag like the <img> tag, do not require any text between them.

27. How do you create nested web pages in HTML?

Nested web pages basically mean a webpage within a webpage. We can create nested web pages in HTML using the built-in iframe tag. The HTML <iframe> tag defines an inline frame. For example:

    <h2>HTML Iframes example</h2>

    <p>

      specify the size of the iframe using the height and width attributes:

    </p>

    <iframe src="https://simplilearn.com/" height="600" width="800"></iframe>

28. How do you add buttons in HTML?

We can use the built-in Button tag in HTML to add buttons to an HTML web page.

    <h2>HTML Button Tag Example</h2>

    <button name="button" type="button">CLICK ME</button>

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

There are six types of heading tags in HTML which are defined with the <h1> to <h6> tags. Each type of heading tag displays a different text size from another. <h1> is the largest heading tag and <h6> is the smallest. For example:

    <h1>This is Heading 1</h1>

    <h2>This is Heading 2</h2>

    <h3>This is Heading 3</h3>

    <h4>This is Heading 4</h4>

    <h5>This is Heading 5</h5>

    <h6>This is Heading 6</h6>

heading-html

29. How do you insert an image in the HTML webpage?

 You can insert an image in the HTML webpage by using the following code:

    <h2>HTML Image Example</h2>

    <img src="tulip.jpeg" />

30. What is the alt attribute in HTML?

The alt attribute is used for displaying a text in place of an image whenever the image cannot be loaded due to any technical issue.

    <h2>HTML Alt Example</h2>

    <img src="tulip.jpeg" alt="Tulip Garden" />

31. How are hyperlinks inserted in the HTML webpage?

 You can insert a hyperlink in the HTML webpage by using the following code:

    <h2>HTML Hyperlink Example</h2>

    <a href="url">link text</a>

32. How do you add colour to the text in HTML?

 You can add colour to the text in HTML by using the following code:

    <h2>HTML Color Text Example</h2>

    <h1 style="color: Red">Hello HTML</h1>

    <p style="color: Blue">Line 1</p>

    <p style="color: Green">Line 2</p>

33. How do you add CSS styling in HTML?

There are three ways to include the CSS with HTML:

  • Inline CSS: It is used when less amount of styling is needed or in cases where only a single element has to be styled. To use inline styles add the style attribute in the relevant tag.
  • External Style Sheet: This is used when the style is applied to many elements or HTML pages. Each page must link to the style sheet using the <link> tag:

<head>

  <link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

  • Internal Style Sheet: It is used when a single HTML document has a unique style and several elements need to be styled to follow the format. Internal styles sheet is added in the head section of an HTML page, by using the <style> tag:

  <style type="text/css">

      color: sienna;

      margin-left: 20px;

      background-image: url("images/back40.gif");

  </style>

34. What hierarchy do the style sheets follow?

If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.

35. How do you add JavaScript to an HTML webpage?

JavaScript is used for making HTML web pages more interactive, and user-friendly. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three major ways of including JavaScript:

You can add JavaScript to your HTML elements directly whenever a certain event occurs. We can add the JavaScript code using attributes of the HTML tags that support it. Here is an example that shows an alert with a message when the user clicks on it:

<button onclick="alert('Click the Button!');">

</button>

  • Script block:

You can define a script block anywhere on the HTML code, which will get executed as soon as the browser reaches that part of the document. This is why script blocks are usually added at the bottom of HTML documents.

  <script>

    var x = 1;

    var y = 2;

    var result = x + y;

    alert("X + Y is equal to " + result);

  </script>

  • External JavaScript file:

You can also import the JavaScript code from a separate file and keep your HTML code clutter-free. This is especially useful if there is a large amount of scripting added to an HTML webpage.

  <script src="my-script.js"></script>

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

There are three lists in HTML: ordered, unordered, and definition. Ordered lists are numbered lists, unordered lists are bulleted lists, and definition lists are lists of terms and their definitions.

37. What is the ‘class' attribute in HTML?

The ‘class' attribute in HTML defines a class for an HTML element. It can be used to apply a specific style to a group of elements on a web page.

38. What is the difference between the ‘id' and ‘class' attributes of HTML elements?

The ‘id' attribute defines a unique identifier for an HTML element, while the ‘class' attribute defines a class for a group of elements. An ‘id' can only be used once on a page, while a ‘class' can be used multiple times.

39. What is the difference between HTML and XHTML?

HTML and XHTML are both markup languages used to create web pages. However, XHTML is stricter than HTML and requires developers to write well-formed code that adheres to specific rules and guidelines. XHTML also requires all tags to be closed and all attributes to be quoted.

40. What is the difference between HTML and HTML5?

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

41. What is the role of the <head> tag in HTML?

The <head> tag defines information about the web page that is not displayed on the page itself, such as its title, keywords, and other metadata. It is located between the <html> and <body> tags and is usually the first element in the document.

42. What is the role of the <meta> tag in HTML?

The <meta> tag provides additional information about the web page, such as the author, description, and keywords. It is located within the <head> section of the HTML document.

43. What is the difference between an absolute and relative URL?

An absolute URL includes the full web address, the protocol (such as http or https) and the domain name (such as www.example.com). A relative URL, on the other hand, specifies the location of a resource relative to the current web page. For example, a relative URL might include the file path (such as /images/picture.jpg) or the relative path (such as ../images/picture.jpg).

44. What is the role of the alt attribute in HTML?

The alt attribute provides alternative text for an image in case the image cannot be displayed. This is important for accessibility, as screen readers can read the alt text to describe the image to visually impaired users.

45. What is the role of the title attribute in HTML?

The title attribute provides additional information about an element, such as a link or an image. The title text is displayed as a tooltip when a user hovers over the element.

46. What is a form in HTML?

A form is a set of input fields and other elements to collect user data. Forms can be used for various purposes, such as logging in, submitting feedback, or purchasing.

47. What are the different types of form input fields in HTML?

Several form input fields in HTML include text fields, checkboxes, radio buttons, select menus, and text areas. Each input field type is used to collect different types of data from users.

48. What is the role of the action attribute in HTML forms?

The action attribute is used to specify the URL of the script or program that will process the data submitted by the form. When the user clicks the submit button, the form data is sent to the specified URL for processing.

49. What is the role of the method attribute in HTML forms?

The method attribute is used to specify the HTTP method that will be used to submit the form data. The two most common methods are GET and POST. GET is used to retrieve data from the server, while POST is used to send data to the server

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

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

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

The main difference between “display: none” and “visibility: hidden” is that the former removes the element from the document flow, while the latter simply hides it. Elements with “display: none” are not visible and do not take up any space on the page, while elements with “visibility: hidden” are not visible but still take up space.

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

Links can be specified using the <a> tag. The href attribute is used to specify the URL of the page that the link should go to. The target attribute can specify where the linked page should open, such as in a new or similar window.

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

CSS styles can be specified in several ways, including inline, internal, and external stylesheets. Inline styles are applied directly to the HTML element using the style attribute. Internal styles are defined within the <head> section of the HTML document using the <style> tag. External stylesheets are defined in a separate CSS file and linked to the HTML document using the <link> tag.

54. What is the difference between link tag <link> and anchor tag <a>?

The <link> tag links external resources, such as CSS stylesheets, to an HTML document. The <a> tag creates links to other pages or resources within the same document.

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

Scripts can be placed in the <head> section of the HTML document or in the <body> section. Scripts that must be executed before the page is displayed, such as scripts that define variables or functions, should be placed in the <head> section. Scripts that must be executed after the page is displayed, such as scripts that manipulate the DOM, should be placed in the <body> section.

56. What are forms, and how to create forms in HTML?

Forms collect user data, such as login information or search queries. Forms can be created using the <form> tag, and input fields, such as text fields and checkboxes, can be added using various other tags.

57. How to handle events in HTML?

Events can be handled using JavaScript, which can be included in the HTML document using the <script> tag. Event listeners can be added to HTML elements using the addEventListener() method, which allows custom code to be executed in response to user actions, such as clicks or keystrokes.

58. What are some advantages of HTML5 over its previous versions?

HTML5 includes several new features and improvements over previous versions, including better multimedia support, semantic elements, and better support for mobile devices. HTML5 also includes new APIs for working with web applications, such as the Geolocation API and the Canvas API.

As you get prepared for your job interview, we hope that these HTML Interview Questions have provided more insight into what types of questions you are likely to come across.

Now that you are well-versed with the top HTML Interview Questions, you should be seeking out opportunities to gain the skills you need to leverage the immense popularity of software development and build a successful career in it. Well, you needn’t look any further. We have got your back! Our comprehensive Post Graduate Program in Full Stack Web Development , which will help you with the necessary skills and more that you need and help you become career-ready upon completion. 

If you are looking for more information, do check out our YouTube video that further explains these HTML interview questions and answers, and helps you become more confident while appearing for the interview processes.

Do you have any questions for us? Well, feel free to mention them in the comments section of this “Top 55+ HTML Interview Questions’’ article. Our subject matter experts will review and answer them for you soon.

1) How would you define HTML in the best possible way? 

HTML (HyperText Markup Language) is the standard markup language used for creating and structuring the content of web pages. It uses a system of tags and attributes to define the structure and layout of a webpage, allowing browsers to interpret and display the content correctly.

2) How to prepare for an HTML interview?

To prepare for an HTML interview, consider the following steps:

  • Review the basics of HTML, including tags, attributes, and their usage.
  • Practice writing HTML code to create various elements and layouts.
  • Familiarize yourself with HTML5 features and improvements.
  • Learn about semantic HTML and the importance of accessibility.
  • Study CSS (Cascading Style Sheets) as it is often used in conjunction with HTML for styling web pages.
  • Explore common interview questions related to HTML and be ready to explain your solutions.

3) What are the 3 required parts of HTML? 

The three required parts of HTML are:

1) DOCTYPE declaration: It defines the version of HTML being used and ensures proper rendering in different browsers. 2) <html> element: This element wraps all the content on the webpage and signifies the beginning of an HTML document. 3) <body> element: It contains the visible content of the webpage, such as text, images, links, and other elements displayed in the browser window.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees

Cohort Starts:

4 Months€ 2,499

Cohort Starts:

6 Months€ 1,500

Cohort Starts:

6 Months€ 1,500

Cohort Starts:

11 Months€ 1,099

Recommended Reads

Kubernetes Interview Guide

The Best Guide to HTML Tags

60+ Top Angular Interview Questions With Answers for 2024

Azure Interview Guide

An Introduction To HTML Games: The Best Guide

Top 60 C++ Interview Questions and Answers for 2024

Get Affiliated Certifications with Live Class programs

  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.

Learn to Code, Prepare for Interviews, and Get Hired

01 Beginner

  • Introduction to HTML
  • Basics of HTML
  • Formatting in HTML
  • HTML File Paths
  • Semantic HTML5 Elements with Examples

02 Intermediate

  • HTML TABLES
  • HTML Inline and Block Elements: Explained with Examples
  • Links in HTML
  • HTML Images
  • HTML Form Elements

03 Advanced

  • A Guide to HTML Input Types with Examples
  • Input Attributes in HTML: Explained with Examples
  • Media and Graphics in HTML With Examples ( Full Guide )
  • HTML favicon
  • iframes in HTML
  • HTML Entities
  • HTML Quotations

04 Questions

Top 50 html interview questions and answers, 05 training programs.

  • JavaScript Programming Course
  • MERN: Full-Stack Web Developer Certification Training
  • Frontend Foundations Certification Training
  • HTML & CSS Course
  • Top 50 HTML Interview Que..

Top 50 HTML Interview Questions and Answers

HTML For Beginners Free Course

Html interview questions and answers: an overview.

In this HTML tutorial , we will dive into HTML Interview Questions and Answers . Here we have divided them into HTML Interview Questions for Freshers and HTML Interview Questions for Experienced . Learn HTML from scratch through HTML Certification Training right now.

HTML Interview Questions & Answers for Beginners

1. what is html.

HTML standsfor HyperText Markup Language . HTML uses the standard markup language for designing the layout of web pages. It specifies the layout or appearance of the web pages by telling the browser how the content needs to be displayed on the Internet.

2. What is !DOCTYPE?

A doctype , also known as document-type is an instruction that lets the web browser know which version or standard of the HTML or any other markup language is used to write the current page. In HTML5, the DOCTYPE is case-insensitive and its syntax is:

3. What is the current version of HTML?

4. what are the different markup languages available.

  • HTML- HyperText Markup Language
  • KML- Key whole Markup Language
  • SGML- Standard Generalized Markup Language
  • MathML- Mathematical Markup Language
  • XML - eXtensible Markup Language
  • XHTML- eXtensible HyperText Markup Language

5. What are HTML tags?

6. what are attributes in html, 7. what are the main components of an html document, 8. explain the difference between html elements and html tags..

HTML elements define the structure and content of a web page.HTML tags markup the beginning and end of an HTML element.
They consist of opening tags, content, attributes, and comments.They consist of opening and closing angle brackets with the tag name inside.

9. What is the difference between <div> and <span> elements?

10. what is the purpose of html in web development, 11. how do you create a hyperlink in html, 12. explain the difference between <strong> and <em> tags., 13. what is the structure of an html tag, 14. how are comments added in html.

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

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

16. describe various html tags used to display a table..

  • <table>- It defines the table.
  • <tr>- It defines a row in the table.
  • <th>- It defines a header cell in the table.
  • <td>- It defines a cell in the table.
  • <caption>- It defines a caption for the table.
  • <colgroup>- It defines a group of one or more columns in the table for formatting purposes.
  • <col>- It specifies column properties for each column when used with <colgroup> element.
  • <tbody>- It defines a group of body content in the table.
  • <thead>- It groups the header content in the table.
  • <tfooter>- it groups the footer content in the table.

Read More: HTML Tables

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

  • Unordered List- It is used to specify the items of a list with bullet points.
  • Ordered List- It is used to specify the items of a list in a sequence with numbers.
  • Definition List- It is used to arrange the list items in the same way as they are in a dictionary.

18. What are the various levels of heading tags?

19. what is the difference between html and html 5.

Temporary data is stored in cookies.All the offline data is stored in SQL databases and application cache.
JavaScript can not run in the browser.With the help of JS Web worker API in HTML 5 allows JavaScript to run in the browser.
It is supported on all old browsers.It works with all the new browsers such as Chrome, Firefox, Safari, etc.
It does not have some attributes like charset, async, and ping.All these attributes are available in HTML 5.

20. What is the purpose of the <img> tag in HTML?

21. what is the purpose of the <form> element in html, 22. what are html entities provide an example., 23. explain the difference between the get and post methods in html forms..

The 'GET' method sends the form data as part of the URL query string.The 'POST' method sends the form data in the HTTP request body.
The data length is limited.It is capable of handling larger data.
It is visible to the user.It is not visible to the user.

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

25. how do you create a numbered list in html, html interview questions and answers for intermediate, 26. explain the difference between the <header>, <nav>, <main>, and <footer> elements..

  • <header>- It contains the introductory content or navigation links for a section or the entire page.
  • <nav>- It contains navigation links to other pages or sections within the same page.
  • <main>- It contains the main content of the webpage.
  • <footer>- It contains information about the author, copyright, or other footer-related content.

27. Explain the difference between inline elements and block-level elements in HTML.

The inline elements do not start on a new line and flow within the text.The block-level elements start on a new line and occupy the full width.
There are no top and bottom margins for inline elements.Top and bottom margins do exist for block-level elements.
Some examples are- <span>, <a>, <strong>.Some examples are- <div>, <p>, <h1>..<h6>.

Read More: HTML Inline and Block Elements: Explained with Examples

28. What is the purpose of the viewport meta tag?

29. how do you create a dropdown menu in html, 30. explain the purpose of the <meta charset="utf-8"> tag., 31. what are data attributes in html, 32. explain the difference between html and xhtml..

It stands for HyperText Markup Language.It stands for eXtensible HyperText Markup Language
HTML is more forgiving of its syntax where shorthand notations are allowed.XHTML follows strict XML rules, where all elements need to be nested and closed properly.
Webpages can be rendered even if the markup is not perfectly formed.Even slight syntax errors can cause parsing errors leading to failure in rendering the document.
The document structure is lenient.It strictly adheres to the XML rules for document structure.
It is compatible with most of the web browsers.Its stricter syntax requirements make it less supported in older browsers.
It is commonly used for general web development.It is used in applications where strict adherence to XML rules is required.

33. How do you embed audio and video in HTML?

  • Audio- To embed audio in HTML, use <audio> element with the 'src' attribute that will specify the audio file and optional controls.
  • Video- To embed video in HTML, use <video> element with the 'src' attribute that will specify the video file and optional controls.

Read More: Media and Graphics in HTML With Examples ( Full Guide )

34. What is the purpose of the <figure> and <figcaption> elements?

35. what is the purpose of the rel attribute in the <a> tag, 36. what is the purpose of the scoped attribute in the <style> tag, 37. what is the purpose of the <iframe> element, 38. how do you create a form with input fields in html, 39. what is the purpose of the <canvas> element, 40. explain the difference between the <div> and <section> elements., html interview questions and answers for experienced, 41. what are web components, and how do they differ from custom html elements.

  • Custom Elements
  • HTML Templates
  • HTML Imports.

They are different from custom HTML elements as they provide encapsulation and isolation that help in creating complex UI components without much interference from external styles or scripts.

42. Explain the differences between client-side rendering (CSR) and server-side rendering (SSR) in the context of web applications.

Rendering occurs in the client's browser using JavaScript frameworks.Rendering occurs on the server before sending HTML to the client.
The initial load time is longer as rendering occurs after HTML is sent to the client.The initial time is shorter as pre-rendered HTML is sent to the client.
It is less SEO-friendly.It is more SEO-friendly.
The performance depends on the browser support for JavaScript and modern APIs.Its performance is consistent across browsers.
The complexity level is higher due to managing client-side state and routing.It is less complex as the server handles rendering and data fetching.

43. What are the new semantic elements introduced in HTML5?

44. how can you ensure accessibility in html documents.

  • Use semantic HTML elements to provide a clear document structure and meaningful content hierarchy.
  • Include descriptive text alternatives (using the alt attribute) for images, audio, and video elements.
  • Ensure keyboard navigation and focus management are implemented properly.
  • Use ARIA (Accessible Rich Internet Applications) attributes to enhance accessibility for interactive elements and widgets.
  • Test with screen readers and other assistive technologies to identify and address accessibility issues.

45. What are the best practices for optimizing web page performance in terms of HTML?

  • We can combine CSS and JavaScript files to minimize HTTP requests. For that purpose image sprites can be used and optimization of asset delivery.
  • We can use asynchronous loading to prevent blocking page rendering in scripts and stylesheets.
  • Removing unnecessary white spaces, comments, and duplicate attributes helps in optimizing the HTML markup.
  • We can use lazy loading for images and resources that will defer loading until they are needed.
  • There are browser caching and compression techniques that help in reducing file sizes and improving load times.

46. Explain the differences between client-side rendering (CSR) and server-side rendering (SSR) in the context of web applications.

  • Client-side rendering (CSR) is the process in which web pages are rendered entirely on the client's browser using JavaScript frameworks like React, Vue.js, or Angular. The server sends raw HTML and JavaScript bundles to the client, where the rendering and updates will be handled.
  • Server-side rendering (SSR) is the process where web pages are rendered on the server and then these fully rendered HTML are sent to the client's browser. It is often used for improving performance, SEO, and initial page load times, especially for those websites where the content is large.

47. What are web components, and how do they differ from custom HTML elements?

  • HTML Imports

Unlike traditional custom HTML elements, web components offer encapsulation and isolation properties, that enable the developers to create complex, reusable UI components without much interference from external styles or scripts.

48. What are HTML imports, and how do they differ from traditional script and link tags?

49. explain the difference between <pre> and <code> elements in html and when to use each., 50. what is the purpose of the defer and async attributes in <script> tags.

  • The 'defer' attribute defers the execution of the script until the document has been fully parsed. It is a boolean attribute that is only used with external scripts where the src attribute is present. When this is set, it means that the parsing of the page, and the script is being downloaded parallelly. The script will be executed only after the page has completed parsing. < script src = "script.js" defer > </ script >
  • The 'async' attribute does not block the HTML parsing and loads the script asynchronously. It is also a boolean attribute in HTML and is only used for external scripts. When there is an async attribute, it means that the script will get executed as soon as it is made available and will not wait for the page to complete parsing. < script src = "script.js" async > </ script >

Q1. How do I Prepare for an html Interview?

Q2. how do i showcase html projects in an interview, q3. what are some resources for html interview preparation, q4. what are some tips for answering html interview questions, take our html skill challenge to evaluate yourself.

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE

Live Classes Schedule

ASP.NET Core Certification Training Jul 17 MON, WED, FRI Filling Fast
Advanced Full-Stack .NET Developer Certification Training Jul 17 MON, WED, FRI Filling Fast
Angular Certification Course Jul 20 SAT, SUN Filling Fast
Generative AI For Software Developers Jul 20 SAT, SUN Filling Fast
Azure Master Class Jul 20 SAT, SUN Filling Fast
ASP.NET Core Certification Training Jul 28 SAT, SUN Filling Fast
Software Architecture and Design Training Jul 28 SAT, SUN Filling Fast
.NET Solution Architect Certification Training Jul 28 SAT, SUN Filling Fast
Azure Developer Certification Training Jul 28 SAT, SUN Filling Fast
Advanced Full-Stack .NET Developer Certification Training Jul 28 SAT, SUN Filling Fast
Data Structures and Algorithms Training with C# Jul 28 SAT, SUN Filling Fast
Angular Certification Course Aug 11 SAT, SUN Filling Fast
ASP.NET Core Project Aug 24 SAT, SUN Filling Fast

Can't find convenient schedule? Let us know

About Author

Author image

She is passionate about different technologies like JavaScript, React, HTML, CSS, Node.js etc. and likes to share knowledge with the developer community. She holds strong learning skills in keeping herself updated with the changing technologies in her area as well as other technologies like Core Java, Python and Cloud.

JavaScript Programming Course

  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support

We use cookies to make interactions with our websites and services easy and meaningful. Please read our Privacy Policy for more details.

HTML for Beginners

Beau Carnes

HTML is used to create web pages.

This article will teach you the basics of HTML. I also created a 45-minute video course on the freeCodeCamp.org YouTube channel that teaches you HTML in the context of creating an actual web page.

If you are just learning HTML, I recommend both reading this article and watching the video course.

HTML stands for Hyper Text Markup Language. Every website on the internet uses HTML & CSS. Most also use JavaScript.

image-187

In a website, HTML is the structure, CSS is the style, and JavaScript is the functionality.

Here is a great interactive diagram from codeanalagies.com . Move the slider back and forth.

You can actually see the HTML that makes up any element on a webpage by right-clicking an element and then selecting "Inspect".

image-190

HTML Structure

Here is the HTML that makes up a very basic webpage:

Let's break things down even more.

HTML is made up of HTML elements. An element is an individual component of HTML.

Here is an HTML element from the code above:

HTML tags mark the beginning and end of an element (and are considered part of the element). Tags are containers. They tell you something about the content between the opening & closing tags.

In the element above, the tags are <p> (opening tag) and </p> (closing tag). You will notice that the closing tag has a / . This particular tag is a p aragraph tag. It specifies a paragraph in the HTML document. The words between the opening and closing tags are a paragraph.

html-tag-attributes

Kinds of Elements

Elements can be either container elements (they hold content) or stand-alone elements, sometimes called self-closing elements.

Paragraph elements are containers: <p>Hi, I contain content</p>

Image elements are stand-alone: <img src="beau.jpg" />

Notice in the stand-alone img element, there is no closing tag but there is a / before the final angle bracket.

Attributes provide additional information about HTML elements. Attribute tags include class , id , style , lang , and src (source).

Here is an example of an HTML element with the attribute tag id :

Some things to note about attributes:

  • Attributes are positioned inside the opening tag, before the right bracket.
  • Attributes are paired with values (in this example, the value is info ).
  • Key / value pairs are an important concept in programming.
  • Attributes are selected from a pre-defined set of possible attributes depending on the element.
  • Values are assigned to attributes and they must be contained inside quotation marks.

Here is another example of an element with at attribute:

HTML elements 'nest' inside of one another. The element that opens first closes last.

When nesting elements, spaces and tabs are often used to show the level of nesting. However, the spacing is not required and is only used to make HTML easier to read for humans.

Here is an example of some HTML with a few levels of nesting elements:

Common HTML Tags

Here are some common tags that are in almost all HTML documents.

doctype : This is the first element on every HTML page. It tells the browser to expect HTML and what version to use. For the newest version of HTML, the element should look like this: <!doctype html>

html : After the doctype, all page content must be contained in the <html> tags.

head : This element contains the page title and metadata.

body : This element contains all the visible content in a page.

title : This optional element is the name of your page. It is always nested in the head tag.

div : This tag is one of the most used tags. It is used to create a basic container of other HTML or content.

p : A paragraph or section of body copy.

h1 - h6 : These designate different levels of headings or titles.

ol : Creates an ordered (numbered) list.

ul : Creates an unordered list.

li : List element.

Anchor elements ( <a></a> ) are used to link to other sites on the web or within your project.

This element links to another website:

<a href="https://freecodecamp.com">freeCodeCamp</a>

This element links to another page of your website:

<a href="about.html">About Me</a>

The <link> element is a different type of link. Unlike the anchor element, it specifies relationships between the current document and an external resource.

It is often used to link a CSS file with an HTML file so that the external CSS file is used to style the HTML.

Here is an example:

<link src="main.css" rel='stylesheet' />

Like any other good coding language, HTML offers comments. They operate like comments in any other language. They are ignored by the browser engine.

<!-- Hello, I am a comment. -->

Tables are a way to represent complex information in a grid format. They are made of rows and columns.

Tables are compound elements (similar to lists) they are made up of several elements.

table : Table element.

tr : Table row.

td : Table cell.

th : Table header cell (optional).

Here is an example of a table. First you will see the HTML. Then you will see how the HTML displays.

Firstname Lastname Favorite Animal
Beau Carnes cow
Quincy Larson dog

Trivia time!

  • What is wrong with this code?

2. What is wrong with this code?

3. What is wrong with this code?

You've now learned the basics of HTML syntax.

Next you should watch this HTML crash course I created that teaches HTML in the context of building a simple web page.

After you learn HTML, you should learn CSS and JavaScript. I have also created courses on those topics. You can watch them next:

I'm a teacher and developer with freeCodeCamp.org. I run the freeCodeCamp.org YouTube channel.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Live Training, Prepare for Interviews, and Get Hired

Live Training

  • JavaScript Programming Course
  • MERN: Full-Stack Web Developer Certification Training
  • Frontend Foundations Certification Training
  • HTML & CSS Course
  • Top 50 HTML Interview Que..
  • YouTube Videos
  • Interview eBooks
  • Training Library

Top 50 HTML Interview Questions and Answers

Top 50 HTML Interview Questions and Answers

Html interview questions and answers: an overview.

In this HTML tutorial , we will dive into HTML Interview Questions and Answers . Here we have divided them into HTML Interview Questions for Freshers and HTML Interview Questions for Experienced . Learn HTML from scratch through HTML Certification Training right now.

HTML Interview Questions & Answers for Beginners

1. what is html.

HTML standsfor HyperText Markup Language . HTML uses the standard markup language for designing the layout of web pages. It specifies the layout or appearance of the web pages by telling the browser how the content needs to be displayed on the Internet.

2. What is !DOCTYPE?

A doctype , also known as document-type is an instruction that lets the web browser know which version or standard of the HTML or any other markup language is used to write the current page. In HTML5, the DOCTYPE is case-insensitive and its syntax is:

3. What is the current version of HTML?

4. what are the different markup languages available.

  • HTML- HyperText Markup Language
  • KML- Key whole Markup Language
  • SGML- Standard Generalized Markup Language
  • MathML- Mathematical Markup Language
  • XML - eXtensible Markup Language
  • XHTML- eXtensible HyperText Markup Language

5. What are HTML tags?

6. what are attributes in html, 7. what are the main components of an html document, 8. explain the difference between html elements and html tags..

HTML elements define the structure and content of a web page.HTML tags markup the beginning and end of an HTML element.
They consist of opening tags, content, attributes, and comments.They consist of opening and closing angle brackets with the tag name inside.

9. What is the difference between <div> and <span> elements?

10. what is the purpose of html in web development, 11. how do you create a hyperlink in html, 12. explain the difference between <strong> and <em> tags., 13. what is the structure of an html tag, 14. how are comments added in html.

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

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

16. describe various html tags used to display a table..

  • <table>- It defines the table.
  • <tr>- It defines a row in the table.
  • <th>- It defines a header cell in the table.
  • <td>- It defines a cell in the table.
  • <caption>- It defines a caption for the table.
  • <colgroup>- It defines a group of one or more columns in the table for formatting purposes.
  • <col>- It specifies column properties for each column when used with <colgroup> element.
  • <tbody>- It defines a group of body content in the table.
  • <thead>- It groups the header content in the table.
  • <tfooter>- it groups the footer content in the table.

Read More: HTML Tables

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

  • Unordered List- It is used to specify the items of a list with bullet points.
  • Ordered List- It is used to specify the items of a list in a sequence with numbers.
  • Definition List- It is used to arrange the list items in the same way as they are in a dictionary.

18. What are the various levels of heading tags?

19. what is the difference between html and html 5.

Temporary data is stored in cookies.All the offline data is stored in SQL databases and application cache.
JavaScript can not run in the browser.With the help of JS Web worker API in HTML 5 allows JavaScript to run in the browser.
It is supported on all old browsers.It works with all the new browsers such as Chrome, Firefox, Safari, etc.
It does not have some attributes like charset, async, and ping.All these attributes are available in HTML 5.

20. What is the purpose of the <img> tag in HTML?

21. what is the purpose of the <form> element in html, 22. what are html entities provide an example., 23. explain the difference between the get and post methods in html forms..

The 'GET' method sends the form data as part of the URL query string.The 'POST' method sends the form data in the HTTP request body.
The data length is limited.It is capable of handling larger data.
It is visible to the user.It is not visible to the user.

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

25. how do you create a numbered list in html, html interview questions and answers for intermediate, 26. explain the difference between the <header>, <nav>, <main>, and <footer> elements..

  • <header>- It contains the introductory content or navigation links for a section or the entire page.
  • <nav>- It contains navigation links to other pages or sections within the same page.
  • <main>- It contains the main content of the webpage.
  • <footer>- It contains information about the author, copyright, or other footer-related content.

27. Explain the difference between inline elements and block-level elements in HTML.

The inline elements do not start on a new line and flow within the text.The block-level elements start on a new line and occupy the full width.
There are no top and bottom margins for inline elements.Top and bottom margins do exist for block-level elements.
Some examples are- <span>, <a>, <strong>.Some examples are- <div>, <p>, <h1>..<h6>.

Read More: HTML Inline and Block Elements: Explained with Examples

28. What is the purpose of the viewport meta tag?

29. how do you create a dropdown menu in html, 30. explain the purpose of the <meta charset="utf-8"> tag., 31. what are data attributes in html, 32. explain the difference between html and xhtml..

It stands for HyperText Markup Language.It stands for eXtensible HyperText Markup Language
HTML is more forgiving of its syntax where shorthand notations are allowed.XHTML follows strict XML rules, where all elements need to be nested and closed properly.
Webpages can be rendered even if the markup is not perfectly formed.Even slight syntax errors can cause parsing errors leading to failure in rendering the document.
The document structure is lenient.It strictly adheres to the XML rules for document structure.
It is compatible with most of the web browsers.Its stricter syntax requirements make it less supported in older browsers.
It is commonly used for general web development.It is used in applications where strict adherence to XML rules is required.

33. How do you embed audio and video in HTML?

  • Audio- To embed audio in HTML, use <audio> element with the 'src' attribute that will specify the audio file and optional controls.
  • Video- To embed video in HTML, use <video> element with the 'src' attribute that will specify the video file and optional controls.

Read More: Media and Graphics in HTML With Examples ( Full Guide )

34. What is the purpose of the <figure> and <figcaption> elements?

35. what is the purpose of the rel attribute in the <a> tag, 36. what is the purpose of the scoped attribute in the <style> tag, 37. what is the purpose of the <iframe> element, 38. how do you create a form with input fields in html, 39. what is the purpose of the <canvas> element, 40. explain the difference between the <div> and <section> elements., html interview questions and answers for experienced, 41. what are web components, and how do they differ from custom html elements.

  • Custom Elements
  • HTML Templates
  • HTML Imports.

They are different from custom HTML elements as they provide encapsulation and isolation that help in creating complex UI components without much interference from external styles or scripts.

42. Explain the differences between client-side rendering (CSR) and server-side rendering (SSR) in the context of web applications.

Rendering occurs in the client's browser using JavaScript frameworks.Rendering occurs on the server before sending HTML to the client.
The initial load time is longer as rendering occurs after HTML is sent to the client.The initial time is shorter as pre-rendered HTML is sent to the client.
It is less SEO-friendly.It is more SEO-friendly.
The performance depends on the browser support for JavaScript and modern APIs.Its performance is consistent across browsers.
The complexity level is higher due to managing client-side state and routing.It is less complex as the server handles rendering and data fetching.

43. What are the new semantic elements introduced in HTML5?

44. how can you ensure accessibility in html documents.

  • Use semantic HTML elements to provide a clear document structure and meaningful content hierarchy.
  • Include descriptive text alternatives (using the alt attribute) for images, audio, and video elements.
  • Ensure keyboard navigation and focus management are implemented properly.
  • Use ARIA (Accessible Rich Internet Applications) attributes to enhance accessibility for interactive elements and widgets.
  • Test with screen readers and other assistive technologies to identify and address accessibility issues.

45. What are the best practices for optimizing web page performance in terms of HTML?

  • We can combine CSS and JavaScript files to minimize HTTP requests. For that purpose image sprites can be used and optimization of asset delivery.
  • We can use asynchronous loading to prevent blocking page rendering in scripts and stylesheets.
  • Removing unnecessary white spaces, comments, and duplicate attributes helps in optimizing the HTML markup.
  • We can use lazy loading for images and resources that will defer loading until they are needed.
  • There are browser caching and compression techniques that help in reducing file sizes and improving load times.

46. Explain the differences between client-side rendering (CSR) and server-side rendering (SSR) in the context of web applications.

  • Client-side rendering (CSR) is the process in which web pages are rendered entirely on the client's browser using JavaScript frameworks like React, Vue.js, or Angular. The server sends raw HTML and JavaScript bundles to the client, where the rendering and updates will be handled.
  • Server-side rendering (SSR) is the process where web pages are rendered on the server and then these fully rendered HTML are sent to the client's browser. It is often used for improving performance, SEO, and initial page load times, especially for those websites where the content is large.

47. What are web components, and how do they differ from custom HTML elements?

  • HTML Imports

Unlike traditional custom HTML elements, web components offer encapsulation and isolation properties, that enable the developers to create complex, reusable UI components without much interference from external styles or scripts.

48. What are HTML imports, and how do they differ from traditional script and link tags?

49. explain the difference between <pre> and <code> elements in html and when to use each., 50. what is the purpose of the defer and async attributes in <script> tags.

  • The 'defer' attribute defers the execution of the script until the document has been fully parsed. It is a boolean attribute that is only used with external scripts where the src attribute is present. When this is set, it means that the parsing of the page, and the script is being downloaded parallelly. The script will be executed only after the page has completed parsing. < script src = "script.js" defer > </ script >
  • The 'async' attribute does not block the HTML parsing and loads the script asynchronously. It is also a boolean attribute in HTML and is only used for external scripts. When there is an async attribute, it means that the script will get executed as soon as it is made available and will not wait for the page to complete parsing. < script src = "script.js" async > </ script >

Q1. How do I Prepare for an html Interview?

Q2. how do i showcase html projects in an interview, q3. what are some resources for html interview preparation, q4. what are some tips for answering html interview questions, take our free skill tests to evaluate your skill.

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

About Author

Author image

She is passionate about different technologies like JavaScript, React, HTML, CSS, Node.js etc. and likes to share knowledge with the developer community. She holds strong learning skills in keeping herself updated with the changing technologies in her area as well as other technologies like Core Java, Python and Cloud.

Upcoming Master Classes  

  • Apache Hadoop, Hadoop, and Apache logo are either registered trademarks or trademarks of the Apache Software Foundation.
  • Android, Android Logo, Google, Google Cloud and its products are either registered trademarks or trademarks of Google, Inc.
  • AWS, Amazon Web Services and its products are either registered trademarks or trademarks of Amazon Web Services, Inc.
  • Certified ScrumMaster (CSM) and Certified Scrum Trainer (CST) are registered trademarks of SCRUM ALLIANCE
  • iPhone, iOS and Apple are the registered trademarks or trademarks of Apple Inc.
  • Microsoft, Microsoft Azure and its products are either registered trademarks or trademarks of Microsoft Corporation.
  • MongoDB, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.
  • Oracle, Java, and Primavera are the registered trademarks of Oracle Corporation.
  • Python and the Python logos (in several variants) are the trademarks of the Python Software Foundation.
  • "PMP","PMI", "PMI-ACP" and "PMBOK" are registered marks of the Project Management Institute, Inc.
  • Salesforce and the respective Salesforce logos are the registered trademarks of Salesforce.com
  • Other brands, product names, trademarks, and logos are the property of their respective companies.

We use cookies to make interactions with our websites and services easy and meaningful. Please read our Privacy Policy for more details.

html tutorial questions answers

DEV Community

DEV Community

Let's Code

Posted on May 11, 2021 • Updated on Nov 4, 2021

CSS and HTML Interview Questions and Answers [2022]

My last post 📮 on JavaScript Interview Questions and Answers (Junior and Senior) got good feedback from dev.to community so I decided to complete the entire package.

I have been interviewed and also interviewed engineers numerous 💯 times. Below are the most commonly asked HTML and CSS questions and answers that I have shortlisted that often come up that may be asked on your next front-end interview.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

CSS Interview Questions

What is css box model.

The box model is a box that wraps around every HTML element. The box contains content, padding, border, and margin.

  • Content of the box is where text and images appear
  • Padding is the area around the content. The padding is transparent
  • Border is the border that goes around the padding and content
  • Margin is the area outside the border. The margin is transparent

What is a CSS sprite?

CSS sprites combine multiple images into one single larger image. This would only require one server request resulting in a faster loading time. Without CSS sprites, each image will send out individual server requests.

What is a CSS preprocessor?

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from and each one will add some features that don’t exist in pure CSS such as variables, mixin, nesting selector, and many more. These features make the CSS structure more readable and easier to maintain.

Explain the concept of specificity in CSS.

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element that will be applied. Specificity applies a weight to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.

What is !important?

Important is used to provide more weight (importance) than normal property. It is used for overriding other styles that are declared elsewhere in order to achieve a certain design. We can think of important as the main priority so it needs to be applied and ignore other rules.

Explain the difference between visibility: hidden and display: none?

visibility: hidden hides the element, but it occupies space and affects the layout of the document. display: none also hides the element but not occupy space. It will not affect the layout of the document.

What are the different ways to position a certain element in CSS?

Position can be static, relative, absolute, fixed, and sticky

Static
 is the default position value. The element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not work with static positioning.

Relative element is adjusted relative to itself, without changing the layout

Absolute element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block.

Fixed element is also removed from the flow of the page. It is positioned relative to the viewport and doesn’t move when scrolled.

Sticky element is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

What does box-sizing: border-box do?

This tells the browser to account for any border and padding with the element's width and height. This makes dealing with the sizes of elements much easier. It will also eliminate a number of pitfalls you can stumble while laying out your content.

What is the difference between inline, inline-block, and block?

Block elements always start on a new line. They will also take space of an entire row.

Inline elements don't start on a new line, These elements appear on the same line with the content and tags beside them.

Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.

What is pseudo-element?

A pseudo-element allows you to manipulate parts of an element in a special way. You can use only one pseudo-element in a selector but It must appear after the simple selectors in the statement.

What is pseudo-class?

A pseudo-class is a selector that selects elements that are in a specific state. Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

What is the difference between Flexbox and Grid?

flexbox is a one-dimensional layout to create either a row or a column layout while grid Is a two-dimensional layout that can handle both row and column layout.

Both approaches make it easy to design and build a layout on web pages without writing a lot of CSS.

A general rule to follow is to use flexbox if you need to define a layout as a row or a column.

Use a grid If you want to define a grid and place the content into it.

You can also mix these two together.

HTML Interview Questions

What are html entities.

HTML entities are a piece of text ("string") that begins with an ampersand ( & ) and ends with a semicolon ( ; ) . They are frequently used to display reserved (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces).

What are semantic elements in HTML?

Semantic elements are HTML elements that represent its meaning to the browser and developer about its contents. Elements like , , and

are semantic elements.

What are meta tags?

Meta tags are HTML tags that can be included in webpages that describe what the web page is about. These tags are not displayed on the page itself but are read by search engines like google.com and web crawlers.

What are two types of Web Storage in HTML5?

Session Storage stores data of the current session. Data stored in session storage is cleared automatically when the browser is closed. Local Storage data is not deleted automatically when the current browser window is closed.

What are web workers?

A web worker is a JavaScript code that runs on a separate thread. It is used to compute long and heavy tasks as it doesn’t affect the performance of the page.

What is HTML?

HTML or HyperText Markup Language is the standard markup language for creating web pages. It is used to structure a web page and its content.

What are HTML attributes?

HTML attributes are additional information on html tags that change the way the html element behaves or is displayed. Attributes are specified directly after the opening name of the tag, inside the two angled brackets.

What are data-attributes good for?

Data attribute lets you assign custom data to an element to store more information or data when no suitable HTML5 element or attribute exists.

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

ID is only used to identify one single element. Class can be used to identify more than one HTML element.

What is the purpose of the alt attribute on images?

The alt attribute provides alternative information in case the user cannot view the image. This attribute can be also used for accessibility.

What are the differences between inline and block-level elements?

Inline elements just take up the space that is absolutely necessary for the content and does not start from a new line. Block elements start on a new line and consume the full width of the page available.

How can we create a hyperlink in HTML?

An anchor tag or tag is used to create hyperlinks. This creates a path between two different HTML web pages.

Name the three list types in HTML

  • Ordered list displays elements in a numbered format where order of items matter
  • Unordered list displays elements in a bulleted format where order of items does not matter
  • Definition list displays elements in definition form like in a dictionary. It contains key-value pairs.

Besides the list of HTML and CSS questions I have, are there any more questions you asked or you have been asked that you may want to add? Please add it to the discussion below.

Thank you and happy coding!

If you want to support me - Buy Me A Coffee

Top comments (6)

pic

Templates let you quickly answer FAQs or store snippets for re-use.

squidbe profile image

  • Joined Jul 30, 2018
Elements like , , and are semantic elements.

Looks like you need to use some HTML entities 😊.

frontendengineer profile image

  • Work Software Engineer
  • Joined May 6, 2019

lol good one!

isabellacacelia profile image

  • Location São Paulo, Brazil
  • Work Frontend Developer at Mercado Livre
  • Joined May 11, 2021

thanks Isabella! Is there any interview question you think that trully belong here or part of video you like the most?

Hi! I can't think in nothing right now, this post is complete for me! ^^

glad to hear that. thanks again!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

aryan015 profile image

3. Finale of complete SASS 🤣(longer)

aryan015 - Jul 6

lilxyzz profile image

Running a Website Speed Test

Travis - Jul 14

techpulzz profile image

Top Reasons to Avail WordPress Development Services

techpulzz - Jul 1

usulpro profile image

Top 5 Must-Ask Questions About Your Career in IT

Oleg Proskurin - Jun 26

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

{{ activeMenu.name }}

  • Python Courses
  • JavaScript Courses
  • Artificial Intelligence Courses
  • Data Science Courses
  • React Courses
  • Ethical Hacking Courses
  • View All Courses

Fresh Articles

TripleTen Data Science Bootcamp: Insider Review

  • Python Projects
  • JavaScript Projects
  • Java Projects
  • HTML Projects
  • C++ Projects
  • PHP Projects
  • View All Projects

How to Build an Age Calculator in Python

  • Python Certifications
  • JavaScript Certifications
  • Linux Certifications
  • Data Science Certifications
  • Data Analytics Certifications
  • Cybersecurity Certifications
  • View All Certifications

DataCamp’s Certifications To Get You Job-Ready: Insider Review

  • IDEs & Editors
  • Web Development
  • Frameworks & Libraries
  • View All Programming
  • View All Development

The Best Computer for Android Development: Minimum and Recommended Specs

  • App Development
  • Game Development
  • Courses, Books, & Certifications
  • Data Science
  • Data Analytics
  • Artificial Intelligence (AI)
  • Machine Learning (ML)
  • View All Data, Analysis, & AI

Insider Review of DataCamp’s AI-Powered DataLab Tool

  • Networking & Security
  • Cloud, DevOps, & Systems
  • Recommendations
  • Crypto, Web3, & Blockchain
  • User-Submitted Tutorials
  • View All Blog Content
  • JavaScript Online Compiler
  • HTML & CSS Online Compiler
  • Certifications
  • Programming
  • Development
  • Data, Analysis, & AI
  • Online JavaScript Compiler
  • Online HTML Compiler

Don't have an account? Sign up

Forgot your password?

Already have an account? Login

Have you read our submission guidelines?

Go back to Sign In

html tutorial questions answers

50 Best HTML5 Interview Questions and Answers in 2024

This article discusses the top HTML5 interview questions. We also included answers. As the latest and last major version of HTML, HTML5 facilitates creating and designing content-rich, interactive web pages. So these interview questions cover all aspects of the process.

In technical terms, HTML5 defines behaviors and properties of content on a web page by implementing a markup-based pattern to it. So how do you ace an interview on the subject? Let's dive into the questions and answers.

  • Top HTML5 Interview Questions And Answers

To help you win your upcoming HTML5-based job interview, here we are with our pick of the 50 best HTML5 interview questions:

Question: List the significant goals of the HTML5 specification.

Answer: Following are the most important goals of the HTML5 specification:

  • Better semantic support for the web page structure with the introduction of new structural element tags
  • Delivering a stricter parsing standard for:
  • Ensuring consistent cross-browser behavior
  • Offering excellent backward compatibility with documents written as per older HTML standards
  • Simplifying error handling
  • For replacing HTML4, XHTML, and the HTML DOM Level 2
  • Offer interactive and rich content, such as videos and animation, without dependency on plugins
  • Seamless operation across multiple devices and platforms

Question: Enumerate some of the most important new features in HTML5.

Answer: Some of the best new features brought by the HTML5 specification are:

  • Better error handling
  • Enhanced support for embedding audio, graphics, and video content via <audio>, <canvas>, and <video> tags
  • Extensions for the JavaScript API, such as for caching, drag-and-drop, geolocation, and storage
  • More markup for replacing scripting
  • Multi-device support
  • Attributes for better document structure, such as <article>, <bdi>, <figcaption>, and <meter>
  • Form controls, including <calendar>, <email>, <search>, and <url>
  • Parsing rules for enhancing flexibility
  • Semantic tags for complementing the structural logic of modern web applications, such as <aside>, <header>, <main>, and <section>
  • Standard features like that of CSS, DOM, HTML, and J.S. for reducing the requirement of external plugins
  • Support for:
  • Offline editing
  • Protocol and MIME handler registration
  • Web workers

P.S. - Know what makes Novi HTML Visual Editor a great choice for web developers .

Question: What are the differences between HTML5 and HTML?

Answer: Following are the various differences between HTML and HTML5:

1. Attributes

Attributes of Async, charset, and ping are available in HTML5. The same is not available in HTML.

1. Doctype Declaration

HTML features a long and complicated doctype declaration. The same is simple and easy in HTML5.

2. Drag-and-Drop

While HTML5 provides support for the drag-and-drop effect, HTML has no provision for it.

3. Drawing Geometric Shapes

There is no way of drawing shapes like circles, rectangles, and triangles in HTML. The same can be drawn in HTML5.

4. High-level Video and Audio Support

High-level audio and video support isn't a part of the HTML specifications. HTML5 offers out-of-the-box high-level audio and video support.

5. In-text Use

MathML and SVG can be used in text in HTML5. The same is not possible in HTML.

6. JavaScript Support

HTML doesn't provide support for running J.S. within the web browser. HTML5 allows JavaScript to run in the background using Web Workers.

7. Mobile-ready

HTML is not mobile-ready. HTML5 specifications involve an emphasis on mobile-friendliness.

There is no persistent storage option available in HTML. Only the browser cache is used as temporary storage. HTML5 allows permanent storage with an application cache, Web SQL database, and web storage.

9. Vector Graphics

HTML5 provides support for Canvas, SVG, and other virtual vector graphics. Implementing vector graphics in HTML is only possible using third-party plugins like Silverlight and VML.

Question:Enumerate important HTML5 technologies.

Answer: HTML5 adds a number of new technologies to facilitate faster, better, and more interactive web page development. Important HTML5 technologies are:

  • Drag and Drop
  • Geolocation API
  • Offline Application
  • SSE (Server-Sent Events)
  • SVG ( Scalable Vector Graphics )
  • Web Intents
  • Web Messaging
  • Web Sockets
  • Web Storage
  • Web Workers

Question: What do you understand by web workers?

Answer: The addition of web workers brings multithreading capability to JavaScript. These are scripts running in the background that doesn't necessitate the web page to wait for their completion.

Hence, a user can interact freely with the web page while a web worker runs in the background. In order to achieve parallelism , web workers leverage thread-like message passing.

Question: What do you understand by HTML tags? How many tags are required to create a web page in HTML5?

Answer: A set of characters enclosed within angular braces (<> or </>) that develop a formatted command for a web page is called an HTML tag. The general syntax of an HTML5 tag is:

<tag>.….</tag>

Tags help in sending instructions to the web browser on what to display and how to display. A minimum of 3 tags are required for creating a web page in HTML5:

  • <head>
  • <body>
  • <html>

Question: Please explain the various formatting tags in HTML5.

Answer: HTML5 has a total of 12 formatting tags:

  • <b> - Used for making the text bold.
  • <big> - Used for increasing the font size of the text by one unit.
  • <del> - Used to display the deleted text.
  • <em> - Used for making the text italic with added semantics importance.
  • <i> - Used to make the text italic.
  • <ins> - Used for displaying the added text.
  • <mark> - Used for highlighting the text.
  • <small> - Used to decrease the font size of the text by one unit.
  • <strong> - Used for telling the browser that the text is important.
  • <sub> - Used for making the text a subscript.
  • <sup> - Used to make the text a superscript.
  • <u> - Used for underlining the text.

Note: HTML5 formatting tags are grouped into two categories:

  • Logical tags: Used for adding some logical or semantic value to the text.
  • Physical tags: Used for adding to the visual appearance to the text

Question: Explain the <figure> tag in HTML5.

Answer: The <figure> tag is used for specifying self-contained content, such as diagrams and photos, in an HTML5 web page. Although the content of the figure element is related to the main flow of the document, its position is independent of the same, i.e., if removed, it will not affect the main flow of the document.

Question: Explain the various new tags introduced by HTML5 in Media Elements.

Answer: HTML5 introduces the following five new tags in Media Elements:

  • <audio>: Eliminates the need for additional plugins for playing audio content like audio streams and music.
  • <embed>: Embeds an external application or content
  • <source>: Adds multimedia resources like audio, picture, and video.
  • <track>: Adds caption files or subtitles while the multimedia file is playing.
  • <video>: Adds video content like embedded video content, movie clips, and videos.

Question: What is a <meta> tag in HTML5?

Answer: The <meta> tag offers metadata about the HTML5 document. This metadata is machine-parsable. Typically, meta elements are used for specifying:

  • Author name
  • Page description

The metadata supplied by the <meta> tag is used by:

  • Web browsers to know how to display content or reload a web page
  • Search engines to know about keywords on a web page
  • Other web services

Note: HTML5 introduces a new method that allows web developers and designers to take control of the viewport with the <meta> tag.

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

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

  • for - Represents the relationship between the elements used in the calculation and the result.
  • form - Represents the form(s) the output element belongs to.
  • name - Represents a name for the output element.

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

Answer: Prior to HTML5, only one <h1> element was used for the heading of the entire webpage. This changed in HTML5, as it specifies that the <h1> element represents the top-level heading of a section of the webpage, which can be the page <body>, an <article>, or a <section> element.

According to the HTML5 specification, each <header> element must at least have one <h1> tag.

Question: List all the tags removed from the HTML5.

Answer: Following tags were removed in the HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <bigcenter>
  • <center>
  • <dir>
  • <frame>
  • <frameset>
  • <font>
  • <noframes>
  • <strike>

Question: How does an HTML specification differ from a web browser's implementation of the same?

Answer: An HTML specification, like the HTML5 specification , defines a set of rules that all documents need to strictly follow in order to be considered valid as per the specification. The specification also offers instructions about how a web browser must interpret and render a valid document.

A web browser is considered to support a specification if it is able to handle valid documents as per the rules mentioned in the specification. Although all of the major browsers support most of the HTML5 specification, no web browser supports the HTML5 specification to its entirety.

Hence, it is all-important for the developers to confirm that the aspects of the specification that they are using must be supported by all the web browsers on which they want to display/deliver the content.

As such, despite the improved specifications for HTML5, cross-browser support is still something that a developer should be very cautious about. The HTML5 specification defines certain rules that must be followed when coming across an invalid HTML5 document.

Since invalid documents can contain anything, it is almost impossible for the HTML5 specification to handle all the possibilities comprehensively. Therefore, most decisions about handling malformed documents are entirely up to the web browser.

Question: Please explain how to indicate the character set being used by a document in HTML5.

Answer: The character set being used by an HTML5 document is indicated using the charset attribute of a <meta> tag inside the <head> element of the HTML5 document:

Question: Is it possible for a web page to have multiple <header> and <footer> elements?

Answer: Yes, a webpage can have many <header> and <footer> elements. Both tags are specifically designed to serve their respective purposes with respect to their parent section.

Hence, not only the page <body> must have the <header> and <footer> tags, but also does every <article> and <section> elements. Although a <footer> element might not be always necessary for every <article> and <section> tags, a <header> element must always be there.

Question: What is the correct usage of the following HTML5 semantic elements:

i) <article>

ii) <footer>

iii) <header>

iv) <section>

This HTML5 element is intended to have a self-contained composition, being logically independent and capable to be created outside the web page without losing the concerned meaning. Suitable examples for the <article> element are blog posts, news snippets, and release updates.

We use the <footer> element to hold information meant to appear at the end of a particular section of a web page. Typically, it contains additional information about the section. Suitable examples for this HTML5 element include an author bio and helpful links.

This essential HTML5 element contains introductory as well as navigation information about a certain section or the body of a web page. Suitable examples for the <header> element are author name, publication date, number of views, and table of contents.

Intended for holding content having a common purpose or theme, the <section> element serves as a flexible container in HTML5. The comments section, sharing section, and related articles section are some of the best examples of this HTML5 element.

Question: Write HTML5 code to implement a <video> tag for embedding a video stored at https://www.hackr.io/blog/html5-interview-questions/sample_video.mp4. The video must have a width of 640 pixels and a height of 360 pixels. Also, provide the user with controls.

Answer: One way to implement the above-mentioned is:

Another way of implementing the same (with a separate <source> tag inside the <video> element) is:

Question: Please explain whether an <article> element can have <section> elements and vice-versa.

Answer: Yes, an <article> element can have <section> element(s) and a <section> element can also have <article> elements. For example, a user panel for a website can have multiple <section> elements, intended for blog, analytics, payment options, news, et cetera.

Now, the <section> element for the blog can have multiple <article> elements to accommodate various articles. Further, each of these <article> elements can have two <section> elements, one for the comments section and the other for sharing section.

Question: Explain the difference between Canvas and SVG elements.

Answer: Following are the various differences between <canvas> and <svg> elements:

1. API Animation

Canvas has no provision for API animation. SVG, on the contrary, is capable of API animation.

2. Change Accommodation

Each drawn shape in SVG is remembered as an object by the web browser. If the attributes pertaining to an SVG object are changed, the browser automatically re-renders the shape.

The web browser forgets once the graphic is drawn in Canvas. If there is a change in the position of a Canvas graphic, the complete scene requires redrawing. While modification in Canvas is only allowed through the script, SVG supports modification via script as well as CSS.

3. Definition

SVG stands for Scalable Vector Graphics. It features many methods for drawing bitmap images, boxes, circles, paths, and text.

SVG is a language for describing 2D graphics, where the <svg> element is a container for SVG graphics. Canvas allows users to draw 2D graphics on the fly using J.S.

4. Dependency

SVG doesn't depend on the resolution, while Canvas completely depends on the same.

5. How is it handled?

SVG is XML-based, meaning that each element is available within the SVG DOM. For an element, you can attach several J.S. event handlers. Canvas is rendered pixel by pixel, i.e., it is pixel-based. There is no support for event handlers in <canvas> elements.

6. Ideal for

While Canvas is suitable for small rendering areas and games graphics, SVG is the best option for large rendering areas and printing with high quality at any resolution.

7. Scalability

Canvas has poor scalability. SVG, however, has better scalability.

Question: Write the HTML5 code for implementing a rectangular box using the canvas element.

The output will appear like this:

Question: What do you understand by <!DOCTYPE>? Name the types of DOCTYPE available in HTML5.

Answer: Every HTML5 web page starts with the <!DOCTYPE> declaration. It lets the web browser understand the information that it must display. The DOCTYPE declaration is concise and case-insensitive in HTML5. HTML5 provides support for only one DOCTYPE:

<!DOCTYPE html>

Question: What will happen if the doctype is not specified in an HTML web page?

Answer: If the doctype is not specified in an HTML web page, then the web browser will be unable to interpret the new HTML5-specific tags.

Question: List the various techniques for optimizing website assets.

Answer: To optimize website assets, one needs to decrease:

  • The download size, and
  • The total number of HTTP requests that are made

The following techniques can be used for optimizing website assets:

  • CDN hosting
  • File compression
  • File concatenation
  • Offloading assets
  • Re-organizing
  • Refining code

Question: Please explain the Geolocation API in HTML5. How will you create a Geolocation object?

Answer: The Geolocation API in HTML5 allows users to share their location with selected websites. J.S. is capable of capturing a user's latitude and longitude and sending the same to the backend server.

Doing so enables location-aware features like finding local places of interest and finding out one's location on the map. A new geolocation object can be created using the following code:

var geolocation = navigator.geolocation;

The Geolocation object is actually a service object. It allows widgets to retrieve information about the geographical location of a user's device. Most browsers and mobile devices provide support for the Geolocation API. The API works with a new property of the global navigator object.

Question: Write HTML5 code to demonstrate the use of Geolocation API.

Answer: The Geolocation API uses the navigator.geolocation.get current position() method for getting a user’s position and geographical coordinates i.e. longitude and latitude. The following code example demonstrates this:

The code will first check whether Geolocation is supported or not. An error message will be displayed if Geolocation is not supported. Otherwise, the code will run the getCurrentPosition() method. It will return the coordinates of the user. The show position() function will get the longitude and latitude of the user.

Question: Explain the difference between div and span.

Answer: Both div and span are used for giving out the output. While span gives the output with display: inline, div gives output with display: block. Typically, span is used when there is the need to display the elements one after the other, i.e., in a line.

Question: What do you understand by HTML5 Web Storage? Is it any better than Cookies?

Answer: Prior to HTML5, web pages were able to store data locally within a browser using cookies. HTML5 introduces Web Storage that allows a webpage to do the same as that of the cookies. Web Storage, however, is faster and more secure than cookies.

The HTML5 Web Storage is faster because the data isn't included with every server request. Instead, it is used when asked for. A web page can only access the data stored by itself, which is stored in name/value pairs

Another important distinction between the HTML5 Web Storage and Cookies is that:

  • Web Storage never transfers the data to the server, and
  • When compared to cookies, the storage limit for the HTML5 Web Storage is much larger, at least 5MB, and at max 10MB.

Question: Please explain localStorage and sessionStorage.

Answer: Both localStorage and sessionStorage are scoped to the document origin. This ensures that documents with different origins never share stored objects. Unlike localStorage, sessionStorage is also scoped on a per-window basis.

If, for example, two browser tabs are displaying documents from the same origin, both will have separate sessionStorage data, i.e., the scripts running in one browser tab can't read or overwrite the data written by scripts in the other. This is true even if both browser tabs are visiting the totally same page and are running the absolutely same scripts.

The difference between the localStorage and the sessionStorage lies on the basis of the lifetime and the scope. Data stored via localStorage is permanent, i.e., it doesn't expire and remains stored on a computer until:

  • A web app deletes it, or
  • The user requests the browser to delete it

Data stored via sessionStorage, on the other hand, gets deleted when the window or tab concerning the same is closed. sessionStorage has the same lifetime as that of the top-level window or browser tab that has the script running, which stored the data.

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

Answer: When it comes to UI interaction, drag-and-drop is essential functionality. Almost all modern U.I.s have it. It makes copying, moving, and linking an object, such as an image or a link, very easy.

To make an image draggable in HTML5, we need to set the draggable image attribute true i.e.:

Question: Please explain the new form input types in HTML5.

Answer: The HTML5 introduces the following 14 new form input types:

  • Color - Select multiple colors using type = "color"
  • Date - Pick a date by using type = "date."
  • DateTime - Combination of date and time. Pick a date and time by using type = "datetime"
  • Datetime-local - Doesn't include the timezone. Pick a date and time by using type = "datetime-local."
  • Email - Enter one or more email addresses using type = "email."
  • Month - Pick a month by using type = "month."
  • Number - Inserts a numerical value with additional attributes like min and max. Enter one or many numerical values using type = "number."
  • Search - Allows searching queries by inputting text. Enter one or many search queries by using type = "search."
  • Tel - Allows different phone numbers. Each phone number is validated by the client side. Enter a phone number by using type = "tel."
  • Placeholder - Displays a short hint in the input fields before entering a value. Write a short hint in the input field using type = "placeholder."
  • Range - Inserts a numerical value within a specific range. Enter a numerical value within a range using type = "range."
  • Time - Pick a time by using type = "time."
  • Url - URL input type used for the web address. Use one or more attributes using type = "URL"
  • Week - Pick a week by using type = "week."

Question: What do you understand by image maps in HTML5? How many types does it have?

Answer: Image maps allow users to click on images for opening new web pages. As such, these are a combination of images and URLs. Image maps are of two types:

  • Client-side Image Map - Created using <area> and <map> elements. The map element holds the map information, and the area element takes the attributes for defining each section of the map.
  • Server-side Image Map - Created using the <usemap> attribute, which is the name of the map.

Question: Why do we need the MathML element in HTML5?

Answer: MathML stands for Mathematical Markup Language. It is a form of XML for describing the Math notation. MathML is a markup language for displaying mathematical and scientific expressions over web pages.

For implementing the MathML element i.e. displaying a mathematical equation, we put it inside the <math> and </math> tags.

Question: Please explain Microdata in HTML5.

Answer: Microdata is a new simple semantic syntax used for new global attributes in HTML5. It adds the nested groups of name and value pairs to documents mostly based on the web page content.

Question: What does a hyperlink mean? Can it be only text?

Answer: Upon clicking, a hyperlink moves the user from one web page or document to some other web page. A hyperlink can be used upon a text as well as on an image. For converting an image into a link we use:

<a href = " "...</a>>

Question: Write HTML5 code for creating a hyperlink.

Question: what are the most popular audio and video formats for embedding on an html5 web page.

Answer: Popular audio formats:

Popular video formats:

Question: What are the various common lists for designing a web page in HTML5?

Answer: Following are the common lists for designing a web page:

  • <dl> - Definition list
  • <dir> - Directory list
  • <menu> - Menu list
  • <ol> - Ordered list
  • <ul> - Unordered list

Question: How will you add the autocomplete feature in a textbox?

Answer: For an <input> element, the <datalist> tag specifies a list of predefined options. It can be used for adding the autocomplete feature to a textbox. As a user inputs data, a dropdown list of available options will appear.

Question: Briefly explain various page structure elements in HTML5.

Answer: Following are the various page structure elements available in HTML5:

  • <article> - Represents a set of information on a web page
  • <aside> - Represents the sidebar of a web page
  • <footer> - Represents the footer section of a web page
  • <header> - Represents the header section of a web page
  • <nav> - Represents the navigational elements of a web page
  • <section> - Represents the set of instructions used inside an article block for defining the basic structure of a web page

Question: Write HTML5 code to embed a video in a web page.

Question: show a copyright symbol on a web browser page..

Answer: We can add a copyright symbol by adding the HTML code (&#169;), hex code (&#xa9;), Unicode (U+000A9), or css code (\00A9). For example,

Question: Explain the Advantage and Disadvantages of using HTML5.

Answer: Some advantages of HTML5 are:

  • Better semantics and cleaner code.
  • Consistency in coding a web page.
  • Elegant and fancier forms reduced the need for JavaScript.
  • Geolocation support.
  • Many new features make animations and front-end elements easier to code and display on different browsers.
  • Offline application cache which helps users to view a page even when they are not connected to the internet.

Some disadvantages of HTML5 are:

  • Only modern versions of the browsers support HTML5. Not all users use the latest version of browsers.
  • Many features are still not stable and are in the development stage.
  • Due to licensing issues, the rich media is compressed into multiple formats to be compatible with most browsers.

Question: What is the useful API in HTML5?

Answer: Some of the useful APIs in HTML5 are:

  • Fetch: Fetch has made HTTP requests easier than it was with XMLHttpRequest.
  • Battery status: Check the battery status of the device.
  • Geolocation: tells the device's location.
  • Clipboard: copy the contents to the clipboard.
  • Forms: new types have been added for validation and rendering.
  • Drag and drop: easily drag and drop items in the app.
  • Screen orientation: Checks the device’s screen orientation.
  • Web audio: Process audio on the client side.
  • Internalization: International formatting and string comparison.
  • Web sockets: real-time communication between server and client.

Question: Is HTML5 backward compatible with old browsers?

Answer: No, old browsers can support some basic features, but the video and audio support, semantics, etc. are not backward compatible. Although, we can make the older browsers learn how to handle the unknown elements.

Question: What is the use of DateTime-local input control in Web form 2.0?

Answer: It indicates the date and time (year, month, day, hour, minute, second, a fraction of a second) encoded as per ISO 8601 without timezone information.

Question: What is the use of URL input control in Web Form 2.0?

Answer: This control accepts only URL values and is used for input fields that need a URL address. It will not accept any other values like text input. The accepted formats are: http://www.<webaddr> or http://<webaddr>

Question: What are the drawbacks of cookies?

Answer: The most important drawback is privacy as cookies keep track of all the websites a user visits, and any third-party can access the cookies' information. This could be misused by hackers or malicious persons to access confidential information like passwords or credit card details.

Question: What is the server-sent events in HTML5?

Answer: The events that flow from the webserver to the browsers are called server-sent events. DOM events can be continuously pushed from the webserver to the browser of a user. To use a server-sent event (SSE), you should add an <eventsource> element to the document. The src attribute of this element describes the HTTP connection location, which sends a data stream having the events.

Example: <eventsource src = "/cgi-bin/myfile.cgi" />

Question: How to utilize a server-sent event in HTML5?

Answer: Server-sent events are most useful when we need a long-term connection with the web server. In such cases, the web page can hold an open connection to a web server, and the server can send a response anytime without having to reconnect.

Question: What are web sockets?

Answer: Web sockets are APIs or protocols that define persistent socket connections between the web browser and the server. A WebSocket connection can be opened by calling the WebSocket constructor and passing the URL in the URL schema. URL schema can be ws, wss. Optionally, other subprotocols like soap, XMPP, etc. can be passed to the constructor. WebSockets help in two-way communication and handle proxies and firewalls.

Question: Briefly explain some of the most-used APIs in HTML5.

Answer: Following are the most-used APIs in HTML5:

  • Canvas API - Enables drawing graphics via J.S. and the <canvas> element.
  • Console API - Allows developers to perform various debugging tasks.
  • Constraint Validation API - Helps in checking (validating) user-entered values into form controls prior to submitting these values to the server.
  • Credential Management API - Enables a website to store and retrieve federated, public, and user key credentials. In other words, it allows users to sign in without entering passwords.
  • Drag and Drop API - Allows grabbing and dragging an HTML object with the cursor.
  • Geolocation API - Enables users to share their location details with web applications.
  • History API - Grants access to the browser navigation history.
  • Media API - A JavaScript API that allows interaction with the audio and video elements. Provides the HTMLMediaElement programming interface.
  • Service Worker API - Allows:
  • Access to push background sync APIs and push notifications.
  • Creating effectual offline experiences
  • Intercepting network requests and taking relevant actions thereof
  • Updating assets residing on the server
  • WebVTT API - WebVTT stands for Web Video Text Tracks Format. Provides access to the various text tracks available for an HTML5 video using the <track> element.
  • Web Storage API - Provides a faster and better mechanism to allow browsers to store key/value pairs.

At last, we've completed our pick of the 50 top HTML5 interview questions. I hope you find them useful in preparing for your upcoming HTML5-based job interview and/or assessing how good you've gotten in HTML5. Check out this HTML cheat sheet to go in-depth on HTML5 tags.

When studying gets tough,  remember why you're doing this. HTML5 is among the highest-paying web technologies as of today. Hence, it is an ideal time to learn HTML5. If you've already done so, then you must look forward to grabbing a lucrative HTML5-based job.

Preparing for an upcoming HTML5 interview? Consider checking this book to prepare for HTML5: Cracking the IT Architect Interview .

And yes, don't forget to leave your suggestions, corrections, appreciation remarks, and greetings via the comments section below. Thanks in advance!

People are also reading:

  • HTML Courses
  • Difference between HTML vs HTML5 vs XHTML
  • Jquery Interview Questions
  • Javascript Certification
  • Best Javascript Libraries
  • Java vs Javascript
  • Javascript Courses
  • CSS Cheat Sheet
  • Difference between CSS2 and CSS3

html tutorial questions answers

A Computer Science graduate interested in mixing up imagination and knowledge into enticing words. Been in the big bad world of content writing since 2014. In his free time, Akhil likes to play cards, do guitar jam, and write weird fiction.

Subscribe to our Newsletter for Articles, News, & Jobs.

Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

In this article

  • Top 48 Networking Interview Questions and Answers in 2024 Computer Networks Career Development Interview Questions
  • Top 20 REST API Interview Questions & Answers [2024] Web Development Career Development Interview Questions
  • Top 45 QA Interview Questions and Answers in 2024 Software Engineering Software Testing Career Development Interview Questions

Please login to leave comments

Always be in the loop.

Get news once a week, and don't worry — no spam.

{{ errors }}

{{ message }}

  • Help center
  • We ❤️ Feedback
  • Advertise / Partner
  • Write for us
  • Privacy Policy
  • Cookie Policy
  • Change Privacy Settings
  • Disclosure Policy
  • Terms and Conditions
  • Refund Policy

Disclosure: This page may contain affliate links, meaning when you click the links and make a purchase, we receive a commission.

Javatpoint Logo

All Interview

Company interview, technical interview, web interview, php interview, .net interview, java interview, database interview.



A list of top frequently asked and HTML5 interview questions and answers are given below.

HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. It is a standard text formatting language which is used to create and display pages on the Web. It makes the text more interactive and dynamic. It can turn text into images, tables, links.

HTML tags are composed of three things: an opening tag, content and ending tag. Some tags are unclosed tags.

HTML documents contain two things:

When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

Content is placed between tags to display data on the web page.

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

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

The HTML contains six types of headings which are defined with the <h1> to <h6> tags. Each type of heading tag displays different text size from another. So, <h1> is the largest heading tag and <h6> is the smallest one. For example:

The HTML provides an anchor tag to create a hyperlink that links one page to another page. These tags can appear in any of the following ways:

The is used to display data in tabular form (row * column). It also manages the layout of the page, e.g., header section, navigation bar, body content, footer section. Here is the list of tags used while displaying the data in the tabular form:

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

8) What are some common lists that are used when designing a page?

There are many common lists which are used to design a page. You can choose any or a combination of the following list types:

  • Ordered list - The ordered list displays elements in numbered format. It is represented by <ol> tag.
  • Unordered list - The unordered list displays elements in bulleted format. It is represented by <ul> tag.
  • Definition list - The definition list displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

9) What is the difference between HTML elements and tags?

HTML elements communicate to the browser to render text. When the elements are enclosed by brackets <>, they form HTML tags. Most of the time, tags come in a pair and surround content.

10) What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.

11) What is an image map?

Image map facilitates you to link many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to make part of an image mapping.

12) How to insert a copyright symbol on a browser page?

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

13) How to create a nested webpage in HTML?

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

14) How do you keep list elements straight in an HTML file?

You can keep the list elements straight by using indents.

15) Does a hyperlink only apply to text?

16) what is a style sheet.

A style sheet is used to build a consistent, transportable, and well-designed style template. You can add these templates on several different web pages. It describes the look and formatting of a document written in markup language.

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

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

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

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

19) Explain the layout of HTML?

HTML layout specifies a way in which the web page is arranged.

HTML Layouts

Every website has a specific layout to display content in a specific manner.

Following are different HTML5 elements which are used to define the different parts of a webpage.

  • <header>: It is used to define a header for a document or a section.
  • <nav>: It is used to define a container for navigation links
  • <section>: It is used to define a section in a document
  • <article>: It is used to define an independent, self-contained article
  • <aside>: It is used to define content aside from the content (like a sidebar)
  • <footer>: It is used to define a footer for a document or a section

20) What is a marquee?

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

21) How many tags can be used to separate a section of texts?

Three tags are used to separate the texts.

  • <br> tag - Usually <br> tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line
  • <p> tag - The <p> tag contains the text in the form of a new paragraph.
  • <blockquote> tag - It is used to define a large quoted section. If you have a large quotation, then put the entire text within <blockquote>.............</blockquote> tag.

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

To make a picture a background image on a web page, you should put the following tag code after the </head> tag.

Here, replace the "image.gif" with the name of your image file which you want to display on your web page.

23) What are empty elements?

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

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

The span tag is used for following things:

  • For adding color on text
  • For adding background on text
  • Highlight any color text

In this page we use span.

25) What is the use of an iframe tag?

An iframe is used to display a web page within a web page.

Target to a link:

26) What are the entities in HTML?

The HTML character entities are used as a replacement for reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities. These characters are replaced because some characters are reserved in HTML.

27) Why is a URL encoded in HTML?

An URL is encoded to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters are replaced with a "%" followed by hexadecimal digits.

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

No, the <!DOCTYPE html> declaration is not an HTML tag. There are many type of HTML e.g. HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to instruct the web browser about the HTML page.

HTML5 Interview Questions

Let's see a list of top HTML5 interview questions and answers.

29) What is the canvas element in HTML5?

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

30) What is SVG?

31) what are the different new form element types in html 5.

Following is a list of 10 frequently used new elements in HTML 5:

  • Datetime-local

32) Is there any need to change the web browsers to support HTML5?

No. Almost all browsers (updated versions) support HTML 5. For example Chrome, Firefox, Opera, Safari, IE.

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

HTML 5 supports three types of video format:

34) Is audio tag supported in HTML 5?

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

Let's see the code to play mp3 file using HTML audio tag.

Instead of koyal.mp3, you can pass any mp3 file name.

35) What is the difference between progress and meter tag?

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

36) What is the use of figure tag in HTML 5?

The figure tag is used to add a photo in the document on the web page. It is used to handle the group of diagrams, photos, code listing with some embedded content.

37) What is the use of figcaption tag in HTML 5?

The <figcaption> element is used to provide a caption to an image. It is an optional tag and can appear before or after the content within the <figure> tag. The <figcaption> element is used with <figure> element and it can be placed as the first or last child of the <figure> element.

38) What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within the HTML form on the web page. It is generally used to create a "submit" or "reset" button. Let's see the code to display the button.

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

The details tag is used to specify some additional details on the web page. It can be viewed or hidden on demand. The summary tag is used with details tag. More details.

40) What is datalist tag?

The HTML 5 datalist tag provides an autocomplete feature on the form element. It facilitates users to choose the predefined options to the users to select data.

41) How are tags migrated from HTML4 to HTML5?

No.Typical HTML4Typical HTML5
1)<div><header>
2)<div><nav>
3)<div><section>
4)<div><article>
5)<div><footer>

Header and Footer Example

HTML 4 Header and Footer:

Monday Times

&copy; JavaTpoint. All rights reserved.

HTML 5 Header and Footer:

Menu Example

HTML 4 Menu:

HTML 5 Menu:

42) If I do not put <!DOCTYPE html> will HTML 5 work?

No, the browser will not be able to identify that it is an HTML document and HTML 5 tags do not function properly..

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

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

44) What are the new <input> types for form validation in HTML5?

The new input types for form validation are email, URL, number, tel, and date.

You may also like:

  • Java Interview Questions
  • SQL Interview Questions
  • Python Interview Questions
  • JavaScript Interview Questions
  • Angular Interview Questions
  • Selenium Interview Questions
  • Spring Boot Interview Questions
  • HR Interview Questions
  • C Programming Interview Questions
  • C++ Interview Questions
  • Data Structure Interview Questions
  • DBMS Interview Questions
  • HTML Interview Questions
  • IAS Interview Questions
  • Manual Testing Interview Questions
  • OOPs Interview Questions
  • .Net Interview Questions
  • C# Interview Questions
  • ReactJS Interview Questions
  • Networking Interview Questions
  • PHP Interview Questions
  • CSS Interview Questions
  • Node.js Interview Questions
  • Spring Interview Questions
  • Hibernate Interview Questions
  • AWS Interview Questions
  • Accounting Interview Questions

Learn Latest Tutorials

Splunk tutorial

Transact-SQL

Tumblr tutorial

Reinforcement Learning

R Programming tutorial

R Programming

RxJS tutorial

React Native

Python Design Patterns

Python Design Patterns

Python Pillow tutorial

Python Pillow

Python Turtle tutorial

Python Turtle

Keras tutorial

Preparation

Aptitude

Verbal Ability

Interview Questions

Interview Questions

Company Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence Tutorial

Artificial Intelligence

AWS Tutorial

Cloud Computing

Hadoop tutorial

Data Science

Angular 7 Tutorial

Machine Learning

DevOps Tutorial

B.Tech / MCA

DBMS tutorial

Data Structures

DAA tutorial

Operating System

Computer Network tutorial

Computer Network

Compiler Design tutorial

Compiler Design

Computer Organization and Architecture

Computer Organization

Discrete Mathematics Tutorial

Discrete Mathematics

Ethical Hacking Tutorial

Ethical Hacking

Computer Graphics Tutorial

Computer Graphics

Software Engineering Tutorial

Software Engineering

html tutorial

Web Technology

Cyber Security tutorial

Cyber Security

Automata Tutorial

C Programming

C++ tutorial

Control System

Data Mining Tutorial

Data Mining

Data Warehouse Tutorial

Data Warehouse

RSS Feed

How To Become A Full-Stack Developer (Step-by-Step Guide With Skills)

Know all about the top 10 ides for web development, what is javascript – all you need to know about javascript, top 10 most popular javascript frameworks, angular tutorial for beginners.

  • What are Directives in Angular?
  • Animating AngularJS Apps with ngAnimate

What is Typescript and Why You Should Use it?

  • How to Create a Bootstrap Header?
  • what are the Bootstrap Datatables and how to create it?
  • How to Create a Bootstrap Button?
  • What is bootstrap list and how to use bootstrap list group?
  • Bootstrap Pagination: What, Why and How?
  • Bootstrap Validation: How to validate a form using Bootsrap?

What is Bootstrap Testimonial Slider and how to design it?

  • How are Bootstrap Colors Implemented?
  • What is ngx boostrap and how to use it?
  • All You Need to Know About Bootstrap Gallery
  • What is React Bootstrap and how to use it?
  • Top 45 Bootstrap Interview Questions and Answers in 2024

Node.js Tutorial – A Complete Guide For Beginners

Career guidance.

  • Top 10 Front End Developer Skills You Need to Know
  • What is the Average Salary of a Front End Developer?
  • How to Build an Impressive Web Developer Resume?
  • Web Developer vs Web Designer: Key Differences You Need to Know
  • A Closer Look at Career in Front End Web Development

Programming & Frameworks

Top 50 html interview questions and answers in 2024.

html tutorial questions answers

HTML is one of the most widely used languages on Web to develop web pages. It helps you  delve into the world of  Web Development  and improve your skills.  So, if you are planning to start your career in Web Development or HTML and you wish to know the skills related to it, now is the right time to dive in. These HTML Interview Questions and Answers will help you get through your interviews in 2024.

HTML Interview Questions

Q1. what is html.

HTML stands for Hyper Text Markup Language. It is a language of the World Wide Web. It is a standard text formatting language which is used to create and display pages on the Web. HTML makes the text more interactive and dynamic. It can turn text into images, tables, links. HTML pages are saved by adding .html or .html in web page name.

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

The element is an individual component of the HTML web page or document. It represents semantics or meaning. For example, the title element represents the title of the document.

It is the root of the HTML document which is used to specify that the document is HTML. For example, the Head tag is used to contain all the head element in the HTML file.

Q3. What are Attributes and how do you use them?

Each tag has additional attributes that change the way the tag behaves or is displayed. For example, a <input> tag has a type attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options. Attributes are specified directly after the name of the tag , inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags. But, they can never be in closing tags .

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

A block-level element is drawn as a block that stretches to fill the full width available to it i.e, the width of its container and will always start on a new line.
that are block-level by default:
Inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page.
of elements that are inline by default:

Q5. When are comments used in HTML?

To understand the code easily, you can add code comments to your HTML document. These are not displayed in the browser, but they help you in leaving notes for yourself and other developers as to what a section of HTML is for. The start of the comment is denoted by <!– and the end is marked by — > . Anything in the middle will be completely ignored, even if it contains valid HTML .

For example :

Q6. What are the HTML tags used to display the data in the tabular form?

The list of HTML tags used to display data in the tabular form include:

It defines a table

This tag defines a row in a table

It defines a header cell in a table

This is used to define a cell in a table

It defines the table caption

It specifies a group of one or more columns in a table for formatting

This is used with <colgroup> element to specify column properties for each column

This tag is used to group the body content in a table.

It is used to group the header content in a table

It is used to group the footer content in a table

Q7. How to create a Hyperlink in HTML?

The HTML provides an anchor tag to create a hyperlink that links one page to another page. These tags can appear in any of the following ways:

  • Unvisited link – It is displayed, underlined and blue.
  • Visited link – It is displayed, underlined and purple.
  • Active link – It is displayed, underlined and red.

The syntax of Hyperlink in HTML is:

Q8. Name some common lists that are used when designing a page.

There are many common lists used for design a page. You can choose any or a combination of the following list types:

  • Ordered list – The ordered list displays elements in a numbered format. It is represented by <ol> tag.
  • Unordered list – The unordered list displays elements in a bulleted format. It is represented by <ul> tag.
  • Definition list – The definition list displays elements in definition form like in a dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

Web Development Full Course for Beginners

Q9. What is semantic HTML?

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.

Q10. How to create a nested webpage in HTML?

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

Q11. What is an image map?

An image map is used for linking many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to include as part of an image mapping.

Q12. Does a hyperlink only apply to text?

No, hyperlinks can be used both on texts and images . The HTML anchor tag defines a hyperlink that links one page to another page. The “href” attribute is the most important attribute of the HTML anchor tag.

Q13. What is a Style Sheet?

A style sheet is used to build a consistent, transportable, and well-designed style template . You can add these templates on several different web pages. It describes the look and formatting of a document written in the markup language.

Q14. Explain the layout of HTML.

HTML layout specifies a way in which the web page is arranged. Every website has a specific layout to display content in a specific manner. Following are different HTML elements which are used to define the different parts of a webpage:

  • <header> : It is used to define a header for a document or a section.
  • <nav> : This defines a container for navigation links
  • <section> : It is used to define a section in a document
  • <article> : This is used to define an independent, self-contained article
  • <aside> : It is used to define content aside from the content
  • <footer> : It is used to define a footer for a document or a section

Q15. What is a marquee?

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

Q16. What are the tags used to separate a section of texts?

There are three tags that can be used to separate the texts:

  • <br> tag – Usually <br> tag is used to separate the line of text . It breaks the current line and conveys the flow to the next line
  • <p> tag – This contains the text in the form of a new paragraph .
  • <blockquote> tag – It is used to define a large quoted section. If you have a large quotation, then put the entire text within <blockquote>……….</blockquote> tag.

Q17. What is the difference between DIV and SPAN in HTML?

The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line,such as inside a paragraph. Whereas, a div or division element is block-line which is equivalent to having a line-break before and after it and used to group larger chunks of code.

Q18. What is the purpose of using alternative texts in images?

The purpose of using alternative texts is to define what the image is about. During an image mapping, it can be confusing and difficult to understand what hotspots correspond to a particular link. These alternative texts come in action here and put a description at each link which makes it easy for users to understand the hotspot links easily.

Q19. How to create a new HTML element?

You can create new elements for the document in the following way:

It can be also be used in the HTML as:

Q20. Is the <!DOCTYPE html> tag considered as a HTML tag?

No, the <!DOCTYPE html> declaration is not an HTML tag.

There are many type of HTML, such as, HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to instruct the web browser about the HTML page.

Q21. Why is a URL encoded in HTML?

An URL is encoded to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters are replaced with a “ % ” followed by hexadecimal digits.

Q22. What is the use of an iframe tag?

An iframe is used to display a web page within a web page.

Target to a link:

Q23. What are the entities in HTML?

The HTML character entities are used as a replacement for reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities. These characters are replaced because some characters are reserved in HTML.

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

Yes, we can create a multi-colored text on a web page.  To create a multicolor text, you can use <font color =”color”> </font> for the specific texts that you want to color.

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

To make a picture a background image on a web page, you should put the following tag code after the </head> tag.

Here, replace the “image.gif” with the name of your image file which you want to display on your web page.

Q26. What is the use of a span tag? Explain with example.

The span tag is used for following things:

  • For adding color on text
  • To add background on text
  • Highlight any color text

Q27. What is the advantage of collapsing white space?

White spaces are a blank sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the HTML code into a much more readable format.

Q28. Is there any way to keep list elements straight in an HTML file?

By using indents, you can keep the list elements straight. If you indent each sub nested list in further than the parent list, you can easily determine the various lists and the elements that it contains.

Q29. Explain The Key Differences Between LocalStorage And SessionStorage Objects.

The key differences between localStorage and sessionStorage objects are as follows:

  • The localStorage object stores the data without an expiry date. However, sessionStorage object stores the data for only one session.
  • In the case of a localStorage object, data will not delete when the browser window closes. However, the data gets deleted if the browser window closes, in the case of sessionStorage objects.
  • The data in sessionStorage is accessible only in the current window of the browser. But, the data in the localStorage can be shared between multiple windows of the browser.

Q30. When is it appropriate to use frames?

Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.

Q31. How to insert a picture into a background image of a web page?

To insert a picture into the background image, you need to place a tag code after the </head> tag in the following way:

Now, replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page.

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

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

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

If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.

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

To change the text into a clickable link to send an email, you need to use the mailto command within the href tag. You can write it in the following way:

Q35. How are active links different from normal links?

The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link. Whereas, others recognize active links when the link has the focus. Those that don’t have a mouse cursor over that link is considered a normal link.

Q36. What are the different tags to separate sections of text?

The <br> tag is one way to separate the lines of text. There are other tags like the <p> tag and <blockquote> tag that are also used to separate sections of text.

Q37. Are there instances where the text will appear outside of the browser?

By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window.

Q38. Write an HTML table tag sequence that outputs the following: 50 pcs 100 500 10 pcs 5 50

The HTML Code for the above problem is:

Q39. What is the advantage of grouping several checkboxes together?

The checkboxes don’t affect one another. But, grouping these checkboxes together help to organize them. Checkbox buttons can have their name and do not need to belong to a group. A single web page can have many different groups of checkboxes.

Q40. What happens if there is no text between the tags? Does this affect the display of the HTML file?

If there is no text present between the tags, there is nothing to format. Therefore, no formatting will appear. Some tags, such as the tags without a closing tag like the <img> tag, do not require any text between them.

Q41. What are the limits of the text field size?

The default size for a text field is around 13 characters . However, if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. Also, if the size attribute is set to 0, the size will be set to the default size of 13 characters.

Q42. What is the relationship between the border and rule attributes?

Default cell borders, with a thickness of 1 pixel , are automatically added between cells if the border attribute is set to a nonzero value. Similarly, If the border attribute is not included, a default 1-pixel border appears when the rules attribute is added to the <table> tag.

Q43. What is SVG?

HTML SVG is used to describe the two-dimensional vector and vector or raster graphics. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with the text editor. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.

Q44. What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within the HTML form on the web page. This tag creates a “submit” or “reset” button. The button tag code is as follows:

Q45. List the media types and formats supported by HTML.

HTML supports a wide range of media formats for sound, music, videos, movies, and animations. Some of the extensions supported by each media format are:

  • Images – png, jpg, jpeg, gif, apng, svg, bmp, BMP ico, png ico
  • Audio – MIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4
  • Video – MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4 or MP4

Q46. What is Cell Spacing and Cell Padding?

Cell Spacing is referred to as the space or gap between the two cells of the same table. Whereas, Cell Padding is referred to as the gap or space between the content of the cell and cell wall or cell border.

Q47. What is difference between HTML and XHTML?

The differences between HTML and XHTML are:

  • HTML is an application of Standard Generalized Markup Language. Whereas, XML is an application of Extensible Markup Language.
  • The first one is a static Web Page whereas the later one is a dynamic Web Page.
  • HTML allows programmer to perform changes in the tags and use attribute minimization whereas XHTML when user need a new markup tag then user can define it in this.
  • HTML is about displaying information whereas XHTML is about describing the information.

Q48. How many types of CSS can be included in HTML?

There are three ways to include the CSS with HTML:

  • Inline CSS: It is used for styling small contexts . To use inline styles add the style attribute in the relevant tag.
  • External Style Sheet : This is used when the style is applied to many pages . Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
  • Internal Style Sheet: It is used when a single document has a unique style. Internal styles sheet needs to put in the head section of an HTML page, by using the <style> tag in the following way:

Q49. What are logical and physical tags in HTML?

Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is <strong> </strong> tag. When we enclose the text in the strong tag, it tells the browser that enclosed text is more important than other texts.

Physical tags are used to tell the browser how to display the text enclosed in the physical tag. Some of the examples of physical tags are <b>, <big>, <i>.

Q50. How can you apply JavaScript to a web page?

In order to make your webpage more interactive, you need JavaScript. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three main ways of including JavaScript:

Certain HTML elements allow you to execute a piece of JavaScript when a certain event occurs. For example, a button allows you to run a script when you click on it. These events are accessed through attributes and differ based on the events that are available on each element. Here is an example that shows an alert with a message when the user clicks on it:

Script block

You can define a script block anywhere on the page, which will get executed as soon as the browser reaches that part of the document. This can be inside the <head> or <body> section of your document.

Link to a JavaScript file

It allows you to keep the content of the page separate to how users interact with that content. Also, it allows you to load the same script on multiple pages. As with the script block, you can load a JavaScript file from the <head> or <body>.

With this, we have come to the end of HTML interview questions blog. I Hope these HTML Interview Questions will help you in your interviews. In case you have attended any such interview in the recent past, do paste those interview questions in the comments section and we’ll answer them. You can also comment below if you have any questions in your mind, which you might face in your Web Development interview.

Whether you’re an experienced developer looking to expand your skills or a newcomer to the world of mobile app development, a Flutter Certification is a great way to gain the knowledge and confidence you need to succeed in this exciting field.

Check out our Full Stack Developer course with certification which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of “HTML Interview Questions” blog and we will get back to you.

Course NameDateDetails

Class Starts on 20th July,2024

20th July

SAT&SUN (Weekend Batch)

Recommended videos for you

Implementing web services in java, effective persistence using orm with hibernate, responsive web app using cakephp, rapid development with cakephp, hibernate mapping on the fly, portal development and text searching with hibernate, microsoft sharepoint-the ultimate enterprise collaboration platform, ms .net – an intellisense way of web development, create restful web application with node.js express, php and mysql : server side scripting for web development, building application with ruby on rails framework, node js : steps to create restful web app, microsoft .net framework : an intellisense way of web development, a day in the life of a node.js developer, hibernate-the ultimate orm framework, introduction to java/j2ee & soa, building web application using spring framework, service-oriented architecture with java, mastering regex in perl, spring framework : introduction to spring web mvc & spring with bigdata, recommended blogs for you, what is logger in java and why do you use it, how to implement data abstraction in c++, what is a switch case in java, what is machine learning in java and how to implement it, know how to reverse a string in java – a beginners guide, java enum tutorial: what is it and how to implement it, how to create jframe in java, how to set classpath in java, all you need to know about netbeans in java, java reflection api: all you need to know, what is nextchar in java and how to implement it, palindrome in java: how to check a number is palindrome, top 30 pattern program in java: how to print star, number and character, what is math class in java and how to use it, java abstraction- mastering oop with abstraction in java, what is the difference between mern stack and full stack, how to implement interface in php, what is a static keyword in java, what is the difference between extends and implements in java, join the discussion cancel reply, trending courses in programming & frameworks, full stack web development internship program.

  • 29k Enrolled Learners
  • Weekend/Weekday

Java Course Online

  • 77k Enrolled Learners

Python Scripting Certification Training

  • 14k Enrolled Learners

Flutter Application Development Course

  • 12k Enrolled Learners

Spring Framework Certification Course

Node.js certification training course.

  • 10k Enrolled Learners

Advanced Java Certification Training

  • 7k Enrolled Learners

Data Structures and Algorithms using Java Int ...

  • 31k Enrolled Learners

Comprehensive Java Course Certification Train ...

  • 19k Enrolled Learners

C Programming Certification Course

  • 3k Enrolled Learners

Browse Categories

Subscribe to our newsletter, and get personalized recommendations..

Already have an account? Sign in .

20,00,000 learners love us! Get personalised resources in your inbox.

At least 1 upper-case and 1 lower-case letter

Minimum 8 characters and Maximum 50 characters

We have recieved your contact details.

You will recieve an email from us shortly.

HTML5 Tutorial

  • HTML5 Tutorial
  • HTML5 - Home
  • HTML5 - Overview
  • HTML5 - Syntax
  • HTML5 - Attributes
  • HTML5 - Events
  • HTML5 - Web Forms 2.0
  • HTML5 - SVG
  • HTML5 - MathML
  • HTML5 - Web Storage
  • HTML5 - Web SQL Database
  • HTML5 - Server-Sent Events
  • HTML5 - WebSocket
  • HTML5 - Canvas
  • HTML5 - Audio & Video
  • HTML5 - Geolocation
  • HTML5 - Microdata
  • HTML5 - Drag & drop
  • HTML5 - Web Workers
  • HTML5 - IndexedDB
  • HTML5 - Web Messaging
  • HTML5 - Web CORS
  • HTML5 - Web RTC
  • HTML5 - Server Sent Events
  • HTML5 - Audio Players
  • HTML5 - Video Players
  • HTML5 - Geo-Location
  • HTML5 - Drag and Drop
  • HTML5 - Web Worker
  • HTML5 - Web slide Desk
  • HTML5 Tools
  • HTML5 - SVG Generator
  • HTML5 - Velocity Draw
  • HTML5 - QR Code
  • HTML5 - Validator.nu Validation
  • HTML5 - Modernizr
  • HTML5 - Validation
  • HTML5 - Online Editor
  • HTML5 - Color Code Builder
  • HTML5 Useful References
  • HTML5 - Quick Guide
  • HTML5 - Color Names
  • HTML5 - Fonts Reference
  • HTML5 - URL Encoding
  • HTML5 - Entities
  • HTML5 - Char Encodings
  • HTML5 Tag Reference
  • HTML5 - Question and Answers
  • HTML5 - Tags Reference
  • HTML5 - Deprecated Tags
  • HTML5 - New Tags
  • HTML5 Resources
  • HTML5 - Useful Resources
  • HTML5 - Discussion
  • Selected Reading
  • UPSC IAS Exams Notes
  • Developer's Best Practices
  • Questions and Answers
  • Effective Resume Writing
  • HR Interview Questions
  • Computer Glossary

HTML5 Questions and Answers

HTML5 Questions and Answers has been designed with a special intention of helping students and professionals preparing for various Certification Exams and Job Interviews . This section provides a useful collection of sample Interview Questions and Multiple Choice Questions (MCQs) and their answers with appropriate explanations.

Questions and Answers

SN Question/Answers Type
1

This section provides a huge collection of HTML5 Interview Questions with their answers hidden in a box to challenge you to have a go at them before discovering the correct answer.

2

This section provides a great collection of HTML5 Multiple Choice Questions (MCQs) on a single page along with their correct answers and explanation. If you select the right option, it turns green; else red.

3

If you are preparing to appear for a Java and HTML5 Framework related certification exam, then this section is a must for you. This section simulates a real online test along with a given timer which challenges you to complete the test within a given time-frame. Finally you can check your overall test score and how you fared among millions of other candidates who attended this online test.

4

This section provides various mock tests that you can download at your local machine and solve offline. Every mock test is supplied with a mock test key to let you verify the final score and grade yourself.

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 tutorial questions answers

HTML Interview Questions and Answers

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

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.

Character Entity Name Entity Number
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
(non-breaking space) Eg. 10  PM &nbsp; Eg. <p>10&nbsp&nbspPM</p> &#160;
  • Software Dev
  • Data Science

6. What are different types of lists in HTML?

html tutorial questions answers

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

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.

html tutorial questions answers

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

2. Inline and block elements in HTML5?

Inline Block
Inline elements just take up the space that is absolutely necessary for the content and does not start from a new line.
Example:- <span>, <a>, <strong>, <img>, <button>, <em>, <select>, <abbr>, <label>, <sub>, <cite>, <abbr>, <script>, <label>, <i>, <input>, <output>, <q>, etc.
Block elements start on a new line and consume the full width of the page available.
Example:- <div>, <p>, <header>, <footer>, <h1>...<h6>, <form>, <table>, <canvas>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <figure>, <hr>, <article>, <section>, etc.

html tutorial questions answers

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

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

html tutorial questions answers

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

html tutorial questions answers

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

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

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

S.no., Language, Mostly used for

1, HTML, FrontEnd

2, CSS, FrontEnd

3, Python, BackEnd

html tutorial questions answers

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

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

11. Difference between SVG and Canvas HTML5 element?

SVG Canvas
SVG is a vector based i.e., composed of shapes.  It is Raster based i.e., composed of pixels.
SVG works better with a larger surface. Canvas works better with a smaller surface.
SVG can be modified using CSS and scripts. Canvas can only be modified using scripts.
SVG is highly scalable. So we can print at high quality with high resolution. It is less scalable.

12. What type of audio files can be played using HTML5?

HTML5 supports the following three types of audio file formats:

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

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

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

html tutorial questions answers

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

html tutorial questions answers

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

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

html tutorial questions answers

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

html tutorial questions answers

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

html tutorial questions answers

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

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

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

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

html tutorial questions answers

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

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

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

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

html tutorial questions answers

For any other screen

html tutorial questions answers

  • 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

html tutorial questions answers

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

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

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

html tutorial questions answers

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

html tutorial questions answers

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.

html tutorial questions answers

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

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

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

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

Which one is not a semantic html5 element?

Which of the following are not semantic tags?

Which of the following method cancels an ongoing watchPosition call?

What are the correct extensions for saving an HTML file?

Why iframe is used?

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

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

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

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

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

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

Comments in HTML is done by:

How to set the playback speed of audio/video?

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

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

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

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

HTML attribute values are case-sensitive?

  • Privacy Policy

instagram-icon

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

Tutorials Class - Logo

  • HTML All Exercises & Assignments

Write an HTML program to display hello world.

Description: You need to write an HTML program to display hello world on screen.

Hint : You need to type Hello World inside the body tag.

Write a program to create a webpage to print values 1 to 5

Description: Write a program to create a webpage to print values 1 to 5 on the screen.

Hint: Put values inside the body tag.

Write a program to create a webpage to print your city name in red color.

Description: Write a program to create a webpage to print your city name in red color.

Hint: You need to put the city name inside the body tag and use color attribute to provide the color.

Write a program to print a paragraph with different font and color.

Description: Create a webpage to print a paragraph with 4 – 5 sentences. Each sentence should be in a different font and color.

Hint: Put the paragraph content inside the body tag and paragraph should be enclosed in <p> tag.

html tutorial questions answers

  • HTML Exercises Categories
  • HTML Basics
  • HTML Top Exercises
  • HTML Paragraphs

Java Code Geeks

Convert Optional to ArrayList

Photo of Mary Zheng

1. Introduction

Java 8 introduced the java.util.Optional class to represent a value that may or may not be present to avoid NullPointerException . Converting an Optional to a java.util.ArrayList can be useful in scenarios where we want to handle optional values as lists. For example, finding the sum from a list or transforming the data. In this example, I will demonstrate the Optional ArrayList conversion with the following examples.

  • Convert Optional to ArrayList via isPresent .
  • Convert Optional to ArrayList via orElse and orElseGet .
  • Convert Optional to ArrayList via Stream .
  • Convert Optional to ArrayList via Stream and find the sum of the items.
  • Convert Optional to ArrayList via Stream and loop the items.

In this step, I will create a maven project with the Junit library.

3. Junit Test Class For Optional ArrayList Conversion

In this step, I will create a TestConvertOptionalToArrayList.java test class to show a few ways to convert an Optional to an ArrayList .

  • test_ifPresent – when the Optional has value, then add it to ArrayList with the optional.ifPresent method.
  • test_orElse – when the Optional has no value, then add the default value to ArrayList via optional.orElse .
  • test_orElse Get – when the Optional has no value, then add the default value to ArrayList via optional.orElseGet .
  • test_stream_getSum – convert the Optional to ArrayList via the Stream function and get the sum of the list items
  • test_stream_loopItems -convert the Optional to ArrayList via the Stream function and loop the list items.
  • test_stream_withData – convert a valued Optional to ArrayList .
  • test_stream_withNoData – convert an empty Optional to ArrayList .

TestConvertOptionalToArrayList.java

  • Line 23, 27: Stream function to get sum and loop items.
  • Line 33, 41, 49: Add the Optional value to ArrayList via ifPresent , orElse , orElseGet methods.
  • Line 56, 67: The Optional value is List itself, use it as ArrayList .
  • Line 59, 69: Convert the ArrayList of Optional to Stream and flat it to ArrayList .
  • Line 74, 81: Convert Optional to ArrayList via Stream .

4. Demo Optional ArrayList Conversion

In this step, I will run the Junit tests and capture the output here.

TestConvertOptionalToArrayList Output

Also capture the screenshot of the Junit test result.

html tutorial questions answers

5. Conclusion

In this example, I demonstrated the Optional ArrayList conversion with the examples

6. Download

This was an example of a maven project which converting an Optional to an ArrayList .

html tutorial questions answers

We will contact you soon.

Photo of Mary Zheng

Related Articles

html tutorial questions answers

Java 8 Streams – Group By Multiple Fields with Collectors.groupingBy()

Java program to calculate average using arrays, 150 java interview questions and answers – the ultimate list (pdf download & video), java 8 streams filter with multiple conditions examples, java arraylist insert/replace at index, switch as an expression in java with lambda-like syntax, 13 best java decompilers for download and online use for java developers, how to format/parse dates with localdatetime in java 8 – example tutorial.

guest

This site uses Akismet to reduce spam. Learn how your comment data is processed .

  • Environment
  • National Politics
  • Transportation
  • Coronavirus

What's eating my plants? What can I grow in the shade? Rutgers Master Gardeners can help

3-minute read.

Is something eating the prized plants in your New Jersey backyard and you need to identify a culprit? Don’t know what specific spots to plant in? The Rutgers Master Gardeners have you covered. 

The Rutgers Master Gardener Program consists of trained volunteers who help homeowners derive more satisfaction from their gardens. There is a helpline in almost every county, and 1,200 volunteers make up the program. 

“The Rutgers Master Gardener Program conducts outreach activities to educate the community with proven, research-based horticultural practices,” said Ruth Carll, the program's state leader of consumer horticulture. Rutgers owns thousands of acres of research farms in New Jersey , providing homeowners facts based on research conducted at these farms . 

Story continues below photo gallery

“The garden is a place for personal escape, enjoying nature, chilling out, and meditative experiences,” said Joel Flagler, coordinator of the Master Gardener Program in Bergen County. “We are here to help people have greater success in their garden , build their confidence and be wise."

The heat, ticks, Joro spiders

Common inquiries homeowners call about include what is eating their plants, the best location for certain perennials, how to shield plants from the heat, how to deal with ticks , and concerns about Joro spiders . Despite callers asking if the Joro is here, Carll says the spiders have not popped up in gardens — yet. 

In the 1990s, the hotline would take 3,000 to 5,000 calls each year. Then it gradually fell out of popularity as people loved the challenge of finding information online, said to Flagler, who took over the program in 1987. But interest in the hotline has bloomed again.

“We offer the facts, we don’t sell anything. We share the science, we help people make wise decisions about their lawns, landscapes, etc,” said Flagler. The Rutgers alum says the work that Master Gardeners can do is “all made possible because Rutgers sees the role of plants in our lives in a very holistic way.”

“As a botanist, I want to help people create sustainable and beautiful homes," said Carll. "It can be so easy but only if you have accurate, unbiased information and help when things go wrong. My favorite part is a happy expression on the face of someone who just learned something that made them smile.”

Gardening in urban settings

Carll believes urban settings are prime candidates for gardening.

“Just because there may not be farms or big yards, there is still the need for access to nature and the physical and mental benefits of gardening,” said Carll. “People report higher general happiness when plants are present within their communities…"

"Rutgers efforts to support urban agriculture and horticulture are specifically intended to strengthen the entire community,” Carll said.

The next training opportunity to become a Rutgers Master Gardener starts in January 2025, where training is intense but within everyone’s grasp, according to Carll. 

To find your county’s’ Rutgers Master Gardener Helpline, click this link ( https://njaes.rutgers.edu/master-gardeners/helplines.php ) to talk to a Master Gardener and take your garden to new heights. 

What went wrong? How did Secret Service allow shooter to get so close to Trump?

html tutorial questions answers

Investigations into the sniper shooting that injured Donald Trump and killed a local firefighter must focus on whether several key Secret Service protocols were violated, current and former law enforcement officials said Sunday.

Chief among them: Why wasn't a building well within 1,000 yards of the former president locked down enough to prevent the shooter from nearly assassinating the presumptive GOP presidential nominee?

In an exclusive interview, former Secret Service Director Julia Pierson told USA TODAY that maintaining such a sniper security perimeter is part of the agency's responsibility for safeguarding "protectees" like Trump from harm. Yet the man identified as the sniper, 20-year-old Thomas Matthew Crooks , fired off numerous rounds from a building top about 150 yards from Trump's lectern at Saturday's rally in Butler, Pennsylvania.

“I think 1,000 yards is the sniper capability that we have a concern about for the President. So anything that's within that range, that is a professional, makable shot... and you want to know about it,” Pierson said.

“When you think about it, it's a football field and a half … and that is a makeable shot by an individual.  And obviously an inch would have made a difference in this case and Trump wouldn't be with us,” said Pierson, who spent three decades with the Secret Service, much of that on presidential protective operations, before becoming director in 2013.

Crooks managed to fire off numerous rounds , injuring two other people in the crowd, before being killed by a Secret Service counter-sniper sharpshooter from another nearby roof. On Sunday evening, the FBI clarified that Crooks had used an "AR-style 556 rifle ."  

Rep. Ruben Gallego, a former Marine and Arizona Democrat, said that those "responsible for the planning, approving and executing of this clearly insufficient security plan need to testify before Congress and be held accountable."

"There should never have been a clear line of sight on the former president. My Marine Corps training taught me that,” said Gallego, an Iraq veteran who is running for Senate in Arizona.

President Joe Biden also weighed in, directing Secret Service Director Kimberly Cheatle to review all security measures for the Republican National Convention, which begins Monday in Milwaukee. He said he had ordered an independent review of the security measures taken at the Trump rally to "assess exactly what happened."

First assassination attempt against a former or current President in 43 years

The shooting marks the first assassination attempt against a former or current U.S. president since President Ronald Reagan was injured in a March 1981 shooting at a Washington, D.C. hotel. Before that, in 1975 a member of the Manson Family cult tried to shoot President Gerald Ford at close range in Sacramento, California but failed to chamber a round into the gun.

The Secret Service has confirmed that it is investigating how a gunman armed with an AR-style rifle was able to get close enough to shoot and injure Trump in what appears to be an epic failure of one the agency's primary duties of protecting VIPs. The FBI, state police and the U.S. Congress also will be seeking to answer the many swirling questions.

Some of those questions: How did Donald Trump’s would-be assassin gain a high-ground vantage point to fire off a potentially fatal head shot against the former president? Why didn’t Secret Service counter-sniper teams neutralize Crooks before he got off so many rounds from his high-powered rifle, killing one Trump rally-goer and injuring two others?

Also, if Crooks had been flagged by local authorities for acting suspiciously as some media have reported, why was he then able to climb atop a nearby building with a rifle, firing a shot that grazed Trump's ear? And why did Secret Service agents allow Trump to stand back up defiantly and do three fist-pumps when it wasn't clear that the threat had been fully neutralized?

Could this have been stopped before it started?

John Miller, a former senior FBI and New York Police Department official, said on CNN that Crooks had been observed acting suspiciously near the magnetometers, or metal detectors stationed outside the event by local law enforcement agencies.

Those officials then shared those concerns with the Secret Service and other authorities “and people had his description and were looking around for him,” said Miller, who’s currently a CNN analyst.

At some point, Miller said, Crooks “left the magnetometer area. And then at some point, people start to point out there's a guy who's climbing on that roof, and he has a rifle and police are putting that over the radio.”

According to some video and media reports, the Secret Service counter-sniper on a nearby rooftop was aiming at the shooter, perhaps before he took some or all of his shots.

“The counter sniper appears to be looking through his scope as if he's scanning for something. … And then, when the shots are fired, takes out the shooter from his position almost immediately,” said Miller, the NYPD’s deputy commissioner of Intelligence & Counterterrorism until 2022. “So we have to fill in those gaps. What happened during those seconds? What were the communications? What did he see through the scope, and did he act at his first opportunity? And we'll learn that later.”

Miller said the counter-sniper succeeded in eliminating the threat quickly. “That part worked,” he said. But, he added, “What about the front end? Could this have been stopped with faster or more clear communications or a more intense search?”

Investigations have already begun

It’s possible and even likely that the Secret Service security plan for the rally, in conjunction with local and state authorities, took into consideration the building from which Crooks allegedly sprayed bullets. It could have been locked down from the inside, prompting Crooks to have to climb to the roof from the outside as part of the security plan put in place by authorities before the rally.

But the entire sequence of events will be investigated to find out what went so wrong that Crooks was able to gain access to the roof of the building, including whether he might have surveilled the site ahead of time to find the best way up, according to current and former law enforcement officials.

William Pickle, a former special agent in charge of the Secret Service's Vice Presidential Protective Division who oversaw Vice President Al Gore’s detail, said there are provisions in any Secret Service security survey that nearby buildings are accounted for. The Secret Service regularly secures public areas such as parade routes peppered with large buildings, and advance teams interview building owners and business managers to determine who has access to the building and at what times to determine if agents need to stand watch.

“We know who’s there, why they’re there, we have control over those buildings,” Pickle said. “It seems like somewhere in this security survey, someone dropped the ball on those particular buildings.”

Though Pickle said the counter-sniper that took out the shooter did an “outstanding” job, he questioned if the Secret Service had posted additional counter-sniper teams to sufficiently cover the entire event perimeter. “A gunshot knows no boundaries except by the velocity and distance a bullet can travel,” Pickle said. “This was a relatively easy shot, and Donald Trump may have been the luckiest man in the world yesterday. He survived by about half an inch."

Secret Service spokesman Anthony Guglielmi told USA TODAY on Sunday that he was traveling to Milwaukee, the site of the upcoming Republican National Convention, and would not be in a position to talk until later in the day. At 2 p.m., he said he was still "unable to respond" to claims that the Secret Service made mistakes in allowing the shooter to gain such a close vantage point.

Three hours later, another senior Secret Service official also declined to comment on whether the agency failed in its mission to protect Trump at the Saturday rally.

“Any questions regarding yesterday’s event can be directed to our public affairs office out of DC,” said Audrey Gibson-Cicchino, the agency’s coordinator for the upcoming Republican National Convention in Milwaukee. Speaking at a news conference there, she said she could only discuss convention security measures.

In a news conference early Sunday morning, the FBI special agent in charge of the Pittsburgh field office, Kevin Rojek, had confirmed that the FBI is leading the investigation into the shooting and that it “is our assessment at this time” that law enforcement did not know the shooter was on the roof until he began firing.

“It is surprising,” Rojek said when asked about the gunman’s close vicinity to the rally. He said that proximity is among the details that will be a focus of the investigation. Rojek added: “The Secret Service really needs to answer that question. They conduct the initial site survey.”

At the midnight news conference, State Police Lt. Col. George Bivens had deferred questions about whether there was anything about the venue that made it particularly difficult to secure by the Secret Service, which did not have representatives at the televised briefing.

Bivens also said he would not speculate on “how close a call” it was for Trump.

But Bivens confirmed that law enforcement is following up on a “number of suspicious occurrences” including accounts from witnesses who said they tried to flag police about the activity of a person outside the rally moments before the shooting.

Calls for answers from both sides of the aisle

Sen. James Comer, a Kentucky Republican who chairs the House Oversight committee, was one of several lawmakers who called for an immediate investigation into potential lapses by the Secret Service.

Comer said in a statement that he has already contacted the Service Service for a briefing and he called on Cheatle – the director – to testify about what went wrong. His committee will send a formal invitation soon, Comer said.

"Political violence in all forms is unamerican and unacceptable," Comer said in his statement. "There are many questions and Americans demand answers."

Pennsylvania Sen. John Fetterman, a Democrat, also called morning for an urgent investigation to explain what happened. Several hours later, however, Pennsylvania Gov. Josh Shapiro, also a Democrat, sidestepped a question at his own news conference about potential Secret Service failures in preventing the shooter from climbing atop the building.

"I'm not getting into ... any questions regarding the ongoing investigation," Shapiro said. "I trust that the FBI and the Pennsylvania State Police will keep you posted throughout the day and in the days ahead as to their investigations."

Contributing: Melissa Brown, a state political reporter at The Tennessean in Nashville, Tennessee.

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

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

Angular Interview Questions

  • Top Angular 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

  • Top Node.js Interview Questions and Answers in 2024
  • 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

  • Frontend Developer Interview Questions (2024)

HTML Interview Questions and Answers (2024) – Intermediate Level

In this article, you will learn HTML interview questions and answers intermediate level that are most frequently asked in interviews. Before proceeding to learn HTML interview questions and answers – intermediate level, first we learn the complete HTML Tutorial , and HTML Interview Questions and Answers – Basic Level .

HTML Interview Questions and Answers

HTML Interview Questions and Answers

Pre-requisite: HTML Interview Questions and Answers (2024) Beginner Level

Similar article: html interview questions and answers (2024) – advanced level.

The below contains the list of the top most common & frequently asked HTML & HTML 5 interview questions with their explanations.

1. Are <div> and <span> tags similar?

Both the tags ( <div> and <span> ) are used to represent the part of the web page. The <div> tag is used as the block component, and the <span> tag is used as an inline component.

<div> tag: The div tag is known as the Division tag. It is a block-level tag & is used in HTML to make divisions of content on the web page (text, images, header, footer, navigation bar, etc). Div tag has both openings (<div>) and closing (</div>) tags, and it is mandatory to close the tag.

<span> tag: The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes). A better way to use it is when no other semantic element is available.

2. Differences between <div> & <span> tag:

The <div> tag is a block level element.

The <span> tag is an inline element.

It is best to attach it to a section of a web page.

It is best to attach CSS to a small section of a line on a web page.

It accepts align attribute.

It does not accept aligned attributes.

This tag should be used to wrap a section, for highlighting that section.

This tag should be used to wrap any specific word that you want to highlight on your webpage.

3. What is the difference between classes and id?

id Attribute : The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id.

class Attribute : The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name can be represented by using the “.” symbol.

Difference between id and class attribute: The only difference between them is that “id” is unique on a page and can only apply to at most one element, while the “class” selector can apply to multiple elements.

4. How can we create a nested webpage in HTML?

When the content of one completely different webpage is embedded into another webpage, it is called a nested webpage. The nested webpage can be created using the following 2 methods:

  • <iframe> tag : The iframe in HTML stands for Inline Frame. The “iframe” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
  • <embed> tag : The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.

5. What are the tags that can be used inside the <head> tag?

The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta information.

The HTML <head> element is a container for the following elements:

  • <title> : It defines the title of the webpage.
  • <link> : It is most often used to link an external CSS file.
  • <meta> : It is used to specify the Character set, Page description, Keywords, Author of the document, and Viewport settings. It will not be displayed but is used by browsers on how to display content or reload pages and by search engines, and other web services.
  • <base> : It is used to specify the base URL or target for relative URLs.
  • <style> : It is used to make internal CSS within our HTML webpage.
  • <script> : It is used to define within the HTML webpage.

6. What are meta tags? How are they important?

The metadata means information about data. The <meta> tag in HTML provides information about HTML Document or in simple words, it provides important information about a document. These tags are basically used to add name/value pairs to describe properties of HTML documents, such as expiry date, author name, list of keywords, document author, etc. This tag is an empty element because it only has an opening tag and no closing tag, but it carries information within its attributes. A web document can include one or more meta tags depending on information, but in general, it doesn’t affect the physical appearance of the document.

Key Points:

  • The <meta> tag contents are not visible on your browser & is added inside the <head> tag.
  • They are just used to give additional information about the HTML document.
  • The <meta> tags are added to our HTML document for the purpose of Search Engine Optimisation.

7. What is HTML Layout?

Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.

page layout

Page Layout Information:

  • Header: The part of the front end which is used at the top of the page. <header> tag is used to add header section in web pages.
  • Navigation bar: The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks.
  • Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added to the page.
  • Content Section: The content section is the main part where content is displayed.
  • Footer: The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The <footer> tag is used to set the footer on web pages.

8. What are semantic elements?

Semantic Elements have meaningful names which tell about the type of content. For instance header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instruct the browser on how to treat them.

  • article: It contains independent content which doesn’t require any other context. 
  • aside: It is used to place content in a sidebar i.e. aside from the existing content. 
  • details: It defines additional details that the user can hide or view. 
  • figure & figcaption: It is used to add an image to a web page with a small description.
  • footer: It is located at the bottom of any article or document, they can contain contact details, copyright information, etc.
  • header: It is used for the header of a section introductory of a page.
  • main : It defines the main content of the document. 
  • mark : It is used to highlight the text.
  • nav : It is used to define a set of navigation links in the form of a navigation bar or nav menu.
  • section : A page can be split into sections like Introduction, Contact Information, Details, etc and each of these sections can be in a different section tag.

9. What are HTML entities?

HTML provides some method to display reserved characters. Reserved characters are those characters that are either reserved for HTML or those which are not present in the basic keyboard.

For Example: ‘<‘ is already reserved in HTML language. Sometimes this character needs to display on the web page which creates ambiguity in the code. Along with these are the characteristics which are normally not present in basic keyboard ( £, ¥, €, © ), etc. HTML provides some Entity names and Entity numbers to use these symbols. Entity number is easy to learn.

10. How can we add symbols in HTML?

There are some characters in HTML that are reserved, & have special meaning when they are used in an HTML document. Like if you used less than or greater than sign in your HTML document then the browser will treat them differently. So we will use HTML entities to insert symbols in a webpage.

Syntax

©:copyright

&copy;

®:registered trademark

&reg;

™:trade mark

&trade;

@: at

&commat;

¶: paragraph

&para;

§: section

&sect;

ℂ: double-struck capital c

&copf;

℅: care of

&incare;

11. What is HTML Encoding?

A Uniform Resource Locator (URL) is simply the address of a website to access the website content like www.geeksforgeeks.org . But there are certain characters allowed to use in the URL like alphabets A-Z and a-z, numbers 0-9, and a few special characters. They can be used as it is but the rest of the characters that are not in this list are used after encoding them to a suitable form. URL Encoding is the process of converting the URL into a valid format that is accepted by web browsers. URL Encoding takes place by replacing all the characters that are not allowed with a % sign followed by two hexadecimal digits. These two hexadecimal values represent the numerical values of the character in the ASCII character set. For example, a space is not acceptable in a URL and is replaced by ‘%20’ or a ‘+’ sign while encoding. Similarly, a $ sign is replaced by ‘%24’.

Reserved Characters: There are certain characters that sometimes have special meanings in the URL and they can be used in both ways. For example, the ‘/’ character is a reserved character and it has a special meaning when being used as a delimiter to separate the paths of a URL. Here it is used by encoding it to ‘%2F’. Elsewhen it has no special purpose it can be used normally.

12. What is the difference between the POST method and the GET method?

The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. There are 2 HTTP request methods ie., GET & POST

  • GET: It requests data from a specified resource.
  • POST: This method is used to submit data to be processed to a specified resource.
  • The bold parts in the URL are the GET parameters and the italic parts are the value of those parameters.
  • More than one parameter=value can be embedded in the URL by concatenating with ampersands (&).
  • One can only send simple text data via GET method.

13. What is HTML Canvas?

The HTML “canvas” element is used to draw graphics via JavaScript.The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Example: The canvas would be a rectangular area on an HTML page. By default, a canvas has no border and no content. An id attribute has been specified to refer to it in a script, and a width and height attribute to define the size of the canvas. The style attribute is used to add a border.

html tutorial questions answers

14. What is SVG?

SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated.

Advantages of SVG: Advantages of using SVG over other image formats (like JPEG and GIF) are:

  • SVG images can be created and edited with any text editor.
  • SVG images can be searched, indexed, scripted, and compressed.
  • SVG images are scalable.
  • SVG images can be printed with high quality at any resolution.

15. What are the different multimedia formats supported by HTML?

Multimedia files have formats and different extensions like .wav, .mp3, .mp4, .mpg, .wmv, and .avi

16. How can we allow the browser to tell our location using HTML Geolocation API?

Geo-location in HTML5 is used to share the location with some web site and aware of the exact location. It is mainly used for local businesses, restaurants, or to show locations on the map. It uses JavaScript to give the latitude and longitude to the backend server. Most of the browsers support Geolocation API. Geo-location API uses a global navigator object which can be created as follows:

Displaying Location using HTML Geolocation: The following code is displaying the current location with the help of latitude and longitude via HTML Geolocation.

html tutorial questions answers

17. What is HTML Web Storage API?

SessionStorage and LocalStorage are known as the web storage API. Data can be stored on the client-side by using these APIs.

SessionStorage :

  • SessionStorage is used for storing data on the client-side.
  • The maximum limit of data saving in SessionStorage is about 5 MB.
  • Data in the SessionStorage exist till the current tab is open if we close the current tab then our data will also erase automatically from the SessionStorage.
  • Like SessionStorage, LocalStorage is also used for storing the data on the client-side.
  • The maximum limit of data saving is about 5 MB in LocalStorage also.
  • LocalStorage has no expiration time, Data in the LocalStorage persist till the user manually deletes it. This is the only difference between LocalStorage and SessionStorage

18. What are forms in HTML?

HTML Form is a document that stores information of a user on a web server using interactive controls. An HTML form contains different kinds of information such as username, password, contact number, email id, etc.

The elements used in an HTML form are check box, input box, radio buttons, submit buttons, etc. Using these elements the information of a user is submitted on a web server. The form tag is used to create an HTML form.

html tutorial questions answers

Please Login to comment...

Similar reads.

  • Web Technologies
  • HTML-Questions
  • interview-questions

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

CNN values your feedback

What Matters (no log)

How did we get here with Biden? Your questions about the democratic process answered.

Zachary B. Wolf

A version of this story appeared in CNN’s What Matters newsletter. To get it in your inbox, sign up for free  here .

President Joe Biden is rejecting any idea that he would step aside as the Democratic nominee, a decision that is his alone.

When we asked readers what questions they have about Biden, they expressed some confusion about the process that made him the presumptive Democratic nominee.

Here are answers to some of the questions posed to CNN from readers:

No. There was a series of primaries in states and territories this year and voters in those contests overwhelmingly backed Biden. He faced only token opposition from a little-known congressman, Rep. Dean Phillips, and an author, Marianne Williamson. Biden won nearly all of the 3,949 pledged delegates who will officially select the party’s nominee at the Democratic National Convention in Chicago in August.

Delegates pick the nominee during a roll-call vote. While party rules don’t formally require delegates to vote for the candidate to whom they’re pledged, they’re supposed to, and campaigns have the right to approve the delegates pledged to their candidates. Biden has the votes to win the nomination in that first round of voting and realistically, it’s highly unlikely that another candidate could be elected without Biden voluntarily stepping aside.

This is an unprecedented situation. Primaries began in January and went on for months. That monthslong process provided Democrats and independents who wanted to take part in the Democratic primary the opportunity to back a different candidate. Each one of those primaries, arguably, was a sort of off-ramp.

But Democrats at the time were largely rallying behind Biden. That was, however, before his poor debate performance fed festering concerns about his age . It is remarkable that even though polling has long suggested voters feel Biden is too old and would have preferred a different choice, high quality opponents did not challenge him. Phillips and Williamson never gained traction and Robert F. Kennedy Jr. left the Democratic Party to run as an independent rather than challenge Biden for the party nomination.

The party also worked hard to discourage opposition to Biden. It did not sponsor debates, and multiple states, including Delaware and Florida, did not hold Democratic primaries after it was clear that Biden had the delegates to win the nomination.

Delegates are supposed to honor the voters in their states. Here’s the language in the Democratic party rules for the 2024 convention: “All delegates to the National Convention pledged to a presidential candidate shall in all good conscience reflect the sentiments of those who elected them.”

Primaries are an important part of the process and primary voters chose Biden. Not that they had much choice; the party worked hard to unify early behind Biden and discouraged serious opposition. But delegates technically pick the party nominee, which is why it would probably take Biden releasing the delegates he won to replace him on the ticket.

We received several versions of this question, not all of them fit to print. The large universe of people who believe Trump is unfit to be president have thought that for a long time. There is a universe of people who are newly questioning Biden’s fitness after the debate. I would point out that figure – that Trump lied more than 30 times at the debate – is directly reported in CNN’s Fact Check of the debate. From that report:

Trump’s repeat falsehoods included his assertions that some Democratic-led states  allow babies to be executed after birth , that  every legal scholar and everybody in general wanted Roe v. Wade overturned , that there were  no terror attacks during his presidency , that  Iran didn’t fund terror groups during his presidency , that  the US has provided more aid to Ukraine than Europe has , that  Biden for years referred to Black people as “super predators ,” that Biden is  planning to quadruple people’s taxes , that  then-House Speaker Nancy Pelosi turned down 10,000 National Guard troops for the US Capitol on January 6, 2021 ,  that Americans don’t pay the cost of his tariffs on China and other countries , that  Europe accepts no American cars , that  he is the president who got the Veterans Choice program through Congress , and  that fraud marred the results of the 2020 election .

So I believe it is inaccurate to say the media is giving Trump a pass. Trump, for his part, has all but disappeared from the campaign trail since the debate and Biden is holding events, doing TV and audio interviews and more as he engages in damage control. There has also been ample coverage of Trump’s criminal trial, his many other legal troubles, and his often outrageous claims and policy proposals.

Biden argues he has the best chance of winning and says the pollsters he talks to say the race is a tossup. High-quality public polling since the debate, on the other hand, suggests Trump does have a lead. In hypothetical matchups in which other Democrats are put up against Trump, the results are not currently much different. If those numbers start to change dramatically, pressure on Biden to drop out will increase dramatically.

When I put this question to CNN’s polling director, Jennifer Agiesta, she cautioned that polling is frequently misinterpreted as a tool to predict the future. It does not tell us who has a better chance of winning, but the state of the race in a particular moment. “Even before the debate there was almost no polling showing Biden with a significant lead of Trump nationally or in key states,” Agiesta said. “In a two-way matchup between Trump and Biden, there hasn’t been a high-quality poll showing a significant Biden lead since February.”

Biden says he does not have a debilitating cognitive condition so it does not appear he is hiding one. His advisers argue that he maintains a full campaign and governing schedule and he frequently appears in public, although his advisers have clearly tried to minimize unscripted moments. Impeachment is utilized to punish “high crimes and misdemeanors,” according to the US Constitution. Republican efforts to impeach Biden, which have so far failed , have focused not on his age, but on his son’s former business interests.

The 25th Amendment provides a pathway to dislodge an incapacitated president, but it is a complicated process and would require a majority of Biden’s Cabinet and Vice President Kamala Harris to agree in writing that he is “unable to discharge the powers and duties of his office.” None of his allies are currently saying that about him. But if, in the future, a majority of his Cabinet and Harris (or some other body appointed by Congress) turned on Biden and tried to declare him incapacitated, he could dispute their finding and resume his duties. Harris and the Cabinet would then have four days in which to double down on their declaration that the president was unfit, at which point both houses of Congress would have 21 days to decide in a vote if he should carry on as president. It would require two-thirds of the Senate (usually 67 of 100 senators) and two-thirds of the House (usually 290 of 435 representatives) to remove the president from office.

Democrats have not exactly turned on Biden. Only a handful of elected Democrats have publicly argued he should step down as the party’s candidate in 2024. But they are almost universally worried that Trump will beat Biden in a rematch. Not only do Democrats disagree with the former president’s policies, they also view him as a destabilizing threat to American democracy. If Biden is not viewed as capable by the few independent voters who might support either candidate, it makes a Trump election more likely.

This would get very complicated, as CNN’s David Wright has written:

It’s a significant war chest that  totaled $240 million at the end of June , including the Democratic National Convention and allied committees, according to an announcement from Biden’s campaign on Tuesday. At the end of May, Biden’s campaign account alone held $91.6 million, according to the most recent available data from the Federal Election Commission (FEC).

If Harris were tapped as a replacement nominee, she would take over the existing campaign account, and have control of funds deposited there, per FEC rules.

If the race were thrown open, the Biden-Harris campaign could transfer all of its cash on hand to the Democratic National Committee, as  FEC rules  permit unlimited transfers from candidate committees to national party committees.

The DNC could use those funds in several ways to support a new nominee, and could distribute that money to a variety of other down ballot candidates and allied committees – but in doing so, the DNC would be limited by FEC rules governing spending and contributions for national party committees.

There are other options, each with its own set of drawbacks, according to Wright, including turning Biden’s campaign account into a PAC.

').concat(a,'

Show all

'.concat(e,"

'.concat(i,"

\n ').concat(n,'\n

\n ').concat(t,'\n

This page will automatically redirect in 5 seconds...

Advertisement

21 Questions About Literature and Life in the 21st Century (So Far)

Written by THE NEW YORK TIMES BOOKS STAFF July 14, 2024

  • Share full article

Two books, one lying flat with its front cover curled open to resemble the number 2 next to another book standing upright to resemble the numeral 1.

Literature has always reflected society, and as the Book Review’s survey “100 Best Books of the 21st Century” reveals, many titles on the list are intertwined with major events and trends of the young millennium. With that in mind, this beefy quiz — a group effort by several members of the Book Review’s staff — challenges you to show how closely you’ve been paying attention to books, history and pop culture the past few decades.

All the questions are multiple choice, so tap or click your way down the quiz. And when you get to the end and collect your score, you'll get a list of links for related reading and other digital ephemera. Are you ready, Player One?

An enormous sad-eyed black-and-white dog in a pen at a dog show.

Which National Book Award-winning novel features a grieving woman’s increasingly intimate bond with a Great Dane?

“The Friend,” by Sigrid Nunez

“White Teeth,” by Zadie Smith

“We the Animals,” by Justin Torres

“Runaway,” by Alice Munro

An older white man in a red sweater sitting in a chair in his living room.

As mentioned in his 2019 memoir “Working: Researching, Interviewing, Writing,” which device has Robert A. Caro used to write drafts of his monumental, multi-volume, as-yet-unfinished biography of Lyndon Johnson?

A MacBook Air laptop

A TRS-80 computer

A Smith Corona electric typewriter

A Linux-based Dell desktop

A young girl and a man, both dressed in winter clothes, stand in a parking lot next to carts filled with supplies.

Although this novel about a traveling group of performers after a global plague was published in 2014 before the Covid-19 pandemic swept the world, the book’s sales jumped during the lockdowns in 2020 and in 2021, when its television adaptation was released. Which novel was it?

“A Manual for Cleaning Women,” by Lucia Berlin

“Station Eleven,” by Emily St. John Mandel

“The Fifth Season,” by N.K. Jemisin

“The Known World,” by Edward P. Jones

A Black man in a white shirt and jeans standing in front of a large beach house.

Jeffrey Wright received a 2024 Academy Award nomination for his role as a weary author dealing with industry racism in “American Fiction.” Which novel was the inspiration for the film?

“The Late Americans,” by Brandon Taylor

“The Unsettled,” by Ayana Mathis

“Erasure,” by Percival Everett

“Symphony of Secrets,” by Brendan Slocumb

Quick! Who is Carel Fabritius?

A 17th-century painter whose depiction of a small bird gives “The Goldfinch” its title

A 19th-century chemist whose research is described in “The Emperor of All Maladies”

A 20th-century motorcycle designer in “The Flamethrowers”

A 22nd-century actor turned cult leader in “Station Eleven”

A blocky land bridge dotted with trees in the video game "Minecraft."

The Statista data-analysis company projects that the global video-game industry will reach a revenue of more than $282 billion in 2024. Which novel is about three friends in the video-game business?

“The Argonauts,” by Maggie Nelson

“Detransition, Baby,” by Torrey Peters

“The Great Believers,” by Rebecca Makkai

“Tomorrow, and Tomorrow, and Tomorrow,” by Gabrielle Zevin

Jonathan Franzen notably was disinvited from the Oprah Winfrey show after expressing discomfort with his novel “The Corrections” being chosen as her book-club pick. For which novel did he eventually make it onto her show and hug it out with the host?

“Crossroads”

“The Twenty-Seventh City”

A silver medallion imprinted with the masks of tragedy and comedy and the words "Antoinette Perry Award" printed on the edge.

Which Broadway show, adapted from a book, won the 2015 Tony Award for best musical?

“The Color Purple”

“Doctor Zhivago”

Three Hilary Mantel books in a row: "Bring Up the Bodies"; "Wolf Hall"; and "The Mirror and the Light"

Which king is on the throne of England in most of Hilary Mantel’s epic trilogy about ambition, power, loyalty — and, of course, politics — that started with “Wolf Hall” in 2009?

Edward VIII

Charles III

A smiling Black woman sitting at a desk in a bright red dress.

Isabel Wilkerson’s 2010 historical study “The Warmth of Other Suns” won the National Book Critics Circle Award and has even inspired dance productions. What was the book about?

The midcentury exodus of Black writers to Paris

Climate change’s effect on rural areas

The migration of Black people from the South to the North

The Tuskegee Airmen in Italy during World War II

Reviewers praised Jennifer Egan’s “A Visit From the Goon Squad” for the innovative ways it told a linked set of stories. One chapter was famously presented as what?

A series of text messages

A manga comic

A transcribed hypnosis session

A PowerPoint presentation

The front page of The New York Times on Sept.12, 2001, with the headline "U.S. ATTACKED."

Lawrence Wright’s 2006 book about the terrorist attacks on America on Sept. 11, 2001, was awarded the Pulitzer Prize for general nonfiction. What was the title?

“The Looming Tower”

“In the Shadow of No Towers”

“Falling Man”

“Extremely Loud and Incredibly Close”

Which best-selling novel begins with this sentence: “When I think of my wife, I always think of her head”?

“Trust,” by Hernan Diaz

“An American Marriage,” by Tayari Jones

“Veronica,” by Mary Gaitskill

“Gone Girl,” by Gillian Flynn

An Asian woman in a winter coat and scarf in front of a store.

“Pachinko,” Min Jin Lee’s 2017 novel that was a finalist for the National Book Award, is about a Korean family’s experiences before and after immigrating to Japan in the early 20th century. But what is “pachinko” itself?

A tile-based game played by four players around a table

A pinball-like arcade game sometimes used for gambling

A modern version of the card game whist, but with a smaller deck

A board game played with four wooden sticks that act like dice

A group of barefoot young men play soccer in a detention camp.

This century has seen a turbulent uptick in mass migration and asylum seekers around the world. Which 2017 novel used speculative fiction techniques to explore global refugee issues and emigration?

“Exit West,” by Mohsin Hamid

“The Power,” by Naomi Alderman

“Shadowbahn,” by Steve Erickson

“The Burning Girl,” by Claire Messud

The original hardback edition of "The Brief Wondrous Life of Oscar Wao" with a spray-painted silhouette of a young man across the type.

In Junot Díaz’s “The Brief Wondrous Life of Oscar Wao” — which was awarded the Pulitzer Prize for fiction and the National Book Critics Circle Award — the main character Oscar is obsessed with nerd culture, including comic books. Which of these novels was all about the midcentury rise of the American comic-book industry — long before Marvel movies filled the multiplexes? (Hint: This book won the Pulitzer Prize for fiction in 2001.)

“The Last Samurai,” by Helen DeWitt

“The Amazing Adventures of Kavalier & Clay,” by Michael Chabon

“Cloud Atlas,” by David Mitchell

“Pulphead,” by John Jeremiah Sullivan

A black and white drawing of two girls holding the album cover for ABBA's "Dancing Queen."

“Persepolis,” Marjane Satrapi’s autobiographical illustrated book about her childhood, was originally published in French in 2000 and 2001 before the English translation was released in 2003. But even without reading the book or seeing its 2007 film adaptation, where or what was Persepolis itself?

A site in Jordan with a temple carved into a canyon

A fantasy village that appears once every 100 years

The ancient capital of the first Persian (Achaemenid) Empire

A Zoroastrian city on the east end of the Silk Road

A sunny overview of a city on the edge of the water, with a volcano mountain in the background,

Which one of these novels was NOT part of Elena Ferrante’s Neapolitan quartet?

“The Lying Life of Adults”

“The Story of a New Name”

“The Story of the Lost Child”

“My Brilliant Friend”

A woman's hand points to a green-yellow and red blob on a weather forecast screen.

This meteorological event runs from June 1 to Nov. 30 every year and is also the name of Fernanda Melchor’s beautiful and brutal 2020 novel. What is the title of the book?

“Mercury Retrograde”

“Hurricane Season”

An illustration of the Nobel Prize medallion with its face in a book.

OK, Nobel watchers, this one’s for you: Which of these 21st-century books was NOT written by a Nobel laureate?

“Hateship, Friendship, Courtship, Loveship, Marriage”

“Never Let Me Go”

“The Years”

A detail of a map of Europe.

Which 2005 book, at nearly 900 pages and written using research material from six languages, is one of the first modern histories to cover all of Europe — a continent that continues to have its own political upheavals to this day?

“Postwar,” by Tony Judt

“The Global Age,” by Ian Kershaw

“Modern Times,” by Paul Johnson

“The Rise and Fall of the Great Powers,” by Paul Kennedy

CNN values your feedback

Secret service director says agency will participate in assassination attempt investigation amid questions over procedures.

Whitney Wild

In her first public statement since the assassination attempt on former President Donald Trump, US Secret Service Director Kimberly Cheatle on Monday said the agency will “participate fully” in an independent review ordered by President Joe Biden and also said the agency will work with Congress on “any oversight action.”

Cheatle, who was appointed by Biden in 2022, expressed confidence in the agency’s security plan for this week’s Republican National Convention in Milwaukee and said changes have been made to Trump’s security detail since Saturday.

“The Secret Service is tasked with the tremendous responsibility of protecting the current and former leaders of our democracy,” Cheatle said. “It is a responsibility that I take incredibly seriously, and I am committed to fulfilling that mission.”

Questions have swirled about the agency’s preparations in the aftermath of Saturday’s shooting, which wounded the former president, killed an attendee and left two people critically injured. The shooter, identified by authorities as 20-year-old Thomas Matthew Crooks , also was killed by Secret Service agents at the scene.

Among the concerns and questions is how a sniper was able to obtain rooftop access roughly 150 meters from the former president’s position at the podium at an outdoor rally.

Notably, the shooter’s location was outside the security perimeter, raising questions about both the size of the perimeter and efforts to sweep and secure the American Glass Research building, and how the shooter was able to obtain rooftop access.

A spokesman for the United States Secret Service told CNN the agency did not sweep the building where Crooks shot at Trump but instead leaned on local law enforcement to conduct security at that location.

The spokesman added that there was supposed to be local law enforcement posted in that area, but it is not clear where that post was supposed to be located. A source not directly involved but with knowledge of Secret Service operations described possible roaming posts, for example, as part of some operational plans.

The Secret Service regularly works with local law enforcement agencies to assist with securing events, as is the case in Milwaukee. Further, the Secret Service utilized two local counter-sniper teams during Trump’s rally, in addition to two Secret Service counter-sniper teams.

The spokesman did not know at the time of CNN’s inquiry which local agency should have been responsible for the building.

A source familiar with the investigation says one of the two local counter-sniper teams was supposed to cover the building where the gunman was perched, noting that it was a designated post in the operational plan.

Meanwhile, additional details about the shooting continued to emerge Monday morning, with a senior law enforcement official saying the shooter purchased 50 rounds of ammunition at a local gun store just hours before carrying out his attack.

Biden said Sunday he has directed Cheatle to review all security measures for the RNC as well as an independent review into Saturday’s rally shooting “to assess exactly what happened. He pledged to publicly release the results of that inquiry.

Law enforcement sources say that part of the aftermath will include a review of whether the Secret Service had enough assets to protect Trump days ahead of  officially becoming the Republican presidential nominee  and whether procedures were followed to conduct security sweeps of the building that offered a vantage point for the alleged shooter.

Congress demands answers

Republican and Democratic lawmakers are already demanding answers from the agency on the security posture and hearings on the incident.

The Senate Homeland Security Committee is opening a bipartisan investigation into the shooting, chairman Gary Peters said Monday, and it hopes to “expedite” the process and hold hearings before the Senate leaves for August recess. The Michigan Democrat said the committee will use its investigation into the security failures at the US Capitol on January 6, 2021, as a “template” for this new effort.

In the House, Speaker Mike Johnson vowed a “full investigation” of the shooting, featuring testimony from USSS, DHS and the FBI, and two Republicans on the Senate Homeland Security Committee have also called for an investigation. Rep. Jeff Duncan, a South Carolina Republican, on Sunday called for an independent commission, in the style of the one that investigated the assassination of President John F. Kennedy, “to give a non-partisan examination into the  how  and  why  aspects of this security posture.”

Homeland Security Secretary Alejandro Mayorkas, appearing on CNN Monday morning, acknowledged that Saturday’s incident was a security “failure.”

“We are going to analyze through an independent review how that occurred, why it occurred and make recommendations and findings to make sure it doesn’t happen again,” he said.

This story has been updated with additional information.

CNN’s John Miller contributed to this report.

').concat(a,'

Show all

'.concat(e,"

'.concat(i,"

\n ').concat(n,'\n

\n ').concat(t,'\n

This page will automatically redirect in 5 seconds...

').concat(o).concat(n,"

HTML Tutorial

Html graphics, html examples, html references.

You can test your HTML skills with W3Schools' Quiz.

The test contains 40 questions and there is no time limit. 

The test is not official, it's just a nice way to see how much you know, or don't know, about HTML.

Count Your Score

You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 40 points.

Start the Quiz

Start the HTML Quiz ❯

If you don't know HTML, we suggest that you read our HTML Tutorial from scratch.

Kickstart your career

Get certified by completing the course

Get Certified

COLOR PICKER

colorpicker

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

IMAGES

  1. Html5 Interview Basic Questions And Answers Tutorial 10

    html tutorial questions answers

  2. HTML 5 MCQ Quiz (Multiple Choice Questions And Answers)

    html tutorial questions answers

  3. Html multiple choice questions and answers

    html tutorial questions answers

  4. Class 10 Computer Application 165 HTML

    html tutorial questions answers

  5. ‎HTML5: Questions and Answers (2020 Edition)

    html tutorial questions answers

  6. HTML FORMS Question and Answers

    html tutorial questions answers

VIDEO

  1. HTML tutorial for beginners (2023) 🌎

  2. Coursera HTML, CSS, and Javascript for Web Developers Week 1 practice Quiz 4 solutions

  3. Explain HTML Page Layout, Create & Open New HTML File

  4. Solution to HTML Practical Question Paper

  5. Introduction to HTML5 |26.1|HTML5|SOLOLEARN Answers

  6. SoloLearn HTML Module 3 All answers |Last Module answers |Get certificate from Sololearn Html

COMMENTS

  1. HTML Exercises, Practice Questions and Solutions

    Benefits of HTML Exercises. Interactive Quizzes: Engage in hands-on HTML quizzes. Progress Tracking: Monitor your learning journey. Skill Enhancement: Sharpen coding skills effectively. Flexible Learning: Practice at your own pace. Immediate Feedback: Receive instant results and feedback. Convenient Accessibility: Accessible online, anytime.

  2. HTML Exercises

    Test yourself with multiple choice questions. Get Certified. Document your knowledge. ... Learn the basics of HTML in a fun and engaging video tutorial. Templates. We have created a bunch of responsive website templates you can use - for free! ... We have gathered a variety of HTML exercises (with answers) for each HTML Chapter.

  3. Top HTML Interview Questions and Answers (2024)

    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. Doctype is not necessary to write at the top. Doctype is very necessary to write at the top of the file.

  4. Top 60 HTML Interview Questions and Answers

    26. Explain the concept of form validation in HTML. Form validation in HTML ensures that user-submitted data meets certain requirements before it is submitted to the server. HTML5 introduced built-in form validation using attributes like required, min, max, pattern, and more.

  5. HTML Interview Questions and Answers (2024)

    In this article, you will learn HTML interview questions and answers intermediate level that are most frequently asked in interviews. Before proceeding to learn HTML interview questions and answers - intermediate level, first we learn the complete HTML Tutorial, and HTML Interview Questions and Answers - Basic Level. Pre-requisite: HTML Interview Q

  6. Crack the top 30+ HTML interview questions and answers

    Today, we'll break down 30+ popular HTML interview questions to refresh your understanding of HTML before your next frontend interview. Today we'll cover the following: Introduction to frontend interviews. The top 30+ HTML interview questions and answers. More practice questions. Wrapping up and resources.

  7. 50+ Top HTML Interview Questions and Answers for 2024

    HTML Coding Interview Questions and Answers. 39. Write a program to create nested web pages in HTML. A webpage inside of another is a nested webpage. It is done using the iframe tag which creates an inline frame. 40. Explain SVG with HTML code. HTML SVG is a two-dimensional vector and vector/raster graphics.

  8. Top 55+ HTML Interview Questions & Answers in 2024

    HTML stands for HyperText Markup Language. It is arguably the most widely-used and popular programming language used for web application development. Created in 191 by Berners-Lee but first published in 1995, HTML has, over the years, evolved and has seen multiple releases.HTML 4, published in 1999, was a breakthrough version in its evolution and gained a lot of popularity, seeing wide-spread ...

  9. HTML Top 50 Most Important Interview Questions

    In this HTML tutorial, we will dive into HTML Interview Questions and Answers.Here we have divided them into HTML Interview Questions for Freshers and HTML Interview Questions for Experienced.Learn HTML from scratch through HTML Certification Training right now.. HTML Interview Questions & Answers for Beginners 1. What is HTML? HTML standsfor HyperText Markup Language.

  10. HTML for Beginners

    HTML tags mark the beginning and end of an element (and are considered part of the element). Tags are containers. They tell you something about the content between the opening & closing tags. In the element above, the tags are <p> (opening tag) and </p> (closing tag). You will notice that the closing tag has a /.

  11. Top 50 HTML Interview Questions and Answers

    In this HTML tutorial, we will dive into HTML Interview Questions and Answers.Here we have divided them into HTML Interview Questions for Freshers and HTML Interview Questions for Experienced.Learn HTML from scratch through HTML Certification Training right now.. HTML Interview Questions & Answers for Beginners 1. What is HTML? HTML standsfor HyperText Markup Language.

  12. CSS and HTML Interview Questions and Answers [2022]

    Job Interview Preparation Materials (22 Part Series) 1 JavaScript Interview Questions and Answers you should know - Junior and Senior 2 CSS and HTML Interview Questions and Answers [2022] ... 18 more parts... 21 CSS Interview Question: Create Responsive Design (1 Column / 3 Column) 22 CSS Interview Question: Center HTML Element (3 Approaches ...

  13. 50 Best HTML5 Interview Questions and Answers in 2024

    Top HTML5 Interview Questions And Answers. To help you win your upcoming HTML5-based job interview, here we are with our pick of the 50 best HTML5 interview questions: Question: List the significant goals of the HTML5 specification. Answer: Following are the most important goals of the HTML5 specification: Better semantic support for the web ...

  14. Top 44 HTML Interview Questions

    AWS Interview Questions. Accounting Interview Questions. HTML Interview Questions or HTML5 Interview Questions for beginners and professionals with a list of top frequently asked HTML interview questions and answers with java, .net, php, database, hr, spring, hibernate, android, oracle, sql, asp.net, c#, python, c, c++ etc.

  15. Top 50 HTML Interview Questions and Answers in 2024

    So, if you are planning to start your career in Web Development or HTML and you wish to know the skills related to it, now is the right time to dive in. These HTML Interview Questions and Answers will help you get through your interviews in 2024. HTML Interview Questions Q1. What is HTML? HTML stands for Hyper Text Markup Language. It is a ...

  16. HTML5 Questions and Answers

    HTML5 Questions and Answers has been designed with a special intention of helping students and professionals preparing for various Certification Exams and Job Interviews.This section provides a useful collection of sample Interview Questions and Multiple Choice Questions (MCQs) and their answers with appropriate explanations.

  17. Top HTML and HTML5 Interview Questions (2024)

    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.

  18. Quiz about HTML Course

    HTML Course | Practice Quiz 1 Quiz will help you to test and validate your Web Technologies knowledge. It covers a variety of questions, from basic to advanced. The quiz contains 20 questions. You just have to assess all the given options and click on the correct answer.

  19. HTML All Exercises & Assignments

    HTML All Exercises & Assignments - Tutorials ClassIf you are seeking HTML assignment help, you can find a variety of exercises and solutions on this webpage. You can practice HTML basics, tags, attributes, forms, tables, and more. Learn HTML by doing these assignments and improve your web development skills.

  20. HTML Interview Preparation

    HTML Interview Preparation. Try W3Schools' comprehensive Front-End interview preparation feature. A tool that will help you get ready for your next interview. W3Schools interview preparation is an interactive feature powered by AI, where you can select the role of the interviewer, ask questions, and receive guidance.

  21. Acids & Bases Problem Set

    Tutorial to help answer the question . The correct operational relationship between pK a and pH is that: A. both are log functions. B. both are always 7 for acids, and >7 for bases. C. These two concepts are not operationally related in any way since biological fluids contains mixtures of too many acids and bases. D.

  22. Convert Optional to ArrayList

    1. Introduction. Java 8 introduced the java.util.Optional class to represent a value that may or may not be present to avoid NullPointerException.Converting an Optional to a java.util.ArrayList can be useful in scenarios where we want to handle optional values as lists. For example, finding the sum from a list or transforming the data. In this example, I will demonstrate the Optional ArrayList ...

  23. Rutgers Master Gardeners can answer your gardening questions

    "As a botanist, I want to help people create sustainable and beautiful homes," said Carll. "It can be so easy but only if you have accurate, unbiased information and help when things go wrong.

  24. Secret Service faces serious questions about security footprint and

    In the wake of the attempted assassination of Donald Trump, there are growing questions about how a sniper was able to obtain rooftop access roughly 150 yards from the former president's ...

  25. Was Trump shooting an epic Secret Service fail? Some experts say maybe

    "There are many questions and Americans demand answers." Pennsylvania Sen. John Fetterman, a Democrat, also called morning for an urgent investigation to explain what happened. Several hours later ...

  26. HTML Interview Questions and Answers (2024)

    In this article, you will learn HTML interview questions and answers intermediate level that are most frequently asked in interviews. Before proceeding to learn HTML interview questions and answers - intermediate level, first we learn the complete HTML Tutorial, and HTML Interview Questions and Answers - Basic Level.

  27. How did we get here with Biden? Your questions about the ...

    CNN answers some of the questions posed by readers. President Joe Biden is rejecting any idea that he would step aside as the Democratic nominee, a decision that is his alone.. When we asked ...

  28. Test Yourself on the Best Books of the 21st Century

    Written by THE NEW YORK TIMES BOOKS STAFF July 14, 2024 Literature has always reflected society, and as the Book Review's survey "100 Best Books of the 21st Century" reveals, many titles on ...

  29. Secret Service director says agency will participate in assassination

    In her first public statement since the assassination attempt on former President Donald Trump, US Secret Service Director Kimberly Cheatle on Monday said the agency will "participate fully ...

  30. HTML Quiz

    The test contains 40 questions and there is no time limit. The test is not official, it's just a nice way to see how much you know, or don't know, about HTML. Count Your Score. You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 40 points.