HTML CheetSheet

HTML Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Heading Tag

There are six headings available in HTML.

<h1> Tag

This is the largest heading among all.

<h1>Heading1</h1>

<h2> Tag

This is the second largest heading among all.

<h1>Heading2</h1>

<h3> Tag

This is the Third largest heading among all.

<h1>Heading3</h1>

<h4> Tag

This is the fourth largest heading among all.

<h1>Heading4</h1>

<h5> Tag

This is the second Smallest heading among all.

<h1>Heading5</h1>

<h6> Tag

This is the Smallest among all.

<h1>Heading6</h1>

Containers

The container tags are tags that have some data such as text, the image between their opening and closing tags. There are several container tags in HTML.

<div> Tag Or container

The div tag is a block level container. It defines a division or a section in HTML document.

<div>This is a div container</div>

<span> Tag

The span tag is an inline element or container. It is used to mark up a part of a text, or a part of a document.

<span>This is a span container</span>

<p> Tag

The p tag represents a paragraph. HTML paragraphs can be any structural grouping of related content or group of sentences, images etc.

<p>This is a paragraph Tag</p>

<pre> Tag

The pre tag represents pre-formatted text which is to be presented exactly as written in the HTML file. It preserves the white spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers.

<pre>This is          pre tag.</pre>

<code> Tag

The code tag is used to represent source codes. It is mainly used to display the code snippet on the web page.

<code> int i = 25; </code>

Text formatting

Text formatting is used in HTML to make the document look more comprehensive and attractive.

<b> Tag

This tag is used to Bold the text.

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

<em> Tag

This tag is used to Emphasized the text.

<em>This is Emphasized tag</em>

<strong> Tag

Strong tag is used to give importance of the word or text.

<strong>This is a strong tag</strong>

<i> Tag

This tag is used to italic the text.

<h1>I'm a Itelic tag</h1>

<sub> Tag

This tag is used to write subscript as h₂O.

<sub>This is subscript</sub>

<sup> Tag

This tag is used to write superscript as you².

<sup>This is superscript</sup>

Lists Tags or Containers

Lists can be either numerical, alphabetic, bullet, or other symbols.

There are three list types in HTML

Ordered lists: Used to group data in perticular order or numerically.
UnOrdered lists: Used to group data no perticular order.
Ordered lists: Used to display name/value pairs such as terms and definitions.

<ul> Tag

This tag is used to build unordered list.

This is
a unordered
list

<ul>
    <li>This is</li>
    <li>a unordered</li>
    <li>list</li>
</ul>

<ol> Tag

This tag is used to build ordered list.

This is
a unordered
list

<ol>
    <li>This is</li>
    <li>a ordered</li>
    <li>list</li>
</ol>

<li> Tag

This tag represent item of list.

<li>These are</li>
<li>list</li>
<li>item</li>

Table

A HTML table is used to arrange data in tabular form into rows and columns.

<table> Tag

This tag is used to define schema or structure of table

<table>Students</table>

<thead> Tag

This is tag is used to create table header.

<thead>Heading</thead>

<tbody> Tag

This tag is used to create table body.

<tbody>Ram   Shyam</tbody>

<tr> Tag

This tag is used to create table row.

<tr>101   105</tr>

<th> Tag

This tag is used to define table head

<th>Age</th>

<td> Tag

This tag is used to define table data.

<td>18   20</td>

Document Information

This section involves tags which are used to describe the HTML document by giving an overview of what it includes.

<head> Tag

It contain title, meta tags, external file links, internal css

<head>
    <title>head tutorial</title>
    <meta name="viewport" content="Meta Tags, Metadata" />
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

CSS & JavaScript Apply

CSS and JavaScript can be applied on a page both internally and externally.

<style> Tag

This tag is used to add internal css into page

→ Inline CSS

    <h1 style="display: inline-block;"></h1>

→ internal CSS

    <style>
        .container {
            width: 100%
            text-align: center;
            font-size: 30px;
            color: aliceblue;
            }
    </style>

→ External CSS link 

    <link rel="stylesheet" href="style.css">

<script> Tag

This tag is used to add internal JavaScript And external JavaScript

→ Internal JavaScript 

    <script>
        document.getElementById('demo').innerHtml = "Hello world";
    </script >

→ External JavaScript link 

    <script src="script.js"></script>