Sandesh Blogs

Supercharged HTML Cheatsheet

Grab, Copy, and Dive In!

Sandesh Shrestha's photo
Sandesh Shrestha
·

5 min read

Supercharged HTML Cheatsheet

Table of contents

Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Headings

There are six headings available in HTML, <h1> is the largest among all, and <h6> is the smallest.

<h1> Tag

<h1>Heading 1</h1>

<h2> Tag

<h2>Heading 2</h2>

<h3> Tag

<h3>Heading 3</h3>

<h4> Tag

<h4>Heading 4</h4>

<h5> Tag

<h5>Heading 5</h5>

<h6> Tag

<h6>Heading 6</h6>

Container

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

<div> tag

The div tag or division tag is used to make blocks or divisions in the document.

<div> This is div block </div>

<span> tag

The span is a container for inline content

<span> This is span block </span>

<p> tag

The p tag is used to create a paragraph in HTML.

<p> This is a paragraph </p>

<pre> tag

The pre tag represents pre-formatted text.

<pre> Hello World! </pre>

<code> tag

The code tag is used to represent source codes in HTML.

<code>
    printf("Hello World!);
</code>

Text Formatting

Text formatting tags in HTML allow you to apply various styles and effects to text. Here are some commonly used text formatting tags:

<u> tag

Represents underlined text.

<u>underlined</u>

<b> tag

Represents bolded text.

<b>bolded</b>

<i> tag

Represents italicized text.

<i>ilaticized</i>

<strong> tag

Represents strong importance or emphasis. Typically displayed as bold text.

<strong>important</strong>

<em> tag

Represents emphasized text. Typically displayed as italicized text.

<em>emphasized</em>

<s> tag

Represents strikethrough text.

<s>strikethrough</s>

<mark> tag

Represents text highlighted for reference or notation.

<mark>highlighted</mark>

<sub> tag

Represents subscript text.

H<sub>2</sub>O

<sup> tag

Represents superscript text.

x<sup>2</sup>

These tags can be used individually or combined to achieve various text formatting effects in your HTML documents. Keep in mind that the presentation of these elements can be influenced by CSS styles applied to your document.

List Tags

Lists in HTML can take various forms, such as numerical, alphabetic, bullet points, or other symbols. HTML allows you to define the type of list and specify individual list items to ensure a well-organized document.

<ol> Tag

This tag is used to create ordered lists, where each list item is numbered.

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

<ul> Tag

This tag is used to create unordered lists, where each list item is preceded by a bullet point or another marker.

<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>

<li> Tag

This tag is used to define individual items within a list.

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

<dl> Tags

The <dl> tag is used to create description lists. The <dt> tag is used to define the term (label), and the <dd> tag is used to define the description.

<dl>
    <dt>Term 1</dt>
    <dd>Description 1</dd>
    <dt>Term 2</dt>
    <dd>Description 2</dd>
</dl>

Media Tags

In HTML, media tags are used to embed and control various types of media, such as images, audio, and video. Here are some common media-related tags in HTML:

<img> Tag

This tag is used to embed images on a webpage.

<img src="image.jpg" alt="Description of the image">

<audio> Tag

This tag is used to embed audio content on a webpage.

<audio controls><source src="audio.mp3" type="audio/mp3"></audio>

<video> Tag

This tag is used to embed video content on a webpage.

<video><source src="video.mp4" type="video/mp4"></video>

Table Tag

This tag in HTML is used to create tables on a web page. Tables are useful for organizing and presenting data in a structured format.

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </tbody>
</table>

<a> Tag

This tag creates hyperlinks in HTML.

 <a href="https://www.example.com">Visit Example.com</a>

<style> Tag

This tag is used to embed CSS (Cascading Style Sheets) code directly within an HTML document.

<style>
    body {
        background-color: #f4f4f4;
        font-family: Arial, sans-serif;
    }
</style>

<link> Tag

This tag is typically used in the <head> section of an HTML document to link external resources, such as CSS files.

  <link rel="stylesheet" type="text/css" href="styles.css">

Form Tags

This tag in HTML is used to create an HTML form that allows users to input data and submit it to a server for processing. Forms are essential for user interaction on websites, such as login forms, registration forms, search forms, and more.

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="Submit">
</form>

Form Elements

HTML provides various form elements that allow users to input data and interact with web pages.

Text Input

<input type="text" id="username" name="username" required>

Password Input

<input type="password" id="password" name="password" required>

Textarea

<textarea id="message" name="message" rows="4" cols="50" required></textarea>

File Input

<input type="file" id="fileInput" name="fileInput">

Number Input

<input type="number" id="quantity" name="quantity" min="1" max="10">

Date Input

<input type="date" id="birthday" name="birthday">

Email Input

<input type="email" id="email" name="email" required>

Radio Buttons

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Checkboxes

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>

Select Dropdown

<label for="country">Country:</label>
<select id="country" name="country" required>
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

Submit Button

<input type="submit" value="Submit">

Reset Button

<input type="reset" value="Reset">

Embed Tag

This tag in HTML is used to embed an inline frame, allowing you to display another HTML document within the current document. It is commonly used to embed external content such as videos, maps, or other webpages.

<iframe> Tag

<iframe src="https://www.example.com" width="600" height="400" title="Embedded Content"></iframe>

Comment

Comments allow you to leave notes in your code, which are ignored by browsers.

<!-- This is a comment. -->

Find Me on:

HTML5HTML tags cheatsheet