Kundan.dev
Published on
•

Html

HTML Cheat sheet - Ultimate copy-paste guide for Developers

Authors

A web developer understands the power of HTML and how it brings designs to life.

But, let's admit it, HTML can sometimes feel overwhelming with its long lists of tags, elements, and syntax. That's why, having a reliable HTML cheat sheet can help a lot.

In this post, we have compiled a collection of commonly used HTML tags, structural and semantic tags. This cheat sheet will improve your coding skills.

Whether you're a beginner into web development or a pro, looking for an easy copy-paste guide, this cheat sheet will assist you.

Table of Contents

HTML Basics

HTML Cheat sheet

Photo by Valery Sysoev.

Structure of an HTML document

Here is the basic structure or say, boilerplate of HTML. It starts with Doctype declaration in the beginning and contains Head element which is followed by Body element.

webpage.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

    <section>
      <h1>Welcome to My Web Page</h1>
      <p>This is the introductory paragraph.</p>
    </section>

    <section>
      <h2>About Me</h2>
      <p>I am a passionate web developer.<br/></p>
      <p>I have expertise in HTML, CSS, and JavaScript.</p>
    </section>

    <section>
      <h2>Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Frontend Development</li>
        <li>Responsive Layouts</li>
        <li>Website Maintenance</li>
      </ul>
    </section>

    <footer>
      <p>&copy; 2023 My Web Page. All rights reserved.</p>
    </footer>

    <script src="script.js"></script>
  </body>
</html>

HTML Cheat sheet

Here are list of HTML tags based on their usages in coding. These tags are categorized into sections like tags for structuring, tags for text formatting, Links & image...etc.

Commonly used tags

List of commonly used tags are here. These tags are used for even building a simple html component.

1. <p> tags for Paragraphs

Paragraph <p> is used in HTML to create a paragraph element in the web page.

<p>This is an example of a paragraph.</p>
<p>HTML is a markup language, not a programming language.</p>

2. <b> or <strong> to make text Bold

Although, <b> and <strong> are used to make the text bold. <b> is used to make text bold for presentational purposes while <strong> is used for semantic purposes.

<b>This is bold line.</b>

<strong>This is strong and important line.</strong>

3. <i> or <em> to make a text italic

Both <i> and <em> can be used to make text italic. <em> is more semantic than <i>.

<i>Italic text</i>

<em>Emphasised and Italic text</em>

4. <br> or <br /> for break

Both <br> and <br /> is used to break line. However, <br /> is more preferred because it is a self-closing tag.

<p>We can use <br />to create a line break.</p>
Output:

We can use
to create a line break.

5. <h1> ... <h6> for Headings

In HTML, you get 6 types of heading from <h1> to <h6>.

<h1>This is heading 1.</h1>
<h2>This is heading 2.</h2>
<h3>This is heading 3.</h3>
<h4>This is heading 4.</h4>
<h5>This is heading 5.</h5>
<h6>This is heading 6.</h6>

6. <a> for Links

In HTML, <a> tag is used to create hyperlink to other pages.

<a href="https://www.google.com">Google.com</a>

7. <img> for Images

<img> tag is used to add Images or gifs to the web pages.

<img src="./images/my-profile.png" alt="alternate text" />

8. <ul> & <li> for Unordered List

In HTML, <ul> is used to create an unordered list.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
Output:
  • Item 1
  • Item 2
  • Item 3

9. <ol> & <li> for Ordered List

<ol> is used to an ordered list.

<ol>
  <li>Hindi</li>
  <li>English</li>
  <li>Spanish</li>
</ol>
Output:
  1. Hindi
  2. English
  3. Spanish

10. <div> to create block or division

<div> is used to create code block or division or group content together.

<div>
  <p>This is paragraph</p>
  <a href="#">This is link</a>
  <img src="./my-picture.png" alt="my picture" />
</div>

11. <span> to style part of text

<span> tag is often used to style text or to add JavaScript events to specific parts of a document.

This text is <span style="color: red;">red</span>.

 

Document Structure

1. Headings and subheadings

HTML provides 6 levels of Heading and subheadings to use. h1 is often considered as main heading and h2 to h6 are subheadings.

<h1>This is heading 1.</h1>

<h2>This is heading 2.</h2>

<h3>This is heading 3.</h3>

<h4>This is heading 4.</h4>

<h5>This is heading 5.</h5>

<h6>This is heading 6.</h6>

2. Paragraphs and line breaks

In HTML, we use <p> tag to add paragraph or text content to the web page.

<p>This is an example paragraph.</p>

To break a line or a paragraph, we use <br /> tag to break.

<p>We can use <br />to create a line break.</p>

3. Formatting text

HTML provides a lot of HTML tags to format text accordingly. We can make text bold, italic, underlined, striked through, and even use super and sub scripts.

  • Bold and italic text

    Text is <strong>Bold</strong>.

    Text is <em>Italic</em>.

  • Underlined text

    Text is <u>underlined</u>.

  • Strikethrough text

    Text is <s>strikethrough</s>.

    <strike> tag is deprecated in HTML5 and should not be used. Instead, use <s>...</s>.

  • Superscript and subscript text

    You can create superscript using <sup>...</sup> and subscript using <sub>...</sub>.

    Text is <sup>superscript</sup>.

    Text is <sub>subscript</sub>.

4. Adding comments to the code

You can add comments in HTML code using <!-- your comment here -->.

<!-- your comment here -->

5. Include External CSS and JavaScript files

<link> and <script> tag comes very handy in including external CSS and JavaScript codes.

  • To add CSS into HTML file.

    • External CSS

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

    • Internal CSS

      <style>
  .
  .
</style>

  • To add JavaScript into HTML file.

    • External JavaScript

      <script src="./script.js" />

    • Internal JavaScript

      <script>
  .
  .
</script>

 

  1. Add link to other web pages using <a> tag.
<a href="https://www.google.com">Google.com</a>
  1. To add Images to your HTML page, you need to use img tag.
<img href="./dog.png" alt="dog image" height="100px" width="200px" />

 

List and Tables

1. List in HTML

  • <ol> for Ordered List

    <ol>
  <li>USA</li>
  <li>Canada</li>
  <li>United Kingdom</li>
</ol>
    Output:
    1. USA
    2. Canada
    3. United Kingdom

  • <ul> for Unordered List

    <ul>
  <li>Earth</li>
  <li>Mars</li>
  <li>Jupiter</li>
</ul>
    Output:
    • Earth
    • Mars
    • Jupiter

2. Tables in HTML

In HTML, tables are created using <table> tag.

  • <table>: table Tag
  • <thead>: head of table
  • <tbody>: body of table
  • <tr>: row in table.
  • <th>: cell as header of cell group.
  • <td>: a standard data cell.
<table>
  <thead>
    <tr>
      <th>Chair</th>
      <th>The Laid Back</th>
      <th>The Worker Bee</th>
      <th>The Chair 4/2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Width</th>
      <td>80 cm</td>
      <td>60 cm</td>
      <td>220 cm</td>
    </tr>
    <tr>
      <th>Height</th>
      <td>100 cm</td>
      <td>110 cm</td>
      <td>90 cm</td>
    </tr>
    <tr>
      <th>Depth</th>
      <td>70 cm</td>
      <td>65 cm</td>
      <td>80 cm</td>
    </tr>
    <tr>
      <th>Weight</th>
      <td>16 kg</td>
      <td>22 kg</td>
      <td>80 kg</td>
    </tr>
  </tbody>
</table>
Output:
Chair The Laid Back The Worker Bee The Chair 4/2
Width 80 cm 60 cm 220 cm
Height 100 cm 110 cm 90 cm
Depth 70 cm 65 cm 80 cm
Weight 16 kg 22 kg 80 kg

 

Forms and Input Fields

1. Form

HTML tags are used to create different types of form elements using <form>...</form>.

<form action="/contact" method="post">
  <input type="text" name="name" placeholder="Your name" /><br />
  <input type="email" name="email" placeholder="Your email address" /><br />
  <textarea name="message" placeholder="Your message"></textarea><br />
  <button type="button">Submit</button>
</form>

2. Input field

Form collect information using <input /> tag.

<input type="text" name="name" placeholder="Your name" />

Input tag's can support multiple types including text, email, password, checkbox, radio, file, button, submit...etc.

Apart from type, Input tag also has some important attributes including maxlength, minlength, required and autocomplete.

<input type="email" name="email" placeholder="Email address" required />

 

Multimedia and Embedding Content

1. Embedding of video and audio

  • Adding Video in HTML

    <video src="./videos/movie1.mp4" controls></video>

  • Adding Audio to HTML

    <audio src="./sounds/song.mp3" controls></audio>

2. Embedding external content

External contents like YouTube videos, Google maps, and Social media posts are embedded into HTML using <iframe />.

<iframe src="https://www.youtube.com/embed/video_id" width="560" height="315"></iframe>

 

Semantic HTML

Semantic HTML is a type of HTML that uses elements that have a specific meaning, or semantics.

It makes it easier for search engines and other techs to understand better about the content of a web page.

1. <nav> for navigation menus

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

2. <header> and <footer> for header and footer sections

<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<footer>
  <div>
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms & conditions</a>
    <a href="/disclaimer">Disclaimer</a>
  </div>
  <p>Copyright &copy; 2023 My Website. All rights reserved.</p>
</footer>
  1. <section> for content sections
<section id="hero-section">
  <img src="./hero.jpg" alt="Hero image" />
  <div class="hero-content">
    <h2>Welcome to My Website!</h2>
    <p>I will share my thoughts and ideas here.</p>
    <a href="/about">Learn more</a>
  </div>
</section>
  1. <article> for self-contained or article content
<article>
  <h1>Heading of the Article</h1>
  <p>This is an example paragraph content.</p>
  <img src="./fugi.jpg" alt="mt fugi image" />
  <p>This is more content of the article.</p>
</article>
  1. <aside> for sidebars or additional info
<aside>
  <h3>Recent Posts</h3>
  <ul>
    <li><a href="#">Post title - 1</a></li>
    <li><a href="#">Post title - 2</a></li>
    <li><a href="#">Post title - 3</a></li>
    <li><a href="#">Post title - 4</a></li>
    <li><a href="#">Post title - 5</a></li>
  </ul>
</aside>

Final note:

This HTML cheat sheet has provided you a ultimate guide of HTML tags, elements and its syntax.

By referring to this cheat sheet, you can save your time and effort during the coding process.

Also, you can ensure accuracy, improve your productivity, and minimize the chances of making mistakes using this cheat sheet.

Share: