DEV Community

Rohan Kiratsata
Rohan Kiratsata

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Pre-Formatted Text Tag <pre>

<pre> tag is defines pre-formatted text.

<pre> Hello World </pre>
<pre> This is pre-formatted text example </pre>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

OUTPUT

print("Hacking NASA using HTML...")
print("Hacking Failed Successfully")
Enter fullscreen mode Exit fullscreen mode

Division Tag <div>

<div> tag is used to make division or block in document.

<div>
    <p> This is example of div tag</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Span Tag <span>

<span> tag is used to define inline block.

<span> Inline block example </span>
Enter fullscreen mode Exit fullscreen mode

Text Formatting

Bold Text Tag <b>

<b> tag is used to bold the text.

<b> This text is bold </b>
Enter fullscreen mode Exit fullscreen mode

Italic Text Tag <i>

<i> This text is Italic </i>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

OUTPUT

  • HTML
  • CSS
  • JS

Ordered List

Ordered list are declared using <ol> tag.

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

OUTPUT

  1. HTML
  2. CSS
  3. JS

HTML Hyperlinks

<a> tag used to define a hyperlink.

<a href="https://github.com">Link to GitHub</a>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • <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>
Enter fullscreen mode Exit fullscreen mode

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-->
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Choose Age:
0 - 18
19 - 40
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
Enter fullscreen mode Exit fullscreen mode

Data 1
Data 2
Data 3

Buttons

<input type="button" value="Click Me">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Applying Our own CSS:

.vehicles{
    color: red;
    font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Own CSS:

#text{
    font-size: 15px;
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

HTML Symbols & Emojis

<!-- Copyright Symbol -->
<p>Symbol : &copy; </p>
<!-- Registered Sign -->
<p>Symbol : &reg; </p>
<!-- Trademark Sign -->
<p>Symbol : &trade; </p>
<!-- Emojis -->
<p>Emojis : &#128512;</p>
<p>Emojis : &#128519;</p>
<p>Emojis : &#128526;</p>
Enter fullscreen mode Exit fullscreen mode

Symbol : ©

Symbol : ®

Symbol : ™

Emojis : 😀

Emojis : 😇

Emojis : 😎

Full list of symbol reference here
Full list of Emojis here


Something is missing? Contribute here

Discussion (0)