HTML stands for Hyper Text Markup Language.

HTML extention - (.html) or (.htm)

Standard Naming Convention - index.html

1. HTML Introduction

HTML First Program:

Hello World!, create a file named index.html and write -

        <html>Hello World!</html>

HTML Basic layout:

        <!DOCTYPE html>
        <html>
          <head>
            <title> Page Title </title>
          </head>
          
          <body>
            <h1> Heading </h1>
            <p> Paragraph </p>
          </body>
        </html>

HTML Versions:

Parts of HTML:

Tags - <tag> Content.... </tag>

Attributes - <tag attribute="key: value;"> or <tag attribute="value;">

Elements - <tag attribute="key: value;"> Content.... </tag> or Tag + Attribute

Best Editors for HTML:

VS Code
Sublime 3
Web Storm IDE
Notepad++

2. HTML Basics

Document Type Declaration:

<!DOCTYPE html> - Defines HTML 5 version

HTML tag:

<html> - html starts here

</html> - html ends here

Head tag:

Contains meta data

<head> - head starts here

</head> - head ends here

Title tag:

<title> Site Title </title>

Body tag:

Contains Body content

<body> - body starts here

</body> - body ends here

Headings:

<h1>....</h1>

Heading 1

<h2>....</h2>

Heading 2

<h3>....</h3>

Heading 3

<h4>....</h4>

Heading 4

<h5>....</h5>

Heading 5

<h6>....</h6>

Heading 6

Paragraph:

<p>....</p>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non, nisi?

Link:

<a href="url">....</a>

This is a link

Line Break:

<br />

Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Amet, fugit.

Horizontal line:

<hr />

View HTML Source Code:

Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This will open a new tab containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Comments

        <!-- comment -->

Shortcut - CTRL + /

Blocks Elements:

<h1>----<h6> <p> <div> <hr> <header> <nav> <main> <footer> <section> <article> <ul> <ol> <li> <dl> <dt> <dd> <table> <form>

Inline Elements:

<a> <span> <img> <br> <button> <input> <select> <b> <i> <q> <sub> <sup> <textarea>

3. HTML Formatting

Physical Tags:

These tags directly impact the visual appearance of the text, altering font styles, sizes, and other visual properties.

<b> - bold

<i> - italic

Logical Tags:

These tags denote the logical or semantic value of the text. They convey meaning without directly affecting the visual appearance.

<strong> - strong

<em> - emphasize

Formatting Tags:

<sub> - Abcd _Subscript

<sup> - Abcd ^Superscript

<mark> - marked

<del> - ~~deleted~~

<ins> - inserted

Quotation tags:

<q> - Abcd Quotes

<blockquote> - Abcd

Blockquotes

<cite> - Abcd Cite

<abbr title=""> - Abcd Abbreviation

<address> - Abcd

Address

<bdo dir="ltr"> - Abcd Address

<bdo dir="rtl"> - Abcd Address

4. HTML Table

HTML tables allow web developers to arrange data into rows and columns.

Tags:

<table> - table tag

<tr> - table row tag

<th> - table header tag

<td> - table data tag

Basic Layout:

        <table>
          <tr>
            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
          </tr>
          <tr>
            <td>Arvind</td>
            <td>11223344</td>
            <td>a123@mail.com</td>
          </tr>
          <tr>
            <td>Bhanu</td>
            <td>123123</td>
            <td>b111@mail.com</td>
          </tr>
          <tr>
            <td>Chandan</td>
            <td>12344321</td>
            <td>c121@mail.com</td>
          </tr>
        </table>

Simple Table:

Name	Phone	Email
Arvind	11223344	a123@mail.com
Bhanu	123123	b111@mail.com
Chandan	12344321	c121@mail.com

Rowspan and Colspan:

Rowspan:

<td rowspan="2">....</td>

Example:

Name	Jill
Phone	555-1234
Phone	555-8745

Colspan:

<td colspan="3">....</td>

Example:

Name		Age
Jill	Smith	43
Eve	Jackson	57

5. HTML List

Tags:

<ul> - Unordered List

<ol> - Ordered List

<li> - List Item

<dl> - Description List

<dt> - Description Title

<dd> - Description Data

Unordered List:

Apple
Banana
Mango
Orange
Grapes

Ordered List:

Lion
Tiger
Leopard
Wolf
Fox
Elephant
Rhino
Bear

Description List:

Noun -: Noun is the name of a person, place or things. e.g. Ram, Book, Kanpur etc.
Pronoun -: The word which used in place of noun is called Pronoun. e.g. He, She, It etc.

Nested List:

Sedan
SUV

Off-roader
Crossover

Hatchback
MUV

Bike
Scooter

6. HTML Form

Tags:

<form> <label> <input> <select> <option> <textarea>

Form Example:

Input Types:

Button
Checkbox
Color
Date
Date Time
Date Time Local
Email
File
Image
Month
Number
Password
Radio
Range
Reset
Search
Submit
Tel
Text
Time
URL
Week

7. HTML Media

Images:

Syntax - <img src="" alt="" />

Example - Image Example

Audio:

Syntax - <audio src="" controls></audio>

Example -

Video:

Syntax - <video src="" controls></video>

Example -

More Attributes for audio & video:

autoplay: - automatically play the media.
muted: - automatically mute the media.
loop: - play the media in the loop.

Object:

Syntax - <object data=""></object>

Example - .pdf file

Embed:

Syntax - <embed src="" />

Example - .txt file

Iframe:

Syntax - <iframe src="./Example.htm"></iframe>

Example - for web page

Download Link:

Syntax - <a href="" download></a>

Example - Download