HTML Cheatsheet - Coding Torque

byPiyush Patil -October 24, 2022

0

HTML Cheatsheet

Hello Guys! Welcome to Coding Torque. In this blog, We have shared an Ultimate HTML Cheatsheet for you. HTML is basically the structure of a webpage. In simple terms, HTML is a skeleton of a webpage. Here we go 🚀.

We have also shared the javascript cheatsheet.

Basic

Basic Structure of an HTML Document

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- Body -->
</body>

</html>

Container

Container tags contains text, images, tables, etc. There are several container tags in HTML.

Section Tag

section tag is used to make sections in the document.

<section>
    <h2>Title</h2>
    <p>Description</p>
</section>

<section>
    <h2>Title</h2>
    <p>Description</p>
</section>

Div tag

div tag is used to make divisions or sections in the document.

<div> This is div block </div>

span tag

span is a container for inline content generally used <p> tag.

<span> This is span block </span>

p tag

Paragraph Tag.

<p> This is a paragraph </p>

pre tag

pre tag represents pre-formatted text.

<pre> Coding Torque </pre>

code tag

code tag is used to represent source codes.

<code>
    console.log("Hello World!");
</code>

Lists

Lists are used to group the related items in a list. There are two types of lists Ordered List and Unordered List.

Ordered List

Ordered list starts with <ol> tag and each list item starts with <li> tag

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Unordered list

Unordered list starts with <ul> tag and each list item starts with <li> tag

<ul>
    <li>Python</li>
    <li>JavaScript</li>
    <li>Dart</li>
</ul>

Table

A table is a collection of rows and columns. It is used to represent data in tabular form.

Table Structure

<table>
    <tr>
        <th>Company</th>
        <th>Owner</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Coding Torque</td>
        <td>Piyush</td>
        <td>India</td>
    </tr>
    <tr>
        <td>Code Scientist</td>
        <td>Piyush Patil</td>
        <td>India</td>
    </tr>
</table>

Form

Sample Form

HTML form is used to collect user input which is then sent to server for processing.

<form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Piyush"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Patil"><br><br>
    <input type="submit" value="Submit">
</form>

Headings

There are six headings available in HTML.

H1 Tag

<h1>Heading 1</h1>

H2 Tag

<h2>Heading 2</h2>

H3 Tag

<h3>Heading 3</h3>

H4 Tag

<h4>Heading 4</h4>

H5 Tag

<h5>Heading 5</h5>

H6 Tag

<h6>Heading 6</h6>

Dummy Text

JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[10] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).

Text Formatting

Text formatting tags are used to format text. You can make text italic, bold, strong, underlined, etc.

b tag

<b>I'm bold text</b>

strong tag

<strong>I'm important text</strong>

i tag

<i>I'm italic text</i>

em tag

<em>Emphasized text</em>

u tag

<u>Underlined text</u>

sub tag

<sub>Subscript</sub>

sup tag

<sup>Superscript</sup>

Media

Media is anything that is present in digital form such as image, video, audio, etc.

Audio <audio> tag

Syntax

<audio controls>
    <source src="demo.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Image <img> Tag

It is used to embed or import image in a webpage.

<img src="img-source" alt="Alternate text">

Video <video> tag

It is used to embed video in the webpage.

<video width="480" height="320" controls>
    <source src="torque.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Links

Links are clickable text that can redirect you to some other page.

<a> tag

<a> or anchor tag defines a hyperlink.

<a href="https://www.codingtorque.com/">Visit codingtorque.com!</a>

Characters & Symbols

Some symbols are not directly present on the keyboard, but we can display them either by entity name, decimal, or hexadecimal value.

&copy;

Less than (<) &lt Greater than (>)

&gt; &lt;

Ampersand (&)

&amp;

Dollar ($)

&dollar;

Written by: Piyush Patil

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubt or any project ideas feel free to Contact Us

Hope you find this post helpful💖

Follow us on Instagram for more projects like this👨‍💻

- @code.scientist

- @codingtorque

- @codingknights