DEV Community

Preet Suthar
Preet Suthar

Posted on โ€ข Originally published at preetsuthar.me

2

๐Ÿ“ HTML Cheatsheet for Beginners

Find more blogs here

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Lists

Create ordered and unordered lists:

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

<ul>
  <li>Your Data</li>
  <li>Your Data</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Media

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

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

<img src="Source_of_image" alt="Alternate text" />

<video width="480" height="320" controls>
  <source src="demo_move.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
Enter fullscreen mode Exit fullscreen mode

Table

Present data in a tabular format:

<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>&nbsp;</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tfoot>
</table>
Enter fullscreen mode Exit fullscreen mode

Links

Create hyperlinks to navigate between pages:

<a href="https://preetsuthar.me/">Visit preetsuthar portfolio!</a>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Characters & Symbols

Display special characters using HTML entities:

&copy;
<!-- Copyright Symbol (ยฉ) -->
&lt;
<!-- Less than (<) -->
&gt;
<!-- Greater than (>) -->
&amp;
<!-- Ampersand (&) -->
&dollar;
<!-- Dollar ($) -->
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

There you have it, a handy HTML cheatsheet to assist you on your web development journey! Keep practicing and building amazing things with HTML.๐ŸŽ‰๐Ÿ’ป๐Ÿ”ฅ

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post โ†’

Top comments (0)

Image of Docusign

๐Ÿ› ๏ธ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more