HTML Cheat sheet

HTML basic tags

<!DOCTYPE html> specifies the HTML5 document type and must be the first line in an HTML document.
"lang" specifies the language of the document
"head" tag contains documents behaviour tags
If we want to mention our website name in the tab then we use the "title" tag
"Body" tag contains the visible content of the document, such as text, images

HTML

              
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>First program</title>
    </head>
    <body>Hello World!</body>
</html>

META TAGS

HTML

              
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="discription" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta http-equiv="refresh" content="0; url=https://www.freshworks.com/ ">
</head>

HTML heading tags

The h1 to h6 tags are used to define HTML headings. h1 defines the most important heading.

HTML

              
<h1>h1 Example size 2em</h1>
<h2>h2 Example size 1.5em</h2>
<h3>h3 Example size 1.17em</h3>
<h4>h4 Example size 1em</h4>
<h5>h5 Example size 0.8em</h5>
<h6>h6 Example size 0.7em</h6>

HTML link tag

HTML links are clickable elements that allow users to navigate between web pages and different sections of the same page.

HTML

              
<a href="https://teentechy.com/">Tamil Techy</a>

HTML audio tag

The <audio> element is used to embed audio content into a web page.

HTML

              
<audio controls><source src="" type="audio/mp3"></audio>

HTML Formatting tag

Bold tag -  - To bold the text

HTML

            
<b>bold</b>

Strong tag -  - Important text

HTML

          
<strong>Title</strong>

i tag -  - Italic text

HTML

            
<i>italic</i>

break tag -   - To break the content

HTML

          
<h1>Hello world</h1><br>

HTML button tag

The Button tag defines a clickable button

HTML

              
<button type="button">Click Me!</button>

Output

HTML header tag

The header element represents a container for introductory content or a set of navigational links

HTML

              
<header><h3>Main page heading here</h3></header>

Output

Main page heading here

HTML iframe tag

The iframe tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

HTML

          
<iframe width="560" height="315" src="https://www.youtube.com/embe/5dJmua4ykdA">
</iframe>

Output

HTML image tag

HTML

          
<img src="./html.png" width="560" height="315">

Output

HTML nav tag

The nav tag defines a set of navigation links.

HTML

              
<nav></nav>

HTML paragraph tag

The p tag defines a paragraph. Browsers automatically add a single blank line before and after each

HTML

              
<p></p>

HTML section tag

The section tag defines a section in a document.

HTML

              
<section>
   <h1>section 1</h1>
   <p>tag defines a section in a document.<p/>
</section>
<section>
   <h1>section 2</h1>
   <p>tag defines a section in a document.<p/>
</section>

Output

section 1

tag defines a section in a document.

section 2

tag defines a section in a document.

HTML video tag

The video tag is used to embed video content in a document, such as a movie clip or other video streams

HTML

              
<video width="320" height="240" controls><source src="" type="video/mp4"></video>

Output

HTML orderlist tag

The ol tag defines an ordered list. An ordered list can be numerical or alphabetical.

HTML

              
  <ol>
      <li>Coffee</li>
      <li>Milk</li>
  </ol>

Output

Coffee
Milk

HTML unorderlist tag

The ul tag defines an unordered (bulleted) list

HTML

              
  <ul>
      <li>Coffee</li>
      <li>Milk</li>
  </ul>

Output

Coffee
Milk

HTML table tag

The table tag defines an HTML table

HTML

              
  <table>
      <caption>Save Money</caption>
      <tr>
        <th>Month</th>
        <th>Savings</th>  
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>  
      </tr>
  </table>

Output

Save Money
Month	Savings	Savings
January	$100	$100

HTML form tag

The form tag is used to create an HTML form for user input.

HTML

              
<form></form>

HTML lable tag

The lable tag defines a label for many form elements

HTML

              
<lable></lable>

HTML input type

The input tag specifies an input field where the user can enter data.

HTML

          
<input type="text">
<input type="radio">
<input type="checkbox">
<input type="date">
<input type="password">
<input type="tel">
<input type="number">
<input type="range">
<input type="reset">
<input type="seach">
<input type="datetime-local">
<input type="submit">
<input type="email">
<input type="color">
<input type="file">
<input type="button">

HTML input example

input type text

Output

input type radio

Output

input type checkbox

Output

input type date

Output

input type password

Output

input type tel

Output

input type number

Output

input type range

Output

input type reset

Output

input type search

Output

input type datetime-local

Output

input type submit

Output

input type email

Output

input type color

Output

input type file

Output

input type button

Output

HTML select tag

The select element is used to create a drop-down list.

HTML

              
  <select>
      <option value="Coffee">Coffee</option>
      <option value="Milk">Milk</option>
  </select>

Output