My Own HTML & CSS Cheat Sheet

Basic HTML

Tag	Description
`<!DOCTYPE>`	Defines the document type
`<html>`	Contains metadata/information for the document
`<title>`	Defines a title for the document
`<body>`	Defines the document's body
`<h1> to <h6>`	Defines HTML headings
`<p>`	Defines a paragraph
`<br>`	Inserts a single line break
`<hr>`	Defines a thematic change in the content
`<!--..-->`	Defines a comment

HTML Forms and Input

Tag	Description
`<form>`	Defines an HTML form for user input
`<input>`	Defines an input control
`<textarea>`	Defines a multiline input control (text area)
`<button>`	Defines a clickable button
`<select>`	Defines a drop-down list
`<option>`	Defines an option in a drop-down list
`<label>`	Defines a label for an <input> element
`<optgroup>`	Defines a group of related options in a drop-down list
`<fieldset>`	Groups related elements in a form
`<legend>`	Defines a caption for a <fieldset> element
`<datalist>`	Specifies a list of pre-defined options for input controls
`<output>`	Defines the result of a calculation

HTML Table

A table in HTML consists of table cells inside rows and columns.

Example :


      <table>
      

       
      
      <thead>
      
   
      <tr>
      
     
      <th>Name</th>
      

           
      <th>Company</th>
      

           
      <th>Country</th>
      
   
      </tr>
      
 
      </thead>
 
      
      <tbody>
      
   
      <tr>
      
     
      <td>Jhontri Boyke</td>
      

           
      <td>Google</td>
      

           
      <td>Indonesia</td>
      
   
      </tr>
      
   
      <tr>
      
     
      <td>Alex Boyle</td>
      

           
      <td>Meta</td>
      

           
      <td>France</td>
      
   
      </tr>
      
   
      <tr>
      
     
      <td>Christine Angelrina</td>
      

           
      <td>Tokopedia</td>
      

           
      <td>Singapore</td>
      
   
      </tr>
      
 
      </tbody>
      

      </table>

Here is the output :

HTML Table Tags

Tag	Description
`<table>`	Defines a table
`<th>`	Defines a header cell in a table
`<tr>`	Defines a row in a table
`<thead>`	Group the header content in a table
`<tbody>`	Groups the body content in a table
`<tfoot>`	Groups the footer content in a table
`<caption>`	Defines a table caption
`<colgroup>`	Specifies a group of one or more columns in a table for formatting
`<col>`	Specifies column properties for each column within a `<colgroup>` element

CSS Box Model

In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content

Hello Box Model

Explanation of the different parts:

Content - The content of the box, where text and images appear "Hello Box Model"
Padding - Clears an area around the content. The padding is white because background-color set to white.
Border - A border that goes around the padding and content. The border shows as 5px solid black border.
Margin - Space between elements. The margin is about 10px top and 10px bottom.