HTML (HyperText Markup Language) is the standard language for creating web pages. It structures the content on the web, using various tags to define headings, paragraphs, links, images, tables, forms, and much more. This cheat sheet will help you quickly learn the most essential HTML tags with simple explanations.
<html> </html>
Creates an HTML document.
<head> </head>
Contains the page title and metadata (not displayed on the page).
<body> </body>
Displays the visible content of the page.
<title> </title>
Sets the page title shown on the browser tab.
<body bgcolor=?>
Sets the background color of the page.
<body text=?>
Sets the text color on the page.
<body link=?>
Sets the color of hyperlinks.
<body vlink=?>
Sets the color of visited links.
<body alink=?>
Sets the color of active (clicked) links.
<pre> </pre>
Displays text with spaces and line breaks preserved.
<h1> </h1> - <h6> </h6>
Creates headings from largest (H1) to smallest (H6).
<b> </b>
Makes text bold.
<i> </i>
Makes text italic.
<u> </u>
Underlines text.
<tt> </tt>
Displays text in a typewriter font.
<code> </code>
Displays inline code snippets.
<cite> </cite>
Defines a citation or source reference.
<address> </address>
Displays contact information in a special style.
<em> </em>
Emphasizes text (usually italic).
<strong> </strong>
Strongly emphasizes text (usually bold).
<font size=?> </font>
Sets the text size (deprecated, use CSS).
<font color=?> </font>
Sets the text color (deprecated, use CSS).
<font face=?> </font>
Sets the text font (deprecated, use CSS).
<a href="URL">Text</a>
Creates a clickable link to another page.
<a href="mailto:EMAIL">Text</a>
Creates a clickable email link.
<a name="NAME">
Defines a bookmark inside the page.
<a href="#NAME">Text</a>
Links to a bookmark within the same page.
<p> </p>
Creates a new paragraph.
<br>
Inserts a single line break.
<hr>
Inserts a horizontal line.
<blockquote> </blockquote>
Indents a block of quoted text.
<div> </div>
Creates a block-level container for content.
<span> </span>
Creates an inline container for content.
<ul> </ul>
Creates an unordered (bulleted) list.
<ol start=?> </ol>
Creates an ordered (numbered) list.
<li> </li>
Defines each list item.
<dl> </dl>
Creates a definition list.
<dt>
Defines a term in a definition list.
<dd>
Defines the description in a definition list.
<img src="URL" />
Adds an image to the page.
<img src="URL" alt="?">
Sets alternative text if the image cannot be displayed.
<figure> </figure>
Groups images and their captions.
<figcaption> </figcaption>
Adds a caption to an image.
<form> </form>
Starts a form to collect user input.
<select name=?> </select>
Creates a dropdown selection menu.
<option>
Adds an option to the dropdown menu.
<textarea name=? cols=? rows=?> </textarea>
Creates a multi-line text area.
<input type="checkbox" name=? value=?>
Adds a checkbox input.
<input type="radio" name=? value=?>
Adds a radio button (single choice).
<input type="text" name=? size=?>
Adds a single-line text input.
<input type="password" name=? size=?>
Adds a password input field.
<input type="submit" value=?>
Adds a submit button.
<input type="reset">
Adds a button to reset the form.
<table> </table>
Creates a table structure.
<tr> </tr>
Defines a table row.
<td> </td>
Defines a table cell.
<th> </th>
Defines a header cell in a table.
<table border=?>
Sets the border thickness of the table.
<td colspan=?>
Merges table cells horizontally.
<td rowspan=?>
Merges table cells vertically.
<input type="email" name=?>
Adds an email input field.
<input type="url" name=?>
Adds a URL input field.
<input type="number" name=?>
Adds a number input field.
<input type="range" name=?>
Adds a slider input field.
<input type="date" name=?>
Adds a date picker input field.
<input type="color" name=?>
Adds a color picker input field.
<input type="search" name=?>
Adds a search input field.
This is a simple but effective summary of the most essential HTML tags that you will encounter as you start building web pages. I hope this cheat sheet helps you get started quickly and confidently!
You can follow me on GitHub to see what I’m building, or reach out at aligunesv2@gmail.com.
If you’re interested in how I combine AI tools with real projects, follow me on Twitter: @aligunesimv
I’ll be sharing more soon! 🚀
Ali Gunes
Designed and coded by Ali Gunes
© 2024