HTML Cheat Sheet

Previous
Quiz
Next

This HTML cheatsheet is a summary of theHTML tutorial. Here, you will find quick information about HTML concepts, starting from the basic structure to advanced elements.

Basic HTML Structure

The following is the basic structure of an HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpage's Page Title</title>
  </head>
  <body>
    <!-- Webpage's content goes here -->
  </body>
</html>

Heading Tags

The following are the six HTML heading tags, where <h1> is the main heading of the webpage and <h6> is the least heading with the smallest size:

Heading 1 (<h1> Tag)

<h1>Heading 1</h1>

Heading 2 (<h2> Tag)

<h2>Heading 2</h2>

Heading 3 (<h3> Tag)

<h3>Heading 3</h3>

Heading 4 (<h4> Tag)

<h4>Heading 4</h4>

Heading 5 (<h5> Tag)

<h5>Heading 5</h5>

Heading 6 (<h6> Tag)

<h6>Heading 6</h6>

Paragraph

The <p> tag is used to place content in a paragraph.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis mattis nisi, at facilisis nunc tempus sed. Duis sagittis odio ac neque tempor iaculis. Fusce et arcu consequat, pretium lectus ut, venenatis leo. Phasellus libero enim, semper ut luctus a, pretium in turpis. Donec eget ultricies arcu, et suscipit nisi. Ut et neque posuere, lacinia dui vitae, varius tellus. Mauris placerat, leo sed pretium viverra, massa ante ultricies orci, quis vehicula ex elit et ligula. Nullam ac lectus semper, aliquet neque sit amet, cursus urna. Aenean faucibus dignissim orci sed malesuada. Maecenas arcu erat, aliquam eget lacus non, malesuada consectetur tellus. Fusce non eros et dui ultrices consequat. Vivamus rutrum lobortis purus, ut cursus massa malesuada vel.</p>
<p>Morbi sollicitudin luctus velit, eget maximus ex accumsan at. Sed interdum felis a erat tempor, et hendrerit sapien lacinia. Maecenas imperdiet lacinia ante ut congue. Vestibulum vehicula vulputate dolor non hendrerit.</p>

Text Formatting Tags

1. <b>

This tag makes the enclosed text bold.

<p><b>This is bold text</b></p>

2. <i>

This tag is used to make the enclosed text italic.

<p><i>This is italic text</i></p>

3. <u>

The <u> tag underlines the text.

<p><u>This is underlined text</u></p>

4. <strong>

The <strong> tag is used for semantically important text.

<p><strong>This is important bold text</strong></p>

5. <em>

The <em> tag is used to emphasize text.

<p><em>This is emphasized italic text</em></p>

5. <sub>

The <sub> tag is used for subscript text. 

<p>H<sub>2</sub>O</p>

6. <sup>

The <sup> tag creates superscript text.

<p>x<sup>2</sup> (x squared)</p>

7. <strike>

The <strike> tag shows text with a strikethrough effect.

<p><strike>This is strikethrough text</strike></p>

8. <mark>

The <mark> tag highlights or marks text.

<p><mark>This text is highlighted</mark></p>

Listing Tags

HTML provides two tags for listing <ul> and <ol>. The <ul> tag displays an unordered listing (shows bullets), and the <ol> tag displays an ordered listing (shows numbers).

Unordered Listing

The <ul> tag defines an unordered listing, which shows bullets with list items.

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

Ordered Listing

The <ol> tag defines an ordered listing, which shows numbers with list items.

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

Link (Anchor) Tag

To link different internal or external webpages with text, images, or any other HTML elements, use the <a> tag. The <a> tag defines an anchor link.

Attributes of the <a> tag are:

  • href: It is used to define the target page's link.
  • title: It is used to place the text that you want to see on the mouse over the link.
  • target: It is used to define where you want to open the link (in the same tab, or in the new tab).
<p>Open TutorialsPoint by clicking on the following link:</p>
<p><a href="https://www.tutorialspoint.com/" target="_blank" title="Open TutorialsPoint">Open TutorialsPoint</a></p>

Container Tags

HTML container tags are used as the parent element to contain the other HTML tags. These tags are used to define multiple sections on the webpage.

There are many container tags, such as <div>, <span>, <p>, etc.

<div> Tag

The <div> tag defines the division (or blocks) on the webpage.

<div>
  <p>Paragraph inside div</p>
  <ul>
    <li>Item 1</li>
    <li>Item 1</li>
 </ul>
</div>

<span> Tag

The <span> tag may contain various elements in it. Whenever you want to apply specific styles to a part of the text, you can use it.

<p>Hello, World: This is <span style="background-color:#f40;color:#fff;padding:8px;">HTML Cheatsheet</span>.</p>

<p> Tag

The <p> tag can also be used as a container tag, where you can use other tags such as <span>, <a>, <button>, etc.

<p>Take a variable <span class="tp-codespan">x</span> and assign <strong>100</strong> in it.</p>

<pre> Tag

The <pre> tag is used for preserving formatting and can also be used to display programming code on the webpage.

<pre>
Hello World
    Hello World
        Hello World
            Hello World
        Hello World
    Hello World
Hello World    
</pre>

<code> Tag

The <code> tag is used to display source codes.

<code>#include <stdio.h></code>

Images

The <img> tag inserts an image on the webpage. The following are the attributes of the <img> tag:

  • src: It defines the source (path) of the image.
  • alt: It defines an alternative text to be displayed on the webpage when an image is not found.
  • title: It defines the title that shows on the mouse over on the image.

Read More: HTML Images

<img src="/html/images/html-mini-logo.jpg" alt="logo" title="logo"/>

Tables

The HTML <table> tag is used to display data in a tabular format. The following tags are used with the <table> tag:

  • <thead>: It defines table head.
  • <tbody>: It defines the table body.
  • <tr>: It defines a row in the table.
  • <th>: It defines a table cell (known as a table head) inside a <tr> tag.
  • <td>: It defines a table cell (known as table data) inside a <tr> tag.
  • <caption>: It defines the table's caption.

Table Structure

The table structure is as follows:

<table>
    <caption>Table Structure</caption>
    <thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  </tbody>
</table>

Table Tag Attributes

The following are the common attributes that can be used with the <table> tag.

Note: These attributes are deprecated in HTML5.

Attribute Description Example Status
border It defines the thickness of the table border. <table border="1"> Deprecated
cellpadding It defines the padding inside a table cell. <table cellpadding="10"> Deprecated
cellspacing It defines the space between table cells. <table cellspacing="5"> Deprecated
width It defines the width of the table. <table width="100%"> Deprecated
height It defines the height of the table. <table height="300"> Deprecated
align It defines the alignment of the table. <table align="center"> Deprecated
bgcolor It defines the background color of the table. <table bgcolor="#f0f0f0"> Deprecated
summary It provides a summary of the table's purpose. <table summary="Sales data for Q1"> Deprecated
bordercolor It defines the color of the table border. <table border="1" bordercolor="blue"> Deprecated

Quotation and Citation Elements

The following are the quotation and citation tags:

1. <blockquote> and <cite> Tags

The <blockquote> defines the quoted text, and <cite> defines the title of the work.

<blockquote>
Education is the most powerful weapon which you can use to change the world.
</blockquote>

<p><cite>Programming in ANSI C</cite> was written by E. Balagurusamy.</p>

2. <q> Tag

The <q> tag is used to define a short quotation.

<p>Here is: <q>Live as if you were to die tomorrow</q></p>

3.<abbr> Tag

The <abbr> tag is used to define an abbreviation or an acronym.

<p>The <abbr title="HyperText Markup Language">HTML</abbr> was founded in 1993.</p>

4. <address> Tag

The <address> tag is used to define the contact information.

<address>
Written by SUDHIR SHARMA.<br>
Visit us at:<br>
tutorialspoint.com<br>
Madhapur, Hyderabad<br>
India
</address>

5. <bdo> Tag

The <bdo> tag is used to override the current text direction

<bdo dir="rtl">HTML stands for Hyper Text Markup Language</bdo>

Comments

Place the comment in an HTML document by using <!-- and -->.

<!--This is comment-->

Entities

1. Character Entities

HTML character entities can be used with the & (ampersand) sign.

<p>This is RIGHT ARROW: →</p>
<p>This is LEFT ARROW: ←</p>
<p>This is BLACK SUN WITH RAYS: ☀</p>
<p>This WHITE UP POINTING INDEX: ☝</p>

2. Non-breaking Space

Use the &nbsp; entity to display non-breaking space.

<p>ABC        XYZ</p>

3. Less Than and Greater Than

To display less than and greater than characters, you can use the &lt; and &gt; respectively.

<p>The <BODY> tag defines body of the webpage.</p>

HTML Quick Reference

Find the quick reference of different HTML tags, elements, attributes, etc.:

   

Basic Tags

The following are the basic and required tags for an HTML document:

Tags Description Examples
<html>..</html> This tag serves as the root element of an HTML document, encapsulating all other elements within it.
<head>..</head> The 'head' tag include meta-information about the document that isn't directly displayed on the page.
<body>..</body> Sets off the visible portion of the document.
<title>..</title> Puts the name of the document in the title bar, when bookmarking pages, this is what is bookmarked and render on the browser's tab.

Body Attributes

The body section is the main part of any website, as we all know. There are a few attributes that can be applied to the <body> tag. It is highly recommended that these attributes not be used to develop an actual website but only be used in email newsletters.

Attributes Description Examples
<body bgcolor=""> HTML bgcolor set background color of the document, using color name or hex value.
<body text=""> HTML text attribute is used to define color of text inside the body, default value is black.
<body link=""> Used to set color of hyperlinks inside body, using color name or hex value.
<body vlink=""> Used to specify color of visited hyperlinks, using color name or hex value.
<body alink=""> Define color of active links (while mouse-clicking).

Text Tags

The following are the different text tags to make the text look beautiful and readable:

Tags & Attributes Description Examples
<pre>..</pre> HTML pre tag used to create preformatted text.
<h1>..</h1> to <h6>..</h6> Creates headlines of variable size -- H1=largest, H6=smallest
<b>..</b> The b tag is used create bold text (should use <strong> instead).
<i>..</i> Creates italic text (should use <em> instead).
<tt>..</tt> Used to create typewriter-style text.
<code>..</code> Used to define source code, usually monospace.
<cite>..</cite> Creates a citation, usually processed in italics.
<address>..</address> Creates address section, usually processed in italics.
<em>..</em> Emphasizes a word (usually processed in italics).
<strong>..</strong> Emphasizes a word (usually processed in bold)
<font size="">..</font> Sets size of font - 1 to 7 (Recommended to use CSS instead).
<font color="">..</font> Used to define color of font (should use CSS instead).
<font face="">..</font> Defines the font used (should use CSS instead).

HTML links, also known as hyperlinks, are a fundamental feature of the World Wide Web. They allow users to navigate between different web pages, websites, or different sections of the same document.

Attributes Description Examples
<a href="URL">clickable text</a> Creates a hyperlink to a Uniform Resource Locator.
<a href="mailto:email_address">clickable text</a> Creates a hyperlink to a specified email address.
<a name="NAME"> Creates a target location within a document
<a href="#NAME">clickable text</a> Creates a link to that target location.

Text and Layout

Text and Layoutin HTML involves using a variety of tags to define the structure, appearance, and semantic meaning of the text. Here are some of the most commonly used HTML tags for text formatting.

Tags Description Examples
<p>..</p> The P tag is used to define a new paragraph in a document
<br> The br tag is used to insert a line break (carriage return) between two lines.
<blockquote>..</blockquote> Puts content in a quote - indents text from both sides.
<div>..</div> The div tag is used to format block content with CSS.
<span>..</span> The span tag is used to format inline content and block content with CSS.

Lists

In HTML, lists are used to group a set of related items. There are three main types of lists: ordered lists, unordered lists, and description lists. Each serves a different purpose and is marked up with specific HTML tags.

Tags Description Examples
<ul>..</ul> The ul tag in HTML is used for creating an unordered list, i.e, list without numbering.
<ol start="">..</ol> The ol tag is used to create an ordered list (start=xx, where xx is a counting number).
<li>..</li> The li tag defines each item in the list for both unordered list and ordered list.
<dl>..</dl> The dl tag is used to create a definition list, a heading with its definition.
<dt> The dt tag defines heading element of the definition list.
<dd> The dd tag defines definition element of the definition list.

Horizontal Rule and Image Attributes

The following are the attributes for customizing horizontal rules, such as size, width, and for images, including source, alignment, border, dimensions, etc.:

Attributes Description Examples
<hr> Hr tag is used to insert a horizontal rule in document.
<hr size=""> Sets size (height) of a horizontal rule.
<hr width=""> Defines width of rule (as a % or absolute pixel length).
<hr noshade> Creates a horizontal rule without a shadow (This attribute is deprecated in HTML5).
<img src="URL" /> Adds image, it is a separate file located at the URL.
<img src="URL" align=""> Aligns image left/right/center/bottom/top/middle (use CSS).
<img src="URL" border=""> Sets the size of the border surrounding the image (use CSS).
<img src="URL" height=""> Sets the height of the image, in pixels or percentage of screen width.
<img src="URL" width=""> Defines width of image, in pixels or percentage of screen width.
<img src="URL" alt=""> Sets the alternate text for browsers that can't process images (required by the ADA).

Forms

HTML forms are one of the most important components of web development. The following table contains the common tags and attributes related to designing forms in HTML:

Tags & Attributes Description Examples
<form>..</form> The form tag in HTML is used to define user submittable application form.
<select multiple name="" size=""> </select> Creates a scrollable selection menu. The Size sets the number of menu items visible before user needs to scroll.
<select name=""> </select> Creates a dropdown menu with default size as 0.
<option> Option tag is used to define each item in dropdown list.
<textarea name="" cols="x" rows="y"></textarea> Creates a text box area. Columns set the width, rows set the height.
<input type="checkbox" name="" value=""> The input type with checkbox is used to create a checkbox, which allows users to select one or more options from a set.
<input type="checkbox" name="" value="" checked> Creates a checkbox which is pre-checked for certain values.
<input type="radio" name="" value=""> The input type with radio attribute is used to create radio buttons in HTML.
<input type="radio" name="" value="" checked> Creates a radio button which is pre-checked.
<input type="text" name="" size=""> Defines a one-line text area. Size sets length, in characters.
<input type="submit" value=""> Used to add a submit button at the end of form. Value sets the text in the submit button.
<input type="image" name="" src="" border="" alt=""> Creates a submit button using an image. It helps to hide a button in an image.
<input type="reset"> A reset button is used within a form to clear all user inputs and reset the form fields to their default values.

Tables

Tables are used to render the data in a structured form. Use tables for data layout and CSS for page layout.

Tags Description Examples
<table>..</table> Tables in HTML are used to organize and display data in a tabular format, consisting of rows and columns.
<tr>..</tr> The tr tag inside table tag is used to define each row in a table.
<td>..</td> The td tag inside tr tag is used to define each cell in a row.
<th>..</th> Sets off the table header (a normal cell with bold, centered text).

Table Attributes

Sometimes a normal table is not enough to represent the data we want to render. So, some attributes are required to be used on table elements so that the table looks good. Use these attributes for email newsletters, and to decorate a table, use CSS for better results.

Attributes Description Examples
<table border=""> Sets the width of the border around table cells.
<table cellspacing=""> Defines amount of space between table cells.
<table cellpadding=""> Sets amount of space between a cell's border and its contents.
<table width=""> Specify width of the table in pixels or as a percentage.
<tr align=""> Sets alignment for cells within the row (left/center/right).
<td align=""> Sets alignment for cells (left/center/right).
<tr valign=""> Defines vertical alignment for cells within the row (top/middle/bottom).
<td valign=""> Sets vertical alignment for cell (top/middle/bottom).
<td rowspan=""> Defines number of rows a cell should span (default=1).
<td colspan=""> Sets number of columns a cell should span.
<td nowrap> Prevents lines within a cell from being broken to fit.

HTML5 Input Tag Attributes

These attributes are newly included after the release of HTML5, and the input tag plays an important role. Not all browsers support these attributes. So, it is better to verify before using.

Attributes Description Examples
<input type="email" name=""> The input type email is used to accept text which are in the format of email address.
<input type="url" name=""> The input type with value url is used to specifically accept URLs.
<input type="number" name=""> The input type number is used to accept single-line number.
<input type="range" name=""> Defines single-line text box for a range of numbers.
<input type="date/month/week/time" name=""> Generates single-line text box with a calendar showing the date/month/week/time.
<input type="search" name=""> Sets a single-line text box for searching.
<input type="color" name=""> Defines single-line text box for choosing a color.

Print Page
Previous
Next
Advertisements