HTML & CSS CheatSheet

HTML

HTML, short for HyperText Markup Language, is the foundation of all web pages. It was created by Tim Berners-Lee in 1993 to define the structure of a web page. Without it, you wouldn’t be able to organize text or add images or videos to your pages. HTML is the beginning of everything you need to know to make your first website.

HTML Elements Reference

Tag Name Description
<a> Anchor Creates a link to another page or to a location in the current page
<abbr> Abbreviation Indicates an acronym or abbreviation of a longer word or phrase.
<acronym> Acronym Creates text that will be displayed when hovered over.
<audio> Audio Embeds sound content in documents.
<b> Bold Applies bold formatting to text.
<blockquote> Blockquote Indicates that the enclosed text is an extended quotation.
<br> Break Represents a break in text. It is used when text needs to span multiple lines rather than being in-line, such as in an address.
<button> Button Creates a clickable button.
<canvas> Canvas Creates graphics and animations in the page for JavaScript and WebGL to interact with.
<cite> Citation Indicates a citation or reference to another source.
<code> Code Indicates a block of code.
<del> Deleted Text Indicates text that has been deleted from a document, usually rendered in strike-through text.
<div> Division Defines a division or section in an HTML document, without semantic meaning.
<em> Emphasis Indicates text that should be emphasized. Browsers will show enclosed text in italics by default
<embed> Embed Embeds external content, such as a video, image, page, etc., at the specified point in the document.
<form> Form Creates an HTML form for user input. This can include open ended text inputs, radio buttons, calendar information, and more
<h1> to <h6> Heading Defines a heading of a section. The size of the heading is determined by the number, with 1 being the largest and 6 the smallest.
<head< Head Contains meta-information about the document, such as its title, scripts, and style sheets.
<html> HTML Defines the root of an HTML document.
<i> Italic Indicates text that should be rendered in italics.
<iframe> Inline Frame Embeds another HTML page into the current page.
<img> Image Embeds an image in the document.
<input> Input Creates an input control for a form.
<li> List Item Indicates a list item in an ordered or unordered list.
<link> Link Defines the relationship between the current document and an external resource.
<ol> Ordered List Creates an ordered list.
<p> Paragraph Indicates a paragraph of text.
<s> Strikethrough Indicates text that is no longer accurate or relevant.
<script> Script Embeds a client-side script, such as JavaScript.
<span> Span Used for grouping related text or elements for styling and scripting.
<ul> Unordered List Creates an unordered list.
<video> Video Embeds video content in documents.

Semantic HTML

Tag Name Description
<address> Address Defines the contact information for the author/owner of a document or an article.
<article> Article Defines an independent, self-contained piece of content that could be distributed and reused independently.
<figcaption> Figure Caption Defines a caption for a <figure> element.
<figure> Figure Represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element.
<footer> Footer Defines a footer for a document or section.
<header> Header Defines a header for a document or section.
<main> Main Defines the main content of a document.
<nav> Navigation Defines navigation links in a document.
<progress> Progress Used to display a progress bar
<section> Section Defines a section in a document.

CSS

CSS, short for Cascading Style Sheets, is used to enhance the presentation of a web page. It is written in a separate file (with a .css extension) or in a <style> element in the <head> of an HTML document. CSS controls the layout of multiple web pages all at once, saving you time and energy. It also allows you to customize the layout of your web pages to suit different devices and screen sizes.

CSS Selectors Reference

Selector Example Example Description
element p Selects all <p> elements
#id #firstname Selects the element with id="firstname"
* * Selects all elements
.class .intro
p.intro 		Selects all elements with class="intro"
Selects all <p> elements with class="intro"