Learn with visible answers or test yourself before revealing each explanation.
What is semantic HTML?
Why does DOCTYPE matter?
How do forms validate?
Choose your mode
HTML stands for HyperText Markup Language. It is a declarative markup language that gives web content structure and meaning so browsers and assistive technologies can interpret headings, links, forms, media, and other content. CSS controls presentation, while JavaScript adds programmable behavior.
<h1>HTML basics</h1>
<p>HTML structures web content.</p><!DOCTYPE html> is the required HTML preamble that triggers no-quirks mode. It does not select an HTML version. If it is missing or invalid, the browser can enter quirks mode and emulate legacy rendering behavior.
<!DOCTYPE html>
<html lang="en">
</html>An element is the document structure represented in the DOM. Tags are the source-code syntax that mark an element's start and end, while attributes appear in a start tag and configure or describe the element. Some elements are void and therefore have no end tag.
<a href="https://example.com">Visit example</a>A good <title> is unique, concise, and describes the page's purpose. Browsers use it for tabs and history, assistive technology uses it to identify the page, and search engines may use it as the result title. Put page-specific information before a repeated site name when practical.
<title>HTML Interview Questions | PrepLoom</title><code> identifies a fragment of computer code, <kbd> represents user input such as a keyboard shortcut, and <pre> preserves whitespace and line breaks for preformatted content.
<code>const value = 5;</code>
<kbd>Ctrl + S</kbd>
<pre>Line 1
Line 2</pre>An absolute URL includes the full scheme, domain, and path. A relative URL is resolved from the current document URL or from a URL set by the <base> element.
<a href="https://example.com/page">Absolute</a>
<a href="/page">Relative</a>Character references represent reserved or hard-to-type characters in HTML. For example, < displays a less-than sign and & displays an ampersand without confusing them with markup.
<div>
Fish & chipsThese elements identify meaningful page regions. <header> contains introductory content, <footer> contains information about its nearest section or page, <nav> identifies a major navigation block, and <main> contains the document's dominant content. A document must not contain more than one <main> element without the hidden attribute.
<header>Page header</header>
<nav aria-label="Primary">...</nav>
<main>Main content</main>
<footer>Footer information</footer>The lang attribute declares the natural language of the document or a specific passage. It helps assistive technologies choose appropriate pronunciation rules and supports language-aware tools such as translation and spell checking. Set it on <html> and override it only where the language changes.
<html lang="en">Progressive enhancement starts with usable HTML, then adds CSS and JavaScript without making essential content depend on them. <noscript> can provide instructions or fallback content when scripting is disabled, but it is not a substitute for building a resilient baseline experience.
<noscript>This feature requires JavaScript.</noscript><link> declares a relationship between the current document and another resource, commonly for stylesheets, icons, preloads, and canonical URLs. <a href> creates a hyperlink users can activate to navigate to a resource or location.
<link rel="stylesheet" href="styles.css">
<a href="/docs">Read the docs</a>tabindex controls whether an element can receive focus and whether it participates in sequential keyboard navigation. Use native interactive elements whenever possible, tabindex="0" only when a custom focusable element is justified, and tabindex="-1" for programmatic focus. Avoid positive values because they override the natural order.
<h2 tabindex="-1">Updated section</h2>The <head> contains document metadata and resource relationships rather than the page's visible content. A useful baseline includes a character encoding, a descriptive title, viewport metadata for responsive layouts, and required resource links or scripts.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website title</title>
</head>Semantic HTML uses elements whose names communicate the role and structure of their content. This improves accessibility, maintainability, and machine understanding. Use <div> or <span> when no native element accurately expresses the intended meaning and a generic styling or scripting hook is needed.
<article>Standalone content</article>
<div class="layout-wrapper">Generic layout container</div>No. Inline and block describe CSS box behavior, not an element's semantic meaning. User-agent styles give elements default display values, but CSS can change them. Choose an HTML element for meaning first, then control its layout with CSS.
<span>Inline content</span>
<div>Block content</div>A <section> groups related content around a theme and usually has a heading. An <article> represents self-contained content that could stand on its own or be reused independently.
<section>
<h2>Services</h2>
</section>
<article>
<h2>News item</h2>
</article>Use headings to represent the document hierarchy, not to achieve a visual size. Start with a heading that names the page's main topic, then nest subsections logically without choosing levels for styling. CSS can change appearance, while the heading level preserves structure for navigation and assistive technology.
<h1>Account settings</h1>
<section>
<h2>Security</h2>
<h3>Two-factor authentication</h3>
</section>Use <a href> to navigate to a URL and <button> to perform an action in the current interface. Native elements provide the correct keyboard behavior and semantics automatically. A button associated with a form defaults to submission unless its type is set to button or reset.
<a href="/settings">Open settings</a>
<button type="button">Open menu</button>The <base> element sets the URL used to resolve relative URLs and can define a default browsing-context target for links and forms. A document must contain no more than one <base> element, and changing it can affect every relative URL, including fragment links.
<base href="https://example.com/docs/">An <iframe> embeds another document with its own browsing context. Give it a descriptive title, restrict capabilities with sandbox and allow, use a trusted source, and grant only the permissions the embed needs. Lazy loading can defer off-screen embeds.
<iframe src="https://example.com/embed" title="Course preview" sandbox="allow-scripts" loading="lazy"></iframe>Use srcset and sizes when several files contain the same image at different resolutions and the browser should choose an efficient candidate. Use <picture> when the image content or crop must change by media condition, or when you need explicit format sources. The nested <img> remains required and provides the fallback and alternative text.
<picture>
<source media="(min-width: 800px)" srcset="wide.jpg">
<img src="square.jpg" alt="Team reviewing a design" width="480" height="480">
</picture>Treat alt text as a replacement for the image in its context, not as a generic visual description. Informative images need concise equivalent text, decorative images use alt="", and an image that is the only content of a link or button must describe that control's purpose. Nearby text should not be repeated unnecessarily.
<img src="team.jpg" alt="The support team at the help desk">
<img src="divider.svg" alt="">A data-* attribute stores application-specific information on an element. JavaScript can read and update it through the element's dataset property, which converts kebab-case names to camelCase properties.
<div data-user-id="123">User</div>
<script>
const id = document.querySelector("div").dataset.userId;
</script><canvas> is a script-controlled bitmap surface suited to frequently redrawn, pixel-heavy scenes such as games or image processing. SVG keeps graphics as DOM elements and is often better for scalable diagrams, styling, and interaction. Canvas drawings do not automatically expose their visual content, so meaningful fallback or an accessible alternative is required.
<canvas id="chart" width="200" height="100"></canvas>
<script>
const context = document.querySelector("#chart").getContext("2d");
context.fillRect(50, 25, 100, 50);
</script><fieldset> groups related form controls, and <legend> gives that group an accessible name. This is especially useful for radio buttons, checkboxes, and related personal-information fields.
<fieldset>
<legend>Contact preference</legend>
<label><input type="radio" name="contact"> Email</label>
</fieldset>A form submits successful controls that have names to the URL in action using its configured method and encoding. Give every control an accessible name, use suitable input types, associate instructions and errors with their controls, preserve keyboard operation, and always validate again on the server.
<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button>Subscribe</button>
</form>Use GET for safe, repeatable retrieval such as search or filtering; its submitted data becomes part of the URL and can be bookmarked. Use POST when the submission creates or changes server state, sends sensitive values that should not appear in the URL, or carries a larger payload. HTTPS is still required because POST does not encrypt data by itself.
<form action="/search" method="get">...</form>
<form action="/orders" method="post">...</form>enctype defines how form data is encoded for submission. The default is application/x-www-form-urlencoded. Use multipart/form-data for file uploads and text/plain mainly for debugging, not normal production submissions.
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
</form><strong> marks content as important, serious, or urgent. <b> draws attention without implying extra importance, such as a keyword in a summary. Their default visual styling may be similar, but their meaning differs.
<b>Keyword</b>
<strong>Important warning</strong>HTML attributes configure an element's content, state, or behavior. CSS properties control presentation and layout. Some presentational HTML attributes exist, but CSS is generally the correct tool for styling.
<input type="text" disabled>
<p style="color: blue">Styled text</p>Use ARIA when native HTML cannot express a required role, state, property, or relationship. Prefer native elements first. ARIA changes information exposed to accessibility APIs, but it does not add keyboard behavior, focus management, or event handling; those must still be implemented correctly.
<button aria-label="Close dialog">×</button>The DOM is the programming interface that represents the parsed document as a tree of nodes. Elements, text, comments, and the document itself have parent, child, and sibling relationships that JavaScript can inspect and modify.
<html>
<body>
<div>Example</div>
</body>
</html>A parser-inserted classic script without async or defer blocks parsing while it is fetched and executed. async fetches in parallel and executes as soon as it is ready, so execution order is not guaranteed. defer fetches in parallel and executes after parsing in document order, before DOMContentLoaded. Module scripts are deferred by default; defer has no effect on them, while async makes them run as soon as their dependency graph is ready.
<script src="legacy.js"></script>
<script src="analytics.js" async></script>
<script src="app.js" defer></script>
<script type="module" src="main.js"></script>Provide a unique descriptive title, useful main content, logical headings, crawlable links, meaningful link text, canonical URLs when duplicate URLs are possible, and structured data only when it accurately represents visible content. A meta description can influence the search snippet, but it does not replace useful page content.
<meta name="description" content="A clear summary of this page">HTML provides ordered, unordered, and description lists.
<dl>
<dt>HTML</dt>
<dd>A markup language for the web.</dd>
</dl>Form validation checks whether submitted values meet expected constraints. HTML provides attributes such as required, minlength, maxlength, min, max, pattern, and specialized input types. Server-side validation is still required because client-side checks can be bypassed.
<input type="email" name="email" required>An id identifies one element and must be unique within the document. A class is reusable and can be applied to many elements. Both can be used by CSS and JavaScript, but classes are usually better for reusable styling.
<div id="profile">Profile</div>
<div class="card">First card</div>
<div class="card">Second card</div>Void elements cannot contain child content and do not have closing tags. Examples include <img>, <input>, <br>, <hr>, <meta>, and <link>. The slash in forms such as <br /> is optional in HTML and does not make an element self-closing in the XML sense.
<img src="photo.jpg" alt="Team working together">
<br>
<input type="text">HTML5 is still widely used as an informal name for modern HTML, but HTML is now maintained as a Living Standard rather than shipped as occasional numbered versions. Features evolve individually, so support should be checked per feature instead of assuming an HTML5 compatibility level.