HTML CheatSheet (Latest Updated With New HTML5 Tags)

What is HTML?

HTML stands for Hyper Text Markup Language which is used for creating web pages and web applications.

Let's see what is mean by Hypertext Markup Language.

Hyper Text

  • HyperText  means "Text within Text." 
  • A text has a link in it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. 
  • HyperText is a process to link two or more web pages with each other.

Markup language

  • A markup language is a computer language that is used to apply layout and formatting codes to a text document. 
  • Markup language makes the text more interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page

  • A web page is a document which is usually written in HTML and translated by a web browser.
  • A web page can be identified by opening an URL. 
  • A Web page can be of the static or dynamic type. By HTML only, we can create static web pages.

NOTE: HTML is a markup language which is used for designing beautiful and attractive web pages with the help of styling, and which looks in a nice format on a web browser.

Learn HTML in One Hour

HTML is the foundation of all web pages. Without HTML, you wouldn’t be able to create text or add images or videos to your web pages. 

A Simple HTML Document

<!DOCTYPE html>
<html lang="en">
 <meta charset="utf-8"/>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
 </body>
</html>
*To test copy the above code and past on 

HTML Versions

As the time HTML was invented there is lots of HTML versions in the market, the short introduction about the HTML version is given below:

HTML 1.0
  • The first version of HTML was 1.0, which was the essential elements version of HTML language, and it was released in1991.
HTML 2.0
  • This was the next version which was released in 1995, and it was the official language version for website design. 
  • HTML 2.0 was able to support extra new features such as form-based file upload, form elements such as text box, option button, etc.
HTML 3.2
  • HTML 3.2 version was published by W3C in early 1997. This version was able to create tables and providing support for extra new options for form elements.
  • It can also support a web page with complex mathematical equations. It became an official standard for any browser till January 1997. 
  • Today it is practically supported by most of the browsers.
HTML 4.01
  • HTML 4.01 version was released on December 1999, and it is a very stable version of HTML language. 
  • This version is the current official standard, and it provides added support for Cascading Style Sheets (CSS) and scripting ability for various multimedia elements.
HTML 5
  • HTML5 is the newest version of HyperText Markup language. The first draft of this version was announced in January 2008. 
  • There are two main organizations one is W3C (World Wide Web Consortium), and another one is WHATWG( Web Hypertext Application Technology Working Group) which are involved in the development of HTML 5 version, and still, it is under development.

Infographic For HTML CheatSheet

html cheat sheet

Tags

Div Section
<div>Block element</div>
Headings
<h1>Page title</h1>
<h2>Subheading</h2>
<h3>Tertiary heading</h3>
<h4>Quaternary heading</h4>
Paragraph
<p style="text-align: center;">text</p>
Image
<img src="https://html.com/demo.jpg" alt="description" height="48" width="100" />
Outbound Link Copycrafter.net is the right place to order college paper writing services.
<a href="https://html.com/" target="_blank" rel="nofollow">Click here</a>
Mailto link
<a href="mailto:me@ruwix.com?Subject=Hi%20mate" target="_top">Send Mail</a>
Inner anchor (jump on the 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
<iframe src="link.html" width="200" height="200">
</iframe>
Abbreviation
<abbr title="Hypertext Markup Language">HTML</abbr>
Comment
<!-- HTML Comment -->
Horizontal Line
<hr />
Line break
<br />
Quotation
<q>Success is a journey not a destination.</q>
<blockquote cite="https://html.com/">
The Rubik's Cube is the World’s best selling puzzle toy.
</blockquote> 
Video
<video width="200" height="150" controls>
 <source src="vid.mp4" type="video/mp4">
 <source src="vid.ogg" type="video/ogg">
 No video support.
</video>
Audio
 <audio controls>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
    No audio support.
</audio> 
*To test copy the above code and past on 

Structures

Table
<table><caption>Phone numbers</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th colspan="2">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>577854</td>
            <td>577855</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>577856</td>
            <td>577857</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td> </td>
            <td>Personal</td>
            <td>Office</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="16" /> <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="4">Comment</textarea><br />
    <label><input name="terms" type="checkbox" value="tandc" />Accept terms</label> <br />
    <input type="submit" value="Submit" />
</form>
*To test copy the above code and past on 

Attributes 

Attribute names and attribute values are case-insensitive. The World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

SYNTAX
<tag attributename="value" />

Align attribute
  • left 
  • center
  • right
Core Attributes 
The four core attributes that can be used on the majority of HTML elements
  • id 
  • title
  • class 
  • style 
Internationalization Attributes 
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
  • dir
  1. ltr-Left to right (the default value) 
  2. rtl-Right to left (for languages such as Hebrew or Arabic that are read right to left) 
  • lang 
  • xml:lang 
Generic Attributes 
For Link and Image
  • Link: download, href, hreflang, media, rel, target, type 
  • Image: src, alt, height, ismap, longdesc, src, srcset, usemap, width 

Attribute Example

<!DOCTYPE html> 
<html lang="en-US"> 
   <head> 
      <title>Attribute  Example</title> 
   </head>
 
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   <p id = "demo">This para explains what is HTML</p>
   <p class = "test">This para explains what is HTML</p>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   <p dir="rtl">Right to left (Arabic)</p> 
   <p dir="ltr">Left to right (the default value)</p>
   <a href="https://html.com/" target="_blank" rel="external" hreflang="en" type="text/html">Link</a>
   <img src="https://html.com//demo.jpg" alt="description" height="48" width="100" longdesc="desc.txt" />
   </body> 
</html>
*To test copy the above code and past on 

All Attributes

Html Attribute

Basic HTML Meta Tags

<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright"content="company name">
<meta name="language" content="ES">
<meta name="robots" content="index,follow" />
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">
<meta name="Classification" content="Business">
<meta name="author" content="name, email@hotmail.com">
<meta name="designer" content="">
<meta name="copyright" content="">
<meta name="reply-to" content="email@hotmail.com">
<meta name="owner" content="">
<meta name="url" content="https://www.digitalideaforum.website/">
<meta name="identifier-URL" content="https://www.digitalideaforum.website/">
<meta name="directory" content="submission">
<meta name="category" content="">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

OpenGraph Meta Tags
<meta name="og:title" content="digital idea forum"/>
<meta name="og:type" content="blog"/>
<meta name="og:url" content="https://www.digitalideaforum.website/"/>
<meta name="og:image" content="https://www.digitalideaforum.website/rock.jpg"/>
<meta name="og:site_name" content="digital idea forum"/>
<meta name="og:description" content="Digital idea Forum Provide information about Digital marketing, SEO, SMM, Web Development, WordPress, Affiliate Marketing, Guest Posting."/>

<meta name="fb:page_id" content="439292656776" />

<meta name="og:email" content="me@example.com"/>
<meta name="og:phone_number" content="0650-123-4567"/>
<meta name="og:fax_number" content="+91-415-123-4567"/>

<meta name="og:latitude" content="37.416343"/>
<meta name="og:longitude" content="-122.153013"/>
<meta name="og:street-address" content="1601 asoknagar"/>
<meta name="og:locality" content="Bhuaneswar"/>
<meta name="og:region" content="OR"/>
<meta name="og:postal-code" content="751009"/>
<meta name="og:country-name" content="IN"/>

<meta property="og:type" content="game.achievement"/>
<meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/>

<meta property="og:video" content="https://www.digitalideaforum.website/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="https://www.digitalideaforum.website/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="https://www.digitalideaforum.website/fallback.vid" />
<meta property="og:video:type" content="text/html" />

<meta property="og:audio" content="https://www.digitalideaforum.website/amazing.mp3" />
<meta property="og:audio:title" content="Amazing Song" />
<meta property="og:audio:artist" content="Amazing Band" />
<meta property="og:audio:album" content="Amazing Album" />
<meta property="og:audio:type" content="application/mp3" />

Create Custom Meta Tags Use custom meta tags to store data that you need in javascript, instead of hard-coding that data into your javascript. I store my Google Analytics code in meta tags.
Here are some examples:
<meta name="google-analytics" content="1-AHFKALJ"/>
<meta name="disqus" content="abcdefg"/>
<meta name="uservoice" content="asdfasdf"/>
<meta name="mixpanel" content="asdfasdf"/>

Company/Service Meta Tags ClaimID
<meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" />

Apple Meta Tags
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">

Internet Explorer Meta Tags
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />
<meta name="mssmarttagspreventparsing" content="true">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="msapplication-starturl" content="https://www.digitalideaforum.website/about/"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>
<meta name="application-name" content="Rey Bango Front-end Developer"/>
<meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/>
<meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" />
<meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" />
<meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" />
<meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" />
<link rel="shortcut icon" href="/images/favicon.ico" />

TweetMeme Meta Tags
<meta name="tweetmeme-title" content="Retweet Button Explained" />

Blog Catalog Meta Tags
<meta name="blogcatalog" />

Rails Meta Tags
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/>

Color Picker

Select your favorite color: 

HTML5

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.

New HTML5 Elements 

  • New semantic elements like <header>, <footer>, <article>, and <section>.
  • New attributes of form elements like number, date, time, calendar, and range.
  • New graphic elements: <svg> and <canvas>.
  • New multimedia elements: <audio> and <video>.

HTML5 Page Structure

<header>
    <div id="logo">HTML</div>
    <nav>  
        <ul>
            <li><a href="/">Home</a>
            <li><a href="/link">Page</a>
        </ul>
    </nav>
</header>
<main role="main">
    <article>
        <h2>Title 1</h2>
        <p>Content 1</p>
    </article>
    <article>
        <h2>Title 2</h2>
        <p>Content 2</p>
    </article>
</main>
<section>
    A group of related content
</section>
<aside>
    Sidebar
</aside>
<footer>
    <p>© HTML CheatSheet</p>
    <address>
        Contact <a href="mailto:admin@digitalideaforum.com">me</a>
    </address>
</footer>

Some Useful Links



2 comments:

  1. Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates. Simply saying thanks will not simply just be adequate, for the extraordinary clarity in your writing.

    website builder for reseller

    ReplyDelete

Powered by Blogger.