DEV Community

Cover image for The ultimate HTML Tags Cheat Sheet πŸ”₯πŸš€
Lorenzo
Lorenzo

Posted on • Updated on

The ultimate HTML Tags Cheat Sheet πŸ”₯πŸš€

Hello World! Today I created for you a cheat sheet with all the html tags you may need (And a miscellaneous of other useful stuff in html).


1. Most used HTML tags:

<title> Defines a title for the document </title>
<header> Defines a header for a document or section </header>
<main> Specifies the main content of a document </main>
<footer> Defines a footer for a document or section </footer>
<p> Defines a paragraph </p>
<a> Defines a hyperlink </a>
<b> Defines bold text </b>
<br> Defines a single line break </br>
<button> Defines a clickable button </button>
<div> Defines a section in a document </div>
<footer> Defines a footer for a document or section </footer>
<h1> to <h6> Defines HTML headings </h1> to </h6>
<img> Defines an image
<ol> Defines an ordered list </ol>
<ul> Defines an unordered list </ul>
<li> Defines a list item  </li>
<script> Defines a client-side script </script>
<span> Defines a section in a document</span>
<table> Defines a table </table>
<td> Defines a cell in a table</td>
<th> Defines a header cell in a table </th>
<tr> Defines a row in a table </tr>
Enter fullscreen mode Exit fullscreen mode

2. Head Tags:

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://htmlcheatsheet.com/" />
<title>HTML CheatSheet</title>
<meta name="description" content="A brief page description">
<meta name="keywords" content="html,cheatsheet" />
<meta property="fb:admins" content="YourFacebookUsername" />
<meta property="og:title" content="HTML CheatSheet" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://htmlcheatsheet.com/" />
<meta property="og:image" content="https://htmlcheatsheet.com/images/html-cheatsheet.jpg" />
<meta property="og:description" content="A brief page description" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="alternate" hreflang="es" href="https://htmlcheatsheet.com/spanish/" />
<link rel="stylesheet" href="/styles.css">
<script src="/script.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

3. text Formatting:

image


links:

image
image


dividers:

image


Tables:

<table><caption>Phone numbers</caption>
<thead>
    <tr>
        <th>Name</th>
        <th colspan="2">Phone</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>John</td>
        <td>577854</td>
        <td>577855</td>
    </tr>
    <tr>
        <td>Jack</td>
        <td>577856</td>
        <td>577857</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td>&nbsp;</td>
        <td>Personal</td>
        <td>Office</td>
    </tr>
</tfoot>
</table>
Enter fullscreen mode Exit fullscreen mode

Lists:

Unordered Lists:

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Definition Lists:

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets </dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

Forms:

<form action="/action.php" method="post">
Name: <input name="name" type="text" /> <br /> 
Age: <input max="99" 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

Attributes:

acceptform, input
accept-charsetform
accesskeyGlobal attribute
actionform
alignapplet, caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot , th, thead, tr
altapplet, area, img, input
asyncscript
autocompleteform, input
autofocusbutton, input, keygen, select, textarea
autoplayaudio, video
autosaveinput
bgcolorbody, col, colgroup, marquee, table, tbody, tfoot, td, th, tr
bufferedaudio, video
challengekeygen
charsetmeta, script
checkedcommand, input
citeblockquote, del, ins, q
classGlobal attribute
Enter fullscreen mode Exit fullscreen mode

Full List of all tags on w3school (Ordered Alphabetically)
https://htmlcheatsheet.com/


Hope this helped and thanks for reading!

Please smash that like button to make me understand that you want the series to continue

Check this article about how to make html forms like a pro!


Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Top comments (7)

Collapse
 
mahtamunhoquefahim profile image
Mahtamun Hoque Fahim • Edited

I got some tags that I didn't know before. Thanks for sharing this cool stuff.
Take ❀️ !!

Collapse
 
lorenzoblog profile image
Lorenzo

Thanks a lot for the comment! I'm a student and I'm very happy to write this blog.

Collapse
 
sloth_panda profile image
Achyut Kumar Panda

Hey, it would be better if you update "text formatting", "links", "dividers" sections tags to lowercase just for convenience

Collapse
 
lorenzoblog profile image
Lorenzo

Why?

Collapse
 
sloth_panda profile image
Achyut Kumar Panda

I understand it's not case sensitive so I just thought of saying it as most people write in lowercase anyways

Collapse
 
nikolab profile image
Nikola Betica

Hi. In the most used section, to prevent possible confusion, you should remove that closing img tag because img tag doesn't have one.

Collapse
 
lorenzoblog profile image
Lorenzo

Thanks, I didn't notice that

Some comments may only be visible to logged-in visitors. Sign in to view all comments.