Learn HTML in Minutes – Cheat Sheet

Learn HTML in Minutes – Cheat Sheet

HTML Cheat-Sheet for Absolute Beginners

Introduction

HTML stands for HyperText Markup Language. It is a markup language that allows us to make web pages for websites. It is just a simple text file with a .html or .htm extension. Likewise other programming languages, HTML also has many versions, here we will talk about HTML5.

It is human-readable and uses tags to define what manipulation has to be done. It is used by browsers to manipulate text, images, and other content, in order to display it in the required format.

HTML is created by Tim Berners-Lee in 1991. You can learn the different tags and elements on a site like w3schools, understand how they work, and familiarize yourself with the language. This article is concerned with HTML syntax and some useful information.

HTML Elements

HTML element is defined by a start tag, some content, and end tag. There are some empty tags, which means that they do not need any end tag.

<tagname> Contents... </tagname>

Doctype Declaration

Every HTML5 document must start with this declaration. It is recommended by W3C

<!DOCTYPE html>

HTML Comments

HTML comments are not displayed by browser but it is helpful for developers to debug the code later.

<!-- Comments here -->

HTML Headings

Heading 1

This is the most important heading

<h1>Heading level 1</h1>

Heading 2

This is less important heading than heading 1

<h2>Heading level 2</h2>

Heading 3

This is the least important heading than heading 2

<h3>Heading level 3</h3>

Heading 4

This heading has ranking 4

<h4>Heading level 4</h4>

Heading 5

This heading has ranking 5

<h5>Heading level 5</h5>

Heading 6

This heading has ranking 6

<h6>Heading level 6</h6>

HTML Text Formatting

<strong> tag

It also makes the text bold with added semantic importance.

<strong>This is strong text</strong>

<small> tag

This element is used to make the text smaller.

<small>This is small text</small>

<mark> tag

It is also possible to highlight a text in HTML using this tag.

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

<b> tag

We can make the text bold using this tag.

<b>This is bold text</b>

<i> tag

This tag is used to italicise the text.

<i>This is italic text</i>

<em> tag

It also makes the text italic with added semantic importance.

<em>This is emphasized text</em>

<sup> tag

This element is used to superscript a text.

<sup>Superscripted text</sup>

<sub> tag

This element is used to subscript a text.

<sub>Subscripted text</sub>

<del> tag

This element is used to strike through the text marking the part as deleted.

<del>This is deleted text</del>

<ins> tag

This element is used to underline a text marking the part as inserted or added.

<ins>This is inserted text</ins>

HTML Empty tags

The tags that do not contain any closing tags are empty tags. Empty tags contain only the opening tag but they perform some action in the webpage.

<img> tag

This tag is used to add or embed the images to a webpage/website.

<img src="url" alt="some_text" width="" height="">

<br> tag

This tag is used to create a line break in a text.

<br>

<hr> tag

This tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from the left to right-hand side of the page.

<hr>

<link> tag

This tag defines the relationship between the current document and an external resource. It is most often used to link to external stylesheets.

<link href="style.css" rel="stylesheet">

<meta> tag

Meta tags are snippets of text that describe a page’s content; the meta tags don’t appear on the page itself, but only in the page’s source code.

<meta charset="utf-8">

Container

There are several container tags in HTML which contain some data such as text, image, etc.

<div> tag

It is used to make divisions or blocks on the document.

<div> This is div block </div>

<span> tag

It is a container for inline content

<span> This is span block </span>

<p> tag

It defines paragraph

<p> This is a paragraph </p>

<pre> tag

It defined pre-formatted text.

<pre> This is pre-formatted text </pre>

<code> tag

It defines source code

<code>selectAll()</code>

List Tags

HTML lists allow web developers to group a set of related items in lists.

<ol> tag

This tag defines an ordered list. An ordered list can be numerical or alphabetical.

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

<ul> tag

This tag represents an unordered list of items, typically rendered as a bulleted list.

<ul>
   <li>Data 1</li>
   <li>Data 2</li>
</ul>

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

HTML Table Structure

<table>
  <caption>Demo Table</caption>
  <thead>
    <tr>
      <th>Column1</th>
      <th colspan="2">Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data2</td>
    </tr>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>&Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tfoot>
</table>

Links are clickable text that can redirect you to some other page.

<a> tag

<a> or anchor tag defines a hyperlink.

<a href="https://example.com/">Go to Website</a>

HTML forms

Form is used to collect user’s input, generally user’s data is sent to server for further processing. Here is an example of HTML form with two input fields and one submit button:

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

Semantic Elements

Semantic elements are those elements that are self describable, i.e., from their name itself, you can understand their meaning.

<header> tag

It defines a header in the document

<header>This is a header</header>

<nav> tag

This tag defines a set of navigation links.

<nav> Navigation links </nav>

<section> tag

It defines a section in the document

<section>This is a section</section>

<article> tag

This tag specifies independent, self-contained content.

<article> Enter your data here </article>

<aside> tag

This tag defines some content aside from the content it is placed in.

<aside>Content...</aside>

Resources