1. Structure-:

    2. This is the basic template or barebone structure of HTML.


    HTML Boiler Plate: This is Basic BoilerPlate For HTML 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


  2. Headings-:

    3. There are six headings available in HTML, H1 is the largest among all, and H6 is the smallest.


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


  3. Container-:

    4. Container tags are the tags that contain some data such as text, image, etc. There are several container tags in HTML.


    div tag: div tag or division tag is used to make blocks or divisions in the document. 
    <div>This is div block</div>
    span tag: span is a container for inline content 
    <span>This is span block</span>
    pre tag: pre tag represents pre-formatted text 
    <pre>Hello World</pre>
    p tag: Paragraph 
    <p>This is a paragraph</p>
    code tag: code tag is used to represent source codes 
    <code>import python</code>


  4. Text Formatting-:

    5. Text formatting tags are used to format text or data of HTML documents. You can do certain things like creating italic, bold, strong text to make your document look more attractive and understandable.


    <b> tag: 
    <b>I am bold text</b>
    <strong> tag: 
    <strong>I am important text</strong>
    <i> tag: 
    <i>I am italics text</i>
    <em> tag: 
    <em>Emphasized text</em>
    <sub> tag: 
    <sub>Subscript</sub>
    <sup> tag: 
    <sup>Superscript</sup>


  5. Lists-:

    6. Lists can be either numerical, alphabetic, bullet, or other symbols. You can specify list type and list items in HTML for the clean document.


    <ol> tag: Ordered list starts with <ol> tag and each list item starts with <li> tag 
    <ol>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ol>
    <ul> tag: 
    <ul>
<li>Your Data</li>
<li>Your Data</li>
</ul>


  6. Media-:

    7. Media is anything that is present in digital form such as image, video, audio, etc.


    <audio> tag: It is used to embed sound content in the document. 
    <audio controls>
<source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
    <img> tag: It is used to embed or import image in a webpage. 
    <img src="Source_of_image" alt="Alternate text">
    <video> tag: It is used to embed video in the webpage. 
    <video width="480" height="320" controls>
<source src="demo_move.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>


  7. Table-:

    8. A table is a collection of rows and columns. It is used to represent data in tabular form.


    Table Structure 
    <table>
<caption>Demo Table</caption>
<thead>
<tr>
<th>Column1</th>
<th colspan="2">Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data2</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>Data</td>
<td>Data</td>
</tr>
</tfoot>
</table>


  8. Links-:

    9. Links are clickable text that can redirect you to some other page.


    <a> tag: <a> or anchor tag defines a hyperlink. 
    <a href="https://cheet-sheet-akul.web.app/">Visit HTML CheatSheet</a>


  9. Form-:


    10. Sample Form: Form is used to collect user's input, generally user's data is sent to server for further processing. 
    <form action="/action.php" method="post">
Name: <input name="name" type="text" /> <br />
Age: <input max="90" 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>


  10. Characters & Symbols-:

    11. 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;
    Less than: < 
    &lt;
    Greater than: > 
    &gt;
    Ampersand: & 
    &amp;
    Dollar: © 
    &dollar;


  11. Some useful code snippets-:

    12. These are some useful code snippets of HTML which will save your time.


    Load JavaScript Asynchronously: This simple code snippet shows an asynchronous loading of a JavaScript file. This will make the page load much faster as the browser will simultaneously load both the HTML and the JavaScript file. 
    <script src="//cdn-5ce4a003f911c80f50818892.closte.com/script.js" async></script>
    Define Viewport for Responsive Websites: This HTML snippet set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other mobile devices which render websites at full-view and allow users to zoom into the layout by pinching. Note-: The following HTML snippet should be inserted into the head section of your document. 
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
    Get Directions Form (Google Maps): Here is a simple yet powerful code snippet to create a form where the user can enter his location to get directions to a specific place. Very useful for contact pages. 
    <form action="http://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">Enter your location</label>
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
<input type="submit" value="Get directions" />
</form>
    Regexp Pattern For Email Validation: HTML5 allows, among other things, to validate emails using a regular expression pattern. Here is a ready to use input field with the regexp pattern to validate an email address. 
    <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
    Bootstrap Login Form: A very basic Bootstrap form template that can be easily enhanced and modified to suit almost any need. Use this HTML snippet as a starting point for almost any kind of simple forms, such as login forms, contact forms, etc. 
    <form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
    Valid Flash Embed: Are you often embedding Flash files into your html pages? If yes, you’ll better save the valid flash embed code below for future use. 
    <object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>
    Insert HTML Video With Flash Fallback: Another great feature of the HTML5 specification is definitely the video tag which allows you to easily embed video files. Unfortunately, older browsers can’t deal with embedded HTML5 videos. So here is a complete HTML snippet with a flash fallback for old browsers. 
    <video width="640" height="360" controls>
	<source src="__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.OGV"  type="video/ogg" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>
    iPhone Call & SMS Links: With the release of the iPhone, Apple introduced a quick way to create call and sms links. Here is a sample code snippet to keep in your snippet library. 
    <a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>
    Autocompletion With HTML5 Datalists: Using the datalist element, HTML5 allows you to create a list of data to autocomplete a input field. Super useful! Here is a sample code to re-use in your own projects. 
    <input name="frameworks" list="frameworks" />

<datalist id="frameworks">
    <option value="MooTools">
    <option value="Moobile">
    <option value="Dojo Toolkit">
    <option value="jQuery">
    <option value="YUI">
</datalist>
    Country Dropdown List For Web Forms: Here’s another time saver: A ready-to-use dropdown list with all countries. 
    <select>
  <option value"  " selected>(please select a country)</option>
  <option value="--">none</option>
  <option value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  <option value="AS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option value="AI">Anguilla</option>
  <option value="AQ">Antarctica</option>
  <option value="AG">Antigua and Barbuda</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AW">Aruba</option>
  <option value="AU">Australia</option>
  <option value="AT">Austria</option>
  <option value="AZ">Azerbaijan</option>
  <option value="BS">Bahamas</option>
  <option value="BH">Bahrain</option>
  <option value="BD">Bangladesh</option>
  <option value="BB">Barbados</option>
  <option value="BY">Belarus</option>
  <option value="BE">Belgium</option>
  <option value="BZ">Belize</option>
  <option value="BJ">Benin</option>
  <option value="BM">Bermuda</option>
  <option value="BT">Bhutan</option>
  <option value="BO">Bolivia</option>
  <option value="BA">Bosnia and Herzegowina</option>
  <option value="BW">Botswana</option>
  <option value="BV">Bouvet Island</option>
  <option value="BR">Brazil</option>
  <option value="IO">British Indian Ocean Territory</option>
  <option value="BN">Brunei Darussalam</option>
  <option value="BG">Bulgaria</option>
  <option value="BF">Burkina Faso</option>
  <option value="BI">Burundi</option>
  <option value="KH">Cambodia</option>
  <option value="CM">Cameroon</option>
  <option value="CA">Canada</option>
  <option value="CV">Cape Verde</option>
  <option value="KY">Cayman Islands</option>
  <option value="CF">Central African Republic</option>
  <option value="TD">Chad</option>
  <option value="CL">Chile</option>
  <option value="CN">China</option>
  <option value="CX">Christmas Island</option>
  <option value="CC">Cocos (Keeling) Islands</option>
  <option value="CO">Colombia</option>
  <option value="KM">Comoros</option>
  <option value="CG">Congo</option>
  <option value="CD">Congo, the Democratic Republic of the</option>
  <option value="CK">Cook Islands</option>
  <option value="CR">Costa Rica</option>
  <option value="CI">Cote d'Ivoire</option>
  <option value="HR">Croatia (Hrvatska)</option>
  <option value="CU">Cuba</option>
  <option value="CY">Cyprus</option>
  <option value="CZ">Czech Republic</option>
  <option value="DK">Denmark</option>
  <option value="DJ">Djibouti</option>
  <option value="DM">Dominica</option>
  <option value="DO">Dominican Republic</option>
  <option value="TP">East Timor</option>
  <option value="EC">Ecuador</option>
  <option value="EG">Egypt</option>
  <option value="SV">El Salvador</option>
  <option value="GQ">Equatorial Guinea</option>
  <option value="ER">Eritrea</option>
  <option value="EE">Estonia</option>
  <option value="ET">Ethiopia</option>
  <option value="FK">Falkland Islands (Malvinas)</option>
  <option value="FO">Faroe Islands</option>
  <option value="FJ">Fiji</option>
  <option value="FI">Finland</option>
  <option value="FR">France</option>
  <option value="FX">France, Metropolitan</option>
  <option value="GF">French Guiana</option>
  <option value="PF">French Polynesia</option>
  <option value="TF">French Southern Territories</option>
  <option value="GA">Gabon</option>
  <option value="GM">Gambia</option>
  <option value="GE">Georgia</option>
  <option value="DE">Germany</option>
  <option value="GH">Ghana</option>
  <option value="GI">Gibraltar</option>
  <option value="GR">Greece</option>
  <option value="GL">Greenland</option>
  <option value="GD">Grenada</option>
  <option value="GP">Guadeloupe</option>
  <option value="GU">Guam</option>
  <option value="GT">Guatemala</option>
  <option value="GN">Guinea</option>
  <option value="GW">Guinea-Bissau</option>
  <option value="GY">Guyana</option>
  <option value="HT">Haiti</option>
  <option value="HM">Heard and Mc Donald Islands</option>
  <option value="VA">Holy See (Vatican City State)</option>
  <option value="HN">Honduras</option>
  <option value="HK">Hong Kong</option>
  <option value="HU">Hungary</option>
  <option value="IS">Iceland</option>
  <option value="IN">India</option>
  <option value="ID">Indonesia</option>
  <option value="IR">Iran (Islamic Republic of)</option>
  <option value="IQ">Iraq</option>
  <option value="IE">Ireland</option>
  <option value="IL">Israel</option>
  <option value="IT">Italy</option>
  <option value="JM">Jamaica</option>
  <option value="JP">Japan</option>
  <option value="JO">Jordan</option>
  <option value="KZ">Kazakhstan</option>
  <option value="KE">Kenya</option>
  <option value="KI">Kiribati</option>
  <option value="KP">Korea, Democratic People's Republic of</option>
  <option value="KR">Korea, Republic of</option>
  <option value="KW">Kuwait</option>
  <option value="KG">Kyrgyzstan</option>
  <option value="LA">Lao People's Democratic Republic</option>
  <option value="LV">Latvia</option>
  <option value="LB">Lebanon</option>
  <option value="LS">Lesotho</option>
  <option value="LR">Liberia</option>
  <option value="LY">Libyan Arab Jamahiriya</option>
  <option value="LI">Liechtenstein</option>
  <option value="LT">Lithuania</option>
  <option value="LU">Luxembourg</option>
  <option value="MO">Macau</option>
  <option value="MK">Macedonia, The Former Yugoslav Republic of</option>
  <option value="MG">Madagascar</option>
  <option value="MW">Malawi</option>
  <option value="MY">Malaysia</option>
  <option value="MV">Maldives</option>
  <option value="ML">Mali</option>
  <option value="MT">Malta</option>
  <option value="MH">Marshall Islands</option>
  <option value="MQ">Martinique</option>
  <option value="MR">Mauritania</option>
  <option value="MU">Mauritius</option>
  <option value="YT">Mayotte</option>
  <option value="MX">Mexico</option>
  <option value="FM">Micronesia, Federated States of</option>
  <option value="MD">Moldova, Republic of</option>
  <option value="MC">Monaco</option>
  <option value="MN">Mongolia</option>
  <option value="MS">Montserrat</option>
  <option value="MA">Morocco</option>
  <option value="MZ">Mozambique</option>
  <option value="MM">Myanmar</option>
  <option value="NA">Namibia</option>
  <option value="NR">Nauru</option>
  <option value="NP">Nepal</option>
  <option value="NL">Netherlands</option>
  <option value="AN">Netherlands Antilles</option>
  <option value="NC">New Caledonia</option>
  <option value="NZ">New Zealand</option>
  <option value="NI">Nicaragua</option>
  <option value="NE">Niger</option>
  <option value="NG">Nigeria</option>
  <option value="NU">Niue</option>
  <option value="NF">Norfolk Island</option>
  <option value="MP">Northern Mariana Islands</option>
  <option value="NO">Norway</option>
  <option value="OM">Oman</option>
  <option value="PK">Pakistan</option>
  <option value="PW">Palau</option>
  <option value="PA">Panama</option>
  <option value="PG">Papua New Guinea</option>
  <option value="PY">Paraguay</option>
  <option value="PE">Peru</option>
  <option value="PH">Philippines</option>
  <option value="PN">Pitcairn</option>
  <option value="PL">Poland</option>
  <option value="PT">Portugal</option>
  <option value="PR">Puerto Rico</option>
  <option value="QA">Qatar</option>
  <option value="RE">Reunion</option>
  <option value="RO">Romania</option>
  <option value="RU">Russian Federation</option>
  <option value="RW">Rwanda</option>
  <option value="KN">Saint Kitts and Nevis</option> 
  <option value="LC">Saint LUCIA</option>
  <option value="VC">Saint Vincent and the Grenadines</option>
  <option value="WS">Samoa</option>
  <option value="SM">San Marino</option>
  <option value="ST">Sao Tome and Principe</option> 
  <option value="SA">Saudi Arabia</option>
  <option value="SN">Senegal</option>
  <option value="SC">Seychelles</option>
  <option value="SL">Sierra Leone</option>
  <option value="SG">Singapore</option>
  <option value="SK">Slovakia (Slovak Republic)</option>
  <option value="SI">Slovenia</option>
  <option value="SB">Solomon Islands</option>
  <option value="SO">Somalia</option>
  <option value="ZA">South Africa</option>
  <option value="GS">South Georgia and the South Sandwich Islands</option>
  <option value="ES">Spain</option>
  <option value="LK">Sri Lanka</option>
  <option value="SH">St. Helena</option>
  <option value="PM">St. Pierre and Miquelon</option>
  <option value="SD">Sudan</option>
  <option value="SR">Suriname</option>
  <option value="SJ">Svalbard and Jan Mayen Islands</option>
  <option value="SZ">Swaziland</option>
  <option value="SE">Sweden</option>
  <option value="CH">Switzerland</option>
  <option value="SY">Syrian Arab Republic</option>
  <option value="TW">Taiwan, Province of China</option>
  <option value="TJ">Tajikistan</option>
  <option value="TZ">Tanzania, United Republic of</option>
  <option value="TH">Thailand</option>
  <option value="TG">Togo</option>
  <option value="TK">Tokelau</option>
  <option value="TO">Tonga</option>
  <option value="TT">Trinidad and Tobago</option>
  <option value="TN">Tunisia</option>
  <option value="TR">Turkey</option>
  <option value="TM">Turkmenistan</option>
  <option value="TC">Turks and Caicos Islands</option>
  <option value="TV">Tuvalu</option>
  <option value="UG">Uganda</option>
  <option value="UA">Ukraine</option>
  <option value="AE">United Arab Emirates</option>
  <option value="GB">United Kingdom</option>
  <option value="US">United States</option>
  <option value="UM">United States Minor Outlying Islands</option>
  <option value="UY">Uruguay</option>
  <option value="UZ">Uzbekistan</option>
  <option value="VU">Vanuatu</option>
  <option value="VE">Venezuela</option>
  <option value="VN">Viet Nam</option>
  <option value="VG">Virgin Islands (British)</option>
  <option value="VI">Virgin Islands (U.S.)</option>
  <option value="WF">Wallis and Futuna Islands</option>
  <option value="EH">Western Sahara</option>
  <option value="YE">Yemen</option>
  <option value="YU">Yugoslavia</option>
  <option value="ZM">Zambia</option>
  <option value="ZW">Zimbabwe</option>
</select>
    Downloadable Files: HTML5 allows you to force download of files using the download attribute. Here is a standard link to a downloadable file. 
    <!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
    Restrict Uploads To Specific Mime Types: The accept attribute was introduced in the HTML5 specification. Used on an input type="file" element, it restricts file upload to specified mime types: 
    <input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png">