DEV Community

Bhargab B
Bhargab B

Posted on

Ultimate HTML Reference | HTML Cheatsheet

A concise HTML cheatsheet for developers

If you are someone who has just started to learn web development or an experienced web developer, this ultimate guide to HTML will be the only reference you will ever need.

Note: This article is a reference material not for learning HTML. If you want to learn HTML basic click here

Basic Tags

Boilerplate 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Title</title>
</head>
<body>
    <!-- Your Body -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This is the code that every HTML file must contain.

Title 

<title>Your Webpage Title</title>
Enter fullscreen mode Exit fullscreen mode

Whatever you write here is shown in the title bar of the browser. Also when you bookmark the page, this is what the title of the bookmark is written by default.

Headings

In HTML, there are six headings, starting from<h1> to <h6>. Here <h1> is the largest among all the heading and <h6> is the smallest

<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

Typography

paragraph tag 
<p> Hi I am a paragraph </p>
Enter fullscreen mode Exit fullscreen mode

This tag is used to create a paragraph.

quote tag 
<blockquote> </blockquote>
Enter fullscreen mode Exit fullscreen mode

Used to put quote - indents text from both sides

bold tag 
<b> </b>
Enter fullscreen mode Exit fullscreen mode

Creates bold text (not recommended instead use <strong>)

italic tag 
<i> </i>
Enter fullscreen mode Exit fullscreen mode

Creates italicized text (not recommended instead use <em>)

code tag 
<code> </code>
Enter fullscreen mode Exit fullscreen mode

Define some text as computer code in a document.

strong tag 
<strong> </strong>
Enter fullscreen mode Exit fullscreen mode

Use for showing the importance of a word (usually processed in bold)

emphasizes tag 
<em> </em>
Enter fullscreen mode Exit fullscreen mode

Emphasizes a word (usually processed in italics)

subscript tag 
<sub>Subscript</sub>
Enter fullscreen mode Exit fullscreen mode
superscript tag 
<sup>Superscript</sup>
Enter fullscreen mode Exit fullscreen mode
Others (not used often)
  • <small> reduces the size of text.
  • <del> defines deleted text by striking a line through the text.
  • <ins> defines inserted text which is usually underlined.
  • <q> is used for shorter inline quotes.
  • <cite> is used for citing the author of a quote.
  • <address> is used for showing the author's contact information.
  • <abbr> denotes an abbreviation.
  • <mark> highlights text. ### Links 
<a href="https://x.com/BhargabLinx" target="_blank"> My Twitter Handle </a>
Enter fullscreen mode Exit fullscreen mode

The anchor tag denoted by <a>, is used to define hyperlinks that link to other pages external as well as internal
Most used attributes

  • href specifies the URL the link takes the user to when clicked.
  • download specifies that the target or resource clicked is downloadable.
  • target specifies where the link is to be opened. This could be in the same or separate window.
    • _blank
    • _parent
    • _self
    • _top

Lists

There are two types of lists unordered list and ordered list.

<!-- Unordered list -->
<ul>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScrip t</li>
</ul>

<!-- Ordered list -->
<ol>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScript </li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Container

Container tags don't have any meaning on their own, they are the tags that contain some data such as text, images, etc. There are many container tags in HTML. Some of the most used container tags are:

div tag 

<div> This is block </div>
Enter fullscreen mode Exit fullscreen mode

The div tag is used to make blocks in the document. It is a block element.

span tag 

<span> This is span block </span>
Enter fullscreen mode Exit fullscreen mode

Similar to <div> but it is inclined to content

Forms 

<form>
.
form elements
.
</form>
Enter fullscreen mode Exit fullscreen mode

This tag is used to create a form in HTML, which is used to get user inputs. The <form> element is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, etc. Here we have included text and password input, a checkbox, a radio and submit button, a dropdown list, and many more.
Here are the list of elements that can be added to the <form> element to make it useful:

  • <input>: This element can be displayed in several ways, depending on the type attribute.
  • <label>: This element defines a label for several form elements.
  • <select>: This element defines a drop-down list
  • <textarea>: This element defines a multi-line input field (a text area):
  • <button>: This element defines a clickable button
  • <fieldset>: This element is used to group related data in a form
  • <legend>: The <legend> element defines a caption for the <fieldset> element. 
 <form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Bhargab"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Unknow"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
Enter fullscreen mode Exit fullscreen mode

Click Here: for live preview

Learn more about it here!

Symbols

Less than (<) 

&lt;
Enter fullscreen mode Exit fullscreen mode

Greater than (>) 

&gt;
Enter fullscreen mode Exit fullscreen mode

Dollar ($) 

&copy;
Enter fullscreen mode Exit fullscreen mode

Copyright Symbol (©) 

&copy;
Enter fullscreen mode Exit fullscreen mode

Semantic Elements

Semantic elements mean elements with a meaning. In simple terms, semantic elements are those that convey their purpose clearly through their name.

  • <article>: This element specifies independent, self-contained content.
  • <section>: This element defines a section in a document.
  • <nav>: This element defines a section for the navigation bar
  • <header>: This element defines the heading section of a web page
  • <footer>: This element defines the footer section of a web page
  • <aside>: This element defines some content aside from the content it is placed in (like a sidebar).
  • <figure>: This element defines a figure in the content Other are:
  • <details>
  • <figcaption>
  • <main>
  • <mark>`
  • <summary>
  • <time>

Image Credit: [W3School](https://www.w3schools.com/)

Meta Tags

This is data about the document, which is not part of the main content.

<meta charset="UTF-8">

Top comments (0)

Read next

optimajet profile image

Key differences between BPMN diagrams and Optimajet .NET Workflow Engine process schemes

Optimajet Limited -

hyperkai profile image

isclose and equal in PyTorch

Super Kai (Kazuya Ito) -

akhil_mittal profile image

Observability(Metrics, Monitoring & Prometheus) -2

akhil mittal -

optimajet profile image

Introducing BPMN support in .NET Workflow Engine library

Optimajet Limited -