HTML Cheat Sheet – A Basic Guide to HTML

Last Updated : 20 Mar, 2024

HTML(HyperText Markup Language) is the most basic building block of all web pages. It provides structure to the content appearing on a website, such as images, text, or videos by creating a basic skeleton. HTML is still very useful today, the reason being no matter the framework or language we use to develop the web page, the output would be rendered in HTML.

This article provides an in-depth HTML Cheat Sheet, a must-have for every web developer.

What is an HTML Cheat Sheet?

An HTML Cheat Sheet is a quick reference guide for web developers. It provides ready-to-use code snippets and necessary HTML tags and attributes. This guide aims to provide you with a comprehensive list of HTML elements that you can use while developing a website.

Table of Content

Main root
Boilerplate
Headings
Container
Document Information
Semantic Element
Text Formatting and Inline Text Semantics
Lists
Tables
Forms
Multimedia
Characters and Symbols
Attributes

Main root

The <html> element represents the root (top-level element) of an HTML document also called the document element. All other elements must be descendants of this element.

<html> … </html>

Boilerplate

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Description of the document -->
    <meta charset="UTF-8" />
    <title>
        <!-- title goes here -->
        Geeks For Geeks
    </title>
</head>

<body>
    <!-- your content goes here -->
    Welcome to Geeks for Geeks
</body>

</html>

Headings

HTML heading tags (<h1> to <h6>) are used to define headings and subheadings on your webpage.

The <h1> tag is typically reserved for the page’s main title, while the others denote subheadings in descending order of importance.

Heading Tags	Description	Syntax
<h1>	Used for title generally once per page and has a font size of 2em.	<h1>….</h1>
<h2>	Used for medium sized titles and has a font size of 1.5em.	<h2>….</h2>
<h3>	Used for subsections and has a font size of 1.17em.	<h3>….</h3>
<h4>	Used for highlighting text with font size of 1em.	<h4>….</h4>
<h5>	Fifth level heading with font size of .83em.	<h5>….</h5>
<h6>	Displays least significant details and has a font size of .67em	<h6>….</h6>

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Heading Tags</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>GeeksforGeeks</h2>
    <h3>GeeksforGeeks</h3>
    <h4>GeeksforGeeks</h4>
    <h5>GeeksforGeeks</h5>
    <h6>GeeksforGeeks</h6>
</body>

</html>

Container

Container tags in HTML are used to group other elements together. They provide a way to structure your HTML and apply styles to multiple elements at once. The several container tags in HTML are:

Tags	Description	Syntax
<div>	Block element that defines a division in HTML document.	<div>… </div>
<span>	Inline element used to mark up a part of a text or document.	<span>…</span>
<p>	Used to represent a paragraph.	<p>…</p>
<pre>	Represents pre-formatted text to present exactly as written in the HTML file.	<pre>…</pre>
<code>	Used to represent source codes	<code>…</code>

HTML

<!DOCTYPE html>
<html>

<head>
    <title> GeeksforGeeks </title>
    <meta name="keywords" content="Meta Tags, Metadata" />
    <meta name="description" content="Geeksforgeeks is a computer science portal." />
    <style type="text/css">
        body {
            background-color: powderblue;
        }
        
        h1 {
            color: black;
            font-family: arial;
        }
    </style>
</head>

<body>
    <p>
        GeeksforGeeks is a
        <!-- span tag starts-->
        <span style="color:red;font-weight:bolder">
            computer science</span> portal for
        <span style="background-color: lightgreen;">
            geeks
        </span>
        <!-- span tag ends -->
        <!-- pre tag starts here -->
    <pre>
        This
        is    a pre tag.
      </pre>
    </p>
    <!-- html pre tag ends here -->
    <!--code Tag starts here -->
    code tag: Displays code snippets.
    <code>
        #include<stdio.h>
            int main() {
            printf("Hello Geeks");
            }
            <!--code Tag ends here -->
    </code>
    <p>
        Click on the following link
        <!-- anchor tag starts -->
        <a href="https://www.geeksforgeeks.org">
            GeeksforGeeks
        </a>
        <!-- anchor tag ends -->
    </p>
</body>

</html>

Document Information

This section encompasses HTML tags that provide a comprehensive summary of the content within the HTML document. These tags offer a snapshot of what the document contains, enhancing the understanding of its structure and content.

Tags	Description	Syntax
<head>	Container for metadata which is data about data.	<head>…</head>
<link>	Used to link external style sheets or documents.	<link>
<meta>	Defines metadata about HTML document.	<meta/>
<title>	Defines the document’s title	<title>…</title>
<style>	Used to define style information (CSS) for a document.	<style>…</style>

HTML

<!DOCTYPE html>
<html>
<!-- head tag starts here -->

<head>
    <!-- title tag -->
    <title>Title goes here </title>

    <!-- link tag  -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- meta tag starts -->
    <meta name="keywords" content="Meta Tags, Metadata" />
    <!-- meta tag ends -->

    <!-- style tag starts here -->
    <style>
        #first {
            font-family: Castellar;
            background-color: green;
            color: white;
        }
        
        .second {
            text-align: center;
            background-color: white;
            font-size: 30px;
            color: red;
        }
    </style>
    <!-- style tag ends here -->
</head>
<!-- head tag ends here -->

<body>
    <p id="first">Hello GeeksforGeeks.</p>
    <p class="second">Welcome Geeks</p>
</body>

</html>

Semantic Element

Semantic Element in HTML are elements that clearly describe their meaning in terms of content and function, both to the browser and the developer.

Tags	Description	Syntax
<header>	Used to give introductory content about the document.	<header>… </header>
<main>	Represents the main dominant content of a document.	<main>… </main>
<section>	Structural HTML element used to group together related elements.	<section>… </section>
<nav>	Represents a section of a page to provide navigation links	<nav>…</nav>
<article>	Represents a self-contained composition which is independently distributable or reusable.	<article>… </article>
<aside>	Defines some content aside from the content it is placed in.	<aside>… </aside>
<footer>	Represents a footer for its sectioning root element	<footer>… </footer>
<address>	Provides contact information for a person, people, or an organization.	<address>..</address>

HTML

<!DOCTYPE html>
<html>

<body>
    <h3>HTML Header Tag</h3>
    <hr>
    <article>
        <!-- header tag starts -->
        <header>
            <h3>GeeksforGeeks Learning</h3>
            <h3> HTML nav Tag</h3>
            <!-- nav tag starts -->
            <nav>
                <a href="#">Home</a> |
                <a href="#">Interview</a> |
                <a href="#">Languages</a> |
                <a href="#">Data Structure</a> |
                <a href="#">Algorithm</a>
            </nav>
            <!-- nav tag ends -->
        </header>
        <!-- header tag ends -->
    </article>
    <!-- main tag starts here -->
    <main>
        <!-- HTML section tag is used here -->
        <section>
            <h1>Geeksforgeek: Section 1</h1>
            <p>Content of section </p>
        </section>
        <!-- HTML section tag ends here -->
        <!-- aside tag starts here -->
        <aside>
            <h1>This is heading text in aside Tag</h1>
            <p>This is paragraph text in aside Tag</p>
        </aside>
        <!-- aside tag ends here -->
    </main>
    <!-- main tag ends here -->
    <!--HTML footer tag starts here-->
    <footer>
        <article>
            <!-- address tag starts from here -->
            <address>
                Organization Name: GeeksforGeeks <br>
                Web Site:
                <a href="https://www.geeksforgeeks.org/about/contact-us/">
                    GeeksforGeeks</a><br>
                visit us:<br>
                GeeksforGeeks<br>
                A-118, Sector 136, Noida, <br>
                Uttar Pradesh (201305)
            </address>
            <!-- address tag ends here -->
        </article>
        <br>
        <a href="https://www.geeksforgeeks.org/about/">
            About Us
        </a>|
        <a href="https://www.geeksforgeeks.org/privacy-policy/">
            Privacy Policy
        </a>|
        <a href="https://www.geeksforgeeks.org/careers/">
            Careers
        </a>
        <p>@geeksforgeeks, Some rights reserved</p>
    </footer>
    <!-- footer tag ends here -->
</body>

</html>

Text Formatting and Inline Text Semantics

Text formatting tags in HTML, are used to format text in different ways, like making text bold, italicized, or monospaced. The HTML inline text semantics is used to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

Tags	Description	Syntax
<em>	Used to put stress on some text or show some degree of emphasis.	<em>…</em>
<strong>	Indicates that the content has strong importance.	<strong>…</strong>
<sub>	Writes the text as subscript.	<sub>…</sub>
<sup>	Writes the text as superscript.	<sup>…</sup>
<abbr>	Represents an abbreviation or acronym.	<abbr>… </abbr>
<mark>	Highlights important text for reference or notation purposes.	<mark>…</mark>
<cite>	Describes the title of a creative work.	<cite>…</cite>
<time>	Used to represent a specific period of time.	<time>…</time>

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Geeks for Geeks </title>
</head>

<body>
    <!-- emphasis -->
    <div><em>Emphasized text</em></div>
    <!-- strong -->
    <div><strong>Important text!</strong></div>
    <!-- subscript -->
    <div>GFG<sub>subscript text</sub></div>
    <!-- superscript -->
    <div>GFG<sup>Superscript text</sup></div>
    <!-- abbreviation -->
    <div><abbr>Abbreviation</abbr></div>
    <!-- mark -->
    <div><mark>Highlighted text</mark></div>
    <!-- cite -->
    <div><cite>Title of creative work</cite></div>
    <!-- time -->
    <div>Time<time>9:00 am</time>
        to <time>7:00 pm</time>
    </div>
</body>

</html>

Lists

List tags in HTML, including <ul>, <ol>, and <li>, are used to create different types of lists. It can be either numerical, alphabetic, bullet, or other symbols. There are three list types in HTML:

Unordered list: Used to group a set of related items in no particular order.
Ordered list: Used to group a set of related items in a specific order.
Description list: Used to display name/value pairs such as terms and definitions.

Tags	Description	Syntax
<ul>	Represents an unordered list of items list.	<ul>…</ul>
<ol>	The HTML <ol> element represents an ordered list of items.	<ol>…</ol>
<li>	Represents an item in a list.	<li>…</li>
<dl>	Represents a description list.	<dl>…</dl>
<dd>	Used to describe a term/name in a description list.	<dd>…</dd>
<dt>	Specifies a term in a description.	<dt>…</dt>

HTML

<!DOCTYPE html>
<html>

<head>
    <title>GeeksforGeeks</title>
</head>

<body>
    <h2>Welcome To GeeksforGeeks Learning</h2>
    <h5>Unordered List</h5>
    <!-- Unordered List -->
    <ul>
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
    </ul>
    <h5>Ordered List</h5>
    <!-- Ordered List -->
    <ol>
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
    </ol>
    <h5>Description List</h5>
    <!-- Description List -->
    <dl>
        <dt>Courses:</dt>
        <dd>100 </dd>
        <dt> Quizes:</dt>
        <dd> 500 </dd>
        <dt> Interview Experiences:</dt>
        <dd>1000 </dd>
    </dl>
</body>

</html>

Tables

Table tags in HTML, such as <table>, <tr>, <td>, and <th>, are used to create and structure tables in HTML. They allow you to present data in rows and columns.

Tags	Description	Syntax
<caption>	Specifies caption of a table.	<caption>…</caption>
<table>	Represents data in a two-dimensional table.	<table>…</table>
<thead>	<thead>…</thead>
<tbody>	Used to group primary content of an HTML table.	<tbody>…</tbody>
<th>	Defines a cell as header of a group of cells of the table.	<th>…</th>
<td>	Defines a cell of a table.	<td>…</td>
<tr>	Defines a row in an HTML table.	<tr>…</tr>
<tfoot>	Defines a set of rows summarizing the columns of the table.	<tfoot>…</tfoot>

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML Table</title>
</head>

<body>
    <!-- table starts here -->
    <table>
        <!-- Table Caption -->
        <caption>Geeks For Geeks Learning</caption>
        <!-- Table row starts -->
        <tr>
            <!--Headers -->
            <th>Programming Languages</th>
            <th>Development</th>
        </tr>
        <!-- Table row ends -->
        <tr>
            <!-- Table data -->
            <td>C programming </td>
            <td>Full stack development</td>
        </tr>
        <tr>
            <td>Java programming</td>
            <td>Backend development</td>
        </tr>
        <tr>
            <td>Angular </td>
            <td>Frontend Development</td>
        </tr>
        <!-- Table Footer starts here -->
        <tfoot>
            <tr>
                <td>Footer content</td>
            </tr>
        </tfoot>
        <!-- Table footer ends here -->
    </table>
</body>

</html>

Forms

An HTML form is a section of a document that acts as a container for different types of input elements, such as text fields, passwords, menus, checkboxes, radio buttons, submit buttons, etc.

Generally, Form tags in HTML, like <form>, <input>, <textarea>, and <button>, are used to create forms for user input.

Tags	Description	Syntax
<form>	Represents a section containing controls for submitting information.	<form>…</form>
<input>	Creates interactive controls for forms in order to accept data .	<input>…</input>
<textarea>	Create a multi-line plain-text editing control	<textarea>…</textarea>
<select>	Represents a control that provides a menu of options to select from.	<select>…</select>
<option>	Defines an option in a select list.	<option>…</option>
<optgroup>	Creates a grouping of options within a <select> element.	<optgroup>.</optgroup>
<progress>	Displays an indicator showing the degree of completion of a task.	<progress>…</progress>
<datalist>	Used to give a predefined options for an <input> element and adds an autocomplete feature to it.	<datalist>…</datalist>
<button>	Represents a clickable button.	<button>…</button>
<label>	Specifies a label for an <input> element.	<label>…</label>

HTML

<!DOCTYPE html>
<html lang="en">

<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">
    <title>GfG</title>
</head>

<body>
    <form>
        <fieldset>
            <legend>Personal Details</legend>
            <p>
            <p>select used here:</p>
            <!-- label starts -->
            <label>
                Salutation
                <br />
                <!-- select starts -->
                <select name="salutation">
                    <option>--None--</option>
                    <option>Mr.</option>
                    <option>Ms.</option>
                    <option>Mrs.</option>
                </select>
                <!-- select ends -->
            </label>
            <!-- label ends -->
            </p>
            <p>
                <label>First name: 
                  <input name="firstName" placeholder="input element used here" />
                </label>
            </p>
            <p>
                <label>Last name: <input name="lastName" /></label>
            </p>
            <p>
                Gender :
                <label>
                  <input type="radio" name="gender" value="male" /> Male
                </label>
                <label>
                  <input type="radio" name="gender" value="female" /> Female
                </label>
            </p>
            <label Language preferred: </label>
                <input list="lang" placeholder="datalist used here">
                <!--datalist Tag starts here -->
                <datalist id="lang">
                    <option value="java"></option>
                    <option value="reactjs"></option>
                    <option value="php"></option>
                    <option value="python"></option>
                </datalist>
                <!--datalist Tag ends here -->
                <p>
                    <label>Email:
                       <input type="email" name="email" />
                    </label>
                </p>
                <p>
                    <label>Date of Birth:
                       <input type="date" name="birthDate"/>
                    </label>
                </p>
                <p>
                    <!-- HTML address tag -->
                    <label>
                        Address :
                        <br />
                        <!--Textarea  -->
                        <textarea name="address" 
                                  placeholder="Textarea used here">
                        </textarea>
                    </label>
                </p>
                <p>
                    <button type="submit">Submit</button>
                </p>
                <p>Progress tag used here:</p>
                Downloading progress for your profile:
                <!--HTML progress tag starts here-->
                <progress value="57" max="100" placeholder="progress tag used here">
                </progress>
                <!--HTML progress tag ends here-->
        </fieldset>
    </form>
</body>

</html>

Multimedia

Multimedia tags in HTML, such as <img>, <audio>, and <video>, are used to embed multimedia content like images, audio files, and videos into your webpage.

Tags	Description	Syntax
<img>	Used to link images to web pages.	<img />
<audio>	Used to include sound content in documents.	<audio>…</audio>
<video>	Embeds a media player which supports video files in the document.	<video>…</video>
<figure>	Groups various diagrams, images, illustrations, and code snippets into the document.	<figure>…</figure>
<figcaption>	Used to provide the caption of the content.	<figcaption>…</figcaption>
<embed>	Embeds multimedia in a Web page	<embed>…</embed>
<object>	Includes objects, such as images, audios, videos, Portable Document Format (PDF) in a Web page.	<object>…</object>

HTML

<!DOCTYPE html>
<html>

<body style="text-align: center;">
    <p>image here</p>
    <!-- image tag starts here-->
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" 
         width="420" height="100" alt="Geeksforgeeks.org">
    <!-- image tag ends here-->
    <p> Audio Sample</p>
    <!-- audio tag starts here -->
    <audio controls>
        <source src="test.mp3" type="audio/mp3">
        <source src="test.ogg" type="audio/ogg">
    </audio>
    <!-- audio tag ends here -->
    <p> Video sample</p>
    <!-- Video tag starts here -->
    <video width="400" height="350" controls>
        <source src="myvid.mp4" type="video/mp4">
        <source src="myvid.ogg" type="video/ogg">
    </video>
    <!-- Video tag ends here -->
    <p> HTML Figure here</p>
    <!--HTML figure tag starts here-->
    <figure>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png" 
             width="304" height="228" alt="The Pulpit Rock">
        <figcaption>Figure Caption goes here </figcaption>
    </figure>
    <!--HTML figure tag ends here-->
    <p> HTML Object here</p>
    <!--HTML object tag starts here-->
    <object data=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
            width="550px" height="150px">
        GeeksforGeeks
        <!--HTML object tag ends here-->
    </object>
</body>

</html>

Characters and Symbols

Special characters and symbols in HTML, like &amp; for an ampersand or &lt; for a less-than sign, are used to display characters that have special meaning in HTML. Some of the most commonly used ones are:

Symbol	Description	Entity Name	Number Code
©	Copyright	©	©
&	Ampersand	&	&
>	Greater than	>	>
<	Less than	<	<
$	Dollar	&dollar;	$
“	Quotation mark	"	"
‘	Apostrophe	'	'

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Characters and Symbols</title>
</head>

<body>
    <!-- Characters and Symbols are use inside of p element -->
    <p>This is the sign of copyright: © </p>
    <p>This is the sign of trademark: ™ </p>
    <p>This is the sign of ampersand: @ </p>
    <p>This is the sign of dollar : $ </p>
    <p>This is the sign of less than : < </p>
            <p>This is the sign of greater than : > </p>
            <p>This is the sign of quotation mark : " </p>
</body>

</html>

Attributes

Attributes in HTML are used to provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like name="value". The name is the property you want to set and the value is the desired value of the attribute.

Attributes	Description	Syntax
alt	Used in the image tag to specify the alternative text of the image	< tag_name alt =”…” >
href	Used to define a hyperlink.	< tag_name href =”…” >
src	Specifies URL of the image to be used.	< tag_name src =”…” >
width	Specifies the width of the image in pixels.	< tag_name width =”…” >
height	Specifies the height of the image in pixels.	< tag_name height =”…” >
style	Helps to change the look and feel of the document.	< tag_name style =”…” >
id	Unique identifier used to specify an area of a webpage.	< tag_name id =”…” >
class	Specifies one or more class names for an element.	< tag_name class =”…” >
title	Specifies extra information about an element.	< tag_name title =”…” >
Placeholder	Specifies a short hint that describes the expected value of an input field/text area	<tag_name placeholder=” “>

HTML

<!DOCTYPE html>
<html>

<head>
    <title>HTML Attributes</title>
    <style>
        #geeks {
            background-color: green;
            color: white;
        }
        
        .gfg {
            background-color: white;
            font-size: 30px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- source attribute-->
    <div>
        <p>source attribute:</p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
    </div>
    <!--Alternative text: alt attribute -->
    <div><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads../Geek_logi_-low_res.png" 
          alt="Alternative text here">
    </div>
    <br>
    <!-- Link: href attribute-->
    <a href="https://ide.geeksforgeeks.org/">
        Click to open in the same tab
    </a>
    <br>
    <a href="https://ide.geeksforgeeks.org/" target="_blank">
        Click to open in a different tab
    </a>

    <!-- title attribute-->
    <h2 title="GeeksforGeeks: A computer science
    portal for geeks">
        Title attribute: hover to see the effect
    </h2>

    <!-- Width and Height attribute-->
    <p>Using width and height attribute here:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" 
         width="300px" height="100px">

    <!-- id attribute-->
    <h2 id="geeks">
        Styling using id attribute here
    </h2>

    <!-- class attribute -->
    <h2 class="gfg">
        Styling using class attribute here
    </h2>

    <!-- style -->
    <h2 style="font-family:Chaparral Pro Light; ">
        Styling using style attribute here
    </h2>

</body>

</html>

Benefits of Using HTML Cheat Sheet

An HTML Cheat Sheet is a handy tool that makes creating websites faster and easier, helps your site show up in search results, and lets you build web pages that everyone can use and enjoy.

Here are some key benefits of HTML Cheat Sheet:

Efficient Web Development: An HTML Cheat Sheet provides a quick reference guide for web developers, enabling faster and more efficient coding. It helps in reducing the time spent on searching for syntax or tags, thereby increasing productivity.
Comprehensive Tag Reference: The cheat sheet includes an extensive collection of HTML tags and attributes, covering everything from basic structure tags to complex interactive elements. This makes it a valuable resource for both beginners and experienced developers.
Semantic Understanding: With the inclusion of semantic tags in the cheat sheet, developers can create more meaningful and accessible web content. It aids in understanding the structure and content of web pages better.
Interoperability: HTML is the foundational language of the web. An HTML Cheat Sheet can be beneficial when working with other web technologies like CSS, JavaScript, and various web development frameworks.
Optimized for SEO: A well-structured HTML document using the correct tags and attributes can significantly improve SEO. The cheat sheet can guide developers in creating SEO-friendly markup.
Multimedia Integration: The cheat sheet covers tags for embedding multimedia elements like images, audio, and video into web pages, enabling richer and more interactive web content.

Remember, using an HTML Cheat Sheet can greatly enhance your web development process, making it a must-have tool for every web developer.

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

We have a similar cheat sheet to help you with CSS concepts as well. Check it out here CSS Cheat Sheet

Suggest improvement

HTML Cheat Sheet - A Basic Guide to HTML

Share your thoughts in the comments

HTML Cheat Sheet – A Basic Guide to HTML

What is an HTML Cheat Sheet?

Main root

Boilerplate

Headings

Container

Document Information

Semantic Element

Text Formatting and Inline Text Semantics

Lists

Tables

Forms

Multimedia

Characters and Symbols

Attributes

Benefits of Using HTML Cheat Sheet

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?