What is HTML? — HyperText Markup Language Explained
Definition
HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the World Wide Web. It uses a system of tags and elements to define headings, paragraphs, links, images, multimedia, forms, and other building blocks of web pages. HTML forms the structural foundation upon which CSS (styling) and JavaScript (interactivity) are layered.
HTML was created by Tim Berners-Lee in 1991 and has evolved through multiple versions, with HTML5 being the current standard.
HTML Document Structure
Every HTML document follows a basic boilerplate structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>| Component | Purpose |
|---|---|
<!DOCTYPE html> |
Declares the document as HTML5 |
<html> |
The root element wrapping all content |
<head> |
Contains metadata, title, and links to styles/scripts |
<body> |
Contains the visible page content |
Tags vs Elements
Understanding the distinction between tags and elements is essential:
| Concept | Description | Example |
|---|---|---|
| Tag | The markup syntax used to denote an element's start or end | <p>, </p>, <br /> |
| Element | The complete construct including the opening tag, content, and closing tag | <p>Hello</p> |
Types of Tags
- Opening tag —
<tagname> - Closing tag —
</tagname> - Self-closing (void) tag —
<br />,<img />,<input />
HTML Attributes
Attributes provide additional information about HTML elements and are always specified in the opening tag:
<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>
<img src="photo.jpg" alt="A description of the photo" width="800" height="600">
<input type="text" name="username" placeholder="Enter your name" required>Common Global Attributes
| Attribute | Purpose |
|---|---|
class |
CSS class selector (can be reused across elements) |
id |
Unique identifier for a single element |
style |
Inline CSS styles |
data-* |
Custom data attributes for JavaScript |
aria-* |
Accessibility attributes for screen readers |
role |
Defines the element's role for assistive technology |
Semantic HTML5 Elements
Semantic HTML gives meaning to the structure of web content, improving both accessibility and SEO:
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Blog Post Title</h1>
<section>
<h2>Introduction</h2>
<p>Content here...</p>
</section>
</article>
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="/article-2">Article 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 LangStop</p>
</footer>Key Semantic Elements
| Element | Purpose |
|---|---|
<header> |
Introductory content or navigation |
<nav> |
Navigation links |
<main> |
Primary content (unique per page) |
<article> |
Self-contained content (blog post, news story) |
<section> |
Thematic grouping of content |
<aside> |
Content indirectly related to the main content |
<footer> |
Footer for a section or page |
<figure> / <figcaption> |
Self-contained visual content with caption |
Benefits of Semantic HTML
- Accessibility — Screen readers use semantic elements to navigate
- SEO — Search engines prioritize semantic content structure
- Maintainability — Code is more readable and self-documenting
- Future-proofing — Standards-compliant code works across browsers
The DOM (Document Object Model)
The DOM is a programming interface that represents an HTML document as a tree of objects. When a browser loads an HTML page, it parses the markup and constructs the DOM, which JavaScript can then manipulate.
Document
├── <html>
│ ├── <head>
│ │ ├── <title>
│ │ └── <meta>
│ └── <body>
│ ├── <h1>
│ ├── <p>
│ └── <div>
│ ├── <span>
│ └── <img>
JavaScript interacts with the DOM via:
// Select an element
const heading = document.querySelector('h1');
// Modify content
heading.textContent = 'New Heading';
// Change styles
heading.style.color = 'blue';
// Create and append elements
const newParagraph = document.createElement('p');
newParagraph.textContent = 'Added dynamically';
document.body.appendChild(newParagraph);HTML Forms
Forms are the primary way users send data to a server:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>
<fieldset>
<legend>Preferences</legend>
<label><input type="checkbox" name="subscribe" /> Subscribe to newsletter</label>
<label><input type="radio" name="plan" value="free" checked /> Free</label>
<label><input type="radio" name="plan" value="pro" /> Pro</label>
</fieldset>
<select name="country">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<button type="submit">Submit</button>
</form>HTML vs XHTML
| Aspect | HTML5 | XHTML |
|---|---|---|
| Syntax | Forgiving — tags can be unclosed, attributes unquoted | Strict — all tags must close, attributes must be quoted |
| Case | Case-insensitive | All tags must be lowercase |
| Self-closing | Optional (<br> is valid) |
Required (<br />) |
| MIME Type | text/html |
application/xhtml+xml |
| Parsing | Lenient — browser infers structure | Strict — parser rejects invalid documents |
| JavaScript | Works with any case | Must follow XML rules |
| Use Case | General web development | Enterprise, XML-based workflows |
Common HTML Use Cases
Web Pages and Applications
Every website, from simple blogs to complex SPAs, uses HTML as its foundation.
Email Templates
HTML emails use table-based layouts and inline styles for cross-client compatibility.
Documentation
Technical documentation platforms (MDN, DevDocs) render content as HTML.
Hybrid Mobile Apps
Frameworks like Ionic and React Native (via WebView) render HTML-based UIs.
Embedded Content
HTML snippets are embedded in iframes, widgets, and CMS platforms.
LangStop HTML & Related Tools
- HTML Formatter — Format and beautify HTML
- CSS Formatter — Format and beautify CSS
- Markdown Editor — Write markdown with live preview