HTML Cheatsheet

Posted on , updated on 

HTML Resources

History of HTML

Sample HTML5 Page

<!DOCTYPE html>
  <base href="" target="_blank">

  <title>My Page Title</title>

  <meta charset="UTF-8" />
  <meta name="description" content="HTML Cheatsheet" />
  <meta name="keywords" content="HTML,HTML5" />
  <meta name="author" content="Josh Egan" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" type="text/css" href="/styles/my-styles.css" />

  <script async  src="//"></script>`
  <script src="/path/to/script.js"></script>

  <h1>HTML Cheatsheet</h1>
  <h2>HTML Resources</h2>

      <a href=""></a>
      <a href=""></a>
      <a href="">The most recent answer on stack overflow at time of writing.</a>

  <h3>Page Outline</h3>
      <a href="#terminology">Terminology</a>
      <a href="#glossary">Glossary</a>

  <a name="terminology"><h4>Terminology</h4></a>
  <h4 id="glossary">Glossary</h4>

  <table cellspacing="5em" cellpadding="10em" summary="This summary will appear to screen readers. No representation visually.">
    <caption>This appears above the table</caption>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      <tr colspan="3">
        <td>The footer must come before the body!</td>
        <td>This row</td>
        <td rowspan="2">three columns</td>

  <h2>Sample HTML5 Page</h2>

  <script defer type="text/javascript">
    window.alert("the page has been loaded!")
  <!-- this is a comment -->
    Comments can
    be multiline

HTML tags

Anatomy of an HTML Tag

Block vs. inline

Block elements are container elements for grouping other elements together. They may contain other block elements and inline elements.

Block elements include:

Inline elements are for text and links that should be displayed inline. Inline elements cannot contain block elements, but they can contain inline elements.

Inline elements include:



Whitespace in the source code is generally ignored in HTML. However, whitespace is respected within the <pre> tag.

The <br/> tag can be used to force a line break.

Character entities

Character entities can be used to define whitespace and other characters that have special meaning in HTML.

The most common character entities have names, but the most robust way of referencing them is by number. The numbers are supported by more browsers.

Character entity references:

Semantic HTML Tags

Tag Notes
<article> Use to wrap related, self-contained content. Excellent for blog posts, etc.
<aside> Related, but not of primary importance to the main content.
<audio> Use for playing audio.
<video> Use for playing video.
<bdi> Use for showing text that is bi-directional. Useful if your website supports user generated content in multiple languages.
<canvas> Use for drawing on the page.
<datalist> Use for forms.
<details> Show more details in a way that used to only be possible via javascript.
<embed> Use in place of the <object> element to embed external resources like flash.
<figure> Use for providing captions for images.
<header> Contains the header of a logical container. Can be styled / placed wherever is desired.
<footer> Contains the footer of a logical container. Typically one per page, but there could be multiple depending on the use case.
<main> The main content of the page. There should only be one per page.
<math> For displaying equations.
<mark> For highlighting text.
<meter> For displaying a range of values.
<nav> For displaying navigation links. Typically the main site nav.
<output> Display the results of a calculation.
<progress> Progress bar
<section> For displaying a logical group of content. Use a section for grouping content logically, use a div for grouping content to for styling.
<time> Display a date time.
<wbr> Word break element. Indicates where to break a word if wrapping becomes necessary.

Media Tags

Tag Notes
<video> Play video.
<audio> Play audio.
<canvas> Lots of magic is available in a canvas tag.

HTML Tags Reference

For a more thorough reference, see

Tag Example Notes
<!DOCTYPE> <!DOCTYPE html> HTML5 uses <!DOCTYPE html>. See this page for others.
<html> <html></html> The html tag is the root element for the page. There can only be one per page.
<head> <head></head> The head tag contains document metadata. The information contained in the <head> is used by browsers and search engines.
<base> <base href="//" target="_blank"> The base tag is used inside the head tag to define the base url to be used for all links on the page and/or the default target for all hyperlinks on the page. This can be useful for setting the base to the root of the site regardless of which page you are currently on.
<title> <title>My Page Title</title> Used inside the <head> tag. Sets the title for the page.
<meta> <meta charset="UTF-8">
<meta name="description" content="HTML Cheatsheet">
Used inside the <head> tag. Use the meta tag to set metadata about the document. You can use many of these tags to define multiple pieces of metadata.
<style> <style> h1 {color:red;} </style> Use the style tag inside the head tag to define inline styles. Generally, using this tag is not a good idea.
<link> <link rel="stylesheet" type="text/css" href="theme.css"> The link tag is used inside the head tag to reference external stylesheets.
<script> <script type="text/javascript"> window.alert("hello!") </script>
<script async src="path/to/script.js"></script>
The script tag is used to reference a JavaScript file or to define JavaScript inline. This tag can be used in the <head> or <body> tags. If the src attribute is used, the script tag must be empty. The type attribute is optional in HTML5. The async attribute will tell the browser to load the script asynchronously. The defer attribute will tell the page to load the script after the page has finished parsing.
<body> <body></body> The body tag contains the document data. The tags within the <body> tag will be displayed in the browser.
<h1> <h1>Page Title</h1> The h1 tag defines the primary heading for the page. There should only be one h1 tag on a page. This tag is used by search engines.
<h2> <h3 <h4> <h5> <h6> <h2>Sub Section 1</h2>
<h3>Part 1</h3>
<h3>Part 2</h3>
The sub headings h2, h3, h4, h5, and h6 should be used semantically to indicate subsections within subsections.
<div> <div id="container" class="mainContainer"></div> The div tag is the most commonly used block element for displaying content sections, or content divisions, within a page.
<p> <p>The quick brown fox</p> The p tag defines a paragraph. It is unique in that it is displayed as a block element but it cannot contain other block elements.
<pre> <pre>
This formatting
is preserved.
The pre tag is used for preformatted text. It will preserve whitespace from the source code.
<br/> <br/> The br tag is used for explicit line breaks.
<hr/> <hr/> The hr tag is used to define a horizontal rule, or a horizontal line that will be displayed on the page.
<span> `some text The span element is an inline element that is typically used for applying a style to a short span of text.
<sup> `citation The sup tag is used to make a superscript.
<sub> H<sub>2</sub>O The sub tag is used to make a subscript.
<abbr> <abbr title="HyperText Markup Language">HTML</abbr> The abbr tag is used for abbrevations or acronyms. The title attribute will be displayed on hover.
<code> <code>let a = x + y</code> The code tag is used to indicate code snippets. Used in combination with the <pre> tag, it can be used for a code block.
<blockquote> <blockquote cite="">Therefore all things whatsoever ye would that men should do to you, do ye even so to them: for this is the law and the prophets.</blockquote> Use the blockquote tag to define a section that is quoted from another source.
<q> <q>It was the best of times.</q> Use the q tag for inline quotes.
<a> <a href="/path/to/page">Click here!</a>
<a href="#terminology">see definitions</a>
<a name="terminology" title="Technical Definitions"><h2>Terminology</h2></a>
Use the anchor tag for links within a page or to other pages.
<img> <img src="/public/images/image.png" alt="Image description." /> Use the image tag for displaying images. Optimize images to needed size so that only the data needed is pulled down by the client.
<bdi> <bdi>إيان</bdi> Use for displaying bi-directional text. Often useful for user generated content.
author image
Josh Egan