HTML Cheatsheet

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">
   <head>
      <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>
   </head>
   <body>
      <header>
         <div id="logo">HTML Page Structure</div>
         <nav>
            <ul>
               <li><a href="/">Home</a>
               <li><a href="/about.html">About Us</a>
            </ul>
         </nav>
      </header>
      <main role="main">
         <article>
            <h2>Main Heading</h2>
            <p>Content</p>
         </article>
      </main>
      <section>
         A group of related content
      </section>
      <aside>
         Sidebar
      </aside>
      <footer>
         <p>All Rights Reserved &copy; 2021</p>
      </footer>
      <script src="ajax.js"></script>
   </body>
</html>

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="https://www.yourdomain.com" />

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="https://www.yourdomain.com/image.jpg" />
<meta property="og:url" content="https://www.yourdomain.com" />

Optional Open Graph Meta Tags for Facebook

<meta property="og:site_name" content="Website name" />
<meta property="og:audio" content="https://yourdomain.com/audio.mp3" />
<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="https://yourdomain.com/video.swf" />

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="https://www.yourdomain.com/image.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@TwitterUserName" />
<meta name="twitter:domain" content="https://www.yourdomain.com" />

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>

Structures

Table

      <table>
         <caption>Student Information</caption>
         <thead>
            <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Email</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Max</td>
               <td>17</td>
               <td>[email protected]</td>
            </tr>
            <tr>
               <td>Jhon</td>
               <td>15</td>
               <td>[email protected]</td>
            </tr>
         </tbody>


         <tfoot>
            <tr>
               <td>&nbsp;</td>
               <td>Personal</td>
               <td>Information</td>
            </tr>
         </tfoot>
      </table>

Unordered list

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

Definition list

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets </dd>
</dl>

Form

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

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

&copy;

Space

&nbsp;

Less than (<)

&lt

Greater than (>)

&gt;

Ampersand (&)

&amp;

Dollar ($)

&dollar;

Robots.txt

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]

Example

Blocking all web crawlers from all content

User-agent: *
Disallow: /
Sitemap: https://yourwebsite.com/sitemap.xml

download HTML Cheatsheet

Thank You: ♥

4 Comments

Larrabee on November 17, 2021

Wow, incredible web-blog structure! How lengthy have you ever been blogging for? you made running a blog look easy. The whole look of your website is fantastic, let alone the content material!

Tracie kauffmann on November 19, 2021

It’s actually a great and useful piece of information. I’m glad
that you simply shared this useful information with us.
Please keep us up to date like this. Thanks for sharing.

Sarmiento on September 19, 2022

I have recently started a web site, the info you offer on this web site has helped me tremendously. Thank you for all of your time & work.

Dothard on December 1, 2022

Sweet site, super style and design, real clean and utilise genial.

Press ESC to close

HTML Page Structure

Tags

Headings

Div Section

Paragraph

Image

Links

Mailto link

Inner anchor (jump on page)

Bold text

Italic text

Underlined text

Iframe

Abbreviation

Comment

Horizontal Line

Line break

Quotation

Video

Audio