HTML + CSS Modern Reference (Beginner-Friendly)
Meaning + WHY/USE for each item • Tables only • Made for students starting today.
Generated: 2025-11-27
Reality check: “All commands” is enormous. This PDF includes:
• All standard, modern HTML elements you’ll see today (plus key deprecated ones to avoid)
• A wide set of modern CSS used today (core properties, layout, typography, effects, responsive, accessibility)
It skips rare/experimental/niche features you won’t need as a beginner.
Copy-paste starter (works anywhere)
[Link]:
<!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>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About</h2>
<p>Write something here.</p>
</section>
</main>
<footer>
<p>© 2025</p>
</footer>
</body>
</html>
[Link]:
/* [Link] */
*{ box-sizing: border-box; }
body{ margin:0; font-family: Arial, sans-serif; line-height:1.5; }
header, main, footer{ padding:16px; }
nav a{ margin-right:12px; text-decoration:none; }
HTML: tags used today (meaning + why)
Tip: Most of the final look comes from CSS, not HTML.
Document & metadata
Tag What it means WHY / USE (today) Key attrs
<!doctype html> Declares HTML5 Always first line (standards mode). —
<html> Root element Wraps everything; add lang. lang
<head> Setup area Meta, title, CSS links, scripts. —
<meta> Metadata Charset, viewport, description. charset; name; content
<title> Tab title Browser tab + bookmarks. —
<link> External link Load CSS, icons. rel; href
<style> Inline CSS Small demos only; prefer a CSS file. —
<script> JavaScript Load/run JS; often use defer. src; defer; type
<noscript> JS-off fallback Content if JS disabled. —
<body> Visible content Everything users see. —
Page structure (semantic layout)
Tag What it means WHY / USE (today) Key attrs
<header> Top area Logo/title/menu for page/section. —
<nav> Navigation Main menu links. —
<main> Main content One per page; unique content. —
<section> Topic section Group by topic + heading. id
<article> Self-contained content Post/card/product/news. —
<aside> Side content Sidebar, related links. —
<footer> Bottom area Copyright, contacts. —
<address> Contact info Author/org contact info. —
<h1>…<h6> Headings Structure: h1 then h2 then h3… —
<search> Search region Wrap search/filter controls. —
Text blocks & grouping
Tag What it means WHY / USE (today) Key attrs
<p> Paragraph Normal text blocks. —
<div> Generic container Group elements when no semantic tag fits. class; id
<hr> Topic break Separates topics (not decoration). —
<pre> Preformatted block Show code exactly as typed. —
<blockquote> Long quote Quoted paragraph/section. cite
<figure> Media container Wrap media with a caption. —
<figcaption> Caption Caption for a figure. —
Inline text
Tag What it means WHY / USE (today) Key attrs
<a> Link Clickable navigation. href; target; rel
<span> Inline wrapper Style part of a sentence. class
<strong> Importance Meaningful strong importance. —
<em> Emphasis Meaningful emphasis. —
<br> Line break Addresses/poetry; not spacing. —
<code> Inline code Show code words. —
<kbd> Keyboard input Show shortcuts like Ctrl+C. —
<samp> Program output Show output text. —
<var> Variable Show a variable name. —
<small> Small print Fine print/notes. —
<mark> Highlight Highlight relevant text. —
<abbr> Abbreviation Use title for full meaning. title
<time> Date/time Machine-readable time. datetime
<data> Text + value Visible text + stored value. value
<sub> Subscript H■O style. —
<sup> Superscript x² style. —
<q> Inline quote Short quotes. cite
<cite> Work title Title of a work. —
<bdi> BiDi isolate Safe mixed RTL/LTR text. —
<bdo> BiDi override Force direction. dir
<wbr> Optional wrap Allow breaking long words/URLs. —
<ruby> Ruby annotation Pronunciation annotation. —
<rt> Ruby text Annotation text. —
<rp> Ruby fallback Fallback parentheses. —
Lists
Tag What it means WHY / USE (today) Key attrs
<ul> Bulleted list Features, bullet points. —
<ol> Numbered list Steps, ranking. start; reversed
<li> List item Item inside a list. value
<dl> Description list Terms + descriptions. —
<dt> Term Term in dl. —
<dd> Description Description in dl. —
<menu> Menu list List-like container (rare). —
Images & media
Tag What it means WHY / USE (today) Key attrs
<img> Image Photos/logos; always use alt. src; alt; loading
<picture> Responsive image Different images by screen. —
<source> Source file Inside picture/audio/video. srcset; media; type
<audio> Audio player Play audio. controls; src
<video> Video player Play video. controls; src; poster
<track> Captions Subtitles/captions. kind; srclang; src
<map> Image map Clickable areas (rare). name
<area> Map area Clickable region. coords; href; alt
Tables (data)
Tag What it means WHY / USE (today) Key attrs
<table> Data table Tabular data only. —
<caption> Table title Explain the table. —
<thead> Header group Header rows. —
<tbody> Body group Body rows. —
<tfoot> Footer group Totals/summary. —
<tr> Row Row of cells. —
<th> Header cell Header; consider scope. scope; colspan;
rowspan
<td> Data cell Normal cell. colspan; rowspan
<colgroup> Column group Style columns. span
<col> Column Column definition. span
Forms
Tag What it means WHY / USE (today) Key attrs
<form> Form container Collect and submit data. action; method
<label> Field label Accessibility; click-to-focus. for
<input> Input field Text/email/password/checkbox... type; name; id;
required
<textarea> Text area Multi-line input. name; rows
<button> Button Submit/action; set type. type
<select> Dropdown Choose options. name; multiple
<option> Select option One option. value; selected
<optgroup> Option group Group options. label
<datalist> Autocomplete list Autocomplete for input. id
<fieldset> Field group Group controls. disabled
<legend> Group title Caption for fieldset. —
<output> Result Show calculation results. for; name
<progress> Progress Loading/progress indicator. value; max
<meter> Meter Value in a range. value; min; max
Embedded & interactive
Tag What it means WHY / USE (today) Key attrs
<iframe> Embed a page YouTube/maps/another site. src; title; sandbox
<embed> Embed resource Embed media/PDF (avoid if possible). src; type
<object> Embed + fallback Embed with fallback HTML. data; type
<canvas> Drawing area Graphics via JS. width; height
<details> Collapsible FAQ sections. open
<summary> Collapsible title Clickable label for details. —
<dialog> Dialog/modal Popups (with JS). open
<template> Template Hidden HTML for JS cloning. —
<slot> Slot Web components insertion point. name
<svg> SVG Icons, vector graphics. viewBox
<math> MathML Math formulas (rare). —
Deprecated (avoid)
Tag What it means WHY / USE (today) Key attrs
<font> Old styling Deprecated. Use CSS. —
<center> Old centering Deprecated. Use CSS. —
<marquee> Old animation Deprecated. Use CSS/JS. —
<frameset> Old frames Deprecated. —
HTML: attributes used today (meaning + why)
Attribute What it means WHY / USE (today)
id Unique identifier (one element) Anchor links (#about), JS hooks.
class Group identifier (many elements) CSS styling groups (buttons/cards).
href Link destination Makes <a> actually navigate.
src File location Images/video/scripts.
alt Image description Accessibility + SEO.
name Form field name What gets sent on submit.
type Input/button type email/password/submit etc.
required Must be filled Basic validation.
placeholder Hint text Help users know what to type.
target Open link location Use _blank for new tab.
rel Link relationship Security for target=_blank: noopener.
aria-label Accessible label When there’s no visible label.
data-* Custom data Store values for JS: dataset.
Always-used meta tags
Meta What it means WHY / USE (today)
<meta charset='utf-8'> Text encoding Avoids broken characters.
<meta name='viewport' Mobile scaling Makes layouts work on phones.
content='width=device-width,
initial-scale=1'>
<meta name='description' content='...'> Page summary for SEO Used in search/previews.
CSS: used today (meaning + why)
CSS controls layout, spacing, colors, text, and responsiveness.
1) Selectors (how you target elements)
Type Example What it means WHY / USE (today)
element p All <p> tags Style all paragraphs.
class .btn Elements with class='btn' Style many buttons/cards.
id #hero Element with id='hero' Style one unique section.
descendant nav a a inside nav (any depth) Style nav links.
child nav > a Direct children only Avoid styling nested links.
group h1, h2, h3 Multiple selectors Same style for many headings.
attribute img[alt] Has an attribute Target special cases.
pseudo-class a:hover State selector Hover effects.
pseudo-element p::first-line Part of an element Typographic effects.
2) At-rules (special CSS commands)
At■rule What it means WHY / USE (today)
@media Responsive rules for screen sizes Phone/tablet/layout changes.
@supports Only apply if supported Safe modern features.
@keyframes Define animation steps Used with animation.
@font-face Load custom fonts Brand typography.
@import Import CSS Usually avoid; prefer <link>.
@layer Cascade layers Frameworks / large projects.
3) Functions (modern CSS you will see)
Function What it means WHY / USE (today)
var(--x) Use a CSS variable Themes, reuse values.
calc( ) Math with units Responsive sizing.
clamp(min, ideal, Fluid size with limits Responsive fonts.
max)
min( ) / max( ) Pick min/max Adaptive layout.
url( ) Reference a file URL Background images, fonts.
rgb()/rgba() Color (+ alpha) Transparent overlays/shadows.
hsl() Hue/sat/light color Easy to tune colors.
4) Units (used today)
Unit What it means WHY / USE (today)
px Pixels Borders, small spacing.
% Percent Relative to parent.
rem Root em Best for fonts + spacing.
em Current font relative Nested sizing.
vh / vw Viewport size Full-screen sections.
fr Grid fraction Grid columns.
ch Character width Readable text widths.
s / ms Time units Animations/transitions.
deg Degrees Rotate transforms.
CSS: properties (meaning + why)
This is the modern beginner dictionary.
Spacing shortcuts (shorthand)
Property / pattern What it means WHY / USE (today) Common
margin: 10px; All sides margin Quick consistent spacing. 10px
margin: 10px 20px; TB / LR margin Most common shorthand. top/bottom,
left/right
margin: 0 auto; Center a block Center fixed-width containers. needs width/m
ax-width
padding: 12px 16px; Inner spacing Buttons/cards/panels. 12px 16px
Box model & sizing
Property / pattern What it means WHY / USE (today) Common
box-sizing Sizing calculation Use border-box to avoid surprises. border-box
margin Outer spacing Space between elements. 0; 16px; auto
padding Inner spacing Space inside elements. 8px 16px
border Border line Outline/separation. 1px solid
#e5e7eb
width Element width Control width. 100%; 320px
max-width Maximum width Readable pages. 1200px; 60ch
height Element height Careful with fixed heights. auto; 100vh
aspect-ratio Width:height ratio Keep boxes proportional. 16/9
overflow Overflow behavior Hide/scroll overflow. hidden; auto
Typography
Property / pattern What it means WHY / USE (today) Common
font-family Font choice Consistent readable text. Arial,
sans-serif
font-size Text size Use rem for scaling. 1rem; 1.25rem
font-weight Boldness Headings vs text. 400; 700
line-height Line spacing Readability. 1.5
text-align Alignment Center titles. left; center
text-decoration Underline etc. Style links. none
text-transform Case change Buttons/labels. uppercase
letter-spacing Letter spacing Heading styling. 0.5px
Colors & backgrounds
Property / pattern What it means WHY / USE (today) Common
color Text color Contrast and readability. #111827
background-color Background fill Cards/sections/buttons. #f9fafb
background-image Background image Hero backgrounds. url('[Link]')
background-size Background scale Fill nicely. cover
background-position Background position Focus point. center
background-repeat Repeat or not No tiling. no-repeat
opacity Transparency Fade UI (careful). 0.9
Borders & effects
Property / pattern What it means WHY / USE (today) Common
border-radius Rounded corners Modern UI. 12px
box-shadow Shadow Depth for cards. 0 10px 30px r
gba(0,0,0,.1)
outline Focus ring Accessibility. 3px solid
#2563eb
outline-offset Outline spacing Nice focus rings. 3px
Display types
Property / pattern What it means WHY / USE (today) Common
display Layout type Block/inline/flex/grid. block;
inline; flex;
grid
visibility Hide but keep space Temporary hide without layout jump. hidden
Positioning
Property / pattern What it means WHY / USE (today) Common
position Position mode Sticky header, overlays. relative;
absolute;
fixed; sticky
top/right/bottom/left Offsets Move positioned stuff. 0; 10px
z-index Layer order Keep header above. 10; 999
Flexbox
Property / pattern What it means WHY / USE (today) Common
display: flex Enable flex layout Rows, navbars, centering. flex
justify-content Main axis align Center/space items. center;
space-between
align-items Cross axis align Vertical align in row. center
flex-direction Row or column Stack in column for mobile. row; column
gap Space between items Clean spacing. 12px
flex-wrap Wrap items Wrap cards. wrap
Grid
Property / pattern What it means WHY / USE (today) Common
display: grid Enable grid Galleries/dashboards. grid
grid-template-columns Define columns 2-4 columns. repeat(3,
1fr)
gap Space between cells Grid spacing. 16px
place-items Align items Quick centering. center
Transforms + motion
Property / pattern What it means WHY / USE (today) Common
transform Move/scale/rotate Hover effects. translateY(-2
px)
transition Smooth change Smooth hover. 150ms ease
animation Keyframe animation Complex motion. name 1s ease
Images
Property / pattern What it means WHY / USE (today) Common
max-width Limit image width Prevent overflow. 100%
height Image height Auto or fixed. auto
object-fit Fit image in box Crop nicely. cover
object-position Crop focus Keep faces visible. center
Interaction
Property / pattern What it means WHY / USE (today) Common
cursor Mouse cursor Clickable pointer. pointer
user-select Text selection Prevent selecting UI. none
pointer-events Mouse events Disable clicks. none
accent-color Form control color Modern checkbox/radio color. #2563eb
scroll-behavior Scroll animation Smooth scrolling. smooth
CSS: states & special selectors
Selector What it means WHY / USE (today)
:hover Mouse over Hover feedback.
:active While clicking Pressed effect.
:focus Element focused Forms + keyboard.
:focus-visible Keyboard focus only Best accessible focus.
:disabled Disabled Disable inputs/buttons.
:checked Checked Checkbox/radio state.
:nth-child(n) Nth item Patterns.
Pseudo-element What it means WHY / USE (today)
::before Insert before content Decoration without extra HTML.
::after Insert after content Badges/decoration.
::placeholder Placeholder text Style placeholder.
::selection Selected text Custom selection color.
Copy-paste (safe hover + focus)
.btn{
display:inline-block;
padding:12px 16px;
text-decoration:none;
border-radius:12px;
transition: transform 150ms ease, opacity 150ms ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); opacity:.9; }
.btn:focus-visible{ outline:3px solid #2563eb; outline-offset:3px; }