HTML FUNDAMENTALS
HTML Glossary
Why Understanding HTML Terms Matters
HTML is the foundation of every website. Whether you’re building a webpage from scratch, managing content in WordPress, improving accessibility, or optimizing your site for search engines, understanding HTML terminology helps you make informed decisions and communicate more effectively with designers and developers.
Learning the fundamentals of HTML also provides a solid foundation for exploring CSS, JavaScript, responsive web design, and modern web development.
HTML Glossary (A–Z)
Whether you’re learning HTML for the first time or expanding your web development skills, understanding HTML terminology helps you build better websites. Browse the glossary below to explore essential HTML terms covering webpage structure, semantic elements, forms, accessibility, metadata, HTML5 features, and modern web development best practices.
A
Anchor Element
The HTML anchor element creates hyperlinks that connect users to another webpage, document, email address, telephone number, or location within the same page. Example:<a href="https://www.example.com">Visit Our Website</a>
Alt Attribute
The alt attribute provides alternative text that describes an image. It improves accessibility for screen readers and helps search engines understand image content. Example:<img src="office-building.jpg" alt="Modern office building">
Article Element
The article element represents self-contained content that can stand on its own, such as a blog post, news article, documentation page, or forum post. Example:<article> ... </article>
Aside Element
The aside element contains information related to the main content, such as sidebars, callout boxes, advertisements, or related resources. Example:<aside> Related Resources </aside>
Attribute
An attribute provides additional information about an HTML element. Attributes appear inside the opening tag and modify an element's behavior or appearance. Example:<input type="email" required>
Audio Element
The audio element embeds sound files directly into a webpage without requiring external plugins. Example:<audio controls> <source src="podcast.mp3" type="audio/mpeg"> </audio>
B
Block Element
A block-level element begins on a new line and typically occupies the full available width. Examples include div, section, article, and paragraph elements.Body Element
The body element contains all visible webpage content displayed by the browser, including text, images, forms, videos, navigation, and other page elements. Example:<body> ... </body>
Bold Element
The b element displays text in bold without implying additional importance or emphasis. Example:<b>Important Notice</b>
Button Element
The button element creates a clickable button used to submit forms or trigger JavaScript actions. Example:<button>Submit</button>
Boolean Attribute
A Boolean attribute is either present or absent. When present, the attribute is considered enabled. Example:<input type="checkbox" checked>
C
Canvas Element
The canvas element provides a drawing surface that allows JavaScript to create graphics, animations, charts, and games. Example:<canvas id="chart"></canvas>
Caption Element
The caption element provides a title or description for an HTML table. Example:<table> <caption>Sales Report</caption> ... </table>
Character Encoding
Character encoding determines how text characters are stored and displayed. HTML5 uses UTF-8 as the standard encoding. Example:<meta charset="UTF-8">
Child Element
A child element is nested directly inside another HTML element called the parent element. Example:<div> <p>Paragraph</p> </div>
Class Attribute
The class attribute assigns one or more class names to an element so it can be styled with CSS or accessed by JavaScript. Example:<div class="container"></div>
Comment
HTML comments are ignored by browsers and are commonly used to document code or temporarily disable portions of markup. Example:<!-- Main Navigation -->
D
Data Attribute
Custom data attributes store additional information on HTML elements using the data-* naming convention. Example:<div data-id="25"></div>
Data List Element
The datalist element provides predefined suggestions for input fields while still allowing users to enter custom values. Example:<input list="states"> <datalist id="states"> <option value="Florida"> <option value="Texas"> </datalist>
Description List
A description list displays terms and their corresponding descriptions using the dl, dt, and dd elements. Example:<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl>
Details Element
The details element creates an expandable section that users can open or collapse. Example:<details> <summary>Read More</summary> Additional content. </details>
Div Element
The div element is a generic block-level container used to organize and group HTML content. Example:<div class="content"> ... </div>
DOCTYPE Declaration
The DOCTYPE declaration tells browsers that the document uses HTML5 and helps ensure standards-compliant rendering. Example:<!DOCTYPE html>
E
Element
An HTML element is the basic building block of a webpage. Most elements consist of an opening tag, content, and a closing tag. Example:<p>This is a paragraph.</p>
Embed Element
The embed element inserts external content such as PDF files, multimedia, or other supported resources directly into a webpage. Example:<embed src="brochure.pdf" type="application/pdf">
Emphasis Element
The em element indicates text that should receive emphasis. Browsers typically display emphasized text in italics. Example:<em>Important</em>
Entity
An HTML entity displays reserved characters or special symbols that would otherwise be interpreted as HTML code. Example:< > & ©
External Style Sheet
An external style sheet stores CSS rules in a separate file that can be shared across multiple webpages. Example:<link rel="stylesheet" href="styles.css">
Email Input
The email input type creates a form field specifically designed for email addresses and provides built-in validation. Example:<input type="email">
F
Fieldset Element
The fieldset element groups related form controls together and often works with the legend element to provide a descriptive title. Example:<fieldset> <legend>Contact Information</legend> </fieldset>
Figure Element
The figure element groups images, illustrations, diagrams, code samples, or other self-contained content. Example:<figure> <img src="office.jpg" alt="Office"> </figure>
Figcaption Element
The figcaption element provides a caption or description for the contents of a figure element. Example:<figcaption>Corporate Headquarters</figcaption>
Footer Element
The footer element contains information typically found at the bottom of a webpage or section, such as copyright notices, contact information, or navigation links. Example:<footer> Copyright 2026 </footer>
Form Element
The form element collects user input and submits data to a server for processing. Example:<form action="/contact/" method="post"> ... </form>
Form Validation
Form validation checks user input before it is submitted to ensure required fields and formatting requirements have been met.G
Global Attribute
Global attributes can be applied to nearly every HTML element. Examples include id, class, title, lang, hidden, and style. Example:<div id="content" class="wrapper"></div>
H
Head Element
The head element contains information about the webpage that is not displayed directly in the browser, such as the title, metadata, stylesheets, and scripts. Example:<head> ... </head>
Header Element
The header element represents introductory content for a webpage or section, often containing logos, headings, and navigation. Example:<header> ... </header>
Heading Elements
Heading elements range from h1 through h6 and organize webpage content into a logical hierarchy. Example:<h1>Main Heading</h1> <h2>Section Heading</h2>
Hidden Attribute
The hidden attribute hides an element from being displayed in the browser while keeping it within the HTML document. Example:<div hidden>Hidden Content</div>
Horizontal Rule
The hr element creates a thematic break or divider between sections of related content. Example:<hr>
HTML
HTML (HyperText Markup Language) is the standard markup language used to create and structure webpages.HTML5
HTML5 is the current version of HTML and introduces semantic elements, multimedia support, improved forms, and modern web standards.Hyperlink
A hyperlink connects one webpage or resource to another using the anchor element. Example:<a href="/services/">Our Services</a>
I
ID Attribute
The id attribute assigns a unique identifier to an HTML element. An id value should only be used once within a webpage. Example:<section id="services"></section>
Iframe Element
The iframe element embeds another webpage or external content inside the current webpage. Example:<iframe src="https://www.example.com"></iframe>
Image Element
The img element displays an image within a webpage. It requires the src attribute and should always include descriptive alt text. Example:<img src="office.jpg" alt="Corporate Office">
Inline Element
An inline element displays within the normal flow of surrounding text without starting on a new line. Examples include span, strong, and em.Input Element
The input element creates interactive form fields that allow users to enter or select information. Example:<input type="text">
Input Types
HTML supports many input types including text, email, password, number, checkbox, radio, date, file, color, and search. Example:<input type="date">
J
JavaScript
JavaScript is a programming language that adds interactivity, animation, validation, and dynamic behavior to HTML webpages.JSON
JSON (JavaScript Object Notation) is a lightweight format used to exchange structured data between applications.JSON-LD
JSON-LD is a structured data format commonly used to implement Schema.org markup for search engines. Example:<script type="application/ld+json"> ... </script>
K
Keyboard Accessibility
Keyboard accessibility allows users to navigate and interact with a webpage using only a keyboard without requiring a mouse.Keyboard Shortcut
Many web applications support keyboard shortcuts that improve navigation and productivity for users.L
Label Element
The label element provides a caption for a form control and improves both usability and accessibility. Example:<label for="email">Email Address</label>
Lang Attribute
The lang attribute identifies the language of a webpage or individual element to help browsers, search engines, and assistive technologies. Example:<html lang="en">
Legend Element
The legend element provides a title or caption for a fieldset within a form. Example:<fieldset> <legend>Billing Information</legend> </fieldset>
Link Element
The link element connects external resources such as CSS stylesheets, icons, and canonical URLs to an HTML document. Example:<link rel="stylesheet" href="styles.css">
List Element
HTML provides ordered, unordered, and description lists for organizing related information. Example:<ul> <li>Website Design</li> </ul>
List Item Element
The li element represents an individual item within an ordered or unordered list. Example:<li>Responsive Web Design</li>
Main Element
The main element identifies the primary content of a webpage. There should generally be only one main element per page. Example:<main> ... </main>
M
Map Element
The map element defines an image map that allows different areas of an image to function as separate hyperlinks. Example:<map name="officemap"> ... </map>
Mark Element
The mark element highlights text to indicate its relevance or importance within the surrounding content. Example:<mark>HTML5</mark>
Meta Element
The meta element provides information about a webpage that is used by browsers, search engines, and other applications. Example:<meta name="description" content="HTML Glossary">
Metadata
Metadata is information about a webpage that is stored inside the head element, including descriptions, keywords, author information, viewport settings, and character encoding.Meter Element
The meter element displays a scalar measurement within a known range, such as disk usage, ratings, or scores. Example:<meter value="75" min="0" max="100"></meter>
Multiple Attribute
The multiple attribute allows users to select more than one value in certain form controls, such as file uploads or email fields. Example:<input type="file" multiple>
N
Nav Element
The nav element defines a section of navigation links used to help users move throughout a website. Example:<nav> ... </nav>
Name Attribute
The name attribute identifies form controls so their values can be processed when a form is submitted. Example:<input type="text" name="firstname">
Noscript Element
The noscript element provides alternative content for users whose browsers do not support JavaScript or have it disabled. Example:<noscript> Please enable JavaScript. </noscript>
Number Input
The number input type allows users to enter numeric values and can include minimum, maximum, and step settings. Example:<input type="number" min="1" max="100">
O
Object Element
The object element embeds external resources such as PDF files, multimedia, or other supported content into a webpage. Example:<object data="brochure.pdf"></object>
Ordered List
An ordered list displays items in a numbered sequence using the ol element. Example:<ol> <li>Plan</li> <li>Design</li> </ol>
Option Element
The option element defines an individual choice within a select or datalist element. Example:<option>Florida</option>
Output Element
The output element displays the result of a calculation or user action. Example:<output>150</output>
P
Paragraph Element
The paragraph element represents a block of text content using the p element. Example:<p>Welcome to our website.</p>
Parent Element
A parent element contains one or more child elements nested inside it. Example:<section> <h2>Services</h2> </section>
Pattern Attribute
The pattern attribute specifies a regular expression used to validate user input within a form field. Example:<input type="text" pattern="[A-Za-z]{3,}">
Picture Element
The picture element provides multiple image sources so browsers can select the most appropriate image for the visitor's device. Example:<picture> ... </picture>
Placeholder Attribute
The placeholder attribute displays temporary instructional text inside an input or textarea field until the user begins typing. Example:<input type="text" placeholder="Enter your name">
Preformatted Text Element
The pre element displays text exactly as written, preserving spaces and line breaks. Example:<pre> Line One Line Two
Progress Element
The progress element displays the completion progress of a task. Example:<progress value="65" max="100"></progress>
Property Attribute
The property attribute is commonly used with Open Graph metadata to describe webpage information for social media platforms. Example:<meta property="og:title" content="HTML Glossary">
Q
Quotation Element
The q element identifies a short quotation that is part of a paragraph. Browsers typically display quotation marks automatically. Example:<q>HTML is the foundation of every webpage.</q>
R
Radio Button
A radio button allows users to select only one option from a group of predefined choices. Example:<input type="radio" name="plan">
Readonly Attribute
The readonly attribute prevents users from modifying the value of a form field while still allowing it to be submitted. Example:<input type="text" value="Account ID" readonly>
Rel Attribute
The rel attribute specifies the relationship between the current document and the linked resource. Example:<link rel="stylesheet" href="styles.css">
Required Attribute
The required attribute makes a form field mandatory before the form can be submitted. Example:<input type="email" required>
Responsive Images
Responsive images automatically adapt to different screen sizes and device resolutions to improve performance and user experience. Example:<img src="office.jpg"
srcset="office-small.jpg 600w,
office-large.jpg 1200w"
alt="Office">
S
Script Element
The script element embeds or references JavaScript code used to add functionality and interactivity to a webpage. Example:<script src="script.js"></script>
Section Element
The section element groups related content together into a logical section of a webpage. Example:<section> ... </section>
Select Element
The select element creates a drop-down list that allows users to choose one or more options. Example:<select> <option>Florida</option> </select>
Semantic HTML
Semantic HTML uses meaningful elements that clearly describe the purpose and structure of webpage content, improving accessibility, SEO, and maintainability.Source Element
The source element specifies alternative media files for audio, video, or picture elements. Example:<source src="video.mp4" type="video/mp4">
Span Element
The span element is a generic inline container used to style or manipulate small portions of text. Example:<span class="highlight">Featured</span>
Strong Element
The strong element identifies text of strong importance. Browsers typically display it in bold. Example:<strong>Warning</strong>
Style Element
The style element contains CSS rules that apply directly to the current webpage. Example:<style>
body { font-family: Arial; }
</style>
SVG
SVG (Scalable Vector Graphics) is an XML-based image format used to create graphics that remain sharp at any size. Example:<svg width="100" height="100"> ... </svg>
Summary Element
The summary element provides the visible heading for a details element that users can expand or collapse. Example:<summary>Read More</summary>
T
Table Element
The table element organizes information into rows and columns. Example:<table> ... </table>
Table Row
The tr element represents a row within an HTML table. Example:<tr> ... </tr>
Table Header Cell
The th element defines a header cell within a table. Example:<th>Name</th>
Table Data Cell
The td element defines a standard data cell within a table. Example:<td>John Smith</td>
Template Element
The template element stores HTML that is not displayed until it is activated by JavaScript. Example:<template> ... </template>
Text Area
The textarea element creates a multi-line text input field. Example:<textarea></textarea>
Time Element
The time element represents a specific date, time, or duration in a machine-readable format. Example:<time datetime="2026-07-23">July 23, 2026</time>
Title Element
The title element defines the title of a webpage that appears in the browser tab and search engine results. Example:<title>HTML Glossary</title>
Track Element
The track element provides subtitles, captions, or other timed text for video and audio elements. Example:<track kind="captions" src="captions.vtt">
U
Unordered List
An unordered list displays related items using bullet points. It is created with the ul element. Example:<ul> <li>HTML</li> <li>CSS</li> </ul>
URL
A URL (Uniform Resource Locator) is the complete web address used to access a webpage or online resource. Example:https://www.example.com/about-us/
UTF-8
UTF-8 is the standard character encoding used by HTML5. It supports virtually every character and symbol used around the world. Example:<meta charset="UTF-8">
User Interface (UI)
The user interface consists of the visual elements of a webpage that visitors interact with, including buttons, forms, menus, images, and navigation.User Experience (UX)
User experience refers to how visitors perceive and interact with a website, including its usability, accessibility, navigation, performance, and overall satisfaction.V
Validation
Validation is the process of checking HTML code or user input to ensure it follows defined standards and contains no errors.Value Attribute
The value attribute specifies the default or current value of an input, button, or option element. Example:<input type="text" value="John Smith">
Variable Element
The var element identifies the name of a variable or placeholder within mathematical expressions or programming examples. Example:<var>x</var>
Video Element
The video element embeds video directly into a webpage without requiring external plugins. Example:<video controls> <source src="video.mp4" type="video/mp4"> </video>
Viewport Meta Tag
The viewport meta tag helps webpages display properly across mobile devices by controlling page scaling and responsive behavior. Example:<meta name="viewport" content="width=device-width, initial-scale=1.0">
W
Web Accessibility
Web accessibility is the practice of designing and developing websites that can be used by people of all abilities, including those using assistive technologies.Web Components
Web Components are reusable custom HTML elements built using modern browser technologies, allowing developers to create encapsulated interface components.Whitespace
Whitespace refers to spaces, tabs, and line breaks within HTML. Browsers automatically collapse consecutive whitespace into a single space during rendering.Width Attribute
The width attribute specifies the width of certain HTML elements such as images, tables, videos, and iframes. Example:<img src="office.jpg" width="600" alt="Office">
X
XHTML
XHTML (Extensible HyperText Markup Language) is a stricter version of HTML based on XML syntax and formatting rules.XML
XML (Extensible Markup Language) is a markup language used to store and transport structured data. HTML and XML serve different purposes but share similar markup syntax.Y
YouTube Embed
A YouTube video can be embedded into a webpage using the iframe element provided by YouTube. Example:<iframe src="https://www.youtube.com/embed/VIDEO_ID"> </iframe>
Z
Zero-Based Index
Zero-based indexing is a numbering system commonly used in programming where counting begins at zero instead of one. While not an HTML feature, it is frequently encountered when working with JavaScript and web development.Zip File Download
A ZIP file is a compressed archive commonly provided on websites for downloading multiple files as a single package. Example:<a href="files/project.zip">Download ZIP</a>
Z-Index
The z-index CSS property controls the stacking order of overlapping elements on a webpage. Elements with higher values appear above those with lower values. Example:<div style="z-index:10;"> ... </div>
0–9
200 Status Code
The 200 OK status code indicates that a webpage or resource was successfully requested and returned by the web server. Example:HTTP/1.1 200 OK
301 Redirect
A 301 redirect permanently forwards visitors and search engines from one URL to another while preserving most SEO value. Example:HTTP/1.1 301 Moved Permanently
302 Redirect
A 302 redirect temporarily sends visitors to another URL while indicating that the original page is expected to return. Example:HTTP/1.1 302 Found
400 Bad Request
The 400 Bad Request status code indicates that the browser sent an invalid or malformed request that the server cannot process. Example:HTTP/1.1 400 Bad Request
401 Unauthorized
The 401 Unauthorized status code indicates that authentication is required before access to the requested resource is permitted. Example:HTTP/1.1 401 Unauthorized
403 Forbidden
The 403 Forbidden status code indicates that the server understands the request but refuses to authorize access. Example:HTTP/1.1 403 Forbidden
404 Not Found
The 404 Not Found status code indicates that the requested webpage or resource cannot be located on the server. Example:HTTP/1.1 404 Not Found
500 Internal Server Error
The 500 Internal Server Error status code indicates that an unexpected problem occurred on the web server while processing the request. Example:HTTP/1.1 500 Internal Server Error
503 Service Unavailable
The 503 Service Unavailable status code indicates that the server is temporarily unavailable, often due to maintenance or high traffic. Example:HTTP/1.1 503 Service Unavailable
