DEV Community

Cover image for HTML Cheatsheet: The Ultimate Guide to HTML Fundamentals
zuzexx
zuzexx

Posted on

HTML Cheatsheet: The Ultimate Guide to HTML Fundamentals

#webdev #beginners #tutorial #html

HTML (HyperText Markup Language) is a fundamental building block of the web. It provides the structure and content of a website, making it a crucial part of any web development project. Whether you're a beginner or an experienced developer, having a comprehensive HTML cheatsheet can be incredibly helpful. Here's everything you need to know about HTML, all in one place.

Basic HTML Structure

Here's the basic structure of an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Heading Elements

HTML has six different heading elements, from <h1> to <h6>. Here's an example of each:

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>
Enter fullscreen mode Exit fullscreen mode

Paragraphs

To create a paragraph in HTML, simply wrap your text in <p> tags:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

Links

Links allow users to navigate between different pages on the web. To create a link, use the <a> element:

<a href="https://www.example.com">This is a link</a>
Enter fullscreen mode Exit fullscreen mode

Images

To display an image on a webpage, use the <img> element:

<img src="image.jpg" alt="A description of the image">
Enter fullscreen mode Exit fullscreen mode

Lists

Lists are a great way to organize content on a webpage. There are two types of lists in HTML: ordered and unordered.

Ordered Lists

Ordered lists are numbered and use the <ol> element:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Unordered Lists

Unordered lists use bullet points and the <ul> element:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Tables

Tables are a great way to display data in a tabular format. Here's an example of a simple HTML table:

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

html meme

And there you have it! This HTML cheatsheet covers the basic tags and elements that you'll use in almost every HTML project. Of course, there's much more to HTML than what's covered here, but this should be enough to get you started. Happy coding!

Top comments (0)

Read next

anushkatripathi310 profile image

Cyber-safe Digital Space

Anushka Tripathi -

phukon profile image

Be a Better UI Engineer: Selectively Exclude CSS Styles

phukon -

burtds profile image

Laravel Reverb: Getting started

Bert De Swaef -

jamescroissant profile image

What React beginners should know about React 19 first.

Yu Hamada -