HTML Cheatsheet
- HTML Cheatsheet
HTML Basics
HTML stands for Hyper Text Markup Language HTML is used for creating web pages and websites.
Boilerplate Code
<html>
<head>
<title> Hello </title>
</head>
<body>
</body>
</html>
The <html> tag is used to define an HTML document.
The head tag contains meta information about HTML page.
The <title> tag is used to define Title for HTML page.
The <body> tag everything we need in html page like images, text, links, tables and many more.
HTML Comments
Comments are piece of code ignored by browsers. Comments are used to indicate sections or to keep notes.
<!-- This is comment and will be ignored by browser -->
<h1> Hello </h1>
<!-- This is the example of
multi line comment
Multiple line comment 2 -->
Headings Tag <h1> <h6>
HTML heading ranges from <h1> to <h6> tags.
Live Example
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
Level 1 Heading
Level 2 Heading
Level 3 Heading
Level 4 Heading
Level 5 Heading
Level 6 Heading
Paragraph Tag <p>
<p> tag is used to structure your text into different paragraphs.
<p> This is the paragraph </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque </p>
Pre-Formatted Text Tag <pre>
<pre> tag is defines pre-formatted text.
<pre> Hello World </pre>
<pre> This is pre-formatted text example </pre>
OUTPUT
Hello World This is pre-formatted text example
Code Tag <code>
Code tag is used to define code block.
<code>
print("Hacking NASA using HTML...")
print("Hacking Failed Successfully")
</code>
OUTPUT
print("Hacking NASA using HTML...")
print("Hacking Failed Successfully")
Division Tag <div>
<div> tag is used to make division or block in document.
<div>
<p> This is example of div tag</p>
</div>
Span Tag <span>
<span> tag is used to define inline block.
<span> Inline block example </span>
Text Formatting
Bold Text Tag <b>
<b> tag is used to bold the text.
<b> This text is bold </b>
Italic Text Tag <i>
<i> This text is Italic </i>
Subscript Text Tag <sub>
<sub> tag is used to define subscript text. Subscript text appears half a character below the normal line
CO<sub>2</sub>
H<sub>2</sub>O
This is <sub>Subscript</sub>Text
OUTPUT
CO2 H 2O This is SubscriptText
Superscript Text Tag <sup>
<sup> tag is used to define text in power position.Superscript text appears half a character above the normal line.
x<sup>2</sup>
x<sup>a+b</sup>
OUTPUT
x2 xa+b
List
Unordered List
Unordered list are declared using <ul> tag.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
OUTPUT
- HTML
- CSS
- JS
Ordered List
Ordered list are declared using <ol> tag.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
OUTPUT
- HTML
- CSS
- JS
HTML Hyperlinks
<a> tag used to define a hyperlink.
<a href="https://github.com">Link to GitHub</a>
href specifies the path/link to website or another page.
OUTPUT Link to GitHub
HTML Media
Image Tag <img>
<img> tag is used to embed image in document.
<img src="dummy.jpg" alt="This is Image">
src specifies the path of image.
Video Tag <video>
<video> tag is used to embed video in document.
<video width="300" height="400" controls>
<source src="dummy.mp4" type="video/mp4">
Video Not Supported!
</video>
Text between Tag is only displayed when video is not supported in the document.
Audio Tag <audio>
<audio> tag is used to embed audio in document.
<audio>
<source src="dummy.mp3" type="audio/mpeg">
Audio Not Supported!
</audio>
HTML Table
Table is used to represent data in tabular form. Table consist of rows and columns.
<table border="2">
<thead>
<tr>
<th>Sr No.</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td>3</td>
<td>PQR</td>
</tr>
</tbody>
</table>
<th>is used to give heading to column (TH stands for Table Heading).<tr>is used to define row in table (TR stands for Table Row).<td>is used to enter data in row/column.
OUTPUT:
| Sr No. | Name |
|---|---|
| 1 | ABC |
| 2 | XYZ |
| 3 | PQR |
HTML Forms
HTML forms are used to collect the user input.
Form Tag <form>
To create form we use the <form> tag.
<form>
<!-- Another form tags -->
</form>
Input Tag <input>
<input type="text"> <!-- Displays a single line text input field -->
<input type="radio"> <!-- Displays a radio button -->
<input type="checkbox"> <!-- Displays a checkbox button -->
<input type="button"> <!-- Displays a Simple Clickable button -->
<input type="submit"> <!-- Displays a button to submit form-->
Radio Buttons
Radio buttons are used to choose one options out of many.
Choose Age:
<input type="radio" name="age" value="0-18"> 0 - 18
<input type="radio" name="age" value="19-40"> 19 - 40
<input type="radio" name="age" value=">= 41"> >= 41
Choose Age: 0 - 18 19 - 40 >= 41
Checkbox Buttons
Checkbox buttons are used to choose many options together.
Choose Something:
<input type="checkbox" name="something" value="Data 1"> Data 1
<input type="checkbox" name="something" value="Data 2"> Data 2
<input type="checkbox" name="something" value="Data 3"> Data 3
Data 1 Data 2 Data 3
Buttons
<input type="button" value="Click Me">
HTML Classes & ID
HTML Class Attribute
The class attribute is used to point a class name in a CSS style and JavaScript. Using class name we can add our own custom CSS style like changing font, colors and many more.
<div class="vehicles">
<p> This is Bike </p>
</div>
<div class="vehicles">
<p> This is Car </p>
</div>
<div class="vehicles">
<p> This is Bus </p>
</div>
Applying Our own CSS:
.vehicles{
color: red;
font-size: 20px;
}
Note:
- Class name is case sensitive.
- Class attribute can be used on any HTML tag.
- Classes are used by CSS and JS to access specific element.
HTML ID Attribute
The HTML id attribute is used to specify a unique id for an HTML element.
<div id="text">This is Text </p>
Own CSS:
#text{
font-size: 15px;
color: blue;
}
HTML Symbols & Emojis
<!-- Copyright Symbol -->
<p>Symbol : © </p>
<!-- Registered Sign -->
<p>Symbol : ® </p>
<!-- Trademark Sign -->
<p>Symbol : ™ </p>
<!-- Emojis -->
<p>Emojis : 😀</p>
<p>Emojis : 😇</p>
<p>Emojis : 😎</p>
Symbol : ©
Symbol : ®
Symbol : ™
Emojis : 😀
Emojis : 😇
Emojis : 😎
Full list of symbol reference here Full list of Emojis here
Something is missing? Contribute here