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>
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>
3. text Formatting:
links:
dividers:
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> </td>
<td>Personal</td>
<td>Office</td>
</tr>
</tfoot>
</table>
Lists:
Unordered Lists:
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Definition Lists:
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets </dd>
</dl>
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>
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
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!
Article No Longer Available
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)
I got some tags that I didn't know before. Thanks for sharing this cool stuff.
Take ❤️ !!
Thanks a lot for the comment! I'm a student and I'm very happy to write this blog.
Hey, it would be better if you update "text formatting", "links", "dividers" sections tags to lowercase just for convenience
Why?
I understand it's not case sensitive so I just thought of saying it as most people write in lowercase anyways
Hi. In the most used section, to prevent possible confusion, you should remove that closing img tag because img tag doesn't have one.
Thanks, I didn't notice that
Some comments may only be visible to logged-in visitors. Sign in to view all comments.