HTML Cheatsheet for Beginners

0 views - 3 minutes readEdit this post

I rely on your support to keep this website running. If you find the content valuable, please consider making a small donation. whether it’s ₹25/$1 or ₹500/$5.

Donate

Secured by Stripe

Hey there, aspiring web developers! Starting out with HTML and looking for a handy cheatsheet to reference? Look no further! Below is a comprehensive guide to some essential HTML tags and elements that will help you build the foundation of your web pages. Let's get started! 🚀💻

Structure

This is the standard HTML boilerplate code to kickstart your web project:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Headings

HTML provides six levels of headings, from h1 (largest) to h6 (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>

preview

Container

Container tags are used to group content. Commonly used container tags are:

<div>This is a div block</div>
<span>This is a span block</span>
<p>This is a paragraph</p>
<pre>Hello World</pre>
<code>import python</code>

preview

Text Formatting

Use text formatting tags to emphasize or style text:

<b>I'm bold text</b>
<strong>I'm important text</strong>
<i>I'm italic text</i>
<em>Emphasized text</em>
<sub>Subscript</sub>
<sup>Superscript</sup>

preview

Break tag

<br> means break tag is used to add break line in content

<br />
  • Example
<span>without</span>
<br />
<span>break tag</span>

preview

<span>with</span>
<br />
<span>break tag</span>

preview

Lists

Create ordered and unordered lists:

<!-- Ordered List -->
<ol>
  <li>Data 1</li>
  <li>Data 2</li>
  <li>Data 3</li>
</ol>

preview

<!-- UnOrdered List -->

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

preview

Media

Embed images, audio, and video into your web page:

  • Embedding Audio
<audio controls>
  <source src="demo.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

preview

  • Embedding Images
<img src="Source_of_image" alt="Alternate text" />
  • <img> properties
    • width - width of image
    • height - height of image
    • alt - alternate text if the image doesn't load
    • src - source of the image
<img
  src="https://source.unsplash.com/random"
  width="1920"
  height="1080"
  alt="An Image"
/>

preview

  • Embedding Videos
<video width="480" height="320" controls>
  <source src="demo_move.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

preview

Table

Present data in a tabular format:

<table>
  <caption>
    Demo Table
  </caption>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</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>
</table>

preview

Create hyperlinks to navigate between pages:

<a href="https://preetsuthar.me/">Visit preetsuthar portfolio!</a>

preview

Form

Capture user input using HTML forms:

<form action="/action.php" method="post">
  Name: <input name="name" type="text" /> <br />
  Age: <input max="90" min="1" name="age" step="1" type="number" value="18" />
  <br />
  <select name="gender">
    <option selected="selected" value="male">Male</option>
    <option value="female">Female</option></select
  ><br />
  <input checked="checked" name="newsletter" type="radio" value="daily" /> Daily
  <input name="newsletter" type="radio" value="weekly" /> Weekly<br />
  <textarea cols="20" name="comments" rows="5">Comment</textarea><br />
  <label
    ><input name="terms" type="checkbox" value="tandc" />Accept terms</label
  >
  <br />
  <input type="submit" value="Submit" />
</form>

preview

Characters and Symbols

Display special characters using HTML entities:

&copy;
<!-- Copyright Symbol (©) -->
&lt;
<!-- Less than (<) -->
&gt;
<!-- Greater than (>) -->
&amp;
<!-- Ampersand (&) -->
&dollar;
<!-- Dollar ($) -->

preview

Random Text

Use random text to test your layouts:

Elon Musk is an entrepreneur and business magnate. He is the founder, CEO, and
Chief Engineer at SpaceX; CEO and Product Architect of Tesla, Inc.; founder of
The Boring Company; and co-founder of Neuralink and OpenAI. A centibillionaire,
Musk is one of the richest people in the world.

Semantic Elements

Use semantic elements for better HTML structure:

<section>This is a section</section>
<article>Enter your data here</article>
<aside>Your data</aside>

There you have it, a handy HTML cheatsheet to assist you on your web development journey! Keep practicing and building amazing things with HTML.🎉💻🔥

Did you enjoyed the post?

Twitter (x)