HTML5 HANDBOOK
HTML
<a>
Defines a hyperlink to another page.
<a href=”#”></a>
HTML
<article>
Represents self-contained content.
<article></article>
HTML
<aside>
Defines content aside from main text.
<aside></aside>
HTML
<audio>
Embeds sound or music content.
<audio controls></audio>
HTML
<b>
Sets text to bold without importance.
<b>Bold</b>
HTML
<body>
Contains the main document content.
<body></body>
HTML
<br>
Inserts a single line break.
<br>
HTML
<button>
Clickable button for interfaces.
<button>Click</button>
HTML
<canvas>
Draws graphics via JavaScript.
<canvas></canvas>
HTML
<code>
Defines a fragment of computer code.
<code>…</code>
HTML
<div>
Generic container for flow content.
<div></div>
HTML
<em>
Defines emphasized italic text.
<em>Text</em>
HTML
<footer>
Defines a footer for a section.
<footer></footer>
HTML
<form>
Container for user input controls.
<form></form>
HTML
<h1>
Highest level section heading.
<h1>Title</h1>
HTML
<header>
Introductory content or navigation.
<header></header>
HTML
<hr>
Thematic break or horizontal line.
<hr>
HTML
<img>
Embeds an image in the document.
<img src=””>
HTML
<input>
Interactive field for user input.
<input type=”text”>
HTML
<label>
Caption for an interface item.
<label></label>
HTML
<li>
Defines an item in a list.
<li>Item</li>
HTML
<main>
Primary content of the document.
<main></main>
HTML
<nav>
Section for navigation links.
<nav></nav>
HTML
<ol>
Defines an ordered numbered list.
<ol></ol>
HTML
<p>
Represents a paragraph of text.
<p></p>
HTML
<script>
Embeds client-side JavaScript.
<script></script>
HTML
<section>
Standalone section of a document.
<section></section>
HTML
<span>
Generic inline container.
<span></span>
HTML
<strong>
Indicates strong importance (bold).
<strong></strong>
HTML
<table>
Represents tabular data.
<table></table>
HTML
<ul>
Defines an unordered bullet list.
<ul></ul>
HTML
<video>
Embeds video playback content.
<video src=””></video>
CSS
align-items
Aligns flex items along cross axis.
align-items: center;
CSS
background
Sets background style shorthand.
background: #000;
CSS
border
Sets border width, style, color.
border: 1px solid;
CSS
border-radius
Defines rounded corner radius.
border-radius: 5px;
CSS
box-shadow
Adds shadow depth to an element.
box-shadow: 2px 2px;
CSS
color
Sets the color of text.
color: blue;
CSS
cursor
Sets mouse pointer icon style.
cursor: pointer;
CSS
display
Sets internal/external box type.
display: flex;
CSS
flex
Shorthand for flexible sizing.
flex: 1;
CSS
font-family
Specifies text typeface.
font-family: Arial;
CSS
font-size
Sets the height of text.
font-size: 16px;
CSS
font-weight
Sets text thickness (boldness).
font-weight: bold;
CSS
gap
Sets spacing between grid/flex items.
gap: 20px;
CSS
grid
Creates a grid layout container.
display: grid;
CSS
height
Sets element vertical dimension.
height: 100px;
CSS
justify-content
Aligns items along main axis.
justify-content: center;
CSS
line-height
Sets space between text lines.
line-height: 1.5;
CSS
margin
Sets space outside of an element.
margin: 10px;
CSS
opacity
Sets transparency level (0 to 1).
opacity: 0.8;
CSS
overflow
Handles content that is too large.
overflow: hidden;
CSS
padding
Sets space inside of an element.
padding: 10px;
CSS
position
Specifies positioning method.
position: relative;
CSS
text-align
Aligns text within a block.
text-align: center;
CSS
text-decoration
Sets underline or line-through.
text-decoration: none;
CSS
transform
Rotates, scales, or moves elements.
transform: scale(1.1);
CSS
transition
Animates property changes.
transition: 0.3s;
CSS
visibility
Shows or hides an element.
visibility: hidden;
CSS
width
Sets element horizontal dimension.
width: 50%;
CSS
z-index
Sets stack order depth.
z-index: 10;
JS
addEventListener()
Registers an event handler.
el.on(‘click’, fn)
JS
alert()
Shows browser warning dialog.
alert(“Hello!”);
JS
atob()
Decodes base-64 string data.
atob(data);
JS
btoa()
Encodes string to base-64.
btoa(“text”);
JS
console.log()
Prints message to dev console.
console.log(data);
JS
fetch()
Makes asynchronous web request.
fetch(url).then()
JS
filter()
Returns array with matches.
arr.filter(x => …);
JS
find()
Returns first matching item.
arr.find(x => …);
JS
forEach()
Loops through array items.
arr.forEach(fn);
JS
includes()
Checks if value exists in array.
arr.includes(val);
JS
indexOf()
Returns index of search item.
arr.indexOf(val);
JS
JSON.parse()
Converts string to JS object.
JSON.parse(str);
JS
JSON.stringify()
Converts JS object to string.
JSON.stringify(obj);
JS
localStorage
Persistent key-value storage.
localStorage.get();
JS
map()
Creates new transformed array.
arr.map(x => …);
JS
Math.random()
Generates random float number.
Math.random();
JS
Math.round()
Rounds number to nearest int.
Math.round(4.7);
JS
push()
Adds item to end of array.
arr.push(val);
JS
pop()
Removes last item from array.
arr.pop();
JS
querySelector()
Selects first matching element.
document.qs(“.el”);
JS
reduce()
Reduces array to single value.
arr.reduce(acc, x);
JS
setInterval()
Repeats function at intervals.
setInterval(fn, ms);
JS
setTimeout()
Runs function after delay.
setTimeout(fn, ms);
JS
slice()
Extracts section of an array.
arr.slice(start, end);
JS
splice()
Adds/Removes items in array.
arr.splice(idx, 1);
JS
split()
Divides string into array.
str.split(“,”);
JS
toString()
Converts object/num to string.
obj.toString();
JS
trim()
Removes whitespace from ends.
str.trim();
JS
unshift()
Adds item to start of array.
arr.unshift(val);