Introduction
This glossary provides definitions for key HTML terms, elements, and concepts covered in this tutorial. Use this reference to quickly look up unfamiliar terms as you work through the chapters.
Interactive HTML Glossary
Use the expandable sections below to explore HTML terms and concepts. Click on any section to reveal definitions and examples.
📄 Core HTML Concepts
- HTML
- HyperText Markup Language - The standard markup language for creating web pages and web applications.
- Example:
<!DOCTYPE html><html><head><title>My Page</title></head><body><h1>Hello World</h1></body></html> - Element
- A fundamental component of HTML that defines the structure and content of a web page. Elements are represented by tags.
- Example:
<p>This is a paragraph element.</p> - Tag
- The markup that defines an HTML element. Tags are enclosed in angle brackets, like <p> or </p>.
- Example:
<h1>Opening tag</h1>Closing tag - Attribute
- Additional information provided to an HTML element, specified within the opening tag. For example: <img src="image.jpg" alt="Description">.
- Example:
<a href="https://example.com" target="_blank">Link</a> - Semantic HTML
- HTML that uses meaningful tags to describe the content's purpose rather than just its appearance. Examples include <header>, <nav>, <main>, <article>, etc.
- Example:
<header><nav><a href="/">Home</a></nav></header><main><article><h1>Title</h1></article></main>
🏗️ Document Structure
- DOCTYPE
- A declaration that tells the browser which version of HTML the page is using. For HTML5, it's <!DOCTYPE html>.
- Example:
<!DOCTYPE html>(always the first line of an HTML document) - Head Element
- The <head> element contains meta-information about the HTML document, such as the title, character encoding, and links to external resources.
- Example:
<head><title>Page Title</title><meta charset="UTF-8"></head> - Body Element
- The <body> element contains all the content that is visible to users in the web browser.
- Example:
<body><h1>Welcome</h1><p>This content is visible to users.</p></body> - Meta Element
- The <meta> element provides metadata about the HTML document, such as character encoding, viewport settings, and search engine information.
- Example:
<meta charset="UTF-8">or<meta name="viewport" content="width=device-width, initial-scale=1.0">
📝 Content Elements
- Heading Elements
- HTML elements used to define headings, ranging from <h1> (most important) to <h6> (least important).
- Example:
<h1>Main Title</h1><h2>Section Title</h2><h3>Subsection</h3> - Paragraph Element
- The <p> element defines a paragraph of text content.
- Example:
<p>This is a paragraph of text content that will be displayed as a block.</p> - Div Element
- The <div> element is a generic container for grouping content and applying styles or scripts.
- Example:
<div class="container"><h1>Title</h1><p>Content</p></div> - Span Element
- The <span> element is an inline container for grouping text or other inline elements.
- Example:
<p>This is <span class="highlight">important</span> text.</p>
🔗 Links & Media
- Anchor Element
- The <a> element creates hyperlinks to other web pages, files, or locations within the same page.
- Example:
<a href="https://example.com">Visit Example</a>or<a href="#section">Jump to Section</a> - Image Element
- The <img> element embeds images in an HTML document. Requires a src attribute and should include an alt attribute for accessibility.
- Example:
<img src="photo.jpg" alt="A beautiful sunset" width="400" height="300"> - Link Element
- The <link> element defines relationships between the current document and external resources, commonly used for CSS stylesheets.
- Example:
<link rel="icon" href="favicon.ico">
📋 Lists & Tables
- List Elements
- HTML elements for creating lists: <ul> (unordered), <ol> (ordered), <li> (list item), and <dl> (description list).
- Example:
<ul><li>Apples</li><li>Bananas</li></ul>or<ol><li>First</li><li>Second</li></ol> - Table Elements
- Elements for creating tabular data: <table>, <tr> (table row), <td> (table data), <th> (table header).
- Example:
<table><tr><th>Name</th><th>Age</th></tr><tr><td>John</td><td>25</td></tr></table>
📝 Forms & Input
- Form Elements
- Elements for creating user input forms: <form>, <input>, <textarea>, <select>, <button>, etc.
- Example:
<form><label>Name:</label><input type="text" name="name"><button type="submit">Submit</button></form>
🏛️ Semantic Structure
- Header Element
- The <header> element represents introductory content or navigation links for its nearest sectioning element.
- Example:
<header><h1>Site Title</h1><nav><a href="/">Home</a></nav></header> - Navigation Element
- The <nav> element defines a section of navigation links.
- Example:
<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav> - Main Element
- The <main> element represents the main content of the document, unique from sidebars, headers, and footers.
- Example:
<main><h1>Article Title</h1><p>Main content goes here...</p></main> - Section Element
- The <section> element defines a standalone section of content that doesn't have a more specific semantic element.
- Example:
<section><h2>About Us</h2><p>Company information...</p></section> - Article Element
- The <article> element represents a self-contained composition that could be distributed independently.
- Example:
<article><h2>Blog Post Title</h2><p>Post content...</p><time>2025-01-01</time></article> - Aside Element
- The <aside> element represents content that is tangentially related to the main content.
- Example:
<aside><h3>Related Links</h3><ul><li><a href="#">Link 1</a></li></ul></aside> - Footer Element
- The <footer> element represents footer content for its nearest sectioning element.
- Example:
<footer><p>© 2025 Company Name</p><nav><a href="/contact">Contact</a></nav></footer>
🎯 Advanced Concepts
- Accessibility
- The practice of making web content usable by people with disabilities, including proper use of semantic HTML, alt text, and keyboard navigation.
- Alt Attribute
- An attribute used with the <img> element to provide alternative text for screen readers and when images fail to load.
- Viewport
- The visible area of a web page in a browser window. The viewport meta tag controls how the page is displayed on mobile devices.
- Character Encoding
- The way characters are represented in a document. UTF-8 is the most common encoding for HTML documents.
- Self-Closing Tag
- An HTML tag that doesn't require a closing tag, such as <img>, <br>, or <input>. Also called void elements.
- Nested Elements
- When one HTML element is placed inside another element, creating a hierarchical structure.
- Block-Level Element
- An HTML element that takes up the full width available and starts on a new line, like <p>, <div>, or <h1>.
- Inline Element
- An HTML element that only takes up as much width as necessary and doesn't start on a new line, like <a>, <span>, or <strong>.
- HTML5
- The latest version of HTML that introduced new semantic elements, multimedia support, and improved form controls.
- Web Standards
- Guidelines and specifications developed by organizations like W3C to ensure consistent behavior across different browsers and devices.
- Script Element
- The <script> element embeds or references JavaScript code in an HTML document.
- Example:
<script>/* JavaScript code here */</script>
🔍 Quick Search
Note: Search functionality requires JavaScript. This is a placeholder for future enhancement.