# Hypertext Markup Language (HTML)
HTML (Hypertext Markup Language) is the standard markup language for creating web pages and web applications. Invented by [[Tim Berners-Lee]] at CERN in 1991 as part of the World Wide Web project, HTML describes the structure of a page using elements (tags) that tell browsers how to display content. Together with [[CSS]] for styling and [[JavaScript]] for interactivity, HTML forms the foundational technology of the web.
HTML implements the [[Hypertext]] vision by enabling documents to link to each other via anchor tags (`<a href>`), making the web a globally interconnected information space. The language has evolved from simple text formatting (HTML 1.0) to a rich platform for multimedia applications (HTML5). HTML5, standardized in 2014, added semantic elements, native audio/video, canvas graphics, and APIs for offline storage, geolocation, and more—eliminating the need for plugins like Flash.
## Basic Structure
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>Navigation</nav>
</header>
<main>
<article>
<h1>Heading</h1>
<p>Paragraph text</p>
</article>
</main>
<footer>Footer</footer>
<script src="app.js"></script>
</body>
</html>
```
## Common Elements
| Element | Purpose | Example |
|---------|---------|---------|
| `<h1>-<h6>` | Headings | `<h1>Title</h1>` |
| `<p>` | Paragraph | `<p>Text</p>` |
| `<a>` | Hyperlink | `<a href="url">Link</a>` |
| `<img>` | Image | `<img src="pic.jpg" alt="desc">` |
| `<div>` | Generic container | `<div class="box">...</div>` |
| `<span>` | Inline container | `<span>text</span>` |
| `<ul>/<ol>` | Lists | `<ul><li>Item</li></ul>` |
| `<table>` | Table | `<table><tr><td>Cell</td></tr></table>` |
| `<form>` | User input | `<form action="/submit">...</form>` |
| `<input>` | Form field | `<input type="text" name="q">` |
## HTML5 Semantic Elements
```
HTML5 Document Structure:
┌─────────────────────────────────────────────────────────────┐
│ <header> │
│ <nav> Navigation links </nav> │
├─────────────────────────────────────────────────────────────┤
│ <main> │
│ ┌─────────────────────────────┐ ┌───────────────────────┐│
│ │ <article> │ │ <aside> ││
│ │ <section>Content</section>│ │ Sidebar ││
│ │ <section>Content</section>│ │ ││
│ │ </article> │ │ </aside> ││
│ └─────────────────────────────┘ └───────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│ <footer> Footer content </footer> │
└─────────────────────────────────────────────────────────────┘
```
## HTML Evolution
| Version | Year | Key Features |
|---------|------|--------------|
| **HTML 1.0** | 1991 | Basic tags, links |
| **HTML 2.0** | 1995 | Forms, images |
| **HTML 3.2** | 1997 | Tables, applets |
| **HTML 4.01** | 1999 | CSS separation, accessibility |
| **XHTML** | 2000 | XML-compliant HTML |
| **HTML5** | 2014 | Semantic elements, multimedia, APIs |
| **Living Standard** | Ongoing | Continuous updates (WHATWG) |
## HTML5 APIs
| API | Purpose |
|-----|---------|
| **Canvas** | 2D graphics |
| **WebGL** | 3D graphics |
| **Audio/Video** | Native media playback |
| **Geolocation** | User location |
| **Web Storage** | Local/session storage |
| **Web Workers** | Background threads |
| **WebSocket** | Real-time communication |
| **Drag and Drop** | Native drag operations |
## The Web Trinity
```
┌─────────────────────────────────────────────────────────────┐
│ WEB PAGE │
├───────────────────┬─────────────────┬───────────────────────┤
│ HTML │ CSS │ JavaScript │
│ Structure │ Style │ Behavior │
├───────────────────┼─────────────────┼───────────────────────┤
│ • Content │ • Colors │ • Interactivity │
│ • Semantics │ • Layout │ • DOM manipulation │
│ • Accessibility │ • Typography │ • API calls │
│ • SEO │ • Animations │ • State management │
└───────────────────┴─────────────────┴───────────────────────┘
```
## Best Practices
| Practice | Benefit |
|----------|---------|
| **Semantic elements** | Accessibility, SEO |
| **Alt text on images** | Screen readers |
| **Valid markup** | Cross-browser compatibility |
| **Proper heading hierarchy** | Document structure |
| **Form labels** | Usability |
| **Mobile viewport meta** | Responsive design |
## References
- https://en.wikipedia.org/wiki/HTML
- https://html.spec.whatwg.org/ (Living Standard)
- https://developer.mozilla.org/en-US/docs/Web/HTML
## Related
- [[CSS]]
- [[JavaScript]]
- [[Hypertext Transfer Protocol (HTTP)]]
- [[Hypertext]]
- [[Hypermedia]]
- [[Web Development]]
- [[DOM]]
- [[Tim Berners-Lee]]
- [[Accessibility (a11y)]]