1. Web
  2. HTML
  3. Guides
  4. Cheatsheet

HTML cheatsheet for syntax and common tasks

While using HTML it can be very handy to have an easy way to remember how to use HTML tags properly and how to apply them. MDN provides you with extended HTML reference documentation as well as a deep instructional set of HTML guides. However, in many cases we just need some quick hints as we go. That's the whole purpose of the cheat sheet, to give you some quick accurate ready to use code snippets for common usages.

Note: HTML tags must be used for their semantic value, not their appearance. It's always possible to totally change the look and feel of a given tag using CSS so, when using HTML, take the time to focus on the meaning rather than the appearance.

Inline elements

An "element" is a single part of a webpage. Some elements are large and hold smaller elements like containers. Some elements are small and are "nested" inside larger ones. By default, "inline elements" appear next to one another in a webpage. They take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row. All inline elements can be placed within the element.

Inline elements: usage and examples
Usage Element Example
A link
html

A link to example.org.
An image
html
An inline container
html
Used to group elements: for example,
to style
them.
Emphasize text
html
I'm posh.
Italic text
html
Mark a phrase in italics.
Bold text
html
Bold a word or phrase.
Important text
html
I'm important!
Highlight text
html
Notice me!
Strikethrough text
html
I'm irrelevant.
Subscript
html
H2O
Small text
html
Used to represent the small
print of a document.
Address
html
Main street 67
Textual citation
html
For more monsters,
see The Monster Book of Monsters.
Superscript
html
x2
Inline quotation
html
Me?, she said.
A line break
html
Line 1
Line 2
A possible line break
html

  Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.
Date
html
Used to format the date. For example:
.
Code format
html
This text is in normal format,
but this text is in code
format.
Audio
html
Video
html

Block elements

"Block elements," on the other hand, take up the entire width of a webpage. They also take up a full line of a webpage; they do not fit together side-by-side. Instead, they stack like paragraphs in an essay or toy blocks in a tower.

Note: Because this cheat sheet is limited to a few elements representing specific structures or having special semantics, the div element is intentionally not included — because the div element doesn't represent anything and doesn't have any special semantics.

Usage Element Example
A simple paragraph

html
I'm a paragraph


I'm another paragraph
An extended quotation
html
They said:

The blockquote element indicates
an extended quotation.
Additional information
html

  HTML Cheat Sheet
  
Inline elements

  
Block elements
An unordered list
html
    
  
  • I'm an item
    • 
  
  • I'm another item
    •
An ordered list
html
    
  
  1. I'm the first item
    2. 
  
  2. I'm the second item
    3.
A definition list
html

  
A Term

  
Definition of a term

  
Another Term

  
Definition of another term
A horizontal rule
html
before
after
Text Heading

-
html
 This is Heading 1 


 This is Heading 2 


 This is Heading 3 


 This is Heading 4 


 This is Heading 5 


 This is Heading 6

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content