Full Web Development Cheat Sheet
HTML Tags Cheat Sheet
Basic Structure Tags
<!DOCTYPE> Defines the document type
<html> Root of the HTML document
<head> Container for metadata
<title> Title of the document (appears in tab)
<body> Main content of the document
Text & Formatting Tags
<h1 - h6> Headings (largest to smallest)
<p> Paragraph
<br> Line break
<hr> Horizontal line
<strong> Bold importance
<em> Italic emphasis
<u> Underlined text
<small> Smaller text
<del> Deleted text
<ins> Inserted text
<sub> Subscript
<sup> Superscript
Links & Media Tags
<a> Hyperlink
<img> Image
<video> Video player
<audio> Audio player
<iframe> Embed content (e.g. YouTube)
Full Web Development Cheat Sheet
<source> Media source
<embed> Embed external content
<object> Embed media/documents
Lists & Tables
<ul> Unordered list
<ol> Ordered list
<li> List item
<dl> Description list
<dt> Description term
<dd> Description detail
<table> Table
<tr> Table row
<td> Table data
<th> Table header
<thead> Table head group
<tbody> Table body group
<tfoot> Table footer group
<caption> Table caption
Layout Tags
<div> Generic block container
<span> Generic inline container
<header> Header section
<footer> Footer section
<nav> Navigation links
<main> Main content
<section> Section of content
<article> Independent article
Full Web Development Cheat Sheet
<aside> Side content
<figure> Self-contained media
<figcaption> Caption for figure
Form Tags
<form> Form container
<input> Input field
<textarea> Multiline text input
<button> Button
<select> Drop-down list
<option> Option in select
<label> Label for input
<fieldset> Group form elements
<legend> Title for fieldset
<datalist> Predefined options
<output> Output value
<optgroup> Group of options
Misc
<meta> Metadata like charset, viewport
<link> External resources like CSS
<style> Internal CSS
<script> JavaScript
<base> Base URL for relative links
<abbr> Abbreviation
<address> Contact address
<code> Inline code
<pre> Preformatted text
<time> Time/date
Full Web Development Cheat Sheet
<kbd> Keyboard input
<samp> Program output
<var> Variable name
<bdi> Bi-directional isolation
<bdo> Override text direction
Full Web Development Cheat Sheet
CSS Cheat Sheet
Selectors
<*> Universal selector
<.class> Selects all elements with a specific class
<#id> Selects an element with a specific ID
<element> Selects all elements of a specific type (e.g., div)
<element1, element2> Selects multiple elements
<element element> Descendant selector
<element > element> Direct child selector
Text & Font
<color> Text color
<font-family> Font type (e.g., Arial, Verdana)
<font-size> Size of the text
<font-weight> Weight (boldness) of font
<text-align> Aligns the text (left, center, right)
<text-decoration> Underline, overline, line-through, none
<line-height> Spacing between lines
Box Model
<width> Width of an element
<height> Height of an element
<padding> Space inside the border
<margin> Space outside the border
<border> Border around the element
<box-sizing> Defines box model (e.g., content-box, border-box)
Background & Color
Full Web Development Cheat Sheet
<background-color> Background color
<background-image> Background image
<background-size> Size of background image
<background-repeat> Repeat pattern (repeat, no-repeat)
<opacity> Transparency level
Positioning & Display
<position> static, relative, absolute, fixed, sticky
<top, right, bottom, left>
Offsets
<z-index> Stack order
<display> Block, inline, flex, grid, none
<visibility> visible or hidden
<overflow> hidden, scroll, auto
Flexbox
<display: flex> Defines a flex container
<flex-direction> row, row-reverse, column, column-reverse
<justify-content> Aligns items horizontally
<align-items> Aligns items vertically
<flex-wrap> Wraps items into multiple lines
<gap> Spacing between items
Misc
<cursor> Type of cursor when hovering
<transition> Smooth change of properties
<transform> Rotate, scale, skew, translate
<box-shadow> Adds shadow around an element
<text-shadow> Adds shadow to text
Full Web Development Cheat Sheet
JavaScript Cheat Sheet
Variables
<var> Declares a variable (function scope, outdated)
<let> Declares a block-scoped variable
<const> Declares a constant variable (cannot be reassigned)
Data Types
<Number> e.g. 42, 3.14
<String> e.g. 'hello', "world"
<Boolean> true or false
<Array> e.g. [1, 2, 3]
<Object> e.g. { key: 'value' }
<Null> Intentional absence of any object value
<Undefined> Variable declared but not assigned
Operators
<+> Addition / string concatenation
<-> Subtraction
<*> Multiplication
</> Division
<%> Modulus (remainder)
<==> Equal to (loose)
<===> Equal to (strict)
<!=> Not equal to (loose)
<!==> Not equal to (strict)
<&&> Logical AND
<||> Logical OR
<!> Logical NOT
Full Web Development Cheat Sheet
Control Statements
<if> Conditionally executes code block
<else> Alternative block if 'if' is false
<else if> Additional condition
<switch> Multiple conditions
<for> Loop with counter
<while> Loop while condition is true
<do...while> Loop at least once
Functions
<function> Declares a function
<() => {}> Arrow function
<return> Returns a value from a function
DOM Manipulation
<document.getElementById>
Selects element by ID
<document.querySelector>
Selects first matching element
<element.innerHTML> Gets/sets HTML content
<element.style> Accesses styles
<element.addEventListener>
Adds event listener
Events
<onclick> Click event
<onchange> Value change event
<onmouseover> Mouse hover event
<onkeydown> Key press event
Misc
Full Web Development Cheat Sheet
<console.log> Logs output to console
<alert> Shows popup alert box
<prompt> Shows input dialog
<confirm> Shows confirmation dialog
<setTimeout> Delays execution
<setInterval> Repeats execution at intervals
