HTML

⚡ TL;DR

HTML is the language used to build the structure of every webpage on the internet. It works by wrapping content in descriptive labels called tags, telling the browser "this is a heading," "this is a paragraph," "this is an image." It's not a programming language — it doesn't do logic — but nothing on the web exists without it.

---

🧩 What It Is

HTML stands for HyperText Markup Language. Break that down:

• HyperText = text that links to other text (i.e., hyperlinks — what makes the web a web)
• Markup = annotating content with labels that describe its role
• Language = a standardized system with rules and syntax

HTML is a document format and markup language, not a programming language. It was invented by Tim Berners-Lee in 1991 as a way to share scientific documents over the internet. It has since evolved through several versions, with HTML5 (finalized in 2014) being the current standard — adding native support for video, audio, and richer semantics.

Every webpage you visit — no matter how complex — starts with an HTML file that a browser reads and renders into the visual page you see.

---

🎯 What It's Used For

• Building webpages — every site from a personal blog to Google.com has HTML at its foundation
• Defining page structure — organizing content into headers, sections, navigation, footers, articles
• Embedding media — placing images, videos, and audio directly into pages
• Creating forms — login fields, search bars, contact forms, checkboxes
• Linking content — connecting pages to each other via hyperlinks, the core mechanic of the web
• Accessibility — properly written HTML tells screen readers what content means, not just what it looks like
• SEO (Search Engine Optimization) — search engines read HTML to understand and rank your content

---

👤 Who Uses It & Why

Who	Why
Web developers (front-end)	It's the literal starting point of every webpage they build
Web designers	To translate visual designs into something a browser can render
Content creators & bloggers	Platforms like WordPress ultimately generate HTML; knowing it gives you control
Email marketers	Email newsletters are often built in HTML
Data scientists / researchers	Web scraping involves parsing HTML to extract structured data
No-code / low-code builders	Tools like Webflow and Squarespace generate HTML — knowing it helps you customize

The motivation is universal: if you want anything to appear in a browser, HTML is how you put it there.

---

🔑 Core Concepts to Understand

1. Elements

The basic unit of HTML. An element represents a piece of content with a specific meaning — a paragraph, a heading, a link, an image.

2. Tags

The syntax used to define elements. Most elements have an opening tag and a closing tag:

<p>This is a paragraph.</p>

The <p> opens it, </p> closes it. The content lives between them.

3. Attributes

Extra information added inside an opening tag to configure the element:

<a href="https://example.com">Click here</a>

Here, href is an attribute that tells the link where to go.

4. Nesting

Elements can live inside other elements, creating a hierarchy:

<article>
  <h1>My Title</h1>
  <p>My content.</p>
</article>

This hierarchy is what gives a page its structure.

5. The DOM (Document Object Model)

When a browser reads HTML, it builds a mental tree of all the elements — this tree is called the DOM. It's the live, in-memory representation of your page, and it's what [[CSS]] and [[Javascript]] interact with.

6. Semantic vs. Non-Semantic Elements

• Semantic elements describe meaning: <article>, <nav>, <header>, <footer>, <main>
• Non-semantic elements are generic containers: <div>, <span>

Using semantic elements correctly matters for accessibility and SEO.

7. Void Elements

Some elements have no content and no closing tag — they're self-contained:

<img src="photo.jpg" alt="A photo">
<br>
<input type="text">

---

⚙️ How It Works

1. You write an .html file containing text wrapped in tags
2. You open that file in a browser (or it's served from a web server)
3. The browser's rendering engine reads the HTML top-to-bottom, parses the tags, and builds the DOM
4. It uses that DOM to paint the visual page on your screen

The browser is forgiving — it will try to display something even if your HTML has errors. This is by design, but it means bad HTML can produce unexpected results silently.

A minimal valid HTML page looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

• <!DOCTYPE html> — tells the browser this is modern HTML5
• <head> — invisible metadata: page title, character encoding, links to stylesheets
• <body> — everything the user actually sees

---

🔗 How It Fits Into the Bigger Picture

HTML is the first layer of the three-layer web stack:

HTML  →  Structure & Content
CSS   →  Visual Presentation (colors, fonts, layout)
JS    →  Behavior & Interactivity (clicks, animations, data)

You can't meaningfully use CSS or JavaScript without HTML — they both attach to and operate on HTML elements. HTML also integrates with:

• Web servers — which serve .html files to browsers on request
• Backend languages (Python, PHP, Ruby, etc.) — which generate HTML dynamically
• Frameworks (React, Vue, Angular) — which use JavaScript to produce and update HTML at runtime
• Accessibility tools — screen readers consume HTML structure directly

HTML is the beginning of every web learning path, and nearly every web concept traces back to it.

---

✅ What You Should Know vs. ❌ What You Don't Need to Worry About (Yet)

✅ Essential

• Common tags: <h1>–<h6>, <p>, <a>, <img>, <ul>, <ol>, <li>, <div>, <span>, <form>, <input>, <button>
• Semantic layout elements: <header>, <main>, <footer>, <nav>, <section>, <article>
• How attributes work, especially href, src, alt, class, id
• The <head> vs <body> distinction
• Proper nesting and valid structure
• What the DOM is conceptually

❌ Not Yet

• <canvas> and WebGL for graphics rendering
• The full Web Components spec
• ARIA roles and advanced accessibility (important eventually, not on day one)
• <template>, <slot>, and Shadow DOM
• HTML email quirks (a whole separate nightmare)
• Browser compatibility edge cases

---

💡 Common Misconceptions

1. "HTML is a programming language." It isn't. HTML has no variables, no logic, no loops. It describes content — it doesn't instruct a computer to do anything. It's a markup language, closer in nature to a labeled outline than to code.

2. "Modern frameworks mean you don't need to know HTML." React, Vue, and similar tools ultimately produce HTML. If you don't understand HTML, you're flying blind when debugging layout issues, accessibility problems, or SEO failures. The abstraction leaks constantly.

3. "As long as it looks right in the browser, the HTML is correct." Browsers are aggressively forgiving and will render broken HTML reasonably well. But invalid or non-semantic HTML hurts screen readers, search engines, and the maintainability of your code — even if it looks fine visually.

---

🚀 Where to Go Next

1. Practice immediately — Open any text editor, write a basic HTML file, and open it in a browser. There's no setup required.
2. Learn CSS next — HTML gives you structure; CSS gives it style. They're always used together.
3. Then [[JavaScript]] — Once you can build and style a page, JS lets you make it interactive.
4. Resources:
   • MDN Web Docs — the definitive HTML reference, free
   • The Odin Project — free, project-based web dev curriculum
   • html.com — beginner-friendly with visual examples
5. Explore DevTools — Right-click any webpage → Inspect. You're looking at live HTML. This is the best way to learn by example.