HTML Glossary — Terms & Definitions 📖
Mentor's Note: Think of this glossary as your HTML dictionary! When you encounter an unfamiliar term, look it up here. Each definition includes links to detailed tutorials so you can learn more.
A
Accessibility
The practice of designing and coding websites so that people with disabilities can use them effectively. This includes screen reader support, keyboard navigation, color contrast, and more. See SEO & Accessibility.
Alt Text (Alternative Text)
A text description added to an image via the alt attribute. Screen readers read alt text aloud, and it displays when an image fails to load. See Media Elements.
<img src="chart.png" alt="Quarterly sales growth chart showing 20% increase">
ARIA (Accessible Rich Internet Applications)
A set of attributes that supplement HTML to improve accessibility for dynamic content and advanced user interface controls. Use semantic HTML first; ARIA is a supplement, not a replacement. See SEO & Accessibility.
<button aria-label="Close dialog" onclick="closeDialog()">X</button>
Article (<article>)
A semantic HTML5 element that represents a self-contained composition in a document, such as a blog post, news story, or forum post. See Semantic HTML5.
Aside (<aside>)
A semantic HTML5 element that represents content tangentially related to the main content, such as sidebars, pull quotes, or related links. See Semantic HTML5.
Attribute
Additional information added to an HTML element to modify its behavior or appearance. Attributes are written as name="value" pairs inside the opening tag. See HTML Basics.
B
Block Element
An element that occupies the full available width and starts on a new line. Examples: <div>, <p>, <h1>, <section>. Block elements can contain inline elements and other block elements. See HTML Basics.
Boolean Attribute
An attribute that doesn't need a value — its mere presence indicates true. Examples: disabled, required, checked, readonly, hidden. See HTML Attributes.
<input type="text" required disabled>
<button disabled>Cannot Click</button>
Button (<button>)
An interactive element that users can click to trigger an action. Unlike <input type="submit">, <button> can contain HTML content (like icons or bold text). See Forms.
<button type="submit">Save Changes</button>
<button type="button" onclick="alert('Clicked!')">Click Me</button>
C
Canvas (<canvas>)
An HTML5 element used for drawing graphics, animations, and game visuals using JavaScript. Provides a bitmap drawing surface. See Canvas.
Caption (<caption>)
The title or summary of an HTML <table>, displayed above or below the table. See Tables.
<table>
<caption>Monthly Sales Report</caption>
<!-- table content -->
</table>
Checkbox (<input type="checkbox">)
A form input that allows users to select one or more options from a set. Multiple checkboxes can be checked simultaneously. See Forms.
Class (class)
A global attribute used to assign one or more CSS class names to an element. Classes are used for styling and JavaScript selection. Unlike IDs, many elements can share the same class. See CSS in HTML.
<p class="highlight important">This text has two classes.</p>
Closing Tag
The tag that marks the end of an element, written with a forward slash before the tag name, e.g., </p>, </div>, </h1>. See HTML Basics.
Code (<code>)
An element that displays its content in a monospace font, used for code snippets and programming text. See Formatting.
<p>Use the <code>console.log()</code> function to print to the console.</p>
Comment
Text in HTML that is ignored by the browser. Used for notes and documentation. Written as <!-- comment text -->. See HTML Basics.
<!-- This section will need updating when the new logo arrives -->
Content
The text or nested elements inside an HTML element, placed between the opening and closing tags. See HTML Basics.
CSS (Cascading Style Sheets)
A language used to describe the visual presentation of HTML elements — colors, layout, fonts, animations, and more. CSS works alongside HTML to style web pages. See CSS in HTML.
D
Data Attribute (data-*)
Custom attributes that store extra information on HTML elements, accessible via JavaScript. Named with the prefix data- followed by any name. See HTML Attributes.
<div data-user-id="12345" data-role="admin">John Doe</div>
Div (<div>)
A generic block-level container element with no semantic meaning. Used for layout and grouping when no semantic element is appropriate. See Grouping Content.
DOCTYPE (<!DOCTYPE html>)
A declaration at the very top of an HTML document that tells the browser to render in standards mode. The HTML5 doctype is simply <!DOCTYPE html>. See Getting Started.
DOM (Document Object Model)
A programming interface that represents the HTML document as a tree of objects. JavaScript can manipulate the DOM to change content, structure, and styles dynamically. See JavaScript in HTML.
Drag and Drop
An HTML5 API that allows users to click, drag, and drop elements on a web page, enabling intuitive interactions like file uploads and reordering items. See HTML5 APIs.
E
Element
The fundamental building block of HTML, consisting of an opening tag, content, and a closing tag (for non-void elements). Example: <p>Hello</p> is a paragraph element. See HTML Basics.
Embed (<embed>)
A void element used to embed external content like PDFs, browser plugins, or other media. Prefer <iframe>, <video>, or <audio> when possible. See Media Elements.
Emoji (HTML Entities)
Emojis can be added to HTML pages either by pasting the emoji directly or using HTML entity codes. Example: 🚀 renders as 🚀. See Entities.
<p>I love coding 💙 <!-- blue heart --></p>
F
Fieldset (<fieldset>)
An element that groups related form controls together, often used with <legend> to provide a caption. Improves form accessibility and organization. See Forms.
<fieldset>
<legend>Contact Information</legend>
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
</fieldset>
Figure (<figure>)
A semantic element that represents self-contained content like images, diagrams, code snippets, or illustrations, optionally with a <figcaption>. See Media Elements.
<figure>
<img src="diagram.png" alt="Network architecture diagram">
<figcaption>Figure 1: System Architecture Overview</figcaption>
</figure>
Footer (<footer>)
A semantic element that contains footer information for its nearest sectioning ancestor, such as copyright, contact links, or related documents. See Semantic HTML5.
Form (<form>)
A container element that collects user input and submits it to a server. Contains input elements, buttons, and other form controls. See Forms.
G
Geolocation
An HTML5 API that allows web pages to access the user's geographical location (with their permission). Used for maps, local search, and location-based services. See HTML5 APIs.
Global Attribute
An attribute that can be used on any HTML element. Examples: class, id, style, hidden, lang, tabindex, title, data-*. See HTML Attributes.
<div class="container" hidden>Hidden content</div>
H
Head (<head>)
The container element for metadata about the HTML document — title, character encoding, linked stylesheets, scripts, and viewport settings. Content inside <head> is not displayed on the page. See HTML Basics.
Header (<header>)
A semantic element that represents introductory content or navigational aids, typically containing headings, logos, and navigation links. See Semantic HTML5.
Heading (<h1> to <h6>)
Elements that create a heading hierarchy from most important (<h1>) to least important (<h6>). Only one <h1> per page, and don't skip levels. See Formatting.
href
The attribute that specifies the URL destination for a link (<a>) or the stylesheet location for <link>. Stands for "hypertext reference." See Links.
<a href="https://example.com">Visit Example</a>
HTML (HyperText Markup Language)
The standard language for creating web pages and web applications. HTML uses tags to structure content into headings, paragraphs, links, images, and other elements.
HTML5
The fifth and current major version of HTML, introducing semantic elements, multimedia support, and powerful APIs for modern web applications. See HTML5.
I
ID (id)
A global attribute that provides a unique identifier for an HTML element. Each id value must be unique within a page. Used for CSS targeting, JavaScript access, and anchor links. See HTML Attributes.
<div id="main-content">Unique content area</div>
Iframe (<iframe>)
An element that embeds another HTML page within the current page. Commonly used for YouTube videos, Google Maps, and third-party widgets. See Iframe.
<iframe src="https://www.youtube.com/embed/videoID" title="YouTube video"></iframe>
Image (<img>)
A void element that embeds an image in the page. Requires the src attribute (image URL) and alt attribute (alternative text for accessibility). See Media Elements.
<img src="photo.jpg" alt="Description of the image" width="800" height="600">
Inline Element
An element that only takes up as much width as necessary and does NOT start on a new line. Examples: <span>, <a>, <strong>, <em>. Inline elements cannot contain block elements. See HTML Basics.
Input (<input>)
A versatile void element for creating form controls. The type attribute determines its behavior — text, email, password, checkbox, radio, submit, and many more. See Forms.
Italic (<i>)
An element that renders text in italic style, typically used for technical terms, foreign language phrases, or thoughts. For emphasized text, prefer <em>. See Formatting.
J
JSON-LD (JSON for Linked Data)
A format for structuring semantic data on web pages that helps search engines understand content. Placed within a <script type="application/ld+json"> tag in the <head>. See SEO & Accessibility.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Guide",
"author": "VD Computer Tuition"
}
</script>
L
Label (<label>)
An element that provides a caption for a form control. Clicking the label focuses or activates the associated input. Essential for accessibility. See Forms.
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
lang
A global attribute that specifies the natural language of an element's content. Essential for accessibility and search engines. See Internationalization.
<html lang="en">
<p lang="fr">Bonjour le monde!</p>
Lazy Loading
A technique that defers loading of images and iframes until they are close to the viewport. Implemented with the loading="lazy" attribute. See Performance.
<img src="large-photo.jpg" alt="Scenery" loading="lazy">
Link (<link>)
A void element in the <head> that defines relationships with external resources, most commonly stylesheets. Also used for favicon, preloading, and canonical URLs. See HTML Basics.
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
List (<ol>, <ul>, <li>)
Elements for grouping related items. <ol> creates numbered lists (order matters), <ul> creates bulleted lists (order doesn't matter), and <li> represents each list item. See Lists.
LocalStorage
An HTML5 API that stores data in the browser with no expiration date. Data persists even after the browser is closed. See HTML5 APIs.
localStorage.setItem('theme', 'dark');
let theme = localStorage.getItem('theme');
M
Main (<main>)
A semantic element that represents the dominant content of the <body>. There should be only one <main> element per page. See Semantic HTML5.
Mark (<mark>)
An element that highlights or marks text for reference purposes, like search results or key passages. See Formatting.
<p>The <mark>most important</mark> concept is understanding the DOM.</p>
MathML (Mathematical Markup Language)
A markup language for describing mathematical notation, embeddable in HTML5 documents. Used for equations, formulas, and scientific content. See MathML.
Meta (<meta>)
A void element that provides metadata about the HTML document. Common uses: charset declaration, viewport settings, description, and Open Graph tags. See HTML Basics.
<meta charset="UTF-8">
<meta name="description" content="Learn HTML from scratch">
Metadata
Data that describes other data. In HTML, metadata is placed in the <head> section and includes the page title, description, character encoding, stylesheets, and more. See HTML Basics.
Microdata
A specification for embedding machine-readable data in HTML documents, helping search engines understand content (e.g., reviews, events, products). See Microdata.
N
Nav (<nav>)
A semantic element that represents a section of navigation links. Used for primary navigation menus, table of contents, and breadcrumbs. See Semantic HTML5.
Nesting
The practice of placing one HTML element inside another. Proper nesting is crucial — elements must be closed in the reverse order they were opened. See HTML Basics.
<!-- Correct nesting -->
<ul><li><a href="#">Link</a></li></ul>
<!-- Wrong nesting -->
<ul><li><a href="#">Link</ul></li></a>
O
Object (<object>)
An element that embeds external resources such as PDFs, SVG files, or browser plugins. Has largely been replaced by more specific elements like <video>, <audio>, and <iframe>. See Media Elements.
ol/ul (<ol>, <ul>)
See List.
Open Graph
A protocol that allows web pages to become rich objects in social media. Uses <meta> tags to control how content appears when shared on Facebook, Twitter, LinkedIn, etc. See Open Graph.
<meta property="og:title" content="HTML Glossary">
<meta property="og:description" content="Complete HTML terms reference">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
Opening Tag
The tag that marks the beginning of an element, written with angle brackets, e.g., <p>, <div>, <h1>. May contain attributes. See HTML Basics.
P
Paragraph (<p>)
A block-level element that represents a paragraph of text. Browsers add vertical spacing before and after paragraphs. See Formatting.
Picture (<picture>)
An element that provides multiple sources for an image, enabling responsive art direction and format switching. Contains <source> elements and a fallback <img>. See Responsive Design.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
Placeholder
A short hint or example text displayed inside a form input before the user types, specified with the placeholder attribute. Not a substitute for a <label>. See Forms.
<input type="text" placeholder="Enter your full name">
Progress (<progress>)
An element that represents the completion progress of a task, displayed as a progress bar. See Forms.
<progress value="70" max="100">70%</progress>
R
Radio (<input type="radio">)
A form input that allows users to select one option from a set. All radio buttons in a group share the same name attribute. See Forms.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Required
A boolean attribute that makes a form input mandatory. The form won't submit if required fields are empty. See Forms.
<input type="email" required>
Responsive
An approach to web design where content adapts to different screen sizes and devices. See Responsive Design.
S
Sandbox
An attribute of the <iframe> element that restricts what the embedded content can do (forms, scripts, popups, etc.). See Security.
<iframe src="third-party-site.html" sandbox></iframe>
Screen Reader
Assistive software that reads web content aloud for people who are blind or visually impaired. Screen readers rely on semantic HTML and ARIA attributes to interpret page structure. See SEO & Accessibility.
Script (<script>)
An element used to embed or reference JavaScript code. Can be placed in <head> or <body>. Use defer or async for optimal loading. See JavaScript in HTML.
<script src="app.js" defer></script>
<script>
console.log('Inline script');
</script>
Section (<section>)
A semantic element that represents a thematic grouping of content, typically with a heading. More specific than <div>, more general than <article>. See Semantic HTML5.
Semantic HTML
The practice of using HTML elements according to their meaning, not just their visual appearance. Semantic elements include <article>, <nav>, <header>, <footer>, <main>, <section>, and <aside>. See Semantic HTML5.
SEO (Search Engine Optimization)
The practice of improving web pages to rank higher in search engine results. Semantic HTML, proper heading hierarchy, meta tags, and structured data all contribute to SEO. See SEO & Accessibility.
Shadow DOM
A browser technology that encapsulates a component's internal DOM structure, keeping it separate from the main document. One of the key technologies behind Web Components. See Web Components.
Slot
An element used within a Web Component template to define insertion points where content can be projected from the main document. See Web Components.
Span (<span>)
A generic inline container element with no semantic meaning. Used for styling small sections of text or grouping inline content. See Formatting.
<p>This is <span class="highlight">highlighted text</span> in a paragraph.</p>
Src (src)
The attribute that specifies the URL of an external resource for elements like <img>, <script>, <iframe>, <video>, and <audio>. Stands for "source." See HTML Basics.
Srcset (srcset)
An attribute on <img> that provides a list of image candidates with their widths (e.g., 400w) or pixel densities (e.g., 2x), allowing the browser to choose the optimal image. See Responsive Design.
Strong (<strong>)
An element that indicates strong importance or urgency. Rendered as bold by default. More semantically meaningful than <b>. See Formatting.
Style (<style>)
An element used to embed CSS styles directly in an HTML document. Usually placed in the <head>, but can be used inline or in the <body> in certain contexts. See CSS in HTML.
<style>
body { font-family: sans-serif; color: #333; }
</style>
SVG (Scalable Vector Graphics)
A vector image format that can be embedded directly in HTML. SVGs scale infinitely without losing quality and can be styled and animated with CSS and JavaScript. See SVG.
T
Table (<table>)
An element that displays data in a structured grid of rows and columns. Used for tabular data, not for page layout. See Tables.
Tag
The fundamental syntax unit in HTML. Tags are enclosed in angle brackets (< >). Most elements have an opening tag (<p>) and a closing tag (</p>). Void elements have only one tag. See HTML Basics.
Template (<template>)
An HTML5 element that holds client-side content that is not rendered on page load but can be instantiated later using JavaScript. Used for reusable components. See Web Components.
<template id="user-card">
<div class="card">
<h3 class="name"></h3>
<p class="email"></p>
</div>
</template>
Textarea (<textarea>)
A form element that provides a multi-line text input field. Users can type and edit longer text content. See Forms.
<textarea name="message" rows="5" cols="40" placeholder="Write your message here..."></textarea>
Title (<title>)
An element in the <head> that defines the document's title, shown in the browser tab and used by search engines as the clickable headline. See HTML Basics.
V
Validation
The process of checking HTML code against official web standards to ensure correctness. The W3C HTML Validator is the official tool. Also refers to form input validation (client-side and server-side). See Testing & Validation.
Video (<video>)
An element used to embed video content in a webpage. Supports multiple source formats, subtitles, and playback controls. See Media Elements.
<video controls width="640">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>
Viewport
The visible area of a web page on a device. Controlled via the <meta name="viewport"> tag for proper mobile rendering. See Responsive Design.
Void Element
An HTML element that cannot have any content or a closing tag. Examples: <br>, <hr>, <img>, <input>, <meta>, <link>. In HTML5, the trailing slash is optional (<br> or <br />). See HTML Basics.
W
Web Component
A set of web platform APIs (Custom Elements, Shadow DOM, HTML Templates) that allow developers to create reusable custom HTML elements. See Web Components.
Web Storage
An HTML5 API that provides two client-side storage options: localStorage (persistent, no expiration) and sessionStorage (cleared when the tab closes). See HTML5 APIs.
sessionStorage.setItem('sessionId', 'abc123');
Web Worker
An HTML5 API that allows JavaScript to run in background threads, enabling complex computations without blocking the user interface. See HTML5 APIs.
WCAG (Web Content Accessibility Guidelines)
An international standard for web accessibility published by the W3C. WCAG defines four principles (Perceivable, Operable, Understandable, Robust) with success criteria at levels A, AA, and AAA. See SEO & Accessibility.
X
XSS (Cross-Site Scripting)
A security vulnerability where attackers inject malicious scripts into web pages. HTML encoding user input and using Content-Security-Policy headers help prevent XSS attacks. See Security.
<!-- NEVER inject user input directly into HTML without escaping -->
<!-- Use textContent, not innerHTML, when inserting user data -->
📚 Summary
| Category | Key Terms |
|---|---|
| Elements | Element, Tag, Void Element, Block Element, Inline Element, Semantic Element |
| Structure | DOCTYPE, HTML, Head, Body, DOM, Metadata |
| Attributes | Attribute, Global, Boolean, Data, ID, Class, href, src, lang |
| Forms | Form, Input, Label, Textarea, Button, Fieldset |
| Media | Image, Video, Audio, Iframe, Canvas, SVG, Picture |
| HTML5 | Semantic HTML5, Web Storage, Web Components, Geolocation |
| Accessibility | ARIA, Alt Text, Screen Reader, WCAG, Tab Index |
| Performance | Lazy Loading, Minification, Critical Path, CDN |
💡 Mentor's Note: Bookmark this page and refer to it whenever you encounter an unfamiliar HTML term. Understanding the vocabulary is the first step toward mastering the language!
Purpose: Comprehensive HTML glossary reference Next Lesson: HTML Basics — Start learning HTML from scratch