HTML Cheat Sheet

December 18, 2017

Estimated reading time: 5 minutes.

HTML Cheat Sheet HTML is the fundamental building block for most of our online experiences. Whether you're a seasoned developer or an aspiring coder, learning HTML is the first step into diving into the digital realm.

Our 'HTML Cheat Sheet’ is an indispensable resource for both newbie and experienced developers. Whether you're looking to refresh your memory or bolster your knowledge, this guide will help you master the basic language of the internet.

What is HTML

HyperText Markup Language (HTML) is the main building block we use to build webpages. It provides the essential structure, layout, and content for displaying information on the Internet.

HTML uses a system of tags—enclosed in angle brackets—to define elements within a web page. These elements can represent headings, paragraphs, images, links, forms, tables, and more.

At its core, HTML is responsible for defining the various components of a web page and their relationships. It enables the seamless organization of text, images, multimedia, and links that users can access through their web browsers.

HTML provides the structure of the document, while CSS is concerned with styling the content on our page, and JavaScript worries about the functionality of our page. Whether you’re a savvy web developer or just trying to experiment a little, feel free to use this HTML cheat sheet below.

HTML Basic

html, head and body

The main building blocks of an HTML page are called tags. Each tag describes a specific part of our web page.

Every HTML document has an <html> tag which wraps all the content of our page.

Inside of the <html> tag we have a <head> and <body> tag. The <head> tag allows us to define some metadata about our page, such as the page title and linking to CSS and/or JavaScript. The <body> tag contains all of the markup which makes up the actual page.

The main building blocks of an HTML page are called tags. Each tag describes a specific part of our web page.

Every HTML document has an <html> tag which wraps all the content of our page.

<html>
  <head>
    <title>My Demo Page</title>
  </head>
  <body>
    Page Content
  </body>
</html>

Typography

HTML also defines the ability to set different headers, each header has a level, 1 through 6, level 1 being the most important, 6 being the least important. Headers give the ability to separate our different sections of our document and give us clear titles for each section.

<h1>This is a level 1 header</h1>
<h2>This is a level 2 header</h2>
<h3>This is a level 3 header</h3>
<h4>This is a level 4 header</h4>
<h5>This is a level 5 header</h5>
<h6>This is a level 6 header</h6>

We can also create paragraphs for sections of text, for this we use a <p> tag.

<p>
  This is a paragraph
</p>
<p>
  This is another paragraph
</p>

The <em> tag is used to denote emphasis and is typically displayed in italics. The <strong> is used to give some text a strong importance to some text and is usually displayed as bolded.

N.B. The actual styling of these elements are up to the CSS on our page, but these are the defaults in most browsers.

Both of these tags are inline elements and do not break the text they wrap.

<p>
  This is some <em>italicized</em> text and some <strong>bolded</strong> text.
</p>

Anchors, or <a> tags, allow us to link to other pages, or sections inside of the same document.

<h1><a id="section-1">This is a header</a></h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
  <a href="#section-1">
    <!-- This will link to the header above -->
    Go to section header
  </a>
</p>
<p>
  <a href="http://google.com">
    <!-- This will link to google.com -->
    Go to google.com
  </a>
</p>

Multimedia

We can also embed various media into our web pages. This includes things like images, video, audio and rich media through a canvas.

We can embed images into our HTML document by using the <img> tag. This image tag has an attribute of src which points to where the image is located.

<img src="http://fillmuarray.com/200/300" width="200" height="300" />

We can also embed videos in our browser using the <video> tag. The videos have to be one of these formats.

<video src="/video.mp4" type="video/mp4" width="1080" height="720" />

You can also embed audio into our webpages using the <audio> tag.

<audio src="/audio.ogg" type="audio/ogg" />

You can also display a canvas, which supports drawing from javascript. We can draw simple shapes, or do things as complex as using them to run 3D games in the browser.

<canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas displays.
</canvas>

Tables and Lists

Tables

Tables allow us to display tabular data, just like a spread sheet. Each table had a <thead> and <tbody> which describe the headers of columns, and the content respectively.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Item 1</td>
      <td>Row 1, Item 2</td>
    </tr>
    <tr>
      <td>Row 2, Item 1</td>
      <td>Row 2, Item 2</td>
    </tr>
  </tbody>
</table>

Lists

We can also organize items in lists. Lists can either be ordered (numbered, 1., 2., 3., etc) or unordered (with bullets).

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Semantic HTML

When writing our HTML we could just use <div> tags to setup every element, but the problem with this is our code doesn't read very well. Instead we can use semantic elements which serve to describe the structure of our page.

Here are some tags we can use: - <article> - can be used for showing an article - <header> - can be used for describing a section header, page header or article header - <footer> - can be used for describing a section footer, page footer or article footer - <nav> - can be used to describe some kind of navigation section. - <section> - can be used to separate our page into various sections - <main> - can be used to setup the main area of a section, page or nav

Forms and Input

Sometimes we want to be able to collect information from the user. In this case we can use a <form> tag with <input>s.

<form>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <input type="submit" value="Submit" />
</form>

Inputs have many different types, they are as follows:

button: A push button with no default behavior.
checkbox: A check box allowing single values to be selected/deselected.
email: A field for editing an e-mail address.
file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
hidden: A control that is not displayed but whose value is submitted to the server.
image: A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.
number: A control for entering a number.
password: A single-line text field whose value is obscured. Use the maxlength and minlength attributes to specify the maximum length of the value that can be entered.
radio: A radio button, allowing a single value to be selected out of multiple choices.
reset: A button that resets the contents of the form to default values.
submit: A button that submits the form.
text: A single-line text field. Line-breaks are automatically removed from the input value.

We can also set labels for our form elements using the <label> tag.

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" />
</form>

You can also create a dropdown, for users to select on of multiple options, using the <select> tag. This select tag uses a bunch of <option> tags to display the available.

<select id="options">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>