HTML for Absolute Beginners — Starter Tables
Made to read fast, with zero coding background • Generated: 2025-11-27
What is HTML (in 20 seconds)?
HTML is the structure of a web page. Think of it like the skeleton of a house: headings, paragraphs, images, links,
sections. CSS is the style (colors, sizes, layout). JavaScript is the behavior (clicks, animations).
The only shape you must understand
Most HTML is made of tags that wrap content:
<tag>content</tag>
Some tags are “one-piece” (no closing tag). Example:
<img src="[Link]" alt="A cat">
1) Copy-paste this starter page (works everywhere)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport"
content="width=device-width, initial-scale=1"> <title>My first page</title> </head> <body>
<h1>Hello!</h1> <p>This is my first page.</p> </body> </html>
Save as: [Link] → double click to open in a browser.
2) The essential tags (learn these first)
If you only learn this page, you can already build a basic website.
What you type Plain meaning When to use Common mistake
<h1>Title</h1> Big page title Main title of the page Using many <h1> on one page
for no reason.
<h2>...</h2> Section title Subtitles for sections Skipping heading order
randomly.
<p>...</p> Paragraph text Normal text blocks Putting <div> or <ul> inside a
<p>.
<a Clickable link Menus, buttons, sources Forgetting href (then it’s not a
href='...'>Link</a> link).
<img src='x' Image Photos, logos Missing alt (bad accessibility).
alt='...'>
<div>...</div> Generic box Grouping things when nothing else Using only divs and no semantic
fits tags.
<span>...</span> Small inline wrapper Style one word inside text Using span as a big container.
<br> New line Poetry/address lines Using <br> to create
layout/spacing.
<hr> Section break line Topic change Using it only as decoration
everywhere.
<!-- comment --> Invisible note Notes to yourself Forgetting to close the comment.
3) Page sections (clean layout without div-soup)
Tag What it means Typical use
<header> Top area (logo/title) for page or section Usually contains logo + nav
<nav> Navigation area Your main menu links
<main> Main content area (one per page) Everything unique to this page
<section> A part of the page with a topic Add a heading inside it
<article> A self-contained piece Blog post/card/product
<aside> Side info Sidebar, tips, related links
<footer> Bottom area Copyright, contacts, extra links
4) Lists (menus, steps, bullet points)
Tag Plain meaning Must-know rule
<ul> Bullet list container Children must be <li> items
<ol> Numbered list container Children must be <li> items
<li> One list item Only inside ul/ol/menu
5) Forms (the beginner version)
A form is how you collect user input. The most important idea: label + input belong together.
What you type Plain meaning Key attributes Common note
<form> Wraps all inputs action, method If you don’t know yet, start
with method='post'.
<label for='email'>Email</label> Text label for an for The for must match the input
input id.
<input id='email' name='email' Single-line input type, name, id, name is what gets sent on
type='email'> required submit.
<textarea name='msg'></textarea> Multi-line input name, rows Don’t forget name.
<button Button type Inside forms, default is
type='submit'>Send</button> submit—be explicit.
6) Attributes (the little words inside tags)
Attributes are extra info inside the opening tag. Example: href tells a link where to go.
Attribute Plain meaning Example
href Where the link goes <a href='[Link]
src Where a file is (image/video) <img src='[Link]'>
alt Text description for images <img alt='Company logo'>
id Unique name for one element <div id='top'>
class Group name for styling many elements <p class='note'>
style Quick inline CSS (avoid long style) <p style='color:red'>
title Tooltip text <a title='Open profile'>
target Open link in new tab/window <a target='_blank'>
rel Safety info for target=_blank Use rel='noopener noreferrer'
7) Common beginner mistakes (memorize these)
Mistake Fix (plain)
Forgetting closing tags Example: <p>hi <b>there</b> needs </p>. Some tags are void (img, br) and don't close.
Using <br> for spacing Spacing is CSS. Use paragraphs, margins, padding instead.
Putting block elements inside <p> A <p> can only hold inline content like text, a, span, strong.
Missing alt on images Bad for accessibility and SEO.
Div everywhere Use header/nav/main/section/footer for cleaner pages.
8) What to learn next (simple path)
• Week 1: HTML structure (this PDF) + make 1 page with headings, text, links, 2 images.
• Week 2: CSS basics: color, font-size, margin/padding, border, background.
• Week 3: Layout: flexbox (row/column, justify-content, align-items).
• Week 4: Small project: landing page + contact form (no backend, just layout).
Mini projects (do these and you’ll learn fast)
• A personal profile page (photo, bio, social links).
• A simple product page (title, price, features list, buy button).
• A small blog layout (header, nav, 3 articles, footer).