Html: quick revision, 16 bites

HTML is the Skeleton of Every Web Page

Structure before style.

**HTML** (HyperText Markup Language) is not a programming language — it's a *markup language* that uses **tags** to define the structure and content of a web page. Every website you visit relies on HTML to arrange text, images, links, and media into a readable document.

Takeaway. HTML provides the foundational structure; CSS and JavaScript add style and behavior.

Tags, Elements, and Attributes

The building blocks of HTML.

An **HTML element** is everything from the start tag to the end tag: `<tagname>content</tagname>`. **Tags** are the markup keywords inside angle brackets (e.g., `<p>`, `<h1>`). **Attributes** provide extra information about an element, written inside the opening tag as `name="value"`.

Takeaway. Elements = opening tag + content + closing tag; attributes customize them.

HTML is Case-Insensitive (But Use Lowercase)

Consistency matters for readability.

HTML tags and attributes are **case-insensitive** — `<P>` works the same as `<p>`. However, the modern standard and best practice is to always write tags and attributes in **lowercase**. This improves readability, consistency, and compatibility with stricter languages like XHTML.

Takeaway. Always use lowercase for HTML tags and attributes.

Basic HTML Document Structure

Every page follows this template.

Takeaway. A valid HTML document always includes DOCTYPE, html, head, and body.

Forgetting the Closing Tag

Unclosed tags break layout.

Takeaway. Always close non-void elements to avoid rendering errors.

Headings and Paragraphs

Organize content hierarchically.

HTML provides six levels of **headings** (`<h1>` to `<h6>`) and the **paragraph** element (`<p>`). Headings create a visual and semantic hierarchy — `<h1>` is the most important, `<h6>` the least. Paragraphs group blocks of text.

Takeaway. Use headings in order (h1 then h2, not h3 directly after h1) for accessibility and SEO.

Links Connect the Web

The 'HT' in HTML means hypertext.

The **anchor tag** `<a>` creates **hyperlinks**, the fundamental feature that makes the web interconnected. The `href` attribute specifies the destination URL. Without links, the web would be a collection of isolated documents.

Takeaway. Links are what make the World Wide Web 'web-like'.

Images: The `<img>` Tag

Visuals without closing tags.

The `<img>` element embeds an image. It is a **void element** — it has no closing tag. Two essential attributes: `src` (image file path or URL) and `alt` (alternative text for accessibility).

Takeaway. Always include alt text for accessibility and SEO.

Block vs Inline Elements

Two fundamental display behaviors.

Takeaway. Block elements create 'blocks' in the layout; inline elements flow within text.

Remember Void Elements with 'BR IMG HR'

No closing tag needed.

Void elements (self-closing) never have content or a closing tag. Mnemonic: **BR IMG HR** — `<br>` (line break), `<img>` (image), `<hr>` (horizontal rule). Others include `<input>`, `<meta>`, and `<link>`.

Takeaway. If it's a void element, don't write a closing tag.

Use Semantic HTML

Meaningful tags help everyone.

**Semantic HTML** means using tags that describe their purpose, like `<header>`, `<nav>`, `<article>`, and `<footer>`, instead of generic `<div>` elements. This improves accessibility (screen readers understand the structure) and SEO (search engines rank content better).

Takeaway. Choose the most descriptive HTML element for each part of your content.

Attributes Go in the Opening Tag

Never in the closing tag.

A common exam mistake: placing attributes inside the closing tag. **Attributes are always written in the opening tag** after the tag name, separated by spaces. The closing tag contains only the tag name with a slash.

Takeaway. Attributes belong only in the opening tag.

HTML Was Invented by Tim Berners-Lee

The web's first building block.

In 1991, **Tim Berners-Lee** published the first HTML document while working at CERN. The original version had only 18 tags. Today, HTML5 (the current standard) includes over 100 tags for multimedia, forms, graphics, and more.

Takeaway. HTML has evolved from 18 tags to over 100 in HTML5.

HTML is Like a House Blueprint

Structure before decoration.

Think of HTML as the **blueprint** of a house: it defines rooms (sections), walls (containers), doors (links), and windows (images). **CSS** is the paint and wallpaper (visual style), and **JavaScript** is the electricity and plumbing (interactivity). Without the blueprint, nothing else holds together.

Takeaway. HTML provides the essential structure; CSS and JavaScript enhance it.

How a Browser Reads HTML

From code to rendered page.

Takeaway. The browser converts HTML into a DOM tree before rendering the page.

Comments Help You (and Others) Read Code

Invisible notes for humans.

HTML **comments** are not displayed in the browser — they help developers document code. Syntax: `<!-- This is a comment -->`. Use comments to explain complex sections, mark areas for future work, or temporarily disable code without deleting it.

Takeaway. Comments keep your HTML maintainable and collaborative.