HTML Basics: quick revision, 13 bites
All 13 revision bites from this kit, free and with no sign-up.
HTML is the Skeleton of Every Web Page
The backbone of all web content.
**HTML** (HyperText Markup Language) is the standard language for creating web pages. It uses **tags** to structure content like headings, paragraphs, links, and images. Think of HTML as the skeleton of a webpage — it defines the bones, while CSS and JavaScript add style and behavior.
Takeaway. HTML provides the fundamental structure for all web content.
What is an HTML Tag?
The building blocks of HTML.
An **HTML tag** is a keyword surrounded by angle brackets, like `<p>` for paragraph. Tags usually come in pairs: an opening tag `<p>` and a closing tag `</p>`. The content between them is what the tag affects.
Takeaway. Tags define the structure and meaning of content on a webpage.
Anatomy of an HTML Element
Opening tag, content, closing tag.
An **HTML element** consists of an opening tag, the content, and a closing tag. Some elements are empty, like `<br>` (line break), and don't have a closing tag. Attributes can be added to the opening tag to provide extra information.
Takeaway. Elements are the core units of HTML, with tags and content working together.
Basic HTML Document Structure
Every page follows this skeleton.
A standard HTML document has a specific structure that browsers expect. It starts with `<!DOCTYPE html>` and includes `<html>`, `<head>`, and `<body>` sections.
Takeaway. The doctype, html, head, and body tags form the mandatory structure of any HTML page.
Headings: h1 to h6
Structure your content hierarchy.
HTML provides six levels of **headings**, from `<h1>` (most important) to `<h6>` (least important). They help organize content and improve accessibility and SEO. Use only one `<h1>` per page for the main title.
Takeaway. Headings create a clear outline of your content, from most to least important.
Paragraphs and Line Breaks
Text blocks made easy.
The `<p>` tag defines a paragraph. Browsers automatically add space before and after paragraphs. For a simple line break without starting a new paragraph, use `<br>`.
Takeaway. Use <p> for paragraphs and <br> for line breaks within a paragraph.
Links: The <a> Tag
Connect the web together.
The **anchor tag** `<a>` creates hyperlinks. The `href` attribute specifies the destination URL. Links can point to other pages, files, or email addresses.
Takeaway. The <a> tag with an href attribute is how users navigate between web pages.
Images: The <img> Tag
Add visuals to your page.
The `<img>` tag embeds an image. It is an **empty element** (no closing tag) and requires at least the `src` (source) and `alt` (alternative text) attributes.
Takeaway. The <img> tag uses src and alt attributes to display images and provide accessibility.
Lists: Unordered and Ordered
Organize items neatly.
HTML supports **unordered lists** (`<ul>`) with bullet points and **ordered lists** (`<ol>`) with numbers. Each list item is wrapped in `<li>`.
Takeaway. Use <ul> for unordered lists and <ol> for ordered lists, with <li> for each item.
Block vs Inline Elements
How elements flow on a page.
HTML elements are either **block-level** or **inline**. Block elements start on a new line and take full width; inline elements flow within text and only take necessary width.
Takeaway. Block elements structure the page, while inline elements style content within lines.
Semantic HTML: Why It Matters
Meaningful tags for better structure.
**Semantic HTML** uses tags that clearly describe their purpose, like `<header>`, `<nav>`, `<main>`, `<article>`, and `<footer>`. This improves accessibility, SEO, and code readability compared to generic `<div>` tags.
Takeaway. Semantic tags give meaning to your content, benefiting users and search engines.
Forgetting the Closing Tag
A tiny error, big impact.
A common mistake is forgetting to close tags like `<p>` or `<li>`. This can cause the browser to render content incorrectly, nesting elements unintentionally.
Takeaway. Always close your tags to avoid rendering issues.
Memorize the Basic Structure
A guaranteed exam question.
In exams, you'll often be asked to identify the correct basic HTML structure. Remember the order: `<!DOCTYPE html>`, `<html>`, `<head>` (with `<title>`), and `<body>`. Practice writing it from memory.
Takeaway. Knowing the skeleton by heart is a quick win on any HTML test.
Your notes can be a kit like these
Every kit here was made from real study material. Point Veda at a chapter, a PDF, a photo or a link and get notes, flashcards, practice MCQs, games and a scored test — free, in 42 languages.
- Chapter notes
- Flashcards
- Practice MCQs
- Scored tests
- Exam prep
Get Veda free See what students get
Free to start · No ads · Works in 42 languages