The ultimate HTML Tags Cheat Sheet 🔥🚀
Tags: beginners, html, webdev, programming
Published: 2021-02-21 08:54:23

`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:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap8jd0i7155sscnqw75r.png)

---
 
## links:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sv4dluiubfpncjstkyzo.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp8keresdvbpe9y9f8uc.png)
   
---

## dividers:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qxx5bzs9t0sz6xsjqja.png)
 
---

## 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>
```

---

## 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://www.w3schools.com/tags/default.asp)
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!](https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj)
{% link https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj %}

---

## **[Subscribe to my Newsletter!](https://chipper-motivator-3112.ck.page/05710ea3d3)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!