HTML cheat sheet for beginners. A simple, quick reference list of basic HTML tags, codes, and attributes.

HTML Page Structure

<!DOCTYPE html>
<html lang="en">
      <meta charset="utf-8">
      <title>HTML Page Structure</title>
      <meta name="description" content="HTML Page Structure">
      <link rel="stylesheet" type="text/css" href="stylesheet.css">
      <script src="script.js"></script>
         <div id="logo">HTML Page Structure</div>
               <li><a href="/">Home</a>
               <li><a href="/about.html">About Us</a>
      <main role="main">
            <h2>Main Heading</h2>
         A group of related content
         <p>All Rights Reserved &copy; 2021</p>
      <script src="ajax.js"></script>


HTML tags are like keywords that define that how web browsers will format and display the content. HTML tags contain three main parts: an opening tag, content, and closing tag. But some HTML tags are unclosed tags.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Div Section

<div>Division or Block element</div>


<p>This is a paragraph </p>


<img src="/image.jpg" alt="img description" height="220" width="320" />


<a href="">Visit!</a>

Mailto link

<a href="mailto:t[email protected]?Subject=Hi%20mate" target="_top">Send Mail</a>

Inner anchor (jump on page)

<a href="#footer">Jump to footnote</a>
<br />
<a name="footer"></a>Footnote content

Bold text

<strong>Bold text</strong>

Italic text

<em>Italic text</em>

Underlined text

<span style="text-decoration: underline;">Underlined text</span>


<iframe src="linkiframe.html" width="320" height="220"></iframe> 


<abbr title="Hypertext Markup Language">HTML</abbr>


This is HTML Comment 

Horizontal Line

<hr />

Line break

<br />


<q>Success is a journey not a destination.</q>
<blockquote cite="">
If you can dream it,you can achive it.


<video width="200" height="150" controls>
<source src="vid.mp4" type="video/mp4">
<source src="vid.ogg" type="video/ogg">
No video support.


<audio controls>
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
No audio support.

Meta Tags

Meta tags are pieces of information you use to tell the search engines and those viewing your site more about your page and the information it contains.

Essential Meta Tags

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<title>Website Title</title>
<meta name="description" content="Here you can write description" />
<meta name="keywords" content="html,cheatsheet" />
<link rel="canonical" href="" />

Open Graph Meta Tags for Facebook

<meta property="og:title" content="Website title for facebook" />
<meta property="og:description" content="Website description for facebook" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />

Optional Open Graph Meta Tags for Facebook

<meta property="og:site_name" content="Website name" />
<meta property="og:audio" content="" />
<meta property="og:description" content="A brief description" />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:video" content="" />

Open Graph Meta Tags for Twitter

<meta name="twitter:title" content="Website title for twitter" />
<meta name="twitter:description" content="Website description for twitter" />
<meta name="twitter:creator" content="@TwitterUserName" />
<meta name="twitter:image" content="" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@TwitterUserName" />
<meta name="twitter:domain" content="" />

Semantic Elements

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

section tag: It defines a section in the document

<section>This is a section</section>

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> Sidebar </aside>



         <caption>Student Information</caption>
               <td>[email protected]</td>
               <td>[email protected]</td>


Unordered list


Definition list

<dd>Hypertext Markup Language</dd>
<dd>Cascading Style Sheets </dd>


<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" />


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 (©)




Less than (<)


Greater than (>)


Ampersand (&)


Dollar ($)



Robots.txt is a text file webmasters create to instruct web robots (typically search engine robots) how to crawl pages on their website. The robots.txt file is part of the robots exclusion protocol (REP), a group of web standards that regulate how robots crawl the web, access and index content, and serve that content up to users.

Basic format:

User-agent: [user-agent name]Disallow: [URL string not to be crawled]


Blocking all web crawlers from all content

User-agent: *
Disallow: /

Thank You: ♥