From 07ddc8414a9817046163d71b0e4aeec66a3f2bfd Mon Sep 17 00:00:00 2001
From: Rajat Patel <rajat.patel2113@gmail.com>
Date: Wed, 28 Feb 2018 11:14:10 +0530
Subject: [PATCH 1/5] ADD New HTML5 Cheatsheet

---
 languages/index.html | 160 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 languages/index.html
diff --git a/languages/index.html b/languages/index.html
new file mode 100644
index 0000000..0d58bd7
--- /dev/null
+++ b/languages/index.html
@@ -0,0 +1,160 @@
+<!-- * *******************************************************************************************
+ * HTML5 Cheat sheet by Hackr.io
+ * Source: https://websitesetup.org/wp-content/uploads/2014/02/HTML-CHEAT-SHEET-768x8555.png
+ * ******************************************************************************************* * -->
+
+<!-- Document Summary -->
+<html></html>                                     <!-- Indicates that the page is written in html -->
+<head></head>                                     <!-- Contains Information specific to the page like title, styles and scripts -->
+<title></title>                                   <!-- Title for the page that shows up in the browser title bar -->
+<body></body>                                     <!-- Content that the user will see  -->
+
+<!-- Document Information -->
+<base/>                                           <!-- Usefull for specifying relative links in a document -->
+<style></style>                                   <!-- Contains styles for the html document  -->
+<meta/>                                           <!-- Contains additional information about the page, author, page description and other hidden page info  -->
+<script></script>                                 <!-- Contains all scripts internal or external  -->
+<link/>                                           <!-- Used to create relationships with external pages and stylesheets -->
+
+<!-- Document Structure -->
+<h1></h1> ... <h6></h6>                           <!-- All six levels of heading with 1 being the most promiment and 6 being the least prominent  -->
+<p></p>                                           <!-- Used to organize paragraph text  -->
+<div></div>                                       <!-- A generic ontainerused to denote a page section  -->
+<span></span>                                     <!-- Inline section or block container used for creating inline style elements  -->
+<br/>                                             <!-- Creates a line-break  -->
+<hr>                                              <!-- Creates a sectional break into HTML  -->
+
+
+<!-- Text Formatting -->
+<strong></strong> and <b></b>                     <!-- Makes text contained in the tag as bold -->
+<em></em> and <i></i>                             <!-- Alternative way to make the text contained in the tag as bold -->
+<strike></strike>                                 <!-- creates a strike through the text element -->
+<pre></pre>                                       <!-- Preformatted monospace text block with some spacing intact -->
+<blockquote></blockquote>                         <!-- Contains long paragraphs of quotations often cited -->
+<abbr></abbr>                                     <!-- Contains abbreviations while also making the full form avaialable  -->
+<address></address>                               <!-- Used to display contact information -->
+<code></code>                                     <!-- Used to display inline code snippets -->
+
+<!-- Links Formatting -->
+<a href="url"></a>                                <!-- Used to link to external or internal pages of a wbesite -->
+<a href="mailto:email@example.com"></a>           <!-- Used to link to an email address -->
+<a href="name"></a>                               <!-- Used to link to a document element -->
+<a href="#name"></a>                              <!-- Used to link to specific div element -->
+<a href="tel://####-####-##"></a>                 <!-- Used to display phone numbers and make them as clickable -->
+
+
+<!-- Image Formatting --> 
+<img src="url" alt="text">                        <!-- Used to display images in a webpage wehre src="url" contains the link to the image source and alt="" contains an alternative text to display wehn the image is not displayed -->
+
+<!-- List Formatting -->
+<ol></ol>                                         <!-- Used to create ordered lists with numbers in the items -->
+<ul></ul>                                         <!-- Used to display unordered lists with numbers in the items -->
+<li></li>                                         <!-- Contains list items inside ordered and unordered lists -->
+<dl></dl>                                         <!-- Contains list item definitions -->
+<dt></dt>                                         <!-- definition of single term inline with body content -->
+<dd></dd>                                         <!-- The descrpition of the defined term -->
+
+<!-- Forms Formatting and Attributes -->
+<form action="url"></form>                        <!-- Form element creates a form and action="" specifies where the data is to be sent to when the visitor submits the form -->
+<!-- Supported attributes -->
+method="somefunction()"                           <!-- Contains the type of request (GET, POST... etc)  which dictates how to send the data of the form -->
+enctype=""                                        <!-- Dictates how the data is to be encrypted when the data is sent to the web server-->
+autocomplete=""                                   <!-- Specifies if the autocomplete functionality is enabled or not -->
+novalidate                                        <!-- Dictates if the form will be validated or not -->
+accept-charset=""                                 <!-- Identifies the character encoding upon form submission -->
+target=""                                         <!-- Tell where to display the information upon form submission. POssible values: '_blank', '_self', '_parent', '_top' -->
+                            
+<fieldset disabled="disabled"></fieldset>         <!-- Identifies the group of all fields in the form -->
+<label for=""></label>                            <!-- A simple field label telling the user what to type in the field -->
+<legend></legend>                                 <!-- The form legend acts as a caption for the fieldset element -->
+
+<input type="text/email/number/color/date">       <!-- Input is the input field where the user can input various types of data -->
+<!-- Supported attributes -->
+name=""                                           <!-- Describes the name of the form -->
+width=""                                          <!-- Specifies the width of an input field -->
+value=""                                          <!-- Describes the value of the input information field -->
+size=""                                           <!-- Specifies the input element width in characters -->
+maxlength=""                                      <!-- Specifies the maximum input character numbers -->
+required=""                                       <!-- Specifies if the input field is required to fill in before submitting the form -->
+step=""                                           <!-- Identifies the legal number intervals of the input field -->
+
+<textarea name="" id="" cols="30" rows="10">      <!-- Specifies a large input text field for longer messages -->
+</textarea>
+
+<select name=""></select>                         <!-- Describes a dropdown box for users to select from variety of ochoices-->
+<!-- Supported attributes -->
+name=""                                           <!-- The name for a dropdown combination box -->
+size=""                                           <!-- Specifies the number of available options  -->
+mupltiple                                         <!-- Allows for multiple option selections -->
+required                                          <!-- Requires that a value is selected before submitting the form -->
+autofocus                                         <!--  Specifies that the dropdown automatically comes to focus once the page loads -->
+<optgroup></optgroup>                             <!-- Specifies the entire grouping of available options -->
+<option value=""></option>                        <!-- Defines one of the avaialble option from the dorpdown list-->
+<button></button>                                 <!-- A clickable button to submit the form -->
+
+<!-- Tables Formatting -->
+<table></table>                                   <!-- Defines and contains all table related content -->
+<caption></caption>                               <!-- A description of what table is and what it contains -->
+<thead></thead>                                   <!-- The table headers contain the type of information defined in each column underneath -->
+<tbody></tbody>                                   <!-- Contains the tables data or information -->
+<tfoot></tfoot>                                   <!-- Defines table footer -->
+<tr></tr>                                         <!-- Contains the information to be included in a table row -->
+<th></th>                                         <!-- Contains the information to be included in a single table header -->
+<td></td>                                         <!-- Contains actual information in a table cell -->
+<colgroup></colgroup>                             <!-- Groups a single or multiple columns for formatting purposes -->
+<col>                                             <!-- Defines a single column of information inside a table -->
+
+<!-- Objects and iFrames -->
+<object data=""></object>                         <!-- Describes and embed file type including audio, video, PDf's, images -->   
+<!-- Supported attributes -->
+type=""                                           <!-- Describes the type of media embedded -->
+height=""                                         <!-- Describes the height  of the object in pixels -->
+width=""                                          <!-- Describes the width of the object in pixels -->
+usemap=""                                         <!-- This is the name of the client-side image map in the object -->
+
+<iframe src="" frameborder="0"></iframe>          <!-- Contains an inline frame that allows to embed external information -->                    
+<embed src="" type="">                            <!-- Acts as a container for external application or plug-in -->
+scr=""                                            <!-- The source of the external file you're embedding -->
+width=""                                          <!-- Describes the width of the iframe in pixels -->
+
+<!-- HTML5 New Tags -->
+<header></header>                                 <!-- Defines the header block for a document or a section -->
+<footer></footer>                                 <!-- Defines the footer block for a document or a section -->
+<main></main>                                     <!-- Describes the main content of a document--> 
+<article></article>                               <!-- Identifies an article inside a document -->
+<aside></aside>                                   <!-- Specifies content contained in a document sidebar -->
+<section></section>                               <!-- Defines a section of a document -->
+<details></details>                               <!-- Describes additonal information that user can view or hide -->
+<dialog></dialog>                                 <!-- A dialog box or a window -->
+<figure></figure>                                 <!-- An independent content block featuring images, diagrams or illustrations -->
+<figcaption></figcaption>                         <!-- Caption that describe a figure -->
+<mark></mark>                                     <!-- Displays a portion of highlighted text with in a page content -->
+<nav></nav>                                       <!-- Navigation links for the user in a document -->
+<menuitem></menuitem>                             <!-- The specific menu item that a usrr can raise from a pop up menu -->
+<meter></meter>                                   <!-- Describes the scalar measurement with in a known array -->
+<progress></progress>                             <!-- Displays the progress of a task usually a progress bar -->
+<rp></rp>                                         <!-- Describes text within the browsers that do not support ruby notations -->
+<rt></rt>                                         <!-- Displays east asian typography character details -->
+<ruby></ruby>                                     <!-- Describes annotations for east asian typography -->
+<summary></summary>                               <!-- Contains a visible heading for details element -->
+<bdi></bdi>                                       <!-- Helps you format parts of text in a different direction than other text -->
+<time></time>                                     <!-- Identifies the time and date -->
+<wbr>                                             <!-- A line break within the content -->
+
+<!-- Collective CHaracter Obejcts -->
+&#34; &quot; Quotation Marks - "
+&#38; &amp; Ampersand - &
+&#60; &lt; Less than sign - <
+&#62; &gt; Greater than sign - >
+&#160; &nbsp; Non-breaking space 
+&#169; &copy; Copyright Symbol - ©
+&#64; &Uuml; @ symbol - @
+&#149; &ouml; Small bullet - .
+&#153; &ucirc; Trademark Symbol - ™
+
+
+
+
+
+
+

From 41afb9ce314626044805f807a7a25a56adb6a181 Mon Sep 17 00:00:00 2001
From: Rajat Patel <rajat.patel2113@gmail.com>
Date: Wed, 28 Feb 2018 11:28:43 +0530
Subject: [PATCH 2/5] ADD HTML5 cheatsheet by Hackr.io

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index ec2a970..279a960 100644
--- a/README.md
+++ b/README.md
@@ -106,6 +106,9 @@ You are more than welcome to contribute and build your own cheatsheet for your f
     <td align="center">
       <a href="https://crisp.chat/" target="_blank"><img src="https://pbs.twimg.com/profile_images/651629444944273408/r5Kd_ifq_400x400.png" height="64" /></a>
     </td>
+    <td align="center">
+      <a href="https://hackr.io/" target="_blank"><img src="https://d1eq8vvyuam4eq.cloudfront.net/assets/images/code-images/code-apple-touch-icon-precomposed.png" height="64" /></a>
+    </td>
   </tr>
 </table>
 

From 54f4bb9e1f788a4b9783e59125d07d094f7fb983 Mon Sep 17 00:00:00 2001
From: Julien Le Coupanec <julien.le.coupanec@gmail.com>
Date: Wed, 28 Feb 2018 10:47:10 -0800
Subject: [PATCH 3/5] HTML: improve formatting

---
 languages/{index.html => html.html} | 47 ++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 8 deletions(-)
 rename languages/{index.html => html.html} (99%)

diff --git a/languages/index.html b/languages/html.html
similarity index 99%
rename from languages/index.html
rename to languages/html.html
index 0d58bd7..24fd039 100644
--- a/languages/index.html
+++ b/languages/html.html
@@ -3,20 +3,29 @@
  * Source: https://websitesetup.org/wp-content/uploads/2014/02/HTML-CHEAT-SHEET-768x8555.png
  * ******************************************************************************************* * -->
 
+
 <!-- Document Summary -->
+
+
 <html></html>                                     <!-- Indicates that the page is written in html -->
 <head></head>                                     <!-- Contains Information specific to the page like title, styles and scripts -->
 <title></title>                                   <!-- Title for the page that shows up in the browser title bar -->
 <body></body>                                     <!-- Content that the user will see  -->
 
+
 <!-- Document Information -->
+
+
 <base/>                                           <!-- Usefull for specifying relative links in a document -->
 <style></style>                                   <!-- Contains styles for the html document  -->
 <meta/>                                           <!-- Contains additional information about the page, author, page description and other hidden page info  -->
 <script></script>                                 <!-- Contains all scripts internal or external  -->
 <link/>                                           <!-- Used to create relationships with external pages and stylesheets -->
 
+
 <!-- Document Structure -->
+
+
 <h1></h1> ... <h6></h6>                           <!-- All six levels of heading with 1 being the most promiment and 6 being the least prominent  -->
 <p></p>                                           <!-- Used to organize paragraph text  -->
 <div></div>                                       <!-- A generic ontainerused to denote a page section  -->
@@ -26,6 +35,8 @@
 
 
 <!-- Text Formatting -->
+
+
 <strong></strong> and <b></b>                     <!-- Makes text contained in the tag as bold -->
 <em></em> and <i></i>                             <!-- Alternative way to make the text contained in the tag as bold -->
 <strike></strike>                                 <!-- creates a strike through the text element -->
@@ -35,7 +46,10 @@
 <address></address>                               <!-- Used to display contact information -->
 <code></code>                                     <!-- Used to display inline code snippets -->
 
+
 <!-- Links Formatting -->
+
+
 <a href="url"></a>                                <!-- Used to link to external or internal pages of a wbesite -->
 <a href="mailto:email@example.com"></a>           <!-- Used to link to an email address -->
 <a href="name"></a>                               <!-- Used to link to a document element -->
@@ -43,10 +57,15 @@
 <a href="tel://####-####-##"></a>                 <!-- Used to display phone numbers and make them as clickable -->
 
 
-<!-- Image Formatting --> 
+<!-- Image Formatting -->
+
+
 <img src="url" alt="text">                        <!-- Used to display images in a webpage wehre src="url" contains the link to the image source and alt="" contains an alternative text to display wehn the image is not displayed -->
 
+
 <!-- List Formatting -->
+
+
 <ol></ol>                                         <!-- Used to create ordered lists with numbers in the items -->
 <ul></ul>                                         <!-- Used to display unordered lists with numbers in the items -->
 <li></li>                                         <!-- Contains list items inside ordered and unordered lists -->
@@ -54,8 +73,12 @@
 <dt></dt>                                         <!-- definition of single term inline with body content -->
 <dd></dd>                                         <!-- The descrpition of the defined term -->
 
+
 <!-- Forms Formatting and Attributes -->
+
+
 <form action="url"></form>                        <!-- Form element creates a form and action="" specifies where the data is to be sent to when the visitor submits the form -->
+
 <!-- Supported attributes -->
 method="somefunction()"                           <!-- Contains the type of request (GET, POST... etc)  which dictates how to send the data of the form -->
 enctype=""                                        <!-- Dictates how the data is to be encrypted when the data is sent to the web server-->
@@ -69,6 +92,7 @@ target=""                                         <!-- Tell where to display the
 <legend></legend>                                 <!-- The form legend acts as a caption for the fieldset element -->
 
 <input type="text/email/number/color/date">       <!-- Input is the input field where the user can input various types of data -->
+
 <!-- Supported attributes -->
 name=""                                           <!-- Describes the name of the form -->
 width=""                                          <!-- Specifies the width of an input field -->
@@ -82,6 +106,7 @@ step=""                                           <!-- Identifies the legal numb
 </textarea>
 
 <select name=""></select>                         <!-- Describes a dropdown box for users to select from variety of ochoices-->
+
 <!-- Supported attributes -->
 name=""                                           <!-- The name for a dropdown combination box -->
 size=""                                           <!-- Specifies the number of available options  -->
@@ -92,7 +117,10 @@ autofocus                                         <!--  Specifies that the dropd
 <option value=""></option>                        <!-- Defines one of the avaialble option from the dorpdown list-->
 <button></button>                                 <!-- A clickable button to submit the form -->
 
+
 <!-- Tables Formatting -->
+
+
 <table></table>                                   <!-- Defines and contains all table related content -->
 <caption></caption>                               <!-- A description of what table is and what it contains -->
 <thead></thead>                                   <!-- The table headers contain the type of information defined in each column underneath -->
@@ -104,8 +132,12 @@ autofocus                                         <!--  Specifies that the dropd
 <colgroup></colgroup>                             <!-- Groups a single or multiple columns for formatting purposes -->
 <col>                                             <!-- Defines a single column of information inside a table -->
 
+
 <!-- Objects and iFrames -->
+
+
 <object data=""></object>                         <!-- Describes and embed file type including audio, video, PDf's, images -->   
+
 <!-- Supported attributes -->
 type=""                                           <!-- Describes the type of media embedded -->
 height=""                                         <!-- Describes the height  of the object in pixels -->
@@ -117,7 +149,10 @@ usemap=""                                         <!-- This is the name of the c
 scr=""                                            <!-- The source of the external file you're embedding -->
 width=""                                          <!-- Describes the width of the iframe in pixels -->
 
+
 <!-- HTML5 New Tags -->
+
+
 <header></header>                                 <!-- Defines the header block for a document or a section -->
 <footer></footer>                                 <!-- Defines the footer block for a document or a section -->
 <main></main>                                     <!-- Describes the main content of a document--> 
@@ -141,7 +176,10 @@ width=""                                          <!-- Describes the width of th
 <time></time>                                     <!-- Identifies the time and date -->
 <wbr>                                             <!-- A line break within the content -->
 
+
 <!-- Collective CHaracter Obejcts -->
+
+
 &#34; &quot; Quotation Marks - "
 &#38; &amp; Ampersand - &
 &#60; &lt; Less than sign - <
@@ -151,10 +189,3 @@ width=""                                          <!-- Describes the width of th
 &#64; &Uuml; @ symbol - @
 &#149; &ouml; Small bullet - .
 &#153; &ucirc; Trademark Symbol - ™
-
-
-
-
-
-
-

From 8cc75917df7d0e59a2de9a23871267a44ea15b4f Mon Sep 17 00:00:00 2001
From: Julien Le Coupanec <julien.le.coupanec@gmail.com>
Date: Wed, 28 Feb 2018 10:49:54 -0800
Subject: [PATCH 4/5] README: add HTML5

---
 README.md                                  | 4 ++++
 languages/html.html => frontend/html5.html | 0
 2 files changed, 4 insertions(+)
 rename languages/html.html => frontend/html5.html (100%)

diff --git a/README.md b/README.md
index 279a960..5df3e21 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,10 @@ You are more than welcome to contribute and build your own cheatsheet for your f
 <details>
 <summary>View cheatsheets</summary>
 
+#### Basics
+
+* [HTML5](frontend/html5.html)
+
 #### Frameworks
 
 * [Vue.js](frontend/vue.js)
diff --git a/languages/html.html b/frontend/html5.html
similarity index 100%
rename from languages/html.html
rename to frontend/html5.html

From f5da645f6eeae0f0a98c55a28c1f46f86cb48fbf Mon Sep 17 00:00:00 2001
From: Julien Le Coupanec <julien.le.coupanec@gmail.com>
Date: Wed, 28 Feb 2018 18:11:34 -0800
Subject: [PATCH 5/5] README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5df3e21..8d48f2f 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 ![AWESOME CHEATSHEETS LOGO](_images/awesome_cheatsheets_logo@2x.png)
 
-[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)
+[![Awesome](https://awesome.re/badge.svg)](https://awesome.re) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/LeCoupa/awesome-cheatsheets/blob/master/LICENSE)
 
 > 📚 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
 
