HTML Basics: quick revision, 39 bites

HTML Is a Markup Language, Not a Programming Language

It structures content — it doesn't compute.

HTML uses **tags** to describe the meaning and structure of content on a web page. It does not have logic, loops, or variables like programming languages.

Takeaway. HTML is about labeling content (headings, paragraphs, links) so browsers display it correctly — no logic involved.

What Does 'HyperText Markup Language' Mean?

Every word in the name matters.

Takeaway. HTML = linked, tagged, structured documents — the foundation of the World Wide Web.

HTML Is the Standard — Every Browser Follows It

One language, billions of pages.

HTML is the **official standard** for web documents, maintained by the **World Wide Web Consortium (W3C)**. Every browser (Chrome, Firefox, Safari) interprets HTML the same way.

Takeaway. Because HTML is a universal standard, a page written in HTML works on any modern browser.

A Simple HTML Page in Action

See how tags create structure.

Takeaway. HTML tags wrap content to tell the browser what role each piece plays — heading, paragraph, link, etc.

Confusing HTML Tags With Visual Styling

Don't use `<h1>` just to make text big.

Takeaway. HTML is about meaning (semantics), not appearance. Use CSS for styling, HTML for structure.

Every Website You Visit Uses HTML

Right-click → 'View Page Source' — that's HTML.

From Google's homepage to Wikipedia articles to your school's portal — **every web page** is built with HTML. It's the skeleton that holds text, images, videos, and links together.

Takeaway. HTML is the invisible scaffolding behind every web experience — understanding it unlocks how the web works.

Remember: HTML Describes Structure, Not Style

Exam trick — spot the markup language.

In exams, you may be asked to identify HTML's role. The key phrase: **'standard markup language for documents designed to be displayed in a web browser.'**

Takeaway. If a question asks about 'markup language' or 'web page structure,' the answer is HTML.

The Four Pillars of Every HTML Page

Every web page starts with this skeleton.

An HTML document is built from **four required sections** that always appear in this exact order:

Takeaway. The four-part skeleton (DOCTYPE, html, head, body) is the unchanging foundation of every HTML document.

Key Terms: DOCTYPE, html, head, body

Know these four terms by heart.

Takeaway. These four elements form the mandatory outer structure of any valid HTML document.

Minimal HTML Document in Action

See the skeleton come to life.

Notice the **indentation** — it's not required by HTML but makes the structure readable for developers.

Takeaway. The `<title>` in `<head>` sets the browser tab label; everything in `<body>` is what the user actually sees.

Forgetting the DOCTYPE Declaration

One missing line breaks the rules.

Takeaway. The DOCTYPE is not optional; it switches the browser into standards mode for consistent rendering.

Why the Head-Body Split Matters

Not everything goes on screen.

In a real website, the `<head>` might contain:

Takeaway. Separating metadata (head) from visible content (body) keeps HTML clean, accessible, and SEO-friendly.

Exam-Ready: Order of Elements

Get the sequence right every time.

In exams, you may be asked to identify the correct order of HTML document sections. Remember this sequence:

Takeaway. The DOCTYPE comes first, then html, then head, then body — always in that exact order.

What Is an HTML Tag?

The basic unit of every web page.

Most HTML elements require **both** an opening and a closing tag to work correctly.

Takeaway. An HTML tag is always written inside angle brackets; closing tags include a forward slash before the tag name.

Paired Tags: The Standard Pattern

Open it, close it — every time.

The fundamental pattern in HTML is a **paired tag**: an opening tag, some content, then a closing tag.

Takeaway. Paired tags are the default in HTML — always remember the closing tag with its forward slash.

Forgetting the Closing Tag

One missing slash breaks the page.

Takeaway. A missing closing tag is the most common beginner HTML mistake — check for the forward slash every time.

Real HTML Tag in Action

See how a heading actually works.

Takeaway. Every visible element on a web page starts with a paired tag — headings, paragraphs, links, and images all follow this rule.

Remember the Forward Slash

Slash means 'stop' in HTML.

Think of the forward slash `/` as a **stop sign** — it tells the browser to stop the element.

Takeaway. The forward slash in a closing tag signals the end of an element — like a stop sign for the browser.

Headings Show Importance, Not Size

Bigger number ≠ bigger importance.

HTML headings use a **hierarchy from 1 to 6**, where <h1> is the most important (like a book title) and <h6> is the least important (like a minor sub-note). The visual size is just a default — the real meaning is the **structural importance**.

Takeaway. Always use headings in order — never skip levels just to get a smaller font.

What Are <h1> to <h6>?

Six tags, one clear hierarchy.

Takeaway. Think of headings like an outline — <h1> is the top, <h6> is the deepest detail.

The <p> Tag: Paragraphs

Every block of text starts here.

Takeaway. Use <p> for any standalone block of text, not for single lines or headings.

Don't Use Headings Just for Bold Text

Style is not structure.

Takeaway. Headings are for structure, not styling. Use CSS for visual changes.

A Simple Page with Headings and Paragraphs

See how it all fits together.

Takeaway. Always start with <h1> for the page title, then use <h2> for sections, and wrap all body text in <p>.

Exam Trick: Heading Level Order

Don't skip levels on tests.

Many exams ask you to identify the correct heading hierarchy. Remember: you should **never skip a level** (e.g., going from <h2> directly to <h4>).

Takeaway. Headings must follow a logical, sequential order — no skipping levels.

Why Headings Matter for Accessibility

Screen readers rely on your structure.

Visually impaired users navigate web pages using screen readers that announce heading levels. A well-structured heading hierarchy lets them jump directly to the section they need.

Takeaway. Proper heading order isn't just good practice — it's essential for inclusive web design.

Remember: 1 is King, 6 is Peasant

Think royalty for heading levels.

Imagine a kingdom: <h1> is the **king** (most important), <h2> are the **princes** (next), and <h6> is the **peasant** (least important). The higher the number, the lower the rank.

Takeaway. Lower number = higher importance. <h1> is always the top level.

What Is an Anchor Tag?

The building block of the web.

Takeaway. The <a> tag with an href attribute is how you make clickable links in HTML.

Anatomy of a Link

Two parts make every link work.

Every anchor link has two essential components: the **destination** (href) and the **clickable text** (content between tags).

Takeaway. Without both href and link text, the link is incomplete or invisible.

A Simple Link in Action

See how a real link looks.

The browser displays the text "Visit Example" and navigates to `https://example.com` when clicked.

Takeaway. The href value is the destination; the tag content is what the user sees and clicks.

Missing href or Missing Text

Two common link-breaking mistakes.

Takeaway. A valid link must have both an href attribute and content between the tags.

Writing Clear Link Text

Help users know where they'll go.

Takeaway. Good link text improves usability and accessibility for all users.

Forms: The Gateway for User Input

Every login, search, and sign-up starts here.

The `<form>` element wraps all input fields and tells the browser: *this is a data-collection area*. Without it, input fields are just decorative.

Takeaway. Always wrap input fields inside a <form> element to make them functional for data submission.

Key Input Types You Must Know

Not all inputs are created equal.

The `type` attribute on `<input>` determines what kind of data the field accepts and how it behaves in the browser.

Takeaway. Choose the correct input type — it enables browser validation and improves user experience.

A Simple Login Form in Action

See how the pieces fit together.

Takeaway. A form with text, password, and submit inputs is the standard pattern for login pages.

Forgetting the name Attribute

Your input works — but data goes nowhere.

Takeaway. Without a name attribute, the input's data is invisible to the server — always include it.

Forms Power Every Online Interaction

From Google Search to Amazon checkout.

Every time you log in, search, or sign up for a newsletter, you're using an HTML form. The same `<form>` and `<input>` elements power billions of daily interactions.

Takeaway. Mastering forms is essential because they are the backbone of user-data collection on the web.

Spot the Required Attributes

Exams love testing these two attributes.

Takeaway. In exam questions, always check that both type and name are present on input elements.

Always Use the Right Input Type

Don't use text when you need email.

Using the correct `type` attribute improves usability and security with zero extra code.

Takeaway. Using the correct input type gives you free validation, better mobile UX, and improved security.

Remember: Form + Input = Data Pair

Think of it as a container and its tool.

Picture a **form** as a lunchbox and each **input** as a compartment. The lunchbox (form) holds everything together; each compartment (input) holds a specific item (data).

Takeaway. The form is the wrapper; inputs are the data collectors inside it.