HTML Cheat Sheet: how to implement tables, links, and more

Nov 16, 2020 - 6 min read
Jerry Ejonavi
editor-page-cover

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:


Master HTML with hands-on projects.

This learning path the perfect place to start your journey as a front-end developer. You will gain a mastery of HTML, CSS, and JavaScript.

Become a Front End Developer


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.

<!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.


Common HTML Elements

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


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.

<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.


Paragraphs

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

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

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.

<div>some content!!!</div>

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>.

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

Text formatting

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


Strong text

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

This text is bold and important

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


Emphasized Text

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

This text is italicized for emphasis.

You can also use the <i> tag.


Small Text

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

These words are smaller than the others.


Large Text

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

These words are larger than the others.


Highlighted Text

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

This text is highlighted.


Strikethrough Text

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

This is an example of strikethrough text


Underlined Text

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

This sentence is underlined.


Superscript and Subscript Text

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

An equation with superscript text: X2.

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

CO<sub>2</sub>

CO2


Span tag

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

Span tag can be used to style section of a text.


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.

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

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
<a href="https://www.educative.io/blog" target="_blank">link</a> 
  • _self: opens the link in the same frame
<a href="https://www.educative.io" target="_self">link </a>
  • _parent: opens the linked document in the parent frame
<a href="https://www.educative.io/learn" target="_parent">link </a> 
  • _top: opens the document in the full body of the window
<a href="https://www.educative.io/blog" target="_top">link </a>

Special Links

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

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

Keep the learning going.

Learn HTML for front-end without scrubbing through videos or documentation. Educative’s text-based courses are easy to skim and feature live coding environments, making learning quick and efficient.

Become a Front End Developer



Media Elements

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


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.

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

Audio

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

Image

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

Lists

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


Ordered List

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

<ol>
  <li>Water </li>
  <li>Tea</li>
  <li>Milk</li>
<ol>
  1. Water
  2. Tea
  3. Milk

Unordered List

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

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

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.

<!-- 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 -->

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.


Basic table structure

<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>
Name Age City
Bill Jones 54 Nashville
Sura Keyser 45 Berlin
Sarah Hernandez 60 Mexico City

Cellpadding and Cellspacing Attributes

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

<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>

Forms

An HTML form is used to collect user input.

<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>

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
  • and more

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. 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


WRITTEN BYJerry Ejonavi

Join a community of 500,000 monthly readers. A free, bi-monthly email with a roundup of Educative's top articles and coding tips.