HTML interview questions and answers
Here’s a list of 50 HTML interview questions and answers covering various aspects of HTML, from beginner to advanced levels:
Basic Questions
What is HTML?
Answer: HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications.
What is the purpose of <!DOCTYPE html>?
Answer: It declares the document type and version of HTML. It helps the browser to render the content correctly.
What are HTML tags?
Answer: Tags are elements in HTML used to define the structure and content of a web page. Example: <div>, <h1>, <p>.
What are the different types of lists in HTML?
Answer: Ordered (<ol>), unordered (<ul>), and description (<dl>).
What is the difference between an element and a tag?
Answer: A tag is part of the element. An element includes the opening tag, the closing tag, and the content between them.
What is a self-closing tag?
Answer: A tag that doesn't need a closing tag. Example: <img>, <br>, <hr>.
What is an attribute in HTML?
Answer: Attributes provide additional information about an element. Example: <img src="image.jpg" alt="description">.
What is the difference between id and class attributes?
Answer: id is unique and used for a single element, while class can be applied to multiple elements.
How do you create a hyperlink in HTML?
Answer: Using the <a> tag: <a href="url">Link</a>.
What is the <head> tag used for?
Answer: It contains meta-information about the HTML document, like the title, links to stylesheets, and scripts.
Intermediate Questions
What are semantic HTML elements?
Answer: Elements that clearly define their meaning in a human- and machine-readable way. Example: <article>, <section>, <header>, <footer>.
What’s the difference between block-level and inline elements?
Answer: Block-level elements take up the full width of their container (e.g., <div>, <p>), while inline elements only take up as much space as their content (e.g., <span>, <a>).
How do you include images in HTML?
Answer: Using the <img> tag: <img src="image.jpg" alt="description">.
What is the <table> tag used for?
Answer: To create tables. It includes elements like <tr>, <th>, and <td> for rows, headers, and cells.
How do you embed videos in HTML?
Answer: Using the <video> tag: <video controls> <source src="movie.mp4" type="video/mp4"> </video>.
What is an iframe?
Answer: An inline frame used to embed another HTML document within the current one: <iframe src="url"></iframe>.
What is the <meta> tag used for?
Answer: It provides metadata about the HTML document, such as character set, page description, and keywords.
How do you comment in HTML?
Answer: <!-- Comment -->.
What is the purpose of the <form> tag?
Answer: It is used to collect user input through elements like <input>, <textarea>, <select>, etc.
How do you link a CSS file to an HTML document?
Answer: Using the <link> tag inside the <head>: <link rel="stylesheet" href="styles.css">.
Advanced Questions
What is the difference between the <b> and <strong> tags?
Answer: <b> simply makes text bold, while <strong> indicates that the text is of strong importance.
What is the difference between the <i> and <em> tags?
Answer: <i> makes text italic, while <em> emphasizes the text.
What is HTML5?
Answer: The latest version of HTML, with new elements, attributes, and behaviors. It also offers better support for multimedia and graphical content.
What are new form elements in HTML5?
Answer: Some new elements include <input type="email">, <input type="number">, <input type="date">, and <input type="range">.
What is the <canvas> tag used for?
Answer: To draw graphics on the fly via JavaScript.
What are Web Workers in HTML5?
Answer: Web Workers allow scripts to run in the background without affecting the performance of the web page.
What is the purpose of the <nav> tag in HTML5?
Answer: It defines a block of navigation links.
How do you create a checkbox and a radio button in HTML?
Answer:
Checkbox: <input type="checkbox">
Radio button: <input type="radio">
What is the purpose of the data-* attribute in HTML5?
Answer: It stores custom data that can be used in JavaScript.
What is the difference between <section> and <div>?
Answer: <section> is a semantic element representing a standalone section, while <div> is a generic container with no semantic meaning.
What is the <figure> and <figcaption> tag used for?
Answer: They are used to group media content (like images, charts) with their caption.
How do you make an element draggable in HTML5?
Answer: Using the draggable="true" attribute on the element.
What is the difference between <input type="submit"> and <button type="submit">?
Answer: <input> creates a basic submit button, while <button> allows you to add additional HTML inside, like images or text.
What is local storage in HTML5?
Answer: It allows you to store data in the browser persistently (even after the browser is closed).
What are the new media elements introduced in HTML5?
Answer: <audio>, <video>, and <source>.
What is the difference between sessionStorage and localStorage?
Answer: localStorage persists even after the browser is closed, while sessionStorage is cleared when the page session ends.
What is the difference between the <article> and <aside> elements?
Answer: <article> represents a complete, independent content piece, while <aside> contains content related to the main content, such as sidebars.
How can you make an HTML element editable?
Answer: By using the contenteditable attribute: <div contenteditable="true">Edit me</div>.
What is the placeholder attribute in HTML5?
Answer: It provides a hint to the user of what can be entered in the input field.
What is the <output> element in HTML5?
Answer: It is used to display the result of a calculation.
HTML5 APIs
What is the Geolocation API in HTML5?
Answer: It allows the browser to get the geographical position of the user.
What is the Drag and Drop API in HTML5?
Answer: It allows for the dragging and dropping of HTML elements.
What is the History API in HTML5?
Answer: It allows manipulation of the browser history through JavaScript, enabling navigation without refreshing the page.
What is the WebSocket API in HTML5?
Answer: It enables real-time, two-way communication between the browser and the server.
What is the <progress> element in HTML5?
Answer: It represents the completion progress of a task, such as a download.
What is the purpose of the <mark> tag in HTML5?
Answer: It highlights or marks text for reference or importance.
What is the difference between the <audio> and <embed> tags?
Answer: <audio> is used for playing sound, while <embed> is used for embedding external resources like PDFs or videos.
What are Microdata in HTML5?
Answer: Microdata allows you to nest metadata within HTML content to define machine-readable data.
What is the difference between <bdi> and <bdo>?
Answer: <bdi> isolates a span of text from the surrounding text's directionality, while <bdo> explicitly sets the text direction.
What is the <datalist> element?
Answer: It provides a list of predefined options to an <input> element.
No comments:
Post a Comment