HTML Cheat Sheet: How to implement tables, links, and more
Tags: html, cheatsheet, webdev, tutorial
Published: 2023-04-06 18:50:11

HTML stands for Hyper Text Markup Language. It is the standard **markup language** for creating web pages. It is used alongside technologies like Cascading Style Sheets (CSS) and JavaScript in modern web development. 

Web developers use HTML all the time, so it's important to be familiar with the common operations and elements. Today, we'll offer a **quick reference** to HTML to speed up your learning and coding. 

**We'll go over:**

* [Basic composition of an HTML webpage](#basic)
* [Common HTML elements](#elements)
* [Text formatting](#text)
* [Links](#links)
* [Media elements](#media)
* [Lists](#lists)
* [Tables and Forms](#tables)
* [What to learn next](#next)

<br>

<a name="basic"></a>

## Basic composition of a page

HTML code describes the **structure of a web page**. It consists of a series of elements that are defined by a start tag, the content, and a closing tag. 

Empty elements do not need opening and closing tags, as there is no content to go in between them.

For styling purposes, HTML elements can be classified into **Block-level** and **Inline-level** elements. Block-level elements cause a line break to occur, and they take up space and stack down the page. Inline-level elements, however, only take up space as is necessary.

Below is HTML code describing a very simple webpage.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
   <!-- This is a comment in HTML -->
   <!-- Elements that contain information about the webpage including the title and links to external resources go here -->
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
  </head>
  <body>
    <!-- Elements that will be displayed go here  -->
  </body>
</html>
```

The `<!DOCTYPE html>` declaration defines that this document is an HTML5 document. There is the `<html>` tag at the root level, and it consists of two main elements: the `<head>` and the `<body> `elements.

<br>

<a name="common"></a>

## Common HTML Elements

Below, we discuss the most common HTML elements for creating structure and organizing text. 

<br>

### Headings
The heading tags represent all levels of headings in HTML. It has **six levels**, `<h1>` through `<h6>`, with `<h1>` denoting the most important with the largest font size and weight.

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

Heading tags improve accessibility and help in search engine optimization as information in higher heading levels is given more priority. 

> **Pro tip:** It is best practice to use one `<h1>` tag per web page.

<br>

### Paragraphs 

The `<p>` tag creates a paragraph. Line breaks and whitespaces are usually ignored when paragraphs are rendered in a browser.

```html
<p>Hello, your Educative password has been reset.
       Please log in to resume learning!
</p>
```

<br>

### Content Division Element
The `<div>` tag represents a division or section in an HTML document, it serves as a container that can be used to group content so they can be easily styled. 

This styling can be done inline or by using CSS referencing their class or id attributes.

```html
<div>some content!!!</div>
```

<br>

### Line Breaks
The `<br />` tag is a good example of an empty element, it is used to enforce a line break within a `<p>` tag. It can be written as a self-closing tag `<br />` or just the opening tag `<br>`.

```html
<p>Hello,<br /> your Educative password has been reset.<br />Please login to resume learning!</p>
```

<br>

<a name="text"></a>

## Text formatting 

All HTML elements for formatting texts are an inline-level element. Some tags used in formatting text in HTML include the following.

<br>

### Strong text

```html
<strong>This text is bold and important.</strong>
```

> <strong>This text is bold and important</strong>

Note that you can also use a `<b>` tag here.

<br>

### Emphasized Text

```html
<em>This text is italicized for emphasis.</em>
```

> <em>This text is italicized for emphasis.</em>

You can also use the `<i>` tag.

<Br>

### Small Text

```html
<small>These words are smaller than</small> the others.<
```

> <small>These words are smaller than</small> the others.

<br>

### Large Text
 

```html
<big> These words are larger than </big> the others.
```

> <p><big> These words are larger than </big> the others.</p>

<br>

### Highlighted Text

```html
<mark> This text is highlighted.</mark>
```

> <mark> This text is highlighted.</mark>

<br>

### Strikethrough Text

```html
<strike>This is an example of strikethrough text</strike>
```

> <strike>This is an example of strikethrough text</strike>

<br>

### Underlined Text

```html
<u>This sentence is underlined.</u>
```

> <p><u>This sentence is underlined.</u></p>


<br>

### Superscript and Subscript Text 
```html
An equation with superscript text: X<sup>2</sup>. 
```

> <p>An equation with superscript text: X<sup>2</sup>. 

We can also denote a chemical compound using the subscript tag:

```html
CO<sub>2</sub>
```

> CO<sub>2</sub>

<br>

### Span tag

```html
Span tag can be used to <span style="color:red">style</span> section of a text.
```

> <p>Span tag can be used to <span style="color:red">style</span> sections of a text.</p>

<a name="links"></a>

## Links

The HTML `<a>` tag defines a hyperlink for navigation. It is an inline-level element. The `href` attribute holds the URL that will be navigated to.

```html
This is <a href="url">a link</a>
```

<br>

### Link Targets
The target attribute is used to specify the location document/URL would be displayed. Some of the possible options are:
* `_blank`: opens the linked document in a new browser window or tab

```html
<a href="https://www.educative.io/blog" target="_blank">link</a> 
```
* `_self`: opens the link in the same frame
```html
<a href="https://www.educative.io" target="_self">link </a>
```
* `_parent:` opens the linked document in the parent frame
```html
<a href="https://www.educative.io/learn" target="_parent">link </a> 
```
* `_top`: opens the document in the full body of the window

```html
<a href="https://www.educative.io/blog" target="_top">link </a>
```

<br>

### Special Links

```html
<a href="mailto:email@example.com">Send email</a>

<a href="tel:0123492">Call 0123492</a>
```

<br>

<a name="media"></a>

## Media Elements

You can add media elements to HTML, such as images, videos, and audio. Here's how it's done. 

<br>

### Video

Below, we add a video and its size to our web page. You can provide multiple sources and formats. The browser uses the first available one.

```html
<video width="300" height="240" controls>
  <source src="url" type="video/mp4">
  <source src="alternate-url" type="video/ogg">
</video>
```

<br>

### Audio 

```html
<audio controls>
  <source src="url" type="audio/ogg">
  <source src="alternate-url" type="audio/mpeg">
</audio>
```

<br>

### Image

```html
<img src="path/to/image" alt="alternate text" width="480px" height="360px">
```

<br>

<a name="lists"></a>

## Lists 

There are several kinds of lists we can create with HTML. 

<br>

### Ordered List

`<ol>` defines an ordered list. It is **numbered by default**. The numbering format can be changed using the type attribute.

```html
<ol>
  <li>Water </li>
  <li>Tea</li>
  <li>Milk</li>
<ol>
```

> <ol><li>Water </li>
> <li>Tea</li>
> <li>Milk</li><ol>


<br>

### Unordered List

`<ul>` defines an unordered list. List items would appear bulleted. 

```html
<ul>
  <li>Rice</li>
  <li>Vegetables</li>
  <li>Butter</li>
</ul>
```

> <ul>
> <li>Rice</li>
> <li>Vegetables</li>
> <li>Butter</li></ul>

<br>

### Type and Start attributes

The `type` attribute is present in both ordered and unordered lists and is used in changing numbering and bullet style. The `start` attribute specifies what number/letter/roman numeral the first item in an ordered list should start its count from.

```html
<!-- Unordered List bullet types -->
<ul type="square">
<ul type="disc">
<ul type="circle">

<!-- Ordered List numbering styles -->
<ol type="1"> <!-- Default-Case Numerals -->
<ol type="A"> <!-- Upper-Case Letters -->
<ol type="a"> <!-- Lower-Case Letters -->
<ol type="I"> <!-- Upper-Case Numerals -->
<ol type="i"> <!-- Lower-Case Numerals -->

<ol type="1" start="3"> <!-- numbering starts from 3 -->
<ol type="A" start="5"> <!-- Letters starts with E -->
```

<br>

<a name="tables"></a>

## Tables and Forms

Tales are very commonly used in HTML to organize text and numbers. Let's learn how to create tables and add padding. 

<br>

### Basic table structure

```html
<table>
  <tr>
  <!-- <th> represent a table heading, <tr> defines a table row -->
    <th>Name</th>
    <th>Age</th>
    <th>City</th>    
  </tr>
  <tr>
  <!-- <td> element holds table data-->
    <td>Bill Jones</td>
    <td>54</td>
    <td>Nashville</td>
  </tr>
   <tr>
    <td>Sura Keyser</td>
    <td>45</td>
    <td>Berlin</td>
  </tr>
   <tr>
    <td>Sarah Hernandez</td>
    <td>60</td>
    <td>Mexico City</td>
  </tr>
</table>
```

![HTML Tables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czhdj316qdb8ufb3uron.png)

<br>

### Cellpadding and Cellspacing Attributes

Cellpadding and Cellspacing are `<table>` attributes used to adjust the amount of white space in your table cells. 

```html
<table cellspacing="5" cellpadding="5">
	<!--cellspacing attribute defines space between table cells-->
	<!-- cellpadding represents the distance between cell borders and the content within a cell -->
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>    
  </tr>
  <tr>
    <td>Bill Jones</td>
    <td>54</td>
    <td>Nashville</td>
  </tr>
   <tr>
    <td>Sura Keyser</td>
    <td>45</td>
    <td>Berlin</td>
  </tr>
   <tr>
    <td>Sarah Hernandez</td>
    <td>60</td>
    <td>Mexico City</td>
  </tr>
</table>
```

<br>

### Forms

An HTML form is used to collect user input. 

```html
<form action="path/to/register" method="POST">
	 <input type="text">
       <input type="email" placeholder="example@email.com">
       <input type="number">
       <input type="date">
       <input type="checkbox">

       <textarea name="" id="" cols="30" rows="10"></textarea>

       <!--Radio buttons allow selection of only one option -->
       <input type="radio" id="apples" name="favourite-fruit" value="apples">
       <label for="apples">Apples</label><br>
       
       <input type="radio" id="oranges" name="favourite-fruit" value="oranges">
       <label for="oranges">Oranges</label><br>
       
       <input type="radio" id="other" name="favourite-fruit" value="other">
       <label for="other">Other</label>

       <button type="submit">Submit Form</button>
</form>
```

![HTML Forms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0eg66px1yr3n0bn5fsvm.png)

<br>

<a name="next "></a>

## What to learn next

This document should come in handy whether you are just getting started in your web development career or you need help remembering HTML syntax. The next things to learn are more advanced HTML syntax, such as:
* Link to the middle of a web page
* Clickable regions within images
* Roll-overs
* Banner ads 

If you’re looking to get ramped up on front-end development and learn advanced HTML, check out Educative’s Learning Path **[Become a Front-end Developer](https://www.educative.io/path/become-front-end-developer?eid=5082902844932096)**. This is the perfect place to start your journey as a front-end developer. With no prior knowledge needed, you will gain a mastery of HTML, CSS, and JavaScript in just six curated modules.

*Happy learning!*

### Continue reading about HTML on Educative
* [HTML Beginner's Tutorial: build a webpage from scratch with HTML](https://www.educative.io/blog/html-beginners-tutorial-build-from-scratch?eid=5082902844932096)
* [Animate CSS code: create a panda animation with HTML & CSS](https://www.educative.io/blog/animate-css-code?eid=5082902844932096)
* [Crack the top 30+ HTML interview questions and answers](https://www.educative.io/blog/crack-top-html-interview-questions-answers?eid=5082902844932096)

### Start a discussion 
Were there any more fundamental HTML processes that we didn't include here? Was this article helpful? Let us know in the comments below!