HTML
30 Questions
Practice Problems
HTML Interview Questions
30 Questions
HTML Basics
What does HTML stand for?
HTML stands for HyperText Markup Language. It's used to structure content on the web — headings, paragraphs, images, links, and more. It's not a programming language; it doesn't calculate or run logic. Browsers read HTML to know what to display and how to arrange it. CSS handles styling, JavaScript adds interactivity, and HTML forms the base underneath both.
What does <!DOCTYPE html> do?
<!DOCTYPE html> sits at the very top of every HTML file. It's not an actual HTML tag — it's a signal to the browser about which HTML version the page follows, so rendering happens correctly. Without it, browsers may switch into "quirks mode" and render things inconsistently. It's also not case-sensitive, so uppercase or lowercase both work fine.
What is the difference between an element and a tag?
A tag is just the bracketed marker, like <h1> or <p>. An element is the complete unit — the opening tag, closing tag, and the content in between. So <p>Hello</p> is one element made of two tags. People often use both words interchangeably, but technically the tag is just one piece of the full element.
What are void/self-closing elements in HTML?
Void elements are tags that never wrap content and don't need a closing tag. Examples include <img>, <br>, <input>, and <hr>. They stand alone because they don't have children. The full list also includes <area>, <base>, <col>, <embed>, <link>, <meta>, <param>, <source>, <track>, and <wbr>. Adding a closing tag to these is unnecessary.
What is the purpose of the <meta> tag?
The <meta> tag stores information about the page that isn't visible to users but is read by machines. It helps browsers know how to render or refresh content, and helps search engines understand keywords and page context. It sits inside the <head> section and never appears directly on the rendered page itself.
How do you define the character encoding in HTML?
Character encoding is set using a meta tag inside <head>: <meta charset="UTF-8"> This tells the browser how to interpret text and special characters correctly. UTF-8 is the standard choice since it supports almost every language and symbol out there. Without proper encoding, pages can show broken or garbled characters instead of normal readable text.
What is the difference between <b> and <strong>?
Both make text bold, but their meaning differs. <b> is purely visual — no added significance. <strong> tells browsers and search engines the text is genuinely important, and screen readers emphasize it when read aloud. <p>This is <b>bold</b> text.</p> <p>This is <strong>important</strong> text.</p>
What is the difference between <i> and <em>?
<i> italicizes text purely for style, with no added meaning. <em> adds emphasis and actually changes how the sentence is meant to be read, and screen readers stress those words aloud. <p>I am learning <i>HTML</i>.</p> <p>I <em>really</em> like coding.</p> Use <em> when the emphasis actually matters to meaning.
Links & Media
How do you create a hyperlink in HTML?
Hyperlinks use the <a> tag combined with an href attribute pointing to the destination URL. <a href="https://www.google.com">Visit Google</a> Clicking the link text takes the user to that address. You can link to external sites, internal pages, files, or even sections within the same page using anchors.
What does target="_blank" do?
target="_blank" makes a link open in a new browser tab instead of replacing the current page. It's commonly used for external links so visitors can check another site without losing their place on yours. <a href="https://example.com" target="_blank">Open Website</a>
What is the purpose of the alt attribute on <img>?
The alt attribute provides backup text for an image, shown if the image fails to load. Screen readers use it to describe images to visually impaired users. It also improves SEO since search engines read alt text to understand image content. <img src="flower.jpg" alt="Red rose flower">
What is the difference between absolute and relative URLs?
An absolute URL includes the full address, starting with https://. A relative URL only gives the file path within the current site, without the domain. <a href="https://example.com/about">Absolute</a> <a href="about.html">Relative</a> Relative URLs are mainly used for linking pages within the same website.
How do you embed a video in HTML?
Videos are embedded using the <video> tag with a src pointing to the file. Adding controls gives viewers play, pause, and volume buttons. <video src="movie.mp4" controls></video> Without controls, the video loads but users have no way to interact with playback.
How do you embed audio in HTML?
Audio files are embedded with the <audio> tag. The controls attribute adds play, pause, and volume options directly in the browser. <audio src="song.mp3" controls></audio> Just like video, skipping controls means the audio loads silently with no visible player.
What is the <figure> and <figcaption> element used for?
<figure> groups an image or media item together with related content, and <figcaption> provides its caption or description. <figure> <img src="nature.jpg" alt="Nature"> <figcaption>Beautiful nature view</figcaption> </figure> This keeps visuals and their descriptions semantically linked instead of loosely placed nearby.
What is the difference between src and href?
src embeds a resource directly into the page, like an image, video, or script. href creates a link to another page or file that the user navigates to. <img src="image.jpg" alt="Image"> <a href="about.html">About Page</a> One loads content in; the other points elsewhere.
Forms & Input
What are the common input types in HTML5?
HTML5 offers several input types beyond plain text: email, password, number, date, checkbox, and radio, among others. These help browsers validate data automatically and improve the user experience. <input type="email" placeholder="Enter email"> <input type="date"> <input type="password">
What is the difference between GET and POST form methods?
GET sends form data through the URL, making it visible — good for searches or non-sensitive data. POST sends data in the request body, keeping it hidden — better for logins, sign-ups, or sensitive details. <form method="GET"></form> <form method="POST"></form>
What does the required attribute do on an input?
required forces users to fill a field before the form can be submitted. The browser blocks submission and shows a warning if the field is left empty. It's a simple way to add basic validation without writing JavaScript. <input type="text" required>
What is the purpose of the <label> element?
<label> provides a text description for a form input, improving accessibility since screen readers rely on it. Clicking the label also focuses the connected input field. <label for="email">Email:</label> <input type="email" id="email"> This is especially useful for small elements like checkboxes and radio buttons.
What is the difference between name and id attributes on inputs?
id uniquely identifies an element for CSS, JavaScript, or label connections. name is what gets sent to the server when the form is submitted. Two related inputs can share a name while having different id values. <input type="text" id="username" name="user">
What is the difference between disabled and readonly?
disabled blocks all interaction, and its value isn't submitted with the form. readonly lets users view and select the value, but not edit it — and it's still included when the form is submitted. <input type="text" value="Admin" readonly> <input type="text" value="Blocked" disabled>
Semantic HTML
What is semantic HTML?
Semantic HTML uses tags that describe the actual purpose of content, rather than generic containers. It improves accessibility, SEO, and code readability because browsers and search engines understand page structure more clearly. <header>Website Header</header> <article>Blog Content</article> <footer>Footer</footer>
What is the difference between <section> and <div>?
<section> groups related content around a specific topic and carries semantic meaning. <div> is a plain container used purely for layout or styling, with no meaning attached to the content inside it. <section><h2>Sports News</h2></section> <div class="container"></div>
What is the purpose of the <article> element?
<article> wraps content that can stand entirely on its own, such as blog posts or news stories. Search engines and screen readers treat it as independent content, separate from the rest of the page. <article> <h2>HTML Basics</h2> <p>Learning semantic HTML.</p> </article>
What is the <aside> element used for?
<aside> holds content related to the main page but not part of it directly — sidebars, tips, ads, or related links. It separates supporting information from the primary content clearly and semantically. <aside> <h3>Related Articles</h3> </aside>
Tables
What HTML elements are used to create a table?
Tables use <table> as the wrapper, <tr> for rows, <th> for header cells, and <td> for regular data cells. <table> <tr> <th>Name</th> <td>John</td> </tr> </table> Together these elements build the full row-and-column structure of a table.
What is the difference between <th> and <td>?
<th> defines a header cell and is bold and centered by default. <td> holds regular data with no special styling applied automatically. <tr> <th>Age</th> <td>22</td> </tr> Screen readers also treat <th> differently, announcing it as a header for context.
What is the colspan and rowspan attribute?
colspan makes a cell span across multiple columns. rowspan makes a cell span across multiple rows. Both are useful for merging cells in complex table layouts with grouped data. <td colspan="2">Merged Columns</td> <td rowspan="2">Merged Rows</td>
What is the scope attribute on <th>?
scope tells screen readers whether a header applies to a row, column, or group of cells. It improves accessibility by making header-to-data relationships clearer for users relying on assistive technology. <th scope="col">Name</th> <th scope="row">Student 1</th>