What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages and web applications. It structures content on the web using tags and elements, defining the skeleton of a page (text, images, links, etc.).

HTML (HyperText Markup Language) is the standard language for creating web pages and web applications. It structures content on the web using tags and elements, defining the skeleton of a page (text, images, links, etc.). Here’s a clear breakdown:

Core Concepts

Term	Description
Markup Language	Uses tags (`<tag>`) to annotate text, images, and other content (not a programming language!).
Elements	Building blocks of HTML: `<p>Hello</p>` = paragraph element.
Attributes	Extra info inside tags: `<a href="https://example.com">Link</a>` (`href` is the attribute).
Hierarchy	Elements nest inside each other: `<body><h1>Title</h1></body>`.

How HTML Works

Structure: Defines headings, paragraphs, lists, tables.
Embed Content: Add images (<img>), videos (<video>), audio (<audio>).
Hyperlinks: Connect pages via <a href="...">.
Forms: Create inputs for user data (<input>, <textarea>).
Semantics: Tags like <header>, <article>, <footer> describe content meaning (SEO-friendly!).

Basic HTML Document Structure

<!DOCTYPE html> <!-- Declares HTML5 -->
<html>
<head>
  <title>Page Title</title> <!-- Browser tab name -->
  <meta charset="UTF-8"> <!-- Character encoding -->
</head>
<body>
  <h1>Main Heading</h1>
  <p>This is a paragraph.</p>
  <img src="image.jpg" alt="Description"> <!-- Image -->
  <a href="https://example.com">Visit Example</a> <!-- Link -->
</body>
</html>

Key HTML Elements

Element	Use	Example
Text	`<h1>–<h6>`, `<p>`, `<span>`	`<h2>Subheading</h2>`
Lists	`<ul>`, `<ol>`, `<li>`	`<ul><li>Item 1</li></ul>`
Links	`<a href="url">`	`<a href="/about.html">About</a>`
Images	`<img src="path" alt="text">`	`<img src="cat.jpg" alt="Cat">`
Forms	`<form>`, `<input>`, `<button>`	`<input type="text" placeholder="Name">`
Semantic Tags	`<header>`, `<nav>`, `<main>`, `<footer>`	`<footer>Contact info</footer>`

HTML vs. CSS vs. JavaScript

Technology	Role	Example
HTML	Structure & content	`<button>Click Me</button>`
CSS	Style (colors, layout, fonts)	`button { color: red; }`
JavaScript	Behavior (interactivity, logic)	`button.onclick = doSomething;`

⚙️ Together: HTML (bones), CSS (skin/clothes), JavaScript (muscles/brain).

Why HTML Matters

Universal: Every website uses HTML (check “View Page Source” in your browser!).
SEO Foundation: Semantic tags help search engines understand content.
Accessibility: Proper HTML (alt text, ARIA roles) aids screen readers.
Cross-Platform: Works on all devices (desktop, mobile, tablets).
Gateway to Web Dev: First step in learning front-end development.

Evolution

1991: HTML invented by Tim Berners-Lee (CERN).
HTML 4.01 (1999): Standardized structure.
XHTML (2000s): Strict XML-based version.
HTML5 (2014) 🚀: Modern standard with:
- New semantic tags (<section>, <article>).
- Media support (<video>, <audio>).
- APIs for offline apps, geolocation, drag-and-drop.

Try It Yourself

Open Notepad (Windows) or TextEdit (Mac).

Paste:

<!DOCTYPE html>
<html>
<body>
  <h1>My First HTML Page</h1>
  <p>Hello World!</p>
</body>
</html>

Save as test.html and open in a browser!

Fun Fact:

The first website (info.cern.ch) is still online and uses only basic HTML tags from 1991!

In essence: HTML is the foundation of the web—turning raw content into structured, interconnected pages. Every click, scroll, and form you use starts here.