diff --git a/README.md b/README.md
index 318200b..25ef859 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.
 
@@ -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)
@@ -107,6 +111,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>
     <td align="center">
       <a href="https://learnk8s.io/" target="_blank"><img src="https://pbs.twimg.com/profile_images/925127335573114880/9yCkEIe3_400x400.jpg" height="64" /></a>
     </td>
diff --git a/frontend/html5.html b/frontend/html5.html
new file mode 100644
index 0000000..24fd039
--- /dev/null
+++ b/frontend/html5.html
@@ -0,0 +1,191 @@
+<!-- * *******************************************************************************************
+ * 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 - ™
