This content originally appeared on DEV Community and was authored by Rohan Kiratsata

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

x²
x^a+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
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 : &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>

Symbol : ©

Symbol : ®

Symbol : ™

Emojis : 😀

Emojis : 😇

Emojis : 😎

Full list of symbol reference here
Full list of Emojis here

Something is missing? Contribute here

This content originally appeared on DEV Community and was authored by Rohan Kiratsata

Print Share Comment Cite Upload Translate Updates

APA

Rohan Kiratsata | Sciencx (2021-11-08T11:21:44+00:00) HTML Cheatsheet. Retrieved from https://www.scien.cx/2021/11/08/html-cheatsheet/

MLA

" » HTML Cheatsheet." Rohan Kiratsata | Sciencx - Monday November 8, 2021, https://www.scien.cx/2021/11/08/html-cheatsheet/

HARVARD

Rohan Kiratsata | Sciencx Monday November 8, 2021 » HTML Cheatsheet., viewed ,<https://www.scien.cx/2021/11/08/html-cheatsheet/>

VANCOUVER

Rohan Kiratsata | Sciencx - » HTML Cheatsheet. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/08/html-cheatsheet/

CHICAGO

" » HTML Cheatsheet." Rohan Kiratsata | Sciencx - Accessed . https://www.scien.cx/2021/11/08/html-cheatsheet/

IEEE

" » HTML Cheatsheet." Rohan Kiratsata | Sciencx [Online]. Available: https://www.scien.cx/2021/11/08/html-cheatsheet/. [Accessed: ]

rf:citation

» HTML Cheatsheet | Rohan Kiratsata | Sciencx | https://www.scien.cx/2021/11/08/html-cheatsheet/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

HTML Basics

Boilerplate Code

HTML Comments

Headings Tag <h1> <h6>

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Paragraph Tag <p>

Pre-Formatted Text Tag <pre>

Code Tag <code>

Division Tag <div>

Span Tag <span>

Text Formatting

Bold Text Tag <b>

Italic Text Tag <i>

Subscript Text Tag <sub>

Superscript Text Tag <sup>

List

Unordered List

Ordered List

HTML Hyperlinks

HTML Media

Image Tag <img>

Video Tag <video>

Audio Tag <audio>

HTML Table

HTML Forms

Form Tag <form>

Input Tag <input>

Radio Buttons

Buttons

HTML Classes & ID

HTML Class Attribute

HTML ID Attribute

HTML Symbols & Emojis

Related Posts

Headings Tag `<h1>` `<h6>`

Paragraph Tag `<p>`

Pre-Formatted Text Tag `<pre>`

Code Tag `<code>`

Division Tag `<div>`

Span Tag `<span>`

Bold Text Tag `<b>`

Italic Text Tag `<i>`

Subscript Text Tag `<sub>`

Superscript Text Tag `<sup>`

Image Tag `<img>`

Video Tag `<video>`

Audio Tag `<audio>`

Form Tag `<form>`

Input Tag `<input>`