↑

The Only HTML/CSS Resource You'll Ever Need.

Find out how 1,000s of Developers are using our site to master HTML & CSS within days!

The HTML Cheat Sheet

We've put together a list of basic HTML tags, attributes and general syntax in an organised table

Tag Description Example
Basic Structure < !DOCTYPE html > Defines the document type and version < !DOCTYPE html >
< html > Root element of an HTML page < html lang="en" >
< head > Contains metadata about the document < head >
< title > Sets the title of the web page html lang="en"
< meta > Provides metadata (e.g., character set) < meta charset="UTF-8" >
< link > Links to external resources (e.g., CSS) < link rel="stylesheet" href="styles.css" >
< script > Embeds or references JavaScript code < script src="script.js" >
Document Structure < header > Represents a container for page header < header >
< nav > Defines a navigation menu < nav >
< main > Contains the main content of the page < main >
< section > Defines a section of content < section >
< article > Represents a self-contained article < article >
< aside > Contains content related to the main content < aside >
< footer > Represents the footer of a document < footer >
Text Elements < p > Defines a paragraph of text < p>This is a paragraph.< /p> >
< h1 > - < h6 > Headings with decreasing importance < h1>Heading 1< /h1 >
< a > Creates hyperlinks < a href="https://example.com">Link< /a >
< img > Embeds images < img src="image.jpg" alt="Description" >
< ul > Defines an unordered (bulleted) list < ul> < li> Item 1 < /li> < /ul >
< ol > Defines an ordered (numbered) list < ol > < li > Item 1 < /li > < /ol >
< li > Represents a list item < li > Item < /li >
< br > Inserts a line break < Hello < br > World >
< hr > Creates a horizontal rule < hr >

CSS Cheat Sheet

We've put together a list of basic CSS properties, attributes and general syntax in an organised table

Property Description Example
Selectors element Selects all elements of a specified type p selects all paragraphs
.class Selects all elements with a specific class .btn selects all elements with class "btn"
#id Selects an element with a specific ID #btn selects the element with id of "btn"
* Selects all elements on the page * { margin: 0; padding: 0; }
Properties color Sets the text color color: red;
font-size Sets the font size font-size: 16px;
font-family Sets the font family font-family: Arial, sans-serif;
background-color Sets the background color background-color: #f0f0f0;
margin Sets the margin space margin: 10px;