Efiwe: HTML Dictionary

Tag	Description
`<!--...-->`	HTML Comment: This allows you to write notes or explanations in your code that won't be visible on the actual webpage. Anything between `<!-- and -->` is completely ignored by the browser. Example: `<!-- This is a note to myself -->`. It's useful for documenting your code or temporarily hiding content without deleting it. Introduced in: HTML → Level 1 → Challenge 22
`<!DOCTYPE>`	Document Type Declaration: This isn't technically a tag but a declaration that tells the browser what version of HTML you're using. It must be the very first thing in your HTML document, before the `<html>` tag. For modern HTML5, you simply write `<!DOCTYPE html>`. This helps the browser render your page correctly. Introduced in: HTML → Level 1 → Challenge 1
`<a>`	Anchor/Link: Creates clickable links that take users to other pages or locations. You use the href attribute to specify where the link goes. Example: `<a href="https://example.com">Click here</a>`. The text between the opening and closing tags is what users see and click on. Can link to other websites, other pages on your site, or specific sections on the same page. Introduced in: HTML → Level 1 → Challenge 23
`<abbr>`	Abbreviation: Used to mark up abbreviations or acronyms. You can use the title attribute to show the full meaning when users hover over it. Example: `<abbr title="Hypertext Markup Language">HTML</abbr>`. This helps with accessibility and provides additional context for readers. Introduced in: HTML → Level 1 → Challenge 20
`<acronym>`	Acronym (Deprecated): This was used for acronyms but is now obsolete in HTML5. You should use `<abbr>` instead for all abbreviations and acronyms. It worked similarly to `<abbr>` but has been removed from modern HTML standards. Introduced in: HTML → Level 2 → Challenge 52
`<address>`	Contact Information: Contains contact information for the author or owner of a document or article. Typically displays in italic text. Example: `<address>Email: info@example.com</address>`. Usually used in footers or at the end of articles to provide ways to contact someone. Introduced in: HTML → Level 6 → Challenge 188
`<applet>`	Java Applet (Deprecated): This was used to embed Java applets (small applications) into web pages. It's completely obsolete now and no longer supported by modern browsers. Use `<object>` or `<embed>` for similar functionality, though Java applets themselves are rarely used anymore. Introduced in: HTML → Level 6 → Challenge 183
`<area>`	Image Map Area: Defines clickable areas within an image map. Used inside a `<map>` tag to create different clickable regions on a single image. Example: you could have a map image where clicking different countries takes you to different pages. Requires coordinates and a shape attribute. Introduced in: HTML → Level 6 → Challenge 170
`<article>`	Article Content: Represents a self-contained piece of content that could stand alone, like a blog post, news article, or forum post. It should make sense on its own even if taken out of the page. Search engines and screen readers use this to identify independent content sections. Introduced in: HTML → Level 2 → Challenge 41
`<aside>`	Sidebar Content: Contains content that's related to the main content but separate from it, like sidebars, pull quotes, or advertising. Think of it as "side information" that complements but isn't essential to the main content. Often styled to appear beside the main content. Introduced in: HTML → Level 2 → Challenge 53
`<audio>`	Audio Player: Embeds audio content like music or podcasts directly into your webpage. Example: `<audio src="song.mp3" controls></audio>`. The controls attribute adds play, pause, and volume buttons. You can provide multiple audio formats for different browser compatibility. Introduced in: HTML → Level 2 → Challenge 37
`<b>`	Bold Text: Makes text bold without implying any special importance (unlike `<strong>`). It's purely a visual style. Example: `<b>This is bold</b>`. Use this when you want bold text for stylistic purposes, not to emphasize importance. For important text, use `<strong>` instead. Introduced in: HTML → Level 4 → Challenge 100
`<base>`	Base URL: Specifies a base URL for all relative URLs in a document. Goes in the `<head>` section. Example: `<base href="https://example.com/">` means all relative links will be relative to that URL. There can only be one `<base>` tag per document. Introduced in: HTML → Level 1 → Challenge 10
`<basefont>`	Base Font (Deprecated): Used to set a default font, size, and color for all text in a document. This is obsolete in HTML5. Use CSS instead to control typography. It was removed because styling should be done with CSS, not HTML. Introduced in: HTML → Level 3 → Challenge 87
`<bdi>`	Bidirectional Isolate: Isolates text that might be formatted in a different direction (left-to-right vs right-to-left) from the surrounding text. Useful when you have user-generated content that might be in Arabic or Hebrew mixed with English. Prevents directional formatting conflicts. Introduced in: HTML → Level 6 → Challenge 162
`<bdo>`	Bidirectional Override: Overrides the current text direction. Use the dir attribute with values "ltr" (left-to-right) or "rtl" (right-to-left). Example: `<bdo dir="rtl">This text will go right to left</bdo>`. Forces text to display in a specific direction regardless of the characters used. Introduced in: HTML → Level 6 → Challenge 163
`<big>`	Big Text (Deprecated): Made text one size larger than the surrounding text. Obsolete in HTML5 - use CSS like font-size: larger; instead. Removed because HTML should focus on meaning, not appearance. Introduced in: HTML → Level 3 → Challenge 86
`<blockquote>`	Block Quotation: Used for longer quotations that should be set apart from the regular text, typically indented. Example: `<blockquote>This is a long quote from someone else.</blockquote>`. Usually displayed with margins on both sides. Use the cite attribute to specify the source URL. Introduced in: HTML → Level 2 → Challenge 44
`<body>`	Document Body: Contains all the visible content of your webpage - everything users actually see and interact with. There should be exactly one `<body>` tag per HTML document, and it comes after the `<head>` tag. Everything from text to images to videos goes inside the body. Introduced in: HTML → Level 1 → Challenge 15
`<br>`	Line Break: Creates a single line break, moving content to the next line. It's a self-closing tag, meaning it doesn't have a closing tag. Example: `Line 1<br>Line 2` puts Line 2 below Line 1. Use sparingly - for most spacing, CSS is better. Mainly for breaks within text like addresses or poems. Introduced in: HTML → Level 5 → Challenge 154
`<button>`	Button: Creates a clickable button. Unlike `<input type="button">`, you can put HTML content inside it. Example: `<button>Click Me!</button>`. You can add images, icons, or styled text inside. Use the type attribute ("submit", "reset", or "button") to control behavior in forms. Introduced in: HTML → Level 5 → Challenge 146
`<canvas>`	Graphics Canvas: Creates a blank rectangular area where you can draw graphics using JavaScript. Used for animations, games, data visualizations, and image manipulation. Example: `<canvas id="myCanvas" width="200" height="100"></canvas>`. The canvas itself is just an empty space - all the actual drawing is done with JavaScript code. Introduced in: HTML → Level 3 → Challenge 69
`<caption>`	Table Caption: Provides a title or description for a table. Must be placed immediately after the opening `<table>` tag. Example: `<caption>Monthly Sales Data</caption>`. Helps users understand what the table is about before reading it. Important for accessibility. Introduced in: HTML → Level 3 → Challenge 89
`<center>`	Centered Content (Deprecated): Used to center-align text and other content. Obsolete in HTML5 - use CSS text-align: center; instead. Removed because alignment is a visual style that belongs in CSS, not HTML structure. Introduced in: HTML → Level 3 → Challenge 82
`<cite>`	Citation: Marks the title of a creative work like a book, movie, song, or article. Example: `<cite>The Great Gatsby</cite>`. Typically displays in italics. Used for references and citations, helping distinguish work titles from regular text. Introduced in: HTML → Level 2 → Challenge 43
`<code>`	Code: Displays text as computer code in a monospace font. Example: `<code>console.log('Hello')</code>`. Use this for inline code snippets within regular text. For multi-line code blocks, combine it with `<pre>`. Helps distinguish code from regular text. Introduced in: HTML → Level 3 → Challenge 71
`<col>`	Table Column: Defines properties for a column within a table. Used inside `<colgroup>`. It's self-closing and doesn't contain content. Example: `<col style="background-color:yellow">`. Allows you to style entire columns at once without repeating styles for each cell. Introduced in: HTML → Level 3 → Challenge 91
`<colgroup>`	Column Group: Groups one or more columns in a table for formatting purposes. Contains `<col>` tags. Goes right after the `<caption>` (if present) and before any table rows. Useful for applying styles to multiple columns at once. Introduced in: HTML → Level 3 → Challenge 90
`<data>`	Machine-Readable Data: Links content to a machine-readable value. The value attribute contains data that computers can process, while the content is human-readable. Example: `<data value="12345">Product ABC</data>`. Useful for providing structured data that scripts or search engines can use. Introduced in: HTML → Level 2 → Challenge 57
`<datalist>`	Input Options List: Provides a list of predefined options for an `<input>` element, creating an autocomplete dropdown. Example: Users type in an input field and see suggestions. Link it to an input with the list attribute. Gives users suggestions while still allowing custom input. Introduced in: HTML → Level 5 → Challenge 132
`<dd>`	Description Details: Provides the description or definition in a description list. Must be used inside a `<dl>` tag and follows a `<dt>` (term) tag. Example: In a glossary, `<dd>` contains the definition. Multiple `<dd>` elements can follow a single `<dt>`. Introduced in: HTML → Level 2 → Challenge 50
`<del>`	Deleted Text: Indicates text that has been deleted from a document. Usually displays with a strikethrough line. Example: `<del>This was removed</del>`. Often used with `<ins>` to show edits. Can include datetime and cite attributes to explain when and why content was deleted. Introduced in: HTML → Level 6 → Challenge 176
`<details>`	Disclosure Widget: Creates an expandable/collapsible section that users can open and close. Contains a `<summary>` tag for the visible heading. Example: Click to reveal hidden content. Great for FAQs, additional information, or anything that should be hidden by default but accessible. Introduced in: HTML → Level 2 → Challenge 46
`<dfn>`	Definition Term: Marks the term being defined in a definition or explanation. Example: `<dfn>HTML</dfn>` is a markup language. Usually displayed in italics. Represents the first occurrence of a term that's being explained in the surrounding text. Introduced in: HTML → Level 2 → Challenge 49
`<dialog>`	Dialog Box: Creates a dialog box or modal window that can be shown or hidden. Example: `<dialog>This is a popup</dialog>`. Use JavaScript's show() or showModal() methods to display it. The open attribute makes it visible. Useful for popups, confirmations, or forms that appear over the main content. Introduced in: HTML → Level 6 → Challenge 167
`<dir>`	Directory list (Deprecated): Was used to create a directory listing of files. Completely obsolete in HTML5. Use `<ul>` (unordered list) instead for lists. Removed because it had no unique functionality that other list tags didn't provide. Introduced in: HTML → Level 6 → Challenge 185
`<div>`	Division/Container: A generic container for grouping content. It has no semantic meaning by itself - it's just a box for organizing and styling content with CSS or manipulating with JavaScript. Example: `<div class="container">content here</div>`. One of the most commonly used tags for layout and structure. Introduced in: HTML → Level 1 → Challenge 19
`<dl>`	Description List: Creates a list of terms and their descriptions, like a glossary or dictionary. Contains `<dt>` (term) and `<dd>` (description) tags. Example: perfect for FAQs, vocabulary lists, or metadata. Different from `<ul>` and `<ol>` because it pairs terms with descriptions. Introduced in: HTML → Level 2 → Challenge 48
`<dt>`	Description Term: Defines a term in a description list. Must be inside a `<dl>` tag and is followed by one or more `<dd>` tags that describe it. Example: `<dt>HTML</dt>` would be the term, followed by `<dd>` containing its definition. Introduced in: HTML → Level 2 → Challenge 49
`<em>`	Emphasis: Emphasizes text, indicating stress emphasis that changes the meaning. Typically displays in italics. Example: I `<em>really</em>` like pizza stresses "really". Different from `<i>` because it has semantic meaning - it's not just visual styling, it conveys importance. Screen readers will emphasize this text. Introduced in: HTML → Level 1 → Challenge 29
`<embed>`	Embedded Content: Embeds external content like PDFs, videos, or plugins. Example: `<embed src="file.pdf" type="application/pdf">`. It's self-closing and can embed various media types. Modern alternative to the obsolete `<object>` for many uses. Dimensions can be controlled with width and height attributes. Introduced in: HTML → Level 6 → Challenge 181
`<fieldset>`	Form Field Group: Groups related form controls together and draws a box around them. Often used with `<legend>` to provide a caption. Example: Group all address fields (street, city, zip) together. Helps organize forms visually and improves accessibility by showing which fields are related. Introduced in: HTML → Level 4 → Challenge 111
`<figcaption>`	Figure Caption: Provides a caption or description for a `<figure>`. Must be the first or last child inside `<figure>`. Example: `<figcaption>Image 1: Sunset over mountains</figcaption>`. Describes the content of images, diagrams, code snippets, etc. Important for accessibility and context. Introduced in: HTML → Level 2 → Challenge 36
`<figure>`	Figure with Caption: Represents self-contained content like images, diagrams, code, or illustrations, usually with a caption. Contains the content and a `<figcaption>`. Example: Used for images that are referenced in the main text. Semantic tag that indicates content is supplementary but referenced. Introduced in: HTML → Level 1 → Challenge 32
`<font>`	Font Styling (Deprecated): Used to specify font face, size, and color. Completely obsolete in HTML5. Use CSS properties like font-family, font-size, and color instead. Removed because visual styling should be done with CSS, keeping HTML focused on structure and meaning. Introduced in: HTML → Level 3 → Challenge 83
`<footer>`	Footer Section: Represents the footer of a document or section, typically containing copyright info, links, contact details, or author information. Example: The bottom of a webpage with company info. Can be used for the page footer or for footer information within an `<article>` or `<section>`. Introduced in: HTML → Level 2 → Challenge 44
`<form>`	Form: Creates an interactive form for user input. Contains form controls like text fields, buttons, checkboxes, etc. Example: `<form action="/submit" method="post">`. The action attribute specifies where to send form data, and method specifies how (usually "get" or "post"). Essential for any user input on websites. Introduced in: HTML → Level 4 → Challenge 110
`<frame>`	Frame (Deprecated): Defined a single frame within a frameset. Completely obsolete in HTML5 and not supported in modern browsers. Frames divided the browser window into multiple sections, but they caused many usability and accessibility problems, so they were removed entirely. Introduced in: HTML → Level 6 → Challenge 184
`<frameset>`	Frameset (Deprecated): Contained multiple `<frame>` elements to divide the browser window. Completely obsolete in HTML5. Use CSS layouts, `<iframe>`, or modern layout techniques instead. Removed due to accessibility issues and poor user experience. Can't be used in modern HTML at all. Introduced in: HTML → Level 6 → Challenge 184
`<h1>` - `<h6>`	Headings Level 1-6: Create headings of different importance levels. `<h1>` is the main heading (most important), down to `<h6>` (least important). Example: `<h1>Main Title</h1>` for the page title, `<h2>Section</h2>` for sections. Use them in order - don't skip levels. Search engines and screen readers use these to understand page structure. Introduced in: HTML → Level 1 → Challenge 20
`<head>`	Document Head: Contains metadata about the document - information that doesn't appear on the page itself. Goes between `<html>` and `<body>`. Includes things like `<title>`, `<meta>` tags, links to CSS files, and scripts. Example: The title that shows in the browser tab goes here. Required in every HTML document. Introduced in: HTML → Level 1 → Challenge 3
`<header>`	Header Section: Represents introductory content for a page or section, typically containing headings, logos, navigation, or search forms. Example: The top of a webpage with logo and menu. Can be used multiple times in a page - once for the page header and again for section headers within articles. Introduced in: HTML → Level 1 → Challenge 17
`<hgroup>`	Heading Group: Groups multiple heading elements (`<h1>`-`<h6>`) when a heading has multiple levels, like a title and subtitle. Example: Group a main heading with a subheading. Was removed from HTML5 spec, then added back. Use sparingly - often better to use headings alone with proper levels. Introduced in: HTML → Level 1 → Challenge 28
`<hr>`	Horizontal Rule: Creates a horizontal line (thematic break) across the page. Self-closing tag. Example: `<hr>`. Used to separate content sections or indicate a topic change. Represents a thematic break rather than just a visual line - has semantic meaning about content structure. Introduced in: HTML → Level 2 → Challenge 40
`<html>`	HTML Root: The root element that contains all other HTML elements in the document. Every HTML page must have exactly one `<html>` tag that wraps everything except the `<!DOCTYPE>` declaration. Includes the lang attribute to specify the language: `<html lang="en">`. The entire page content goes inside this tag. Introduced in: HTML → Level 1 → Challenge 2
`<i>`	Italic Text: Displays text in italics for stylistic purposes without implying emphasis. Example: `<i>This is italic</i>`. Use for technical terms, foreign phrases, thoughts, or ship names. Different from `<em>` - `<i>` is purely visual while `<em>` indicates emphasis. For actual emphasis, use `<em>` instead. Introduced in: HTML → Level 1 → Challenge 30
`<iframe>`	Inline Frame: Embeds another HTML page within the current page. Example: `<iframe src="https://example.com"></iframe>`. Commonly used for embedding maps, videos from YouTube, or content from other sites. Creates a separate browsing context. Use width and height attributes to control size. Security attributes like sandbox can restrict what the embedded page can do. Introduced in: HTML → Level 6 → Challenge 180
`<img>`	Image: Embeds an image into the page. Self-closing tag. Example: `<img src="photo.jpg" alt="Description">`. The src attribute specifies the image file location, and alt provides alternative text for screen readers and when images don't load. Also use width and height attributes. The alt text is crucial for accessibility. Introduced in: HTML → Level 2 → Challenge 35
`<input>`	Input Field: Creates an interactive form control for user input. Self-closing tag. The type attribute determines what kind of input: "text", "password", "email", "checkbox", "radio", "file", "submit", etc. Example: `<input type="text" name="username">`. One of the most versatile form elements with many possible types and behaviors. Introduced in: HTML → Level 4 → Challenge 114
`<ins>`	Inserted Text: Indicates text that has been inserted into a document. Usually displays underlined. Example: `<ins>This was added</ins>`. Often used with `<del>` to show edits. Can include datetime and cite attributes to explain when and why content was added. Useful for showing document revisions. Introduced in: HTML → Level 6 → Challenge 175
`<kbd>`	Keyboard Input: Represents user input from a keyboard, voice input, or other input device. Example: Press `<kbd>Ctrl</kbd>` + `<kbd>C</kbd>` to copy. Typically displays in a monospace font. Use for keyboard shortcuts, command-line input, or any text the user should enter. Helps distinguish input instructions from regular text. Introduced in: HTML → Level 3 → Challenge 76
`<label>`	Form Label: Provides a label for a form control, improving usability and accessibility. Example: `<label for="email">Email:</label>`. The for attribute should match the id of the form control it labels. Clicking the label will focus/activate the associated control. Essential for accessible forms. Users can click the label text to select the input. Introduced in: HTML → Level 4 → Challenge 113
`<legend>`	Fieldset Legend: Provides a caption for a `<fieldset>`. Must be the first child inside the `<fieldset>`. Example: `<legend>Personal Information</legend>`. Describes what the grouped form fields are for. Important for accessibility, helping users understand the purpose of a group of form controls. Introduced in: HTML → Level 4 → Challenge 112
`<li>`	List Item: Defines an item in a list. Must be inside `<ul>` (unordered), `<ol>` (ordered), or `<menu>`. Example: `<li>First item</li>`. Each item in a bulleted or numbered list uses this tag. Can contain any type of content - text, images, even other lists. Required parent is a list element. Introduced in: HTML → Level 1 → Challenge 23
`<link>`	External Resource Link: Links external resources to the document, most commonly CSS stylesheets. Self-closing tag that goes in the `<head>`. Example: `<link rel="stylesheet" href="styles.css">`. Also used for favicons, fonts, and other resources. The rel attribute specifies the relationship type (usually "stylesheet"). Introduced in: HTML → Level 1 → Challenge 12
`<main>`	Main Content: Represents the main content of the document - the central topic or functionality. There should be only one `<main>` per page, and it shouldn't be inside `<article>`, `<aside>`, `<footer>`, `<header>`, or `<nav>`. Helps screen readers skip to the main content. Improves accessibility and SEO. Introduced in: HTML → Level 1 → Challenge 26
`<map>`	Image Map: Defines an image map - an image with clickable areas. Used with `<area>` tags to define the clickable regions. Example: A map of a country where clicking different regions goes to different pages. The name attribute links it to an `<img>` tag's usemap attribute. Allows one image to have multiple clickable zones. Introduced in: HTML → Level 6 → Challenge 169
`<mark>`	Marked/Highlighted Text: Highlights text as relevant or important in the current context. Example: `<mark>highlighted text</mark>`. Typically displays with a yellow background. Use for search results, emphasizing matches, or drawing attention to specific parts. Different from `<strong>` or `<em>` - it's about relevance, not importance or emphasis. Introduced in: HTML → Level 1 → Challenge 31
`<menu>`	Menu List: Represents a list of commands or options. Originally deprecated, now redefined in HTML5 for toolbar/menu contexts. Example: Context menus or toolbars. Similar to `<ul>` but with semantic meaning for interactive commands. Browser support varies, so it's often safer to use `<ul>` styled as needed. Introduced in: HTML → Level 1 → Challenge 21
`<meta>`	Metadata: Provides metadata about the HTML document - information for browsers and search engines. Self-closing tag that goes in `<head>`. Example: `<meta charset="UTF-8">` for character encoding, or `<meta name="description" content="Page description">` for SEO. Also used for viewport settings on mobile and social media previews. Introduced in: HTML → Level 1 → Challenge 4
`<meter>`	Scalar Measurement: Represents a scalar measurement within a known range, like disk usage or temperature. Example: `<meter value="7" min="0" max="10">7 out of 10</meter>`. Shows a gauge. Different from `<progress>` - meter is for measurements that don't change automatically, while progress is for tasks that complete over time. Introduced in: HTML → Level 2 → Challenge 58
`<nav>`	Navigation Section: Defines a section containing navigation links. Example: The main menu of a website. Can be used for the main site navigation, in-page links, or pagination. Should only be used for major navigation blocks. Not every group of links needs to be in `<nav>` - use it for primary navigation. Helps screen readers identify navigation. Introduced in: HTML → Level 1 → Challenge 18
`<noframes>`	No Frames Content (Deprecated): Provided content for browsers that didn't support frames. Completely obsolete since frames are no longer used in HTML5. There's no modern equivalent needed because frames themselves aren't used anymore. Introduced in: HTML → Level 6 → Challenge 184
`<noscript>`	No Script Content: Provides alternative content for users whose browsers don't support JavaScript or have it disabled. Example: `<noscript>This site requires JavaScript</noscript>`. The content only displays if JavaScript isn't available. Use to provide fallback content or messages about site requirements. Important for accessibility. Introduced in: HTML → Level 1 → Challenge 16
`<object>`	Embedded Object: Embeds external resources like images, videos, PDFs, or other web pages. Example: `<object data="file.pdf" type="application/pdf"></object>`. More flexible than `<img>` because it can contain fallback content inside. Can also use `<param>` tags to pass parameters to the embedded content. Often replaced by more specific tags like `<video>`, `<audio>`, or `<iframe>`. Introduced in: HTML → Level 6 → Challenge 181
`<ol>`	Ordered List: Creates a numbered (ordered) list. Contains `<li>` items. Example: Step-by-step instructions or rankings. By default shows numbers (1, 2, 3), but can use type attribute for letters (a, b, c) or Roman numerals (i, ii, iii). The start attribute changes where numbering begins. Use when order matters. Introduced in: HTML → Level 2 → Challenge 55
`<optgroup>`	Option Group: Groups related options within a `<select>` dropdown. Example: Group countries by continent in a country selector. The label attribute provides a heading for the group. Options within the group are still selectable, but the group label itself isn't. Helps organize long dropdown lists. Introduced in: HTML → Level 4 → Challenge 124
`<option>`	Select Option: Defines an option within a `<select>` dropdown or `<datalist>`. Example: `<option value="blue">Blue</option>`. The value attribute is what gets submitted with the form, while the text between tags is what users see. The selected attribute makes an option selected by default. Introduced in: HTML → Level 4 → Challenge 125
`<output>`	Output Result: Represents the result of a calculation or user action. Example: In a form that calculates totals. The for attribute can reference the input elements used in the calculation. Typically populated by JavaScript. Used to display results in a semantically meaningful way. Introduced in: HTML → Level 5 → Challenge 137
`<p>`	Paragraph: Defines a paragraph of text. Example: `<p>This is a paragraph.</p>`. One of the most basic and common HTML tags. Browsers automatically add space before and after paragraphs. Use for blocks of text - don't put other block-level elements inside paragraphs. Each paragraph represents a separate idea or topic. Introduced in: HTML → Level 1 → Challenge 16
`<param>`	Object Parameter (Deprecated): Defined parameters for `<object>` elements. Example: Passing settings to embedded Flash content. Rarely used now because `<object>` itself is less common, and many plugins like Flash are obsolete. Modern alternatives handle parameters differently. Introduced in: HTML → Level 6 → Challenge 181
`<picture>`	Picture Container: Contains multiple image sources, allowing different images for different screen sizes or resolutions (responsive images). Example: Show a different image on mobile vs desktop. Contains `<source>` elements and a fallback `<img>`. The browser picks the most appropriate image. Great for art direction and optimizing image loading. Introduced in: HTML → Level 2 → Challenge 33
`<pre>`	Preformatted Text: Displays text exactly as written, preserving spaces and line breaks. Uses a monospace font. Example: `<pre>Code with spaces</pre>` keeps all the extra spaces. Perfect for displaying code, ASCII art, or any text where formatting matters. Normally browsers collapse multiple spaces - `<pre>` prevents this. Introduced in: HTML → Level 6 → Challenge 174
`<progress>`	Progress Indicator: Shows completion progress of a task. Example: `<progress value="70" max="100">70%</progress>`. The value is current progress, max is the total. Displays as a progress bar. Use for file uploads, form completion, or any ongoing task. Different from `<meter>` - progress is for tasks that change over time toward completion. Introduced in: HTML → Level 5 → Challenge 145
`<q>`	Inline Quote: Used for short inline quotations. Example: He said `<q>Hello</q>`. Browsers automatically add quotation marks around the content. Use the cite attribute to reference the source URL. Different from `<blockquote>` which is for longer, block-level quotes. Use `<q>` when the quote is part of a sentence. Introduced in: HTML → Level 6 → Challenge 190
`<rp>`	Ruby Fallback: Provides fallback parentheses for browsers that don't support ruby annotations. Used within `<ruby>`. Example: Shows parentheses around pronunciation guides when ruby isn't supported. Only displays in browsers without ruby support. Part of the ruby annotation system for East Asian typography. Introduced in: HTML → Level 6 → Challenge 164
`<rt>`	Ruby Text: Defines the text part of a ruby annotation - small annotations above or beside text, typically for pronunciation guides in East Asian languages. Example: Showing how to pronounce a Japanese kanji character. Goes inside `<ruby>`. The annotation appears above (or beside) the main text. Introduced in: HTML → Level 6 → Challenge 164
`<ruby>`	Ruby Annotation: Represents ruby annotations - small annotations above or beside text used for pronunciation guides, especially in East Asian typography. Example: Showing pronunciation of Japanese kanji. Contains the base text and `<rt>` (ruby text) elements. Can also include `<rp>` for browser fallback. Common in Japanese, Chinese, and Korean text. Introduced in: HTML → Level 6 → Challenge 164
`<s>`	Strikethrough: Displays text with a strikethrough line, indicating it's no longer relevant or accurate. Example: `<s>Was $100</s>` Now $80 for sale prices. Different from `<del>` - use `<s>` for things that are no longer true but weren't actually deleted from the document. `<del>` is for content that was removed. Introduced in: HTML → Level 3 → Challenge 84
`<samp>`	Sample Output: Represents sample output from a computer program or system. Example: `<samp>Error: File not found</samp>`. Typically displays in a monospace font. Use for displaying program output, error messages, or computer-generated text. Helps distinguish system output from regular text or code input. Introduced in: HTML → Level 5 → Challenge 156
`<script>`	Script: Embeds or references JavaScript code. Example: `<script src="script.js"></script>` for external files, or put code directly between the tags. Can go in `<head>` or `<body>`. Use async or defer attributes to control loading behavior. Essential for adding interactivity and dynamic behavior to web pages. Introduced in: HTML → Level 6 → Challenge 191
`<search>`	Search Section: Represents a section containing search functionality. Example: The search box and button on a website. New in HTML5 as a semantic way to mark search features. Contains the search form and related controls. Helps assistive technologies identify search functionality. Similar to `<form role="search">` but clearer. Introduced in: HTML → Level 4 → Challenge 109
`<section>`	Section: Represents a thematic grouping of content, typically with a heading. Example: Chapters in a document or different topics on a page. More specific than `<div>` (which has no meaning) but more general than `<article>`. Each section should have a heading. Use when content forms a distinct, themed portion of the document. Introduced in: HTML → Level 1 → Challenge 27
`<select>`	Dropdown List: Creates a dropdown selection list. Contains `<option>` elements. Example: `<select name="color"><option>Red</option></select>`. Users click to see options and choose one. The multiple attribute allows selecting multiple options. The size attribute controls how many options are visible at once. Essential form control for choosing from predefined options. Introduced in: HTML → Level 4 → Challenge 123
`<small>`	Small Text: Displays smaller text, typically for side comments, fine print, or legal text. Example: `<small>Terms and conditions apply</small>`. Represents less important content. Not just a styling tag - it has semantic meaning about the content's significance. Often used for copyright notices, disclaimers, or caveats. Introduced in: HTML → Level 2 → Challenge 60
`<source>`	Media Source: Specifies multiple media resources for `<picture>`, `<audio>`, or `<video>` elements. Self-closing tag. Example: Provide both MP4 and WebM video formats so any browser can play one. The browser picks the first format it supports. Enables responsive images and cross-browser media compatibility. Introduced in: HTML → Level 2 → Challenge 34
`<span>`	Inline Container: A generic inline container for grouping and styling content. Has no semantic meaning on its own. Example: `<span class="highlight">important text</span>`. Use for styling specific parts of text or for JavaScript manipulation. Unlike `<div>` (block-level), `<span>` is inline and doesn't create line breaks. Very commonly used for applying CSS or JavaScript to small text portions. Introduced in: HTML → Level 2 → Challenge 42
`<strike>`	Strikethrough (Deprecated): Displayed text with a line through it. Obsolete in HTML5 - use `<s>` or `<del>` instead depending on meaning. Removed because it was purely visual without semantic meaning. Use `<del>` for deleted content or `<s>` for content that's no longer accurate. Introduced in: HTML → Level 3 → Challenge 84
`<strong>`	Strong Importance: Indicates strong importance, seriousness, or urgency. Typically displays as bold. Example: `<strong>Warning:</strong>` Don't do this. Has semantic meaning unlike `<b>` (which is just visual). Screen readers emphasize this text. Use for truly important content, not just to make text bold. Conveys meaning beyond appearance. Introduced in: HTML → Level 1 → Challenge 30
`<style>`	Style Information: Contains CSS style rules for the document. Goes in the `<head>` section. Example: `<style>body { color: blue; }</style>`. Defines styles directly in the HTML rather than an external stylesheet. Good for small style changes, but external CSS files are usually better for maintainability. Can target elements throughout the page. Introduced in: HTML → Level 1 → Challenge 14
`<sub>`	Subscript: Displays text as subscript - slightly below and smaller than normal text. Example: `H<sub>2</sub>O` for water's chemical formula. Use for chemical formulas, mathematical notation, or footnote references. Purely for display purposes but important for correctly representing certain types of content. Introduced in: HTML → Level 5 → Challenge 155
`<summary>`	Details Summary: Provides a visible heading for a `<details>` element. Must be the first child inside `<details>`. Example: The clickable text that reveals/hides content Introduced in: HTML → Level 2 → Challenge 47
`<sup>`	Superscript: Displays text as superscript - slightly above and smaller than normal text. Example: `E = mc<sup>2</sup>` for Einstein's equation or `1<sup>st</sup>` for "first place". Use for mathematical exponents (like squared or cubed), ordinal number indicators (1st, 2nd, 3rd), or footnote reference numbers. The annotation appears raised above the baseline and is typically rendered smaller than surrounding text. Introduced in: HTML → Level 5 → Challenge 154
`<svg>`	Scalable Vector Graphics: Embeds vector graphics directly into your HTML document. Example: `<svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg>` draws a circle. Unlike regular images (JPG, PNG), SVG graphics are defined by mathematical coordinates and shapes, so they scale to any size without losing quality or becoming pixelated. Perfect for icons, logos, charts, and illustrations. Contains its own special elements like `<circle>`, `<rect>`, `<path>`, `<line>`, etc. Can be styled with CSS and animated with JavaScript. Introduced in: HTML → Level 3 → Challenge 78
`<table>`	Table: Creates a structured data table with rows and columns. Example: Use for displaying spreadsheet-like data, schedules, or comparison charts. A table consists of `<tr>` elements (rows) that contain `<td>` elements (data cells) or `<th>` elements (header cells). Can be organized with `<thead>`, `<tbody>`, and `<tfoot>` sections. Tables should be used for tabular data only, never for page layout (use CSS for layout instead). Proper tables improve accessibility and make data easier to understand. Introduced in: HTML → Level 3 → Challenge 88
`<tbody>`	Table Body: Groups the main body content rows in a table, separating them from header (`<thead>`) and footer (`<tfoot>`) rows. Example: In a sales table, `<tbody>` would contain all the individual sale records, while the column headers are in `<thead>`. Contains one or more `<tr>` elements. Helps browsers and screen readers understand table structure. Useful for styling - you can apply different styles to the body versus headers/footers. When printing long tables, browsers can repeat headers and footers on each page while the body content flows. Introduced in: HTML → Level 4 → Challenge 98
`<td>`	Table Data Cell: Defines a single data cell within a table row. Example: `<td>John Smith</td>` creates one cell containing "John Smith". Must be inside a `<tr>` (table row). Each `<td>` represents one piece of information in the table grid. Can contain any type of content - text, images, links, even other tables. Use the colspan attribute to make a cell span multiple columns, or rowspan to span multiple rows. Different from `<th>` which is for headers. Introduced in: HTML → Level 4 → Challenge 100
`<template>`	Content Template: Holds HTML content that is not rendered immediately but can be used later by JavaScript. Example: `<template id="card"><div class="card">...</div></template>`. The content inside is completely hidden and inert - it won't display, scripts won't run, images won't load. JavaScript can clone and activate this content when needed, making it perfect for creating reusable components or dynamically generating repeated elements. Think of it as a blueprint that JavaScript can copy and use multiple times without rewriting the HTML. Introduced in: HTML → Level 6 → Challenge 177
`<textarea>`	Multi-line Text Input: Creates a multi-line text input field where users can enter longer text. Example: `<textarea rows="4" cols="50">Default text here</textarea>`. Unlike `<input type="text">` which is single-line, this allows for multiple lines and includes a scrollbar if needed. The rows attribute sets visible height, cols sets width (though CSS is better for sizing). Perfect for comments, messages, descriptions, or any text that might span multiple lines. The text between opening and closing tags becomes the default value. Introduced in: HTML → Level 5 → Challenge 133
`<tfoot>`	Table Footer: Groups footer rows in a table, typically containing summary information like totals. Example: In a sales table, `<tfoot>` might contain a row showing the total of all sales. Contains one or more `<tr>` elements. Must come before `<tbody>` in the HTML (even though it displays at the bottom), or after `<tbody>` depending on HTML version - HTML5 allows it after. When printing long tables, browsers can repeat the footer on every page. Useful for styling footer rows differently from body rows. Introduced in: HTML → Level 3 → Challenge 90
`<th>`	Table Header Cell: Defines a header cell in a table - cells that describe what the columns or rows contain. Example: `<th>Name</th><th>Age</th>` creates column headers. Similar to `<td>` but semantically indicates this is a label, not data. Typically displays bold and centered by default. Use the scope attribute ("col" or "row") to specify whether it's a column or row header - this is crucial for accessibility. Screen readers use `<th>` elements to help users understand table structure. Can also use colspan and rowspan like `<td>`. Introduced in: HTML → Level 3 → Challenge 95
`<thead>`	Table Header: Groups the header rows of a table, containing the column labels or titles. Example: `<thead><tr><th>Name</th><th>Price</th></tr></thead>`. Contains one or more `<tr>` elements with `<th>` cells. Separates header content from the main body data, making tables more organized and accessible. When printing long tables, browsers can repeat the header on every page. Allows different styling for headers versus data rows. Should appear before `<tbody>` in the HTML structure. Introduced in: HTML → Level 3 → Challenge 89
`<time>`	Date/Time: Represents a specific date, time, or duration in a machine-readable format. Example: `<time datetime="2025-12-31">December 31, 2025</time>`. The datetime attribute contains the standardized format (ISO 8601) that computers can understand, while the content between tags is the human-readable version. Useful for events, publication dates, or any temporal information. Helps search engines and browsers understand dates properly. Can represent dates, times, durations, or date ranges. Important for structured data and accessibility. Introduced in: HTML → Level 2 → Challenge 56
`<title>`	Document Title: Defines the title of the HTML document that appears in the browser tab, bookmarks, and search engine results. Example: `<title>My Awesome Website</title>`. Goes inside the `<head>` section, never in `<body>`. This is not visible on the actual page content - it only shows in the browser tab/window title bar. Every HTML document must have exactly one `<title>` tag. Extremely important for SEO (search engine optimization) and usability. Should be descriptive and unique for each page. Limited to about 50-60 characters for best display in search results. Introduced in: HTML → Level 1 → Challenge 11
`<tr>`	Table Row: Defines a single row in a table. Example: `<tr><td>Cell 1</td><td>Cell 2</td></tr>` creates one row with two cells. Must be inside `<table>`, `<thead>`, `<tbody>`, or `<tfoot>`. Contains `<td>` (data cells) or `<th>` (header cells). Tables are built row by row - each `<tr>` represents a horizontal line of information. Think of a table like a spreadsheet: `<tr>` creates each row, and the cells (`<td>` or `<th>`) inside it create the columns within that row. Introduced in: HTML → Level 3 → Challenge 94
`<track>`	Text Track: Provides timed text tracks for `<video>` or `<audio>` elements, like subtitles, captions, or descriptions. Example: `<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">`. The src points to a WebVTT file containing the timed text. The kind attribute specifies the type: "subtitles" (translation), "captions" (transcription with sound effects), "descriptions" (video descriptions for blind users), or "chapters" (navigation). Essential for accessibility and reaching international audiences. Multiple tracks can provide different languages or purposes. Introduced in: HTML → Level 2 → Challenge 39
`<tt>`	Teletype Text (Deprecated): Displayed text in a monospace (fixed-width) font like old teletype machines or typewriters. Example: `<tt>Monospace text</tt>`. Completely obsolete in HTML5. Use `<code>`, `<kbd>`, `<samp>`, or CSS font-family: monospace; instead, depending on the semantic meaning. Removed because it was purely presentational without indicating what kind of content it contained. Introduced in: HTML → Level 6 → Challenge 186
`<u>`	Underlined Text: Displays text with an underline. Example: `<u>This is underlined</u>`. Historically deprecated but brought back in HTML5 with new semantic meaning: use it for text that should be stylistically distinct but not emphasized, like misspelled words, proper names in Chinese text, or other non-textual annotations. Should generally be avoided for regular emphasis or importance (use `<em>` or `<strong>` instead). Never use it for links - underlined text strongly suggests clickability to users, which can be confusing if it's not a link. Introduced in: HTML → Level 3 → Challenge 85
`<ul>`	Unordered List: Creates a bulleted (unordered) list where the order doesn't matter. Example: A shopping list or list of features. Contains `<li>` (list item) elements. By default displays with bullet points (•), but CSS can change the bullet style to circles, squares, or custom images. Use when the sequence isn't important - if you're listing items where the order doesn't convey meaning. Different from `<ol>` which shows numbered items where sequence matters. One of the most commonly used HTML elements. Introduced in: HTML → Level 2 → Challenge 61
`<var>`	Variable: Represents a variable in mathematical expressions or programming contexts. Example: In the equation `<var>x</var> + <var>y</var> = 10`, the variables are marked up. Typically displays in italics. Use for mathematical variables, programming variables, or placeholders. Example: "The formula is `<var>price</var> × <var>quantity</var>`". Helps distinguish variables from regular text and provides semantic meaning that the text represents a changeable value. Introduced in: HTML → Level 5 → Challenge 157
`<video>`	Video Player: Embeds video content directly into the webpage with a built-in player. Example: `<video src="movie.mp4" controls width="640" height="360"></video>`. The controls attribute adds play, pause, volume, and fullscreen buttons. Can include multiple `<source>` elements to provide different video formats for browser compatibility (MP4, WebM, Ogg). Can also include `<track>` elements for subtitles. Attributes like autoplay, loop, muted, and poster (thumbnail image) control behavior. Much simpler than embedding videos through plugins, and works on mobile devices. Introduced in: HTML → Level 3 → Challenge 73
`<wbr>`	Word Break Opportunity: Suggests where a line break could occur within a word if needed. Self-closing tag. Example: `supercali<wbr>fragilistic<wbr>expialidocious` - the browser can break the long word at those points if it doesn't fit on one line. Different from `<br>` which forces a break - `<wbr>` is just a suggestion the browser uses only when necessary. Useful for very long URLs, file paths, or compound words that might cause layout problems. The break only happens if the line is too long; otherwise the word stays intact. Introduced in: HTML → Level 6 → Challenge 173

Attribute	Belongs To	Description
accept	`<input>`	Specifies what types of files the server will accept when a user uploads a file. For example, `accept="image/*"` means only image files are allowed, or `accept=".pdf,.doc"` means only PDF and DOC files. This helps filter the file picker dialog that appears when users click the upload button. Introduced in: HTML → Level 4 → Challenge 120
accept-charset	`<form>`	Tells the browser what character encodings (like UTF-8, ISO-8859-1) the server can handle when processing form data. Character encoding determines how text characters are converted to bytes. If not specified, the form uses the same encoding as the page itself. Example: `accept-charset="UTF-8"`.
accesskey	Global attribute (all elements)	Creates a keyboard shortcut to activate or focus an element. The user presses this key (usually with Alt or another modifier) to quickly access that element. For example, `accesskey="s"` might let users press Alt+S to submit a form. Different browsers may require different modifier keys. Introduced in: HTML → Level 1 → Challenge 23
action	`<form>`	Specifies the URL (web address) where the form data should be sent when the user submits the form. For example, `action="/submit-form.php"` sends the data to that PHP file on your server. If omitted, the form submits to the same page it's on. Introduced in: HTML → Level 4 → Challenge 110
align	Various (Deprecated in HTML5)	Used to control horizontal alignment of content (left, right, center, justify). This attribute is deprecated, meaning it's outdated and you should use CSS instead (like `text-align: center`). It was used on elements like `<img>`, `<table>`, `<div>`, etc.
alt	`<img>`, `<area>`, `<input type="image">`	Provides alternative text that describes an image. This text appears if the image fails to load, and is read aloud by screen readers for visually impaired users. For example, `alt="A golden retriever playing fetch"` describes what's in the image. Always include meaningful alt text for accessibility. Introduced in: HTML → Level 2 → Challenge 35
async	`<script>`	Tells the browser to download a JavaScript file in the background without stopping the rest of the page from loading. The script runs as soon as it finishes downloading, which might be before or after the page finishes loading. Example: `<script src="analytics.js" async></script>`. This improves page load speed. Introduced in: HTML → Level 6 → Challenge 191
autocomplete	`<form>`, `<input>`, `<textarea>`, `<select>`	Controls whether the browser should automatically fill in values based on what the user has typed before. Values include "on" (allow autofill), "off" (disable autofill), or specific types like "name", "email", "current-password". For example, `autocomplete="email"` tells the browser this field expects an email address. Introduced in: HTML → Level 4 → Challenge 114
autofocus	`<button>`, `<fieldset>`, `<input>`, `<select>`, `<textarea>`	Automatically puts the cursor in this form field when the page loads, so users can start typing immediately without clicking. Only one element per page should have this attribute. Example: `<input type="text" autofocus>` makes that text box active right away. Introduced in: HTML → Level 4 → Challenge 114
autoplay	`<audio>`, `<video>`	Makes audio or video start playing automatically when the page loads, without the user clicking play. Example: `<video autoplay>`. Note: Many browsers block autoplay with sound unless the user has interacted with the page, to prevent annoying auto-playing ads. Muted videos can usually autoplay. Introduced in: HTML → Level 2 → Challenge 37
bgcolor	Various (Deprecated in HTML5)	Set the background color of an element using color names or hex codes. This is deprecated - use CSS `background-color` property instead. Example of old usage: `<body bgcolor="#FF0000">` for a red background. Now use CSS: `background-color: #FF0000;`. Introduced in: HTML → Level 3 → Challenge 83
border	`<img>`, `<table>` (Deprecated for styling)	Specifies the width of a border around an element in pixels. For images: `<img border="2">` adds a 2-pixel border. For tables, it's still valid but use CSS for styling. For images, this is deprecated - use CSS `border` property instead. Introduced in: HTML → Level 3 → Challenge 88
charset	`<meta>`, `<script>` (Deprecated)	Declares what character encoding is used. In `<meta charset="UTF-8">`, it tells the browser how to interpret the text characters on the page. UTF-8 can represent virtually all characters from all languages. This should be in the `<head>` of every HTML page. For `<script>`, it's deprecated. Introduced in: HTML → Level 1 → Challenge 4
cite	`<blockquote>`, `<del>`, `<ins>`, `<q>`	Provides a URL that points to the source or explanation for a quotation, deletion, or insertion. For example, `<blockquote cite="https://example.com/article">` indicates where the quote came from. This URL is not displayed visually but can be accessed by screen readers or scripts. Introduced in: HTML → Level 2 → Challenge 44
class	Global attribute (all elements)	Assigns one or more CSS class names to an element so you can style it or select it with JavaScript. Multiple classes are separated by spaces. Example: `<div class="card featured">` gives this div two classes. You can then style all elements with class="card" using CSS. Introduced in: HTML → Level 1 → Challenge 19
color	Various (Deprecated in HTML5)	Set the text color using color names or hex codes. This is deprecated - use CSS `color` property instead. Old usage: `<font color="blue">` or `<body text="red">`. Now use CSS: `color: blue;`. Introduced in: HTML → Level 3 → Challenge 83
cols	`<textarea>`	Specifies how many characters wide a textarea should be (the visible width). For example, `<textarea cols="50">` makes the textarea approximately 50 characters wide. The actual pixel width depends on the font size. Rows and cols define the size of a textarea. Introduced in: HTML → Level 5 → Challenge 134
colspan	`<td>`, `<th>`	Makes a table cell span across multiple columns. For example, `<td colspan="3">` makes one cell take up the space of three columns. This is useful for creating headers that span multiple columns or merging cells horizontally. The value is the number of columns to span. Introduced in: HTML → Level 4 → Challenge 108
content	`<meta>`	Provides the actual value/content for a meta tag. Meta tags store information about the page. For example, `<meta name="description" content="This is my website">` where "This is my website" is the page description. Or `<meta http-equiv="refresh" content="30">` refreshes the page every 30 seconds. Introduced in: HTML → Level 1 → Challenge 5
contenteditable	Global attribute (all elements)	Makes an element's content editable by the user, turning it into a simple text editor. Values: "true" (editable), "false" (not editable), or inherit. Example: `<div contenteditable="true">Edit me!</div>` allows users to click and type directly in that div. Great for simple note-taking interfaces. Introduced in: HTML → Level 1 → Challenge 31
controls	`<audio>`, `<video>`	Displays the browser's built-in playback controls (play, pause, volume, progress bar, etc.) for audio or video. It's a boolean attribute. Example: `<video controls>` shows the controls; without it, you'd need to create your own controls with JavaScript. Introduced in: HTML → Level 2 → Challenge 37
coords	`<area>`	Defines the coordinates for a clickable area in an image map. The values depend on the shape: for rectangles it's "x1,y1,x2,y2" (top-left and bottom-right corners), for circles "x,y,radius", for polygons a list of x,y points. Example: `<area shape="rect" coords="0,0,100,100">` defines a 100x100 pixel clickable square. Introduced in: HTML → Level 6 → Challenge 170
data	`<object>`	Specifies the URL of the resource to be used by an object element. For example, `<object data="document.pdf">` embeds a PDF file. This is similar to src for images but used for more general embedded content like PDFs, Flash files (historical), or other media types. Introduced in: HTML → Level 3 → Challenge 73
data-*	Global attribute (all elements)	Custom attributes that let you store extra information on HTML elements. The asterisk () is replaced with any name you choose. Example:* `<div data-user-id="12345" data-role="admin">` stores a user ID and role. JavaScript can easily access these values. This keeps custom data in HTML without interfering with standard attributes. Introduced in: HTML → Level 1 → Challenge 31
datetime	`<del>`, `<ins>`, `<time>`	Provides a machine-readable date/time value. For `<time>`, it specifies the actual date/time being represented. For `<del>` and `<ins>`, it indicates when the deletion or insertion was made. Format: ISO 8601 like "2025-12-31" or "2025-12-31T14:30:00". Example: `<time datetime="2025-12-31">New Year's Eve</time>`. Introduced in: HTML → Level 2 → Challenge 56
default	`<track>`	Marks a text track (like subtitles) as the default track that should be enabled unless the user has specified different preferences. It's a boolean attribute. Example: `<track kind="subtitles" src="en.vtt" default>` makes English subtitles show by default. Only one track per video should have this. Introduced in: HTML → Level 2 → Challenge 39
defer	`<script>`	Tells the browser to download a JavaScript file in the background but wait to execute it until after the entire HTML document has been parsed. Unlike async, deferred scripts execute in order and don't block page rendering. Example: `<script src="app.js" defer></script>`. This improves page load performance. Introduced in: HTML → Level 6 → Challenge 191
dir	Global attribute (all elements)	Specifies the text direction. Values: "ltr" (left-to-right, like English), "rtl" (right-to-left, like Arabic or Hebrew), or "auto" (let browser decide). Example: `<p dir="rtl">` makes that paragraph flow right-to-left. This is crucial for proper display of different language scripts. Introduced in: HTML → Level 6 → Challenge 163
dirname	`<input>`, `<textarea>`	Specifies that the text direction of the input should be submitted along with the form data. The value is the name to use for the direction field. Example: `<input name="comment" dirname="comment.dir">` would submit both "comment" (the text) and "comment.dir" (the direction, ltr or rtl). Introduced in: HTML → Level 4 → Challenge 114
disabled	`<button>`, `<fieldset>`, `<input>`, `<optgroup>`, `<option>`, `<select>`, `<textarea>`	Makes a form element non-interactive - users can't click, type, or select it. It appears grayed out and its value isn't submitted with the form. Boolean attribute. Example: `<button disabled>Submit</button>` shows a button users can't click. Useful for disabling submit buttons until a form is valid. Introduced in: HTML → Level 5 → Challenge 144
download	`<a>`, `<area>`	Prompts the browser to download the linked file instead of navigating to it. The attribute value becomes the suggested filename. Example: `<a href="report.pdf" download="2025-report.pdf">` downloads the file as "2025-report.pdf". Without a value, it uses the original filename. Introduced in: HTML → Level 4 → Challenge 121
draggable	Global attribute (all elements)	Specifies whether an element can be dragged using the browser's drag-and-drop functionality. Values: "true" (draggable), "false" (not draggable), or "auto" (browser default). Example: `<img draggable="true">` allows users to drag that image. You need JavaScript event handlers to make drag-and-drop fully functional. Introduced in: HTML → Level 1 → Challenge 32
enctype	`<form>`	Specifies how form data should be encoded when submitting to the server. Values: "application/x-www-form-urlencoded" (default, for text), "multipart/form-data" (required for file uploads), or "text/plain" (for debugging). Example: `<form enctype="multipart/form-data">` must be used when uploading files. Introduced in: HTML → Level 4 → Challenge 110
enterkeyhint	`<input>`, `<textarea>`	Provides a hint to mobile browsers about what action label to display on the virtual keyboard's enter key. Values: "enter", "done", "go", "next", "previous", "search", "send". Example: `enterkeyhint="search"` shows "Search" on the keyboard's enter key instead of "Enter". Mobile-only feature. Introduced in: HTML → Level 4 → Challenge 114
for	`<label>`, `<output>`	Associates a label with a form control. The value must match the id of the form element. Example: `<label for="email">Email:</label><input id="email">` connects the label to the input. Clicking the label focuses the input. Essential for accessibility and usability. Introduced in: HTML → Level 4 → Challenge 113
form	`<button>`, `<fieldset>`, `<input>`, `<label>`, `<meter>`, `<object>`, `<output>`, `<select>`, `<textarea>`	Associates a form control with a form element, even if the control is outside the form tags. The value must match the form's id. Example: `<input type="text" form="myform">` placed anywhere on the page belongs to `<form id="myform">`. Allows flexible form layouts. Introduced in: HTML → Level 4 → Challenge 123
formaction	`<button>`, `<input type="submit">`, `<input type="image">`	Overrides the form's action attribute for this specific submit button. The form will submit to this URL instead. Example: `<button formaction="/alternate-submit">Save Draft</button>` sends the form to a different URL than the main submit button. Useful for multiple submit actions. Introduced in: HTML → Level 5 → Challenge 146
headers	`<td>`, `<th>`	Lists the IDs of header cells that relate to this data cell, helping screen readers understand table relationships. Value is space-separated header cell IDs. Example: `<td headers="name quarter1">` indicates this cell relates to headers with ids "name" and "quarter1". Important for complex table accessibility. Introduced in: HTML → Level 3 → Challenge 95
height	`<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<input>`, `<object>`, `<video>`	Specifies the height of the element in pixels (or percentage for some elements). Example: `<img height="200">` makes the image 200 pixels tall. For images/video, if you specify only height or width, the browser maintains aspect ratio. Use CSS for more control over sizing. Introduced in: HTML → Level 2 → Challenge 35
hidden	Global attribute (all elements)	Hides an element from display - it's not visible and doesn't take up space on the page. Boolean attribute. Example: `<div hidden>Secret content</div>`. The element is still in the HTML (view source shows it), just not displayed. Different from CSS `display: none` in semantic meaning - this means the content isn't relevant right now. Introduced in: HTML → Level 2 → Challenge 46
high	`<meter>`	Defines the range where the meter's value is considered high. Used with `<meter>` to create a gauge. Example: `<meter min="0" max="100" low="25" high="75" value="90">` shows a value of 90 in the "high" range (75-100). Browser may color this range differently. Introduced in: HTML → Level 2 → Challenge 58
href	`<a>`, `<area>`, `<base>`, `<link>`	Specifies the URL (web address) that the link points to. This is where users go when they click. Example: `<a href="https://example.com">Click here</a>`. Can be absolute (full URL), relative ("../page.html"), an anchor on the same page ("#section"), or email ("mailto:email@example.com"). Introduced in: HTML → Level 1 → Challenge 10
hreflang	`<a>`, `<area>`, `<link>`	Indicates the language of the linked document using language codes. Example: `<a href="page-fr.html" hreflang="fr">French version</a>` tells search engines and browsers this link points to French content. Values are language codes like "en" (English), "es" (Spanish), "zh" (Chinese). Useful for international sites. Introduced in: HTML → Level 1 → Challenge 23
http-equiv	`<meta>`	Provides an HTTP header equivalent for the page. Common values: "refresh" (auto-refresh), "content-type" (character encoding - outdated method), "default-style" (preferred stylesheet). Example: `<meta http-equiv="refresh" content="5">` refreshes the page every 5 seconds. Most uses are now handled better with HTTP headers or other meta attributes. Introduced in: HTML → Level 1 → Challenge 9
id	Global attribute (all elements)	Assigns a unique identifier to an element. No two elements on a page should share the same id. Example: `<div id="header">`. Used to target elements with CSS (`#header`) or JavaScript (`document.getElementById('header')`), and for linking within a page (`#header`). Must start with a letter and contain no spaces. Introduced in: HTML → Level 1 → Challenge 27
inert	Global attribute (all elements)	Makes an element and all its descendants non-interactive - users can't focus, click, or select anything inside. It also hides the element from assistive technologies. Example: `<div inert>` during a modal dialog overlay makes the background content inert. Newer attribute for managing focus and interaction. Introduced in: HTML → Level 3 → Challenge 67
inputmode	`<input>`, `<textarea>`	Hints to mobile browsers what type of virtual keyboard to display. Values: "none", "text", "decimal", "numeric", "tel", "search", "email", "url". Example: `<input inputmode="numeric">` shows a number pad on mobile devices, making data entry easier even if type="text". Introduced in: HTML → Level 4 → Challenge 114
ismap	`<img>`	Indicates the image is a server-side image map. When inside a link and clicked, the click coordinates are sent to the server in the URL. Boolean attribute. Example: `<a href="map.php"><img src="map.jpg" ismap></a>`. Clicking at pixel 50,75 sends you to "map.php?50,75". Rarely used today; client-side maps are preferred. Introduced in: HTML → Level 2 → Challenge 35
kind	`<track>`	Specifies what kind of text track is being provided for video/audio. Values: "subtitles" (translation), "captions" (transcription with sound descriptions), "descriptions" (audio descriptions), "chapters" (chapter titles), "metadata" (not visible to user). Example: `<track kind="subtitles" src="en.vtt">` provides subtitle text. Introduced in: HTML → Level 2 → Challenge 39
label	`<optgroup>`, `<option>`, `<track>`	Provides a text label. For `<optgroup>`, it's the group heading in a dropdown. For `<option>`, an alternative label to display (though the element's text is usually used instead). For `<track>`, the user-visible title. Example: `<optgroup label="Fruits">` creates a "Fruits" heading in a select menu. Introduced in: HTML → Level 2 → Challenge 39
lang	Global attribute (all elements)	Declares the language of the element's content using language codes. Example: `<html lang="en">` for English, `<span lang="fr">Bonjour</span>` for French text. Helps screen readers pronounce text correctly, helps search engines, and is important for translation features. Values like "en-US" (US English) or "zh-CN" (Chinese-China). Introduced in: HTML → Level 1 → Challenge 2
list	`<input>`	Associates an input with a `<datalist>` element to provide autocomplete suggestions. The value must match the datalist's id. Example: `<input list="browsers"><datalist id="browsers"><option>Chrome</option><option>Firefox</option></datalist>` creates an input with dropdown suggestions. Introduced in: HTML → Level 5 → Challenge 131
loop	`<audio>`, `<video>`	Makes audio or video automatically restart from the beginning when it reaches the end. Boolean attribute. Example: `<video loop>` plays the video continuously in a loop. Useful for background videos or short animation clips that should repeat endlessly. Introduced in: HTML → Level 2 → Challenge 37
low	`<meter>`	Defines the range where the meter's value is considered low. Example: `<meter min="0" max="100" low="25" high="75" value="10">` shows a value of 10 in the "low" range (0-25). Browser may color this range differently to indicate it's below optimal. Introduced in: HTML → Level 2 → Challenge 58
max	`<input>`, `<meter>`, `<progress>`	Specifies the maximum value allowed. For number/date inputs, the highest value users can enter. For `<meter>`, the maximum end of the range. For `<progress>`, represents 100% completion. Example: `<input type="number" max="100">` won't let users enter values above 100 (though they could type it; validation needed). Introduced in: HTML → Level 2 → Challenge 58
maxlength	`<input>`, `<textarea>`	Limits the maximum number of characters users can type into a text field. Example: `<input maxlength="10">` stops accepting input after 10 characters. The browser physically prevents typing more. For tweets (280 chars), usernames, etc. Different from validation - this is enforced immediately while typing. Introduced in: HTML → Level 4 → Challenge 114
media	`<a>`, `<area>`, `<link>`, `<source>`, `<style>`	Specifies what media/device the linked resource is optimized for. Uses media queries. Example: `<link rel="stylesheet" href="print.css" media="print">` loads this CSS only when printing. Or `media="screen and (max-width: 600px)"` for mobile devices. Common values: "screen", "print", "all". Introduced in: HTML → Level 2 → Challenge 34
method	`<form>`	Specifies the HTTP method to use when sending form data. Values: "get" (appends data to URL, visible, for searches) or "post" (sends data in request body, hidden, for sensitive/large data). Example: `<form method="post">` sends data securely to server. GET is default, POST is for anything that changes data or contains passwords. Introduced in: HTML → Level 4 → Challenge 110
min	`<input>`, `<meter>`	Specifies the minimum value allowed. For number/date inputs, the lowest value users can enter. For `<meter>`, the lowest start of the range. Example: `<input type="number" min="0">` for quantities that can't be negative. `<input type="date" min="2025-01-01">` for dates after January 1, 2025. Introduced in: HTML → Level 5 → Challenge 136
multiple	`<input>`, `<select>`	Allows users to select/enter multiple values. For `<select>`, enables multi-selection (hold Ctrl/Cmd). For file inputs, allows selecting multiple files at once. Boolean attribute. Example: `<input type="file" multiple>` lets users select multiple files for upload. `<select multiple>` shows a list box instead of dropdown. Introduced in: HTML → Level 4 → Challenge 120
muted	`<audio>`, `<video>`	Starts the audio/video with sound turned off. Boolean attribute. Example: `<video muted autoplay>`. Muted videos are much more likely to be allowed to autoplay by browsers (unmuted autoplay is usually blocked). Users can unmute by clicking the volume control. Essential for autoplay functionality. Introduced in: HTML → Level 2 → Challenge 37
name	Multiple form and other elements	Provides the name that represents the element's data when submitted in a form. The server receives data as name-value pairs. Example: `<input name="email">` with value "user@example.com" sends "email=user@example.com" to the server. Also used for radio button groups (same name groups them together) and for anchors (legacy). Introduced in: HTML → Level 1 → Challenge 5
novalidate	`<form>`	Disables the browser's built-in form validation when submitting. Boolean attribute. Example: `<form novalidate>` allows submission even if required fields are empty or email format is invalid. Useful when you want to handle validation entirely with JavaScript or need to save drafts without validation. Introduced in: HTML → Level 4 → Challenge 110
onabort	Media elements	JavaScript event handler that runs when media loading is aborted before completion. Example: `<video onabort="console.log('Loading stopped')">`. Fires when user cancels download or navigates away. Part of the inline event handler attributes (though modern code prefers `addEventListener` in JavaScript).
onafterprint	`<body>`	JavaScript event handler that runs after the page has been sent to the printer or the print dialog has closed. Example: `<body onafterprint="console.log('Printing done')">`. Useful for restoring page state after print-specific changes. Better to use `window.addEventListener('afterprint', function)` in modern code. Introduced in: HTML → Level 5 → Challenge 146
onbeforeprint	`<body>`	JavaScript event handler that runs before the page starts printing or the print dialog opens. Example: `<body onbeforeprint="console.log('Preparing to print')">`. Useful for hiding interactive elements or adjusting layout for print. Modern code uses `window.addEventListener('beforeprint', function)`. Introduced in: HTML → Level 5 → Challenge 146
onbeforeunload	`<body>`	JavaScript event handler that runs when the user is about to leave the page (close tab, click link, refresh). Example: `<body onbeforeunload="return 'Leave site?'">`. Can display a confirmation dialog to prevent accidental data loss. Browsers show a generic message, not your custom text (security measure). Introduced in: HTML → Level 1 → Challenge 15
onblur	Form elements and others	JavaScript event handler that runs when an element loses focus (user clicks elsewhere). Example: `<input onblur="validateEmail()">`. Fires when user tabs away or clicks outside the element. Useful for validating input after user finishes editing. Opposite of onfocus. Introduced in: HTML → Level 4 → Challenge 114
oncanplay	Media elements	JavaScript event handler that runs when enough media has buffered that playback can start (but might need to buffer more). Example: `<video oncanplay="console.log('Can start playing')">`. Earlier than oncanplaythrough. Useful for hiding loading spinners. Introduced in: HTML → Level 2 → Challenge 37
oncanplaythrough	Media elements	JavaScript event handler that runs when enough media has buffered that it can play through to the end without stopping to buffer. Example: `<video oncanplaythrough="enablePlayButton()">`. Indicates smooth playback is possible. More confident than oncanplay.
onchange	Form elements	JavaScript event handler that runs when an element's value changes AND the element loses focus. For select/checkbox/radio it fires immediately on change. Example: `<select onchange="updatePrice()">`. Different from oninput which fires during typing. Useful for triggering actions after user completes a change. Introduced in: HTML → Level 4 → Challenge 114
onclick	Global attribute (all elements)	JavaScript event handler that runs when the element is clicked. Example: `<button onclick="alert('Clicked!')">`. Fires after mousedown and mouseup. Works with keyboard (Enter/Space) on focusable elements. Modern practice prefers `element.addEventListener('click', function)` over inline handlers. Introduced in: HTML → Level 2 → Challenge 35
oncontextmenu	Global attribute (all elements)	JavaScript event handler that runs when the right-click context menu is triggered. Example: `<div oncontextmenu="showCustomMenu(); return false;">`. Returning false prevents the default context menu. Used to create custom right-click menus. Introduced in: HTML → Level 5 → Challenge 144
oncopy	Global attribute (all elements)	JavaScript event handler that runs when the user copies content from the element. Example: `<p oncopy="console.log('Content copied')">`. Fires when Ctrl+C is pressed or copy is selected from context menu. Can be used to track copying or modify what gets copied. Introduced in: HTML → Level 4 → Challenge 114
oncuechange	`<track>`	JavaScript event handler that runs when the active cue (subtitle/caption) changes in a text track. Example: `<track oncuechange="displayCurrentCue()">`. Fires when moving between subtitles in a video. Useful for syncing other content with subtitle changes.
oncut	Global attribute (all elements)	JavaScript event handler that runs when the user cuts content from the element. Example: `<input oncut="console.log('Content cut')">`. Fires when Ctrl+X is pressed or cut is selected from menu. Can be used to track edits or prevent cutting in certain fields. Introduced in: HTML → Level 4 → Challenge 114
ondblclick	Global attribute (all elements)	JavaScript event handler that runs when the element is double-clicked rapidly. Example: `<div ondblclick="zoom()">`. Fires after two click events in quick succession. Less common than onclick but useful for actions like zooming or editing modes. Introduced in: HTML → Level 4 → Challenge 114
ondrag	Global attribute (all elements)	JavaScript event handler that runs continuously while an element is being dragged. Example: `<div draggable="true" ondrag="updatePosition()">`. Fires repeatedly during the drag motion. Part of the drag-and-drop API. Introduced in: HTML → Level 1 → Challenge 32
ondragend	Global attribute (all elements)	JavaScript event handler that runs when a drag operation finishes (user releases mouse). Example: `<div draggable="true" ondragend="cleanup()">`. Fires whether drop succeeded or was cancelled. Useful for resetting styles or states. Introduced in: HTML → Level 1 → Challenge 32
ondragenter	Global attribute (all elements)	JavaScript event handler that runs when a dragged element enters a valid drop target. Example: `<div ondragenter="highlight()">`. Fires when dragged item first moves over this element. Useful for visual feedback showing drop is possible here. Introduced in: HTML → Level 5 → Challenge 134
ondragleave	Global attribute (all elements)	JavaScript event handler that runs when a dragged element leaves a drop target. Example: `<div ondragleave="removeHighlight()">`. Fires when dragged item moves out of this element. Useful for removing drop zone visual feedback. Introduced in: HTML → Level 5 → Challenge 134
ondragover	Global attribute (all elements)	JavaScript event handler that runs continuously while a dragged element is over a drop target. Example: `<div ondragover="event.preventDefault()">`. Must call `preventDefault()` to allow dropping. Fires repeatedly during hovering over element. Introduced in: HTML → Level 5 → Challenge 134
ondragstart	Global attribute (all elements)	JavaScript event handler that runs when the user starts dragging an element. Example: `<div draggable="true" ondragstart="setData(event)">`. First event in drag sequence. Used to set what data is being dragged and configure drag effects. Introduced in: HTML → Level 1 → Challenge 32
ondrop	Global attribute (all elements)	JavaScript event handler that runs when a dragged element is dropped on this drop target. Example: `<div ondrop="handleDrop(event)">`. Fires when user releases mouse over element (if drop is allowed). Used to process the dropped data. Introduced in: HTML → Level 5 → Challenge 134
ondurationchange	Media elements	JavaScript event handler that runs when the duration of media changes. Example: `<video ondurationchange="updateTimeline()">`. Fires when metadata loads and duration becomes known. Useful for creating custom video controls. Introduced in: HTML → Level 2 → Challenge 37
onemptied	Media elements	JavaScript event handler that runs when media becomes unavailable (network error, source changed). Example: `<video onemptied="handleError()">`. Fires when media resource is suddenly unavailable. Less common event. Introduced in: HTML → Level 3 → Challenge 73
onended	Media elements	JavaScript event handler that runs when media playback reaches the end. Example: `<audio onended="playNext()">`. Fires when video/audio finishes naturally (not when paused or stopped). Useful for autoplaying next video or showing replay button. Introduced in: HTML → Level 2 → Challenge 37
onerror	`<body>`, `<img>`, `<input>`, `<link>`, `<script>`, media elements	JavaScript event handler that runs when an error occurs loading a resource. Example: `<img onerror="this.src='fallback.jpg'">` shows a fallback image if original fails. For body, catches JavaScript errors. Useful for error handling and fallback content. Introduced in: HTML → Level 6 → Challenge 191
onfocus	Form elements and others	JavaScript event handler that runs when an element receives focus (user clicks or tabs to it). Example: `<input onfocus="highlightField()">`. Fires when element becomes active. Useful for showing help text or styling focused fields. Opposite of onblur. Introduced in: HTML → Level 4 → Challenge 114
onhashchange	`<body>`	JavaScript event handler that runs when the URL hash (the #part) changes. Example: `<body onhashchange="loadSection()">`. Fires when user clicks anchor link or hash changes via JavaScript. Useful for single-page apps that use hash for navigation. Better to use `window.addEventListener('hashchange', function)`. Introduced in: HTML → Level 5 → Challenge 146
oninput	Form elements	JavaScript event handler that runs immediately when an element's value changes. Example: `<input oninput="updateCharCount()">`. Fires during typing, for each keystroke. Different from onchange which fires only after losing focus. Great for real-time validation or character counters. Introduced in: HTML → Level 4 → Challenge 114
oninvalid	Form elements	JavaScript event handler that runs when a form element fails validation on submit. Example: `<input required oninvalid="showError()">`. Fires when required field is empty or pattern doesn't match. Useful for custom validation messages instead of browser defaults. Introduced in: HTML → Level 4 → Challenge 110
onkeydown	Global attribute (all elements)	JavaScript event handler that runs when a key is pressed down. Example: `<input onkeydown="if(event.key==='Enter') submit()">`. Fires before the character appears. Repeats if key is held. Can prevent default behavior (like preventing 'e' in number inputs). First in key event sequence. Introduced in: HTML → Level 2 → Challenge 47
onkeypress	Global attribute (all elements)	Deprecated JavaScript event handler that ran when a character key was pressed (not modifiers like Shift). Example: `<input onkeypress="handleKey()">`. Replaced by onkeydown in modern code. Use onkeydown and check `event.key` instead. Introduced in: HTML → Level 3 → Challenge 76
onkeyup	Global attribute (all elements)	JavaScript event handler that runs when a key is released. Example: `<input onkeyup="processInput()">`. Fires after character appears in input. Last in key event sequence. Useful for processing input after user finishes a keystroke.
onload	`<body>`, `<iframe>`, `<img>`, `<input>`, `<link>`, `<script>`, `<style>`	JavaScript event handler that runs when the element or resource has completely finished loading. For `<body>`, it fires when the entire page (HTML, CSS, images, scripts) is loaded. For `<img>`, it fires when that specific image loads successfully. Example: `<body onload="startApp()">` initializes your app after everything loads. `<img onload="console.log('Image ready')">` confirms image loaded. Modern code prefers `window.addEventListener('load', function)` for the body. Introduced in: HTML → Level 1 → Challenge 15
onloadeddata	Media elements	JavaScript event handler that runs when media data for the current playback position has loaded. Example: `<video onloadeddata="hideSpinner()">`. Fires when enough data is available to render the current frame, but not necessarily to play forward. Earlier in loading sequence than oncanplay. Useful for showing the first frame of a video or confirming media data is accessible. Introduced in: HTML → Level 3 → Challenge 73
onloadedmetadata	Media elements	JavaScript event handler that runs when the metadata (duration, dimensions, text tracks) of media has been loaded. Example: `<video onloadedmetadata="showDuration()">`. Fires very early in the loading process, before actual media data loads. At this point you know how long the video is and its dimensions, but can't play it yet. Useful for displaying video information before playback. Introduced in: HTML → Level 3 → Challenge 73
onloadstart	Media elements	JavaScript event handler that runs when the browser starts loading media. Example: `<video onloadstart="showLoadingSpinner()">`. This is the very first event in the media loading sequence, fired as soon as the browser begins fetching the resource. Useful for showing loading indicators immediately when media starts downloading. Introduced in: HTML → Level 2 → Challenge 37
onmousedown	Global attribute (all elements)	JavaScript event handler that runs when a mouse button is pressed down on the element. Example: `<button onmousedown="startDrag()">`. Fires before onclick. Happens the instant the button is pressed, before release. You can detect which mouse button was pressed (left, right, middle) using the event object. Useful for drag operations or custom interactions. Introduced in: HTML → Level 3 → Challenge 69
onmousemove	Global attribute (all elements)	JavaScript event handler that runs continuously as the mouse pointer moves over the element. Example: `<div onmousemove="trackPosition(event)">`. Fires many times per second while mouse is moving. Very performance-sensitive - keep the handler code fast. Useful for drawing applications, tooltips that follow the cursor, or hover effects that track position. Introduced in: HTML → Level 3 → Challenge 69
onmouseout	Global attribute (all elements)	JavaScript event handler that runs when the mouse pointer leaves the element or any of its children. Example: `<div onmouseout="hideTooltip()">`. Fires when cursor exits the element's boundary. This event bubbles, so moving over child elements can trigger it. Opposite of onmouseover. For non-bubbling version, use onmouseleave (though it's not an HTML attribute). Introduced in: HTML → Level 2 → Challenge 35
onmouseover	Global attribute (all elements)	JavaScript event handler that runs when the mouse pointer enters the element or any of its children. Example: `<div onmouseover="showTooltip()">`. Fires when cursor first enters the element's boundary. This event bubbles, meaning it can fire multiple times as you move over child elements. Useful for hover effects. Opposite of onmouseout. Introduced in: HTML → Level 2 → Challenge 35
onmouseup	Global attribute (all elements)	JavaScript event handler that runs when a mouse button is released over the element. Example: `<button onmouseup="endDrag()">`. Fires after onmousedown and completes the click sequence (mousedown → mouseup → click). Happens the instant the button is released. Useful for drag-and-drop operations or detecting long presses (time between mousedown and mouseup). Introduced in: HTML → Level 3 → Challenge 69
onmousewheel	Global attribute (all elements)	Deprecated JavaScript event handler that ran when the mouse wheel was scrolled. Example: `<div onmousewheel="zoom(event)">`. This is non-standard and replaced by onwheel. Different browsers implemented this differently. Modern code should use `element.addEventListener('wheel', function)` instead for cross-browser compatibility. Introduced in: HTML → Level 5 → Challenge 140
onoffline	`<body>`	JavaScript event handler that runs when the browser loses internet connection. Example: `<body onoffline="showOfflineMessage()">`. Fires when network connection is lost. Useful for showing warnings, disabling features that need internet, or caching data locally. Modern code prefers `window.addEventListener('offline', function)`. Introduced in: HTML → Level 1 → Challenge 15
ononline	`<body>`	JavaScript event handler that runs when the browser regains internet connection. Example: `<body ononline="syncData()">`. Fires when network connection is restored after being offline. Useful for re-enabling online features, syncing cached data to server, or hiding offline warnings. Modern code prefers `window.addEventListener('online', function)`. Introduced in: HTML → Level 1 → Challenge 15
onpagehide	`<body>`	JavaScript event handler that runs when the browser is hiding the current page (user navigates away, closes tab, or page goes into back/forward cache). Example: `<body onpagehide="saveState()">`. Fires after onbeforeunload but before onunload. If page goes into cache, onunload won't fire but this will. Better to use `window.addEventListener('pagehide', function)`. Introduced in: HTML → Level 5 → Challenge 146
onpageshow	`<body>`	JavaScript event handler that runs when the browser displays the page (initial load or restored from back/forward cache). Example: `<body onpageshow="refreshContent()">`. Fires after onload on first visit, or when user clicks back button to return to cached page. Check `event.persisted` to know if page was cached. Better to use `window.addEventListener('pageshow', function)`. Introduced in: HTML → Level 5 → Challenge 146
onpaste	Global attribute (all elements)	JavaScript event handler that runs when the user pastes content into the element. Example: `<input onpaste="formatPastedText()">`. Fires when Ctrl+V is pressed or paste is selected from context menu. Can access pasted content via `event.clipboardData`. Useful for sanitizing pasted content or preventing pasting in certain fields. Can call `event.preventDefault()` to block pasting. Introduced in: HTML → Level 4 → Challenge 114
onpause	Media elements	JavaScript event handler that runs when media playback is paused. Example: `<video onpause="showPlayButton()">`. Fires when user clicks pause button or `pause()` method is called. Doesn't fire when playback ends naturally (use onended for that). Useful for updating UI to show paused state. Introduced in: HTML → Level 2 → Challenge 37
onplay	Media elements	JavaScript event handler that runs when media playback starts or resumes. Example: `<video onplay="hidePlayButton()">`. Fires when `play()` method is called or user clicks play, but before playback actually begins (there might be buffering). For when playback actually starts, use onplaying. Useful for updating UI immediately when play is requested. Introduced in: HTML → Level 2 → Challenge 37
onplaying	Media elements	JavaScript event handler that runs when media playback is ready to start after being paused or delayed due to buffering. Example: `<video onplaying="startAnimation()">`. Fires when playback actually begins after onplay. Means media is now actively playing frames/audio. Useful for starting synchronized animations or hiding loading spinners.
onpopstate	`<body>`	JavaScript event handler that runs when the browser's history changes (user clicks back/forward button). Example: `<body onpopstate="loadPage(event.state)">`. Fires when navigating through history created by `pushState()` or `replaceState()`. The event contains the state object you saved. Essential for single-page applications that manage their own navigation. Better to use `window.addEventListener('popstate', function)`. Introduced in: HTML → Level 5 → Challenge 146
onprogress	Media elements	JavaScript event handler that runs periodically as the browser is downloading media. Example: `<video onprogress="updateLoadingBar(event)">`. Fires repeatedly during download to report progress. Access `event.loaded` and `event.total` to calculate percentage loaded. Useful for showing download progress bars. Stops firing once media is fully downloaded. Introduced in: HTML → Level 3 → Challenge 73
onratechange	Media elements	JavaScript event handler that runs when the playback speed (rate) of media changes. Example: `<video onratechange="updateSpeedDisplay()">`. Fires when playbackRate property changes (e.g., from 1.0x to 2.0x for fast-forward). Normal speed is 1.0, slower is less (0.5), faster is more (2.0). Useful for updating UI to show current playback speed. Introduced in: HTML → Level 3 → Challenge 73
onreset	`<form>`	JavaScript event handler that runs when a form is reset (user clicks a reset button or `reset()` method is called). Example: `<form onreset="confirmReset()">`. Fires before the form is actually reset. You can call `event.preventDefault()` to stop the reset. Useful for showing confirmation dialogs or cleaning up custom form state. Form fields return to their default values when reset. Introduced in: HTML → Level 4 → Challenge 110
onscroll	Global attribute (all elements)	JavaScript event handler that runs when an element's scrollbar is scrolled. Example: `<div onscroll="checkScrollPosition()">`. Fires many times as scrolling happens - very performance-sensitive. Works on any scrollable element (with overflow: scroll or overflow: auto). Useful for infinite scroll, parallax effects, showing/hiding navigation bars, or tracking reading progress. Consider throttling or debouncing the handler. Introduced in: HTML → Level 1 → Challenge 15
onsearch	`<input type="search">`	JavaScript event handler that runs when the user initiates a search in a search input (presses Enter or clicks the search icon). Example: `<input type="search" onsearch="performSearch()">`. This is a non-standard event mainly supported in WebKit browsers (Chrome, Safari). For cross-browser compatibility, use onsubmit on the form or detect Enter key in onkeydown instead. Introduced in: HTML → Level 5 → Challenge 131
onseeked	`<audio>`, `<video>`	JavaScript event handler that runs when a seek operation (jumping to a different time position) completes. Example: `<video onseeked="hideSeekingIndicator()">`. Fires after the user drags the progress bar and playback position has updated. Opposite of onseeking which fires when seeking starts. Useful for hiding loading indicators after jumping to a new position. Introduced in: HTML → Level 3 → Challenge 73
onseeking	`<audio>`, `<video>`	JavaScript event handler that runs when a seek operation starts (user begins jumping to a different time position). Example: `<video onseeking="showSeekingIndicator()">`. Fires immediately when user starts dragging the progress bar or calls currentTime = in JavaScript. Playback position hasn't changed yet. Useful for showing loading indicators during seeking. Followed by onseeked when complete. Introduced in: HTML → Level 3 → Challenge 73
onselect	`<input>`, `<textarea>`	JavaScript event handler that runs when text inside the element is selected (highlighted). Example: `<input onselect="showFormatOptions()">`. Fires when user drags mouse over text to select it or uses Shift+Arrow keys. Useful for showing text formatting toolbars, copying features, or tracking what users are interested in. Access selected text with element.value.substring(element.selectionStart, element.selectionEnd). Introduced in: HTML → Level 4 → Challenge 114
onstalled	`<audio>`, `<video>`	JavaScript event handler that runs when the browser is trying to get media data but data is unexpectedly not forthcoming. Example: `<video onstalled="showConnectionError()">`. Fires when download stalls due to network issues. Different from onwaiting (which is about buffering during playback). Indicates a problem with the download process. Useful for showing error messages about connection problems. Introduced in: HTML → Level 3 → Challenge 73
onstorage	`<body>`	JavaScript event handler that runs when data in localStorage or sessionStorage changes in another browser tab/window. Example: `<body onstorage="syncWithOtherTabs()">`. Fires in all tabs except the one that made the change. Useful for keeping multiple tabs synchronized, like logging out all tabs when one logs out. Access event.key, event.oldValue, event.newValue to see what changed. Better to use window.addEventListener('storage', function). Introduced in: HTML → Level 5 → Challenge 146
onsubmit	`<form>`	JavaScript event handler that runs when a form is submitted (user clicks submit button, presses Enter in text field, or submit() method is called). Example: `<form onsubmit="return validateForm()">`. Fires before the form is actually sent to the server. Returning false or calling event.preventDefault() stops submission. Essential for client-side form validation and AJAX form submissions. Introduced in: HTML → Level 4 → Challenge 110
onsuspend	Media elements	JavaScript event handler that runs when the browser intentionally stops fetching media data. Example: `<video onsuspend="console.log('Download paused')">`. Fires when browser decides to stop downloading (maybe downloaded enough to play, or user paused). Different from onstalled (which indicates a problem). This is a normal part of media loading. Less commonly used than other media events. Introduced in: HTML → Level 3 → Challenge 73
ontimeupdate	`<audio>`, `<video>`	JavaScript event handler that runs repeatedly as media plays and the current playback position changes. Example: `<video ontimeupdate="updateProgress()">`. Fires approximately 4 times per second during playback. Access current time with element.currentTime. Essential for updating custom progress bars, displaying current timestamp, or syncing other content with video position. Performance-sensitive due to frequent firing. Introduced in: HTML → Level 3 → Challenge 73
ontoggle	`<details>`	JavaScript event handler that runs when a `<details>` element is opened or closed. Example: `<details ontoggle="trackExpansion()">`. Fires when user clicks the summary to expand/collapse content. Check element.open property to see if now open (true) or closed (false). Useful for analytics tracking, lazy-loading content inside details, or animating transitions. Introduced in: HTML → Level 2 → Challenge 46
onunload	`<body>`	JavaScript event handler that runs when the page is being unloaded (user navigates away, closes tab, or refreshes). Example: `<body onunload="cleanup()">`. Fires after the user has committed to leaving. Cannot reliably prevent navigation at this point (use onbeforeunload for that). Limited in what you can do - can't show alerts or dialogs. Useful for cleanup operations. Better to use window.addEventListener('unload', function). May not fire if page goes into cache.
onvolumechange	`<audio>`, `<video>`	JavaScript event handler that runs when the volume or muted state of media changes. Example: `<video onvolumechange="updateVolumeIcon()">`. Fires when volume property changes (0.0 to 1.0) or muted property toggles. Useful for updating volume slider position or volume icon (muted/low/high) in custom media controls. Introduced in: HTML → Level 2 → Challenge 37
onwaiting	`<audio>`, `<video>`	JavaScript event handler that runs when playback stops because the next frame is not available (buffering needed). Example: `<video onwaiting="showBufferingSpinner()">`. Fires during playback when video runs out of buffered data and needs to pause to load more. Different from initial loading. Useful for showing loading spinners during playback interruptions. Followed by onplaying when buffering completes. Introduced in: HTML → Level 3 → Challenge 73
onwheel	Global attribute (all elements)	JavaScript event handler that runs when the mouse wheel or trackpad is scrolled over the element. Example: `<div onwheel="zoom(event)">`. Fires for each wheel movement. Access event.deltaY (vertical scroll), event.deltaX (horizontal scroll), and event.deltaZ (less common) for scroll amounts. Can call event.preventDefault() to prevent default scrolling. Useful for custom zoom, horizontal scrolling, or overriding default scroll behavior. Replaces deprecated onmousewheel. Introduced in: HTML → Level 3 → Challenge 78
open	`<details>`, `<dialog>`	Boolean attribute that controls the open/closed state. For `<details>`, it shows the content expanded when present. For `<dialog>`, it shows the dialog as open. Example: `<details open>` starts expanded. `<dialog open>` shows the dialog. Add/remove this attribute with JavaScript to programmatically open/close these elements. When absent, the element is collapsed/hidden. Introduced in: HTML → Level 2 → Challenge 46
optimum	`<meter>`	Defines the optimal or ideal value for the meter gauge. Example: `<meter min="0" max="100" low="25" high="75" optimum="50" value="60">`. Browsers may use this to color the gauge differently depending on whether the value is near optimum. If value is near optimum it might show green, far away might show red. Helps convey whether current value is good or bad. Introduced in: HTML → Level 2 → Challenge 58
pattern	`<input>` (text types)	Specifies a regular expression that the input's value must match for the form to be valid. Example: `<input pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}">` requires format like "123-45-6789". Browser shows validation error if pattern doesn't match. Use title attribute to provide helpful error message. Works with types like text, tel, email, url, password, search. Great for enforcing specific formats like zip codes, phone numbers, etc. Introduced in: HTML → Level 4 → Challenge 114
placeholder	`<input>`, `<textarea>`	Displays gray hint text inside the input field before the user types anything. Example: `<input placeholder="Enter your email">`. Disappears as soon as user starts typing. Not a substitute for a proper `<label>` (which should always be present for accessibility). Should be a hint or example, not instructions. Useful to show format examples like "MM/DD/YYYY" for date fields. Introduced in: HTML → Level 4 → Challenge 114
popover	Global attribute (all elements)	Designates an element as a popover with automatic overlay behavior. Values: "auto" (closes when clicking outside) or "manual" (stays open until explicitly closed). Example: `<div popover="auto">`. The element is hidden by default and shown when targeted by a button with popovertarget. Browser handles positioning, backdrop, focus management, and ESC key to close. Modern feature for creating tooltips, menus, and dialogs easily. Introduced in: HTML → Level 6 → Challenge 167
popovertarget	`<button>`, `<input type="button">`	Specifies the ID of a popover element that this button should toggle. Example: `<button popovertarget="mypopover">Open</button>` controls `<div id="mypopover" popover>`. Clicking the button shows/hides the popover automatically. Browser handles all the show/hide logic without JavaScript. Works with the popover attribute on the target element. Modern feature for simple popover interactions. Introduced in: HTML → Level 6 → Challenge 167
popovertargetaction	`<button>`, `<input type="button">`	Specifies what action the button performs on the popover. Values: "toggle" (default, switches between open/closed), "show" (only opens), "hide" (only closes). Example: `<button popovertarget="menu" popovertargetaction="show">` only opens the menu, never closes it. Useful when you want separate open and close buttons. Works with popovertarget attribute. Introduced in: HTML → Level 6 → Challenge 167
poster	`<video>`	Specifies an image URL to display as the video thumbnail before playback starts. Example: `<video poster="preview.jpg">`. This image shows while the video is downloading and until the user clicks play. Without a poster, the video shows a blank space or the first frame (which may be black). Essential for making videos look professional before they load. Use an attractive still from the video. Introduced in: HTML → Level 3 → Challenge 73
preload	`<audio>`, `<video>`	Hints to the browser how much media to download before playback. Values: "none" (don't preload anything), "metadata" (only load duration and basic info), "auto" (download as much as reasonable). Example: `<video preload="metadata">`. Doesn't force the browser - it's just a hint. "none" saves bandwidth on pages with many videos. "auto" provides smoothest playback. Default is browser-dependent. Introduced in: HTML → Level 2 → Challenge 37
readonly	`<input>`, `<textarea>`	Makes a form field non-editable but still focusable and its value is submitted with the form. Example: `<input value="Fixed value" readonly>`. User can select and copy the text but can't change it. Different from disabled (which grays out the field and doesn't submit its value). Useful to show values that shouldn't be changed but need to be submitted, like order confirmation details. Introduced in: HTML → Level 5 → Challenge 134
rel	`<a>`, `<area>`, `<form>`, `<link>`	Specifies the relationship between the current document and the linked document. Common values: "stylesheet" (CSS file), "icon" (favicon), "nofollow" (don't endorse link), "noopener" (security for external links), "noreferrer" (don't send referrer info), "prev"/"next" (pagination). Example: `<link rel="stylesheet" href="styles.css">` or `<a rel="noopener" href="external.com">`. Critical for security on external links and essential for linking resources. Introduced in: HTML → Level 1 → Challenge 12
required	`<input>`, `<select>`, `<textarea>`	Makes a form field mandatory - the form cannot be submitted if this field is empty. Boolean attribute. Example: `<input required>`. Browser shows validation error if user tries to submit without filling it. Visual indicator (often a red asterisk) appears. Essential for ensuring critical data is provided. Works with browser's built-in validation. Can be styled with :required CSS pseudo-class. Introduced in: HTML → Level 4 → Challenge 114
reversed	`<ol>`	Reverses the numbering of an ordered list so it counts down instead of up. Boolean attribute. Example: `<ol reversed>` creates a countdown list (3, 2, 1 instead of 1, 2, 3). The semantic meaning is still the same (first item is most important/first chronologically), but visual numbering is reversed. Useful for rankings or countdown lists. Can combine with start attribute. Introduced in: HTML → Level 2 → Challenge 55
rows	`<textarea>`	Specifies how many lines of text the textarea should show (its visible height). Example: `<textarea rows="10">` shows 10 lines. The actual pixel height depends on font size and line height. Users can still type more lines - the textarea scrolls. Together with cols, defines the initial size of a textarea. Without rows, browsers use a default (usually around 2-3 lines). Introduced in: HTML → Level 5 → Challenge 134
rowspan	`<td>`, `<th>`	Makes a table cell span across multiple rows vertically. Example: `<td rowspan="3">` makes one cell take up the space of three rows. This is useful for creating headers that apply to multiple rows or merging cells vertically. The value is the number of rows to span. Combined with colspan, you can create complex table layouts. Introduced in: HTML → Level 4 → Challenge 102
sandbox	`<iframe>`	Applies security restrictions to iframe content. Without value, applies all restrictions. Values: "allow-scripts" (allow JavaScript), "allow-forms" (allow form submission), "allow-same-origin" (treat as same origin), "allow-popups", and others. Example: `<iframe sandbox="allow-scripts">` allows scripts but blocks everything else. Multiple values separated by spaces: `sandbox="allow-scripts allow-forms"`. Critical for safely embedding untrusted content. Without sandbox, iframe has full permissions. Introduced in: HTML → Level 6 → Challenge 180
scope	`<th>`	Specifies which cells a header cell applies to in a table. Values: "row" (header for its row), "col" (header for its column), "rowgroup" (header for a group of rows), "colgroup" (header for a group of columns). Example: `<th scope="col">Name</th>` indicates this is a column header. Critical for accessibility - screen readers use this to associate data cells with their headers in complex tables. Introduced in: HTML → Level 3 → Challenge 95
selected	`<option>`	Makes an option in a select dropdown selected by default when the page loads. Boolean attribute. Example: `<option selected>Blue</option>`. Only one option should have this in a single-select dropdown (without multiple). In multi-select, multiple options can have it. Users can change the selection. Without selected, the first option is selected by default in most browsers. Introduced in: HTML → Level 4 → Challenge 125
shape	`<area>`	Defines the shape of a clickable area in an image map. Values: "rect" (rectangle), "circle", "poly" (polygon), "default" (entire image). Example: `<area shape="circle">`. Must be paired with coords attribute which provides the shape's coordinates. Rect needs 4 coords (x1,y1,x2,y2), circle needs 3 (x,y,radius), poly needs multiple x,y pairs. Used with `<map>` to create clickable regions on images. Introduced in: HTML → Level 6 → Challenge 170
size	`<input>`, `<select>`	For text inputs: specifies visible width in characters. For `<select>`: shows that many options simultaneously (creates a list box). Example: `<input size="50">` shows approximately 50 characters wide. `<select size="5">` shows 5 options at once instead of a dropdown. Actual pixel size depends on font. For inputs, doesn't limit how much can be typed (use maxlength for that). Often better to use CSS width instead. Introduced in: HTML → Level 3 → Challenge 83
sizes	`<img>`, `<link>`, `<source>`	Specifies image sizes for different viewport widths, used with srcset for responsive images. Tells browser how large the image will be displayed at different screen sizes, helping it choose the right image from srcset. Example: `sizes="(max-width: 600px) 100vw, 50vw"` means image is 100% width on small screens, 50% on larger. Uses CSS media query syntax. For `<link rel="icon">`, specifies icon dimensions. Complex but powerful for responsive images. Introduced in: HTML → Level 2 → Challenge 34
span	`<col>`, `<colgroup>`	Specifies how many columns a `<col>` or `<colgroup>` element should span across. Example: `<col span="3" style="background-color: yellow">` applies styling to three columns. Default is 1. This is different from colspan (which is for cells) - span is for applying properties to multiple columns at once without having to list them individually. Useful for styling or setting widths of multiple columns. Introduced in: HTML → Level 3 → Challenge 91
spellcheck	Global attribute (most text elements)	Controls whether the browser should check spelling in the element. Values: "true" (check spelling), "false" (don't check). Example: `<textarea spellcheck="true">`. When enabled, misspelled words get red underlines (exact appearance varies by browser). Useful to turn off for code editors, usernames, or fields where spell-check would be annoying. Most browsers enable it by default for editable text. Also affects grammar checking. Introduced in: HTML → Level 1 → Challenge 31
src	`<audio>`, `<embed>`, `<iframe>`, `<img>`, `<input>`, `<script>`, `<source>`, `<track>`, `<video>`	Specifies the URL of the external resource to embed or load. This is one of the most important attributes. Example: `<img src="photo.jpg">` shows that image. `<script src="app.js">` loads that JavaScript file. `<iframe src="page.html">` embeds that page. Can be absolute URL[](https://example.com/file.jpg) or relative (./images/file.jpg). For `<input type="image">`, specifies the button image. Required for most of these elements to function. Introduced in: HTML → Level 2 → Challenge 35
srcdoc	`<iframe>`	Provides inline HTML content to display in the iframe instead of loading from a URL. Example: `<iframe srcdoc="<p>Hello!</p>">`. Overrides src attribute if both present. The HTML string is rendered as a complete document in the iframe. Useful for displaying dynamic content or HTML generated by JavaScript without needing a separate file. Must be properly escaped if including quotes. Better for small amounts of content than creating separate HTML files. Introduced in: HTML → Level 6 → Challenge 180
srclang	`<track>`	Specifies the language of the track text data (subtitles, captions). Uses language codes. Example: `<track kind="subtitles" src="en.vtt" srclang="en">` indicates English subtitles. Required when kind is "subtitles". Helps browsers display language names in settings menus. Values like "en" (English), "es" (Spanish), "fr" (French), "ja" (Japanese). Important for multilingual video accessibility. Introduced in: HTML → Level 2 → Challenge 39
srcset	`<img>`, `<source>`	Provides multiple image sources for responsive images, letting the browser choose the best one based on screen size/resolution. Example: `<img srcset="small.jpg 500w, large.jpg 1000w" sizes="100vw">`. Values are comma-separated: each is an image URL followed by either a width descriptor (500w = 500 pixels wide) or pixel density (2x = for retina displays). Browser picks the most appropriate image. Saves bandwidth by not loading huge images on small screens. Use with sizes for full responsive control. Introduced in: HTML → Level 2 → Challenge 34
start	`<ol>`	Specifies what number an ordered list should start counting from. Example: `<ol start="5">` makes the first item number 5 (then 6, 7, etc.). Default is 1. Can be any integer, including negative numbers. Useful when continuing a list from a previous section, or for countdown lists. Can combine with reversed attribute. Only works on `<ol>`, not `<ul>`. The semantic meaning remains the same - this is purely visual numbering. Introduced in: HTML → Level 2 → Challenge 55
step	`<input>`	Specifies the increment for number, range, date, and time inputs. Example: `<input type="number" step="0.5">` allows values like 1.0, 1.5, 2.0 but not 1.3. For range sliders, controls how far the slider jumps. For date, how many days between valid dates. Default is 1. step="any" allows any value with no restrictions. Browser up/down arrows and validation respect this. Useful for prices (step="0.01"), ratings (step="0.5"), etc. Introduced in: HTML → Level 5 → Challenge 136
style	Global attribute (all elements)	Applies inline CSS styling directly to the element. Example: `<p style="color: red; font-size: 20px;">`. Value is a string of CSS property-value pairs separated by semicolons. Inline styles have highest specificity (override external CSS). Generally discouraged for maintenance reasons - better to use classes and external CSS. Useful for dynamic styles generated by JavaScript or one-off styling. Always uses CSS syntax inside the quotes. Introduced in: HTML → Level 3 → Challenge 91
tabindex	Global attribute (all elements)	Controls whether and in what order an element can be focused using the Tab key. Values: "0" (focusable in natural order), positive number (focusable in that specific order, but discouraged), "-1" (focusable by JavaScript but not by Tab). Example: `<div tabindex="0">` makes a div keyboard-focusable. Positive values like "1", "2" override natural order (not recommended). Negative like "-1" useful for elements that should be programmatically focusable but skipped when tabbing. Essential for keyboard accessibility. Introduced in: HTML → Level 2 → Challenge 47
target	`<a>`, `<area>`, `<base>`, `<form>`	Specifies where to open the linked document or submit the form. Values: "_blank" (new tab/window), "_self" (same frame, default), "_parent" (parent frame), "_top" (full window). Example: `<a href="external.com" target="_blank">` opens in new tab. Can also be the name of a specific frame/iframe. For `_blank`, always include `rel="noopener noreferrer"` for security. For forms, determines where the response appears. Original use was for framesets but still commonly used for new tabs. Introduced in: HTML → Level 1 → Challenge 23
title	Global attribute (all elements)	Provides advisory information about the element, typically shown as a tooltip when hovering. Example: `<abbr title="World Health Organization">WHO</abbr>` shows full text on hover. For links, describes where it goes. For images, provides additional info beyond alt text. For inputs with pattern, explains the required format. Tooltip appearance varies by browser/OS. Should supplement, not replace, proper labels. Not shown on touch devices (no hover). Important for accessibility but shouldn't contain critical information that's not otherwise available. Introduced in: HTML → Level 1 → Challenge 20
translate	Global attribute (all elements)	Specifies whether the element's content should be translated when the page is localized. Values: "yes" (translate this content), "no" (don't translate). Example: `<span translate="no">API</span>` tells translation tools to leave "API" as-is. Useful to preserve brand names, code, technical terms that shouldn't be translated. Default is "yes" (everything translatable). Browser translation tools and services respect this. Also can be set to empty string (same as "yes"). Introduced in: HTML → Level 1 → Challenge 31
type	`<input>`, `<button>`, `<ol>`, `<script>`, `<style>`, `<link>`, `<embed>`, `<object>`, `<source>`	Specifies what kind of element or content you're working with. For example, in `<input type="text">` it creates a text box, while `<input type="checkbox">` creates a checkbox. In `<button type="submit">` it makes the button submit a form. In `<script type="text/javascript">` it tells the browser the script contains JavaScript code. This attribute fundamentally changes how the element behaves and appears. Introduced in: HTML → Level 1 → Challenge 13
usemap	`<img>`, `<object>`	Connects an image to a clickable map with different regions. You write `<img src="photo.jpg" usemap="#mapname">` and then define a `<map name="mapname">` with clickable areas. Each area can link to different pages. Think of it like creating an interactive treasure map where clicking different parts takes you to different destinations. The # symbol before the map name is required to make the connection work. Introduced in: HTML → Level 6 → Challenge 171
value	`<input>`, `<button>`, `<option>`, `<li>`, `<meter>`, `<progress>`, `<param>`	Sets the actual data or number associated with an element. In `<input type="text" value="Hello">`, "Hello" appears pre-filled in the text box. For `<input type="radio" value="yes">`, when checked, "yes" is what gets sent to the server. In `<option value="apple">`, "apple" is the data sent when that dropdown choice is selected, even if different text displays to users. For ordered lists `<li value="5">`, it changes the numbering. Introduced in: HTML → Level 2 → Challenge 57
width	`<img>`, `<video>`, `<canvas>`, `<embed>`, `<iframe>`, `<object>`, `<table>`, `<td>`, `<th>`, `<col>`, `<colgroup>`, `<input>`	Controls how wide an element appears on screen, measured in pixels or percentages. Writing `<img width="300">` makes the image 300 pixels wide. Using `<img width="50%">` makes it half the width of its container. The browser automatically adjusts the height proportionally unless you also specify height. Modern web developers often use CSS instead for better responsive design across different devices and screen sizes. Introduced in: HTML → Level 2 → Challenge 35
wrap	`<textarea>`	Determines whether text automatically moves to the next line when typing reaches the edge of the text box. With `<textarea wrap="soft">`, text wraps visually on screen but sends as one long line when submitted. With wrap="hard", line breaks are actually inserted into the submitted text where wrapping occurred. With wrap="off", text continues horizontally and users must manually press Enter to create new lines, causing horizontal scrolling if needed. Introduced in: HTML → Level 5 → Challenge 134