🎉 Everything is free here. Read more →
Tutorial
HTML Tutorial
HTML Cheatsheet
Download this Cheatsheet
💡
Click here if you would like to modify or contribute
GitHub

HTML Cheat Sheet For Beginners

Structure

This is the basic template or barebone structure of HTML.

Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- Body -->
</body>
</html>

Headings

There are six headings available in HTML, H1 is the largest among all, and H6 is the smallest.

<h1> Tag

<h1>Heading 1</h1>

<h2> Tag

<h2>Heading 2</h2>

<h3> Tag

<h3>Heading 3</h3>

<h4> Tag

<h4>Heading 4</h4>

<h5> Tag

<h5>Heading 5</h5>

<h6> Tag

<h6>Heading 6</h6>

Paragraphs

The <p> tag is used to define a paragraph.

<p>This is a paragraph.</p>

Line Breaks

The <br> tag is used to insert a single line break.

 
<p>This is a paragraph.<br>This is another line in the same paragraph.</p>

Container

Container tags are the tags that contain some data such as text, image, etc. There are several container tags in HTML.

div tag

div tag or division tag is used to make blocks or divisions in the document and it is the most commonly used container tag.

<div> This is div block </div>

span tag

span is a container for inline content such as text, images, etc.

<span> This is span block </span>

p tag

Paragraph tag is used to create a paragraph in the document.

<p> This is a paragraph </p>

pre tag

pre tag represents pre-formatted text which is to be presented exactly as written in the HTML file.

<pre> Hello World </pre>

code tag

code tag is used to represent source codes in the document.

<code>
import python
</code>

Text Formatting

Text formatting tags are used to format text or data of HTML documents. You can do certain things like creating italic, bold, strong text to make your document look more attractive and understandable.

<b> tag

<b> tag is used to make text bold. It is not recommended to use this tag as it is not semantic.

<b>I'm bold text</b>

<strong> tag

<strong> tag is used to make text bold. It is recommended to use this tag as it is semantic.

<strong>I'm important text</strong>

<i> tag

<i> tag is used to make text italic. It is not recommended to use this tag as it is not semantic.(semantic means it is used to describe the meaning of the content)

<i>I'm italic text</i>

<em> tag

<em> tag is used to define emphasized text. The content inside is typically displayed in italic

<em>Emphasized text</em>

<sub> tag

<sub> tag is used to make text subscript. It is used to represent chemical formulas, like H2O.

<sub>Subscript</sub>

<sup> tag

<sup> tag is used to make text superscript. It is used to represent footnotes, like 2nd.

<sup>Superscript</sup>

<mark> tag

<mark> tag is used to highlight text. It is used to represent a run of text marked or highlighted for reference purposes, due to its relevance in a particular context.

<mark>Marked text</mark>

<del> tag

<del> tag is used to define deleted text. The content inside is typically displayed with a line through the center.

<del>Deleted text</del>

<ins> tag

<ins> tag is used to define inserted text. The content inside is typically displayed with an underline.

<ins>Inserted text</ins>

<small> tag

<small> tag is used to define smaller text. The content inside is typically displayed in smaller font-size than the surrounding text.

<small>Small text</small>

<big> tag

<big> tag is used to define bigger text. The content inside is typically displayed in bigger font-size than the surrounding text.

<big>Big text</big>

<abbr> tag

<abbr> tag is used to define an abbreviation or an acronym. The content inside is typically displayed in italic.

<abbr title="World Health Organization">WHO</abbr>

<dfn> tag

<dfn> tag is used to define a definition term. The content inside is typically displayed in italic.

<dfn>Definition</dfn>

<blockquote> tag

<blockquote> tag is used to define a section that is quoted from another source.

<blockquote cite="https://www.w3schools.com/html/html_blocks.asp">
    <p>Quoted text goes here.</p>
</blockquote>

<q> tag

<q> tag is used to define a short quotation. The content inside is typically displayed with quotation marks.

<q>Quoted text goes here.</q>

<cite> tag

<cite> tag is used to define the title of a work. The content inside is typically displayed in italic.

<cite>HTML Tutorial</cite>

<time> tag

<time> tag is used to define a date/time. The content inside is typically displayed in italic.

<time datetime="2013-04-06T12:32+00:00">2 days ago</time>

<address> tag

<address> tag is used to define contact information for the author/owner of a document or an article. The content inside is typically displayed in italic.

<address>
    Written by John Doe.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

<kbd> tag

<kbd> tag is used to define keyboard input. The content inside is typically displayed in the browser's default monotype font.

<p>Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd> to open the Unicode Character Map.</p>

<samp> tag

<samp> tag is used to define sample output from a computer program. The content inside is typically displayed in the browser's default monotype font.

<p>The computer responded with <samp>Not enough memory</samp> and <samp>Cannot read drive C:</samp>.</p>

<var> tag

<var> tag is used to define a variable. The content inside is typically displayed in italic.

<p>The cost of one item is <var>x</var>.</p>

<pre> tag

<pre> tag is used to define preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

<pre>
    My Bonnie lies over the ocean.
    My Bonnie lies over the sea.
    My Bonnie lies over the ocean.
    Oh, bring back my Bonnie to me.
 
</pre>

Lists

Lists can be either numerical, alphabetic, bullet, or other symbols. You can specify list type and list items in HTML for the clean document.

<ol> tag

Ordered list starts with <ol> tag and each list item starts with <li> tag and ends with </li> tag. The list items are displayed in numerical order.

<ol>
    <li>Data 1</li>
    <li>Data 2</li>
    <li>Data 3</li>
</ol>

<ul> tag

Unordered list starts with <ul> tag and each list item starts with <li> tag and ends with </li> tag. The list items are displayed in bullet points.

<ul>
    <li>Your Data</li>
    <li>Your Data</li>
</ul>

<dl> tag

Definition list starts with <dl> tag and each list item starts with <dt> tag and ends with </dt> tag. The list items are displayed in bullet points.

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<menu> tag

The <menu> tag defines a list/menu of commands. The <menu> tag is used together with the <li> tag to define a list of commands.

<menu>
  <li>File</li>
  <li>Edit</li>
  <li>View</li>
</menu>
 
### **&lt;dir> tag**
 
The &lt;dir> tag defines a directory list. The &lt;dir> tag is used together with the &lt;li> tag to define a directory list.
 
```html
<dir>
  <li>HTML Tutorial</li>
  <li>CSS Tutorial</li>
  <li>JavaScript Tutorial</li>
 
</dir>

<li> tag

The <li> tag defines a list item. The <li> tag is used in ordered lists (<ol>), unordered lists (<ul>), and menu lists (<menu>).

<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

<dt> tag

The <dt> tag defines a term/name in a description list. The <dt> tag is used in conjunction with the <dd> tag to describe a term/name.

<dl>
  <dt>Coffee</dt>
  <dt>Milk</dt>
</dl>
 
### **&lt;dd> tag**
 
The &lt;dd> tag describes a term/name in a description list. The &lt;dd> tag is used in conjunction with the &lt;dt> tag to describe a term/name.
 
```html
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
 
</dl>

Media

Media is anything that is present in digital form such as image, video, audio, etc and can be embedded in HTML document. You can embed media in HTML document using <img>, <video>, <audio>, <iframe> tags.

<audio> tag

It is used to embed sound content in the document and it is supported by all major browsers. The <audio> tag is used in conjunction with the <source> tag to specify multiple audio files.

<audio controls>
    <source src="demo.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<img> tag

It is used to embed or import image in a webpage and it is supported by all major browsers. The <img> tag is empty element and it does not have a closing tag.

<img src="Source_of_image" alt="Alternate text">

<video> tag

It is used to embed video in the webpage and it is supported by all major browsers. The <video> tag is used in conjunction with the <source> tag to specify multiple video files.

<video width="480" height="320" controls>
    <source src="demo_move.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<iframe> tag

It is used to embed another document within the current HTML document. The <iframe> tag is used in conjunction with the <src> attribute to specify the source of the document to embed.

<iframe src="https://www.w3schools.com"></iframe>

Table

A table is a collection of rows and columns. It is used to represent data in tabular form and it is supported by all major browsers. You can create table in HTML document using <table>, <tr>, <th>, <td> tags.

  • <tr> tag defines a row in an HTML table.
  • <th> tag defines a header cell in an HTML table.
  • <td> tag defines a cell in an HTML table.
  • <thead> tag groups the header content in an HTML table.
  • <tbody> tag groups the body content in an HTML table.
  • <tfoot> tag groups the footer content in an HTML table.

Table Structure

<table>
    <caption>Demo Table</caption>
    <thead>
        <tr>
            <th>Column1</th>
            <th colspan="2">Column2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data2</td>
        </tr>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>&nbsp;</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tfoot>
</table>
Column1Column2
Data1Data2
Data1Data2
 Data

Links

Links are clickable text that can redirect you to some other page.

<a> tag

<a> or anchor tag defines a hyperlink which is used to link from one page to another. The <a> tag is used in conjunction with the <href> attribute to specify the link address.

<a href="https://www.codexam.com/">Visit CodeXam.com!</a>

<link> tag

<link> tag defines the relationship between the current document and an external resource. The <link> tag is used in conjunction with the <href> attribute to specify the URL of the linked document and the <rel> attribute to specify the relationship between the current document and the linked document.

<link rel="stylesheet" href="mystyle.css">

<nav> tag

<nav> tag defines a set of navigation links. The <nav> tag is used to group the major navigational blocks on the site such as the primary site navigation.

<nav>
    <a href="https://www.codexam.com/">Home</a> |
    <a href="https://www.codexam.com/about/">About</a> |
    <a href="https://www.codexam.com/contact/">Contact</a>
</nav>

Form

Sample Form

Form is used to collect user's input, generally user's data is sent to server for further processing and it is supported by all major browsers. You can create form in HTML document using <form>, <input>, <label>, <select>, <textarea>, <button> tags.

  • <input> tag is used to create interactive controls for web-based forms in order to accept data from the user. The <input> tag is used in conjunction with the <type> attribute to specify the type of input to display.
  • <select> tag is used to create a drop-down list. The <select> tag is used in conjunction with the <option> tag to specify the options in the list.
  • <textarea> tag is used to create a multi-line text input control. The <textarea> tag is used in conjunction with the <rows> and <cols> attributes to specify the size of the text area.
  • <option> tag is used to define an option in a drop-down list. The <option> tag is used in conjunction with the <select> tag to create a drop-down list.
  • <label> tag is used to define a label for an <input> element. The <label> tag is used in conjunction with the <for> attribute to bind it to an <input> element.
  • <button> tag is used to define a clickable button. The <button> tag is used in conjunction with the <type> attribute to specify the type of button to display.
  • <fieldset> tag is used to group related elements in a form. The <fieldset> tag is used in conjunction with the <legend> tag to specify a caption for the fieldset.
  • <legend> tag is used to define a caption for a <fieldset> element. The <legend> tag is used in conjunction with the <fieldset> tag to specify a caption for the fieldset.
  • <datalist> tag is used to provide a predefined list of values for input controls. The <datalist> tag is used in conjunction with the <input> tag to specify a list of pre-defined values for the input control.
  • <output> tag is used to represent the result of a calculation. The <output> tag is used in conjunction with the <for> attribute to bind it to an <input> element.
  • <form> tag is used to create an HTML form for user input. The <form> tag is used in conjunction with the <action> attribute to specify where to send the form-data when a form is submitted and the <method> attribute to specify how to send the form-data.
  • <optgroup> tag is used to group related options in a drop-down list. The <optgroup> tag is used in conjunction with the <option> tag to specify the options in the list.
  • <progress> tag is used to represent the progress of a task. The <progress> tag is used in conjunction with the <value> attribute to specify the current value of the progress and the <max> attribute to specify the maximum value.
  • <meter> tag is used to represent a scalar measurement within a known range. The <meter> tag is used in conjunction with the <value> attribute to specify the current value of the measurement and the <min> and <max> attributes to specify the range of the measurement.
  • <keygen> tag is used to provide a secure way to authenticate users. The <keygen> tag is used in conjunction with the <keytype> attribute to specify the type of key to generate.
<form action="/action.php" method="post">
    Name: <input name="name" type="text" /> <br />
    Age: <input max="90" 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>

Name:
Age:


Daily Weekly


Characters and Symbols

Some symbols are not directly present on the keyboard, but there are some ways to use them in HTML documents. We can display them either by entity name, decimal, or hexadecimal value.

Copyright Symbol (©)

It is the entity name for the copyright symbol ©. You can use it in HTML document as follows:

&copy;

Less than (<)

It is the entity name for the less than symbol <. You can use it in HTML document as follows:

&lt

Greater than (>)

It is the entity name for the greater than symbol >. You can use it in HTML document as follows:

&gt;

Ampersand (&)

It is the entity name for the ampersand symbol &. You can use it in HTML document as follows:

&amp;

Dollar ($)

&dollar;

Euro (€)

It is the entity name for the euro symbol €. You can use it in HTML document as follows:

&euro;

Pound (£)

It is the entity name for the pound symbol £. You can use it in HTML document as follows:

&pound;

Yen (¥)

It is the entity name for the yen symbol ¥. You can use it in HTML document as follows:

&yen;

Cent (¢)

It is the entity name for the cent symbol ¢. You can use it in HTML document as follows:

&cent;

Registered (®)

It is the entity name for the registered symbol ®. You can use it in HTML document as follows:

&reg;

Trademark (™)

It is the entity name for the trademark symbol ™. You can use it in HTML document as follows:

&trade;

Degree (°)

It is the entity name for the degree symbol °. You can use it in HTML document as follows:

&deg;

Plus Minus (±)

It is the entity name for the plus minus symbol ±. You can use it in HTML document as follows:

&plusmn;

Multiplication (×)

It is the entity name for the multiplication symbol ×. You can use it in HTML document as follows:

&times;

Division (÷)

It is the entity name for the division symbol ÷. You can use it in HTML document as follows:

&divide;

Superscript 2 (²)

It is the entity name for the superscript 2 symbol ². You can use it in HTML document as follows:

&sup2;

Superscript 3 (³)

It is the entity name for the superscript 3 symbol ³. You can use it in HTML document as follows:

&sup3;

Superscript 1 (¹)

It is the entity name for the superscript 1 symbol ¹. You can use it in HTML document as follows:

&sup1;

Fraction 1/4 (¼)

It is the entity name for the fraction 1/4 symbol ¼. You can use it in HTML document as follows:

&frac14;

Random Text

Elon Musk

Elon Reeve Musk FRS is an entrepreneur and business magnate. He is the founder, CEO, and Chief Engineer at SpaceX; early stage investor, CEO, and Product Architect of Tesla, Inc.; founder of The Boring Company; and co-founder of Neuralink and OpenAI. A centibillionaire, Musk is one of the richest people in the world.

Semantic Elements

Semantic elements are those elements that are self describable, i.e., from their name itself, you can understand their meaning.

<section> tag

<section> defines the section of documents such as chapters, headers, footers or any other sections.

<section>This is a section</section>

<article> tag

<article> defines the independent self-contained content. It can be a blog post, news article, forum post, or any other independent piece of content.

<article>This is an article</article>

<aside> tag

<aside> defines the content aside from the page content. It can be a sidebar, a box at the end of the article, or any other content that is related to the page but not the main content.

<aside>This is an aside</aside>

<nav> tag

<nav> defines the navigation links of the page.

 
<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
 
</nav>

<header> tag

<header> defines the header of the page or a section.

 
<header>
  <h1>Header</h1>
 
</header>

<footer> tag

<footer> defines the footer of the page or a section.

 
<footer>
  <p>Footer</p>
 
</footer>

<main> tag

<main> defines the main content of the page.

 
<main>
  <p>Main content</p>
 
</main>

<figure> tag

<figure> defines the self-contained content, like illustrations, diagrams, photos, code listings, etc.

 
<figure>
  <img src="image.jpg" alt="Image">
  <figcaption>Image caption</figcaption>
 
</figure>

summary tag

<summary> defines the visible heading for the <details> element.

 
<details>
  <summary>Click to expand</summary>
  <p>Details</p>
</details>

<mark> tag

<mark> defines the marked/highlighted text.

 
<p>Marked text: <mark>Marked</mark></p>

<time> tag

<time> defines the date/time.

 
<p>Time: <time datetime="2020-01-01">1st January 2020</time></p>

<progress> tag

<progress> defines the progress of a task.

 
<p>Progress: <progress value="50" max="100"></progress></p>

<meter> tag

<meter> defines the scalar measurement within a known range.

 
<p>Meter: <meter value="50" min="0" max="100"></meter></p>

<dialog> tag

<dialog> defines the dialog box or window.

 
<dialog open>
  <p>Dialog</p>
 
</dialog>

<details> tag

<details> defines the additional details that the user can view or hide.

 
<details>
  <summary>Click to expand</summary>
  <p>Details</p>
</details>

<article> tag

It represents self-contained content

<article> Enter your data here </article>

<aside> tag

It is used to place content in the sidebar

<aside> Your data </aside>
HTML TutorialHtml Basics