DEV Community

Cover image for HTML Cheat Sheet: How to implement tables, links, and more
Educative profile image Hunter Johnson
Hunter Johnson for Educative

Posted on • Originally published at educative.io

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

#html #cheatsheet #webdev #tutorial

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 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

This text is italicized for emphasis.

You can also use the <i> tag.

Small Text 

<small>These words are smaller than</small> the others.<
Enter fullscreen mode Exit fullscreen mode

These words are smaller than the others.

Large Text 

<big> These words are larger than </big> the others.
Enter fullscreen mode Exit fullscreen mode

These words are larger than the others.

Highlighted Text 

<mark> This text is highlighted.</mark>
Enter fullscreen mode Exit fullscreen mode

This text is highlighted.

Strikethrough Text 

<strike>This is an example of strikethrough text</strike>
Enter fullscreen mode Exit fullscreen mode

This is an example of strikethrough text

Underlined Text 

<u>This sentence is underlined.</u>
Enter fullscreen mode Exit fullscreen mode

This sentence is underlined.

Superscript and Subscript Text 

An equation with superscript text: X<sup>2</sup>.
Enter fullscreen mode Exit fullscreen mode

An equation with superscript text: X2.

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

CO<sub>2</sub>
Enter fullscreen mode Exit fullscreen mode

CO2

Span tag 

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

Span tag can be used to style sections 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>
Enter fullscreen mode Exit fullscreen mode

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

Special Links 

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

<a href="tel:0123492">Call 0123492</a>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Audio 

<audio controls>
  <source src="url" type="audio/ogg">
  <source src="alternate-url" type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

Image 

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

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>
Enter fullscreen mode Exit fullscreen mode
  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>
Enter fullscreen mode Exit fullscreen mode
  • 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 -->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

HTML Tables

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

HTML Forms

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

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!

Top comments (0)

Read next

best_codes profile image

How do you stay on the edge of tech? 🧑‍💻

Best Codes -

hirelaraveldevelopers profile image

Why Magento is the #1 Choice of eCommerce Startups?

Hire Laravel Developers -

akpevwe11 profile image

Demystify google search

Akpevwe11 -

hashirdev profile image

Choosing Your Path: Specializations in Web Development

Hashir Afzal -