HTML5 Tags & CSS Reference (Comprehensive)
A compact reference PDF listing a large set of HTML5 tags with short descriptions and examples, followed by
an extensive CSS properties and usage section.
Part I: HTML5 Tags (Name, Purpose, Short Example)
<!DOCTYPE html> — Document type declaration.
Example: <!DOCTYPE html>
<html> — Root element of an HTML document.
Example: <html lang='en'> ... </html>
<head> — Contains metadata, title, links to CSS/JS.
Example: <head><title>Title</title></head>
<title> — Document title shown in browser tab.
Example: <title>Page Title</title>
<meta> — Metadata (charset, viewport, description).
Example: <meta charset='utf-8'>
<link> — Link to external resources (CSS, icons).
Example: <link rel='stylesheet' href='[Link]'>
<style> — Embedded CSS styles.
Example: <style>body{}</style>
<script> — Embed or load JavaScript.
Example: <script src='[Link]'></script>
<body> — Main content of the page.
Example: <body> ... </body>
<header> — Intro header for a page or section.
Example: <header><h1>Site</h1></header>
<nav> — Navigation links block.
Example: <nav><ul><li>Home</li></ul></nav>
<main> — Main content unique to the document.
Example: <main> ... </main>
<section> — A thematic grouping of content.
Example: <section><h2>Topic</h2></section>
<article> — Self-contained article or entry.
Example: <article><h3>Post</h3></article>
<aside> — Sidebar or tangential content.
Example: <aside>Related links</aside>
<footer> — Footer for a page or section.
Example: <footer>© 2025</footer>
<h1> ... <h6> — Headings, <h1> is top level.
Example: <h1>Heading</h1>
<p> — Paragraph of text.
Example: <p>This is a paragraph.</p>
<a> — Hyperlink to another page or anchor.
Example: <a href='[Link]
<img> — Embed an image.
Example: <img src='[Link]' alt='desc'>
<figure> — Figure with optional caption.
Example: <figure><img...><figcaption>Caption</figcaption></figure>
<figcaption> — Caption for a figure.
Example: <figcaption>Image caption</figcaption>
<ul> — Unordered list.
Example: <ul><li>Item</li></ul>
<ol> — Ordered list.
Example: <ol><li>First</li></ol>
<li> — List item.
Example: <li>Item</li>
<dl>, <dt>, <dd> — Description list, term, description.
Example: <dl><dt>Term</dt><dd>Definition</dd></dl>
<table>, <tr>, <td>, <th> — Table and rows/cells/headers.
Example: <table><tr><th>H</th></tr><tr><td>Data</td></tr></table>
<caption> — Table caption.
Example: <caption>Title</caption>
<thead>, <tbody>, <tfoot> — Table sections for semantics.
Example: <thead>...</thead>
<form> — HTML form for user input.
Example: <form action='/submit' method='post'>...</form>
<input> — Input field (many types).
Example: <input type='text' name='name'>
<textarea> — Multi-line text input.
Example: <textarea name='msg'></textarea>
<button> — Clickable button.
Example: <button>Click</button>
<select>, <option> — Dropdown select list.
Example: <select><option>1</option></select>
<label> — Label for form controls.
Example: <label for='name'>Name</label>
<fieldset>, <legend> — Group form controls with a legend.
Example: <fieldset><legend>Info</legend></fieldset>
<datalist> — Suggest options for input.
Example: <input list='browsers'><datalist
id='browsers'><option>Chrome</option></datalist>
<output> — Results from calculations or scripts.
Example: <output name='result'>0</output>
<progress> — Progress bar.
Example: <progress value='50' max='100'></progress>
<meter> — Scalar measurement within a range.
Example: <meter value='0.6'>60%</meter>
<details>, <summary> — Expandable details widget.
Example: <details><summary>More</summary><p>Info</p></details>
<dialog> — Dialog box element.
Example: <dialog open>Message</dialog>
<template> — HTML template content not rendered.
Example: <template><p>Template</p></template>
<slot> — Web Components insertion point.
Example: <slot name='content'></slot>
<picture>, <source> — Responsive images with art direction.
Example: <picture><source media='(max-width:600px)' srcset='[Link]'><img
src='[Link]'></picture>
<video> — Video playback.
Example: <video controls src='video.mp4'></video>
<audio> — Audio playback.
Example: <audio controls src='audio.mp3'></audio>
<map>, <area> — Image map with clickable areas.
Example: <map name='m'><area shape='rect' coords='0,0,100,100' href='#'></map>
<embed> — Embedded external content
Example: <embed src='[Link]' type='application/pdf'>
<object> — Generic embedded object.
Example: <object data='[Link]'></object>
<iframe> — Inline frame to embed another page.
Example: <iframe src='[Link]
<marquee> (deprecated) — Old scrolling text (avoid).
Example: <marquee>Text</marquee>
<b>, <strong> — Bold text; strong has semantic importance.
Example: <strong>Important</strong>
<i>, <em> — Italic text; emphasis.
Example: <em>Emphasis</em>
<small> — Smaller text.
Example: <small>Note</small>
<mark> — Marked/highlighted text.
Example: <mark>Highlight</mark>
<sub>, <sup> — Subscript and superscript.
Example: H<sub>2</sub>O / x<sup>2</sup>
<code>, <pre> — Code snippets and preformatted text.
Example: <pre><code>[Link]('hi')</code></pre>
<var>, <samp>, <kbd> — Variable, sample output, keyboard input.
Example: <kbd>Ctrl+C</kbd>
<time> — Date/time or machine-readable time.
Example: <time datetime='2025-09-17'>Sept 17, 2025</time>
<abbr> — Abbreviation with expansion.
Example: <abbr title='HyperText Markup Language'>HTML</abbr>
<cite> — Reference to a creative work.
Example: <cite>Book Title</cite>
<q> — Inline short quotation.
Example: <q>Quote</q>
<blockquote> — Longer quotation block.
Example: <blockquote cite='source'>...</blockquote>
<address> — Contact information.
Example: <address>Contact info</address>
<bdi>, <bdo> — Isolate or override text direction.
Example: <bdi>Text</bdi>
<hr> — Horizontal rule (thematic break).
Example: <hr>
<!-- comment --> — Comment in HTML, not displayed.
Example: <!-- This is a comment -->
Part II: CSS Reference (Properties, Usage, Examples)
This section lists many common and advanced CSS properties, with short explanations and examples.
Selectors — Selects elements to style. Examples: element, .class, #id, [Link], [attr=value], :hover,
:nth-child(n).
Example: div, .box, #main, a:hover, input[type='text']
Box Model — Every element is a box: margin, border, padding, content. Use box-sizing to control sizing.
Example: box-sizing: border-box; padding: 10px; border: 1px solid #000; margin: 10px;
display — Controls how an element is displayed: block, inline, inline-block, none, flex, grid.
Example: display: block; display: inline-block; display: none;
position — Positioning: static, relative, absolute, fixed, sticky.
Example: position: absolute; top: 10px; left: 20px;
top, right, bottom, left — Offsets used with positioned elements.
Example: top: 0; right: 0;
float & clear — Float elements left or right; clear to stop floats.
Example: float: left; clear: both;
width, height, max-width, min-width — Control element dimensions and responsiveness.
Example: max-width: 100%; width: 300px;
margin — Space outside the element.
Example: margin: 10px 20px;
padding — Space inside the element between content and border.
Example: padding: 8px;
border — Border style, width, color.
Example: border: 2px solid #ccc; border-radius: 8px;
background — Background color, image, repeat, position, size.
Example: background: url('[Link]') no-repeat center/cover;
color — Text color.
Example: color: #333;
font-family, font-size, font-weight — Typography controls.
Example: font-family: Arial, sans-serif; font-size: 16px; font-weight: 700;
line-height, letter-spacing, text-align — Text spacing and alignment.
Example: line-height: 1.5; letter-spacing: 0.5px; text-align: center;
text-decoration, text-transform, text-shadow — Decorations, case transform, and shadows.
Example: text-decoration: none; text-transform: uppercase;
white-space — How whitespace is handled: normal, nowrap, pre, pre-line.
Example: white-space: nowrap;
overflow, overflow-x, overflow-y — Handling overflow: visible, hidden, scroll, auto.
Example: overflow: auto;
visibility — visible or hidden (space reserved).
Example: visibility: hidden;
opacity — Transparency from 0 (invisible) to 1 (opaque).
Example: opacity: 0.5;
transform — 2D/3D transforms: translate, rotate, scale, skew.
Example: transform: translateX(10px) rotate(10deg);
transition — Smooth change of property values.
Example: transition: all 0.3s ease;
animation — Keyframe animations.
Example: @keyframes slide {from{opacity:0;}to{opacity:1;}} animation: slide 2s;
flex (Flexbox) — Flexible box layout: container properties and item properties.
Example: display:flex; flex-direction: row; justify-content: center; align-items: center;
grid (CSS Grid) — Two-dimensional grid layout.
Example: display: grid; grid-template-columns: 1fr 2fr; grid-gap: 10px;
gap / column-gap / row-gap — Spacing between grid/flex items.
Example: gap: 12px;
align-items / align-content / justify-content — Flex/grid alignment controls.
Example: align-items: stretch; justify-content: space-between;
order — Change visual order of flex items.
Example: order: -1;
flex-wrap — Allow flex items to wrap onto multiple lines.
Example: flex-wrap: wrap;
object-fit — How replaced content (like images) fits.
Example: object-fit: cover;
filter — Graphical effects like blur, brightness.
Example: filter: blur(2px) grayscale(50%);
cursor — Mouse cursor over element.
Example: cursor: pointer;
pointer-events — Control whether element reacts to pointer.
Example: pointer-events: none;
user-select — Allow or prevent text selection.
Example: user-select: none;
columns (multi-column layout) — Create newspaper-like columns.
Example: column-count: 3; column-gap: 20px;
clip-path — Create complex shapes for element clipping.
Example: clip-path: circle(50% at 50% 50%);
backdrop-filter — Apply effects to background behind an element.
Example: backdrop-filter: blur(4px);
mix-blend-mode — Blend element with background.
Example: mix-blend-mode: multiply;
variables (custom properties) — Reusable CSS variables with --name and var().
Example: :root { --main: #06c; } color: var(--main);
calc() — Perform calculations in CSS values.
Example: width: calc(100% - 40px);
content (for ::before and ::after) — Insert generated content.
Example: button::after { content: ' »'; }
transition-timing-function — Timing function for transitions (ease, linear, cubic-bezier).
Example: transition-timing-function: ease-in-out;
visibility / display differences — display:none removes from flow; visibility:hidden reserves space.
Example: display:none; visibility:hidden;
responsive units — Use %, vw, vh, rem, em for responsive sizing.
Example: font-size: 1rem; width: 50vw;
media queries — Apply styles based on device features.
Example: @media (max-width: 600px) { ... }
supports() — Feature queries to check for CSS support.
Example: @supports (display: grid) { ... }
print styles — Styles for printing using @media print.
Example: @media print { body { font-size: 12pt; } }
Part III: Extended Examples and Patterns
1. Responsive Layout (Flex + Media Queries) Example:
<b>HTML:</b> <code><div class='container'><div
class='card'>...</div></div></code>
<b>CSS:</b> <code>.container{display:flex;flex-wrap:wrap;gap:16px;} .card{flex:1 1
300px;}</code>
2. CSS Grid Layout Example:
<b>CSS:</b> <code>.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1
fr));gap:16px;}</code>
3. Navigation Bar (Flexbox) Example:
<b>CSS:</b>
<code>nav{display:flex;justify-content:space-between;align-items:center;padding:12px
20px;}</code>
4. Form Styles Example:
<b>CSS:</b> <code>input,textarea,select{width:100%;padding:8px;border:1px solid
#ddd;border-radius:6px;box-sizing:border-box;}</code>
5. Common Utility Classes:
<code>.text-center{text-align:center;} .hidden{display:none;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0
0);}</code>
Cheat Sheet: Quick Reference Table
Topic Examples/Notes
HTML Doctype <!DOCTYPE html>
Root elements <html>, <head>, <body>
Semantics <header>, <nav>, <main>, <section>,
Media <audio>, <video>, <picture>, <source>
Forms <form>, <input>, <textarea>, <select>
Table <table>, <tr>, <td>, <th>, <caption&g
Scripting <script>, <template>, <dialog>
CSS Layout display:flex, display:grid
Responsive @media, vw, vh, minmax(), auto-fit
Typography font-family, font-size, line-height, text-align
Effects box-shadow, text-shadow, filter, transform, transition
Colors rgba(), hsla(), linear-gradient(), radial-gradient()
Box model margin, border, padding, box-sizing
Variables --name, var(--name)
End of Reference. Practice by building pages combining different tags and CSS patterns.