Curated questions covering semantic elements, HTML5 APIs, forms, accessibility, canvas, SVG, responsive design, and advanced HTML concepts.
HTML5 is the latest version of HTML. It introduced semantic elements (header, nav, article, section, footer), native audio/video support, the Canvas API, Web Storage (localStorage/sessionStorage), Web Workers, WebSockets, and improved form input types. HTML5 also deprecated presentational elements like <font> and <center>.
Semantic elements clearly describe their meaning to both the browser and developer. Examples: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time>. They improve accessibility, SEO, and code readability.
<div> is a block-level element that takes the full width and starts on a new line. <span> is an inline element that only takes as much width as its content. Use <div> for grouping block content and <span> for styling inline text.
<!DOCTYPE html> tells the browser which version of HTML the page uses. Without it, browsers enter quirks mode and may render the page inconsistently across different browsers.
<strong> indicates important text (semantic) while <b> is purely visual bold with no semantic meaning. Similarly, <em> indicates stressed emphasis (semantic) while <i> is purely visual italic. Screen readers treat <strong> and <em> differently.
Data attributes (data-*) allow you to store custom data on HTML elements. They are accessed via JavaScript using the dataset property.
<div data-user-id="42" data-role="admin">User</div>
<script>
const div = document.querySelector("div");
console.log(div.dataset.userId); // "42"
console.log(div.dataset.role); // "admin"
</script>Void elements are self-closing elements that cannot have child nodes and do not need a closing tag. Examples: <br>, <hr>, <img>, <input>, <link>, <meta>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>.
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that improve accessibility for users with disabilities. ARIA roles, states, and properties help screen readers understand dynamic content. Examples: role="button", aria-label, aria-hidden, aria-expanded, aria-live.
<link> is used in <head> to link external resources like stylesheets, favicons, and preloaded assets — it has no visual representation. <a> (anchor) creates clickable hyperlinks in the page content for navigation.
Meta tags provide metadata about the HTML document. Common uses: charset declaration, viewport settings for responsive design, SEO description and keywords, Open Graph tags for social sharing.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description for SEO">
<meta property="og:title" content="Open Graph Title">The Canvas API provides a 2D drawing surface via the <canvas> element. You draw using JavaScript with the 2D rendering context. Used for games, data visualizations, image manipulation, and animations.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#38bdf8";
ctx.fillRect(10, 10, 150, 100);HTML forms collect user input. Key <form> attributes: action (URL to submit to), method (GET or POST), enctype (multipart/form-data for file uploads), novalidate (disable browser validation), autocomplete.
The <picture> element provides multiple image sources for different screen sizes or formats, enabling responsive images and modern format support (WebP, AVIF).
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback image">
</picture><iframe> embeds another HTML page within the current page with its own browsing context. <embed> embeds external content like PDFs or plugins. <iframe> is more commonly used and supports the sandbox attribute for security.
Web Workers run JavaScript in a background thread separate from the main UI thread. They prevent heavy computations from blocking the UI. Workers communicate with the main thread via postMessage() and cannot access the DOM directly.
srcset provides multiple image sources at different resolutions. The browser picks the most appropriate one based on device pixel ratio and viewport size, improving performance on high-DPI screens.
<img
src="image-400.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Responsive image"><head> contains metadata not displayed on the page: title, meta tags, CSS links, script references, and favicons. <body> contains all visible page content: text, images, links, forms, and other elements.
tabindex controls the tab order of focusable elements. tabindex="0" adds an element to the natural tab order. tabindex="-1" makes it focusable via JavaScript but not via keyboard tab. Avoid positive values as they create confusing tab orders.
<button> is more flexible — it can contain HTML content (icons, styled text). <input type="button"> only supports plain text via the value attribute. <button> defaults to type="submit" inside a form, so always specify type="button" when not submitting.
The <template> element holds HTML that is not rendered when the page loads. Its content is inert (scripts do not run, images do not load). It is used as a client-side template that can be cloned and inserted into the DOM via JavaScript.
<th> defines a tl-table header cell — bold and centered by default with semantic meaning for accessibility. <td> defines a standard data cell. Use scope="col" or scope="row" on <th> to associate headers with data cells.
<details> creates a native disclosure widget — content is hidden by default and shown when the user clicks. <summary> provides the visible label/toggle. No JavaScript required.
<details>
<summary>What is HTML?</summary>
<p>HTML is the standard markup language for web pages.</p>
</details>Both submit a form. <button type="submit"> is more flexible — it can contain HTML (icons, styled text) and its label is separate from its value. <input type="submit"> only supports plain text via the value attribute. Prefer <button> for richer UI.
<datalist> provides a list of predefined options for an <input> element, creating an autocomplete/suggestion dropdown. Unlike <select>, the user can still type a custom value.
<input list="languages" name="lang" placeholder="Choose a language">
<datalist id="languages">
<option value="JavaScript">
<option value="Python">
<option value="Java">
</datalist><progress value="70" max="100">70%</progress>
<meter value="0.7" low="0.3" high="0.8" optimum="1">70%</meter><dialog> is a native HTML modal/dialog element. Use the open attribute or JavaScript showModal() / show() methods. It supports the ::backdrop pseudo-element for overlay styling.
<dialog id="modal">
<p>Are you sure?</p>
<button onclick="document.getElementById('modal').close()">Close</button>
</dialog>
<button onclick="document.getElementById('modal').showModal()">Open</button><img> embeds an image. <figure> is a semantic tl-container for self-contained content (images, diagrams, code snippets) referenced from the main content. <figcaption> inside <figure> provides an accessible caption.
<figure>
<img src="chart.png" alt="Sales chart for Q1 2026">
<figcaption>Figure 1: Q1 2026 Sales Performance</figcaption>
</figure><base> specifies the base URL for all relative URLs in the document and the default link target. Only one <base> element is allowed per page and it must be in <head>.
<head>
<base href="https://www.tutorialslogic.com/" target="_blank">
</head>
<!-- All relative links now resolve from tutorialslogic.com --><link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="prefetch" href="/next-page.html">
<link rel="preconnect" href="https://fonts.googleapis.com">HTML5 introduced many new input types that provide native UI controls and built-in validation.
Scripts in <head> without defer/async block HTML parsing, delaying page render. Placing scripts at the end of <body> allows HTML to parse first. The modern best practice is <script defer> in <head> — it downloads in parallel and executes after parsing.
<abbr> marks abbreviations and acronyms. The title attribute provides the full expansion shown as a tooltip. <acronym> was deprecated in HTML5 — use <abbr> for both.
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="World Wide Web Consortium">W3C</abbr><output> represents the result of a calculation or user action. It is associated with form inputs via the for attribute and updated dynamically via JavaScript.
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result" for="a b">0</output>
</form><address> is a semantic element specifically for contact information related to the nearest <article> or <body>. Screen readers and search engines understand it as contact info. Use it instead of a plain <p> for contact details.
contenteditable="true" makes any HTML element editable by the user directly in the browser, like a rich text editor. Used in WYSIWYG editors and inline editing UIs.
<div contenteditable="true" style="border:1px solid #ccc; padding:8px">
Click here to edit this text...
</div><noscript> provides fallback content displayed when JavaScript is disabled. Feature detection checks for specific API support at runtime (e.g., if ("IntersectionObserver" in window)), allowing graceful degradation regardless of whether JS is enabled.
<map> defines an image map — a clickable image with multiple hotspot regions. <area> defines each clickable region with shape (rect, circle, poly), coords, href, and alt attributes.
<img src="world.png" usemap="#worldmap" alt="World map">
<map name="worldmap">
<area shape="rect" coords="0,0,200,100" href="/europe" alt="Europe">
<area shape="circle" coords="300,150,50" href="/asia" alt="Asia">
</map><time> is a semantic element for dates and times. The datetime attribute provides a machine-readable format while the element content can be human-readable. This helps search engines, calendar apps, and screen readers understand temporal data.
<p>Published on <time datetime="2026-04-22">April 22, 2026</time></p>
<p>Event starts at <time datetime="2026-04-22T09:00">9:00 AM</time></p><slot> is part of the Web Components API. It defines a placeholder inside a Shadow DOM where the consumer can inject their own HTML content. Named slots allow multiple injection points.
<template id="card-template">
<div class="tl-card">
<slot name="title">Default Title</slot>
<slot></slot>
</div>
</template>Explore 500+ free tutorials across 20+ languages and frameworks.