Basic Text

Headings from h1 to h6

This is a pre, here an-
  -y space in html file is rendered on screen

This is a paragraph, and we can embed other tags in p to alter the text formatting.

bold or italic or bold + italic.
big or small.
subscript - H₂O or superscript - 10²
~~striked~~ or underline or highlight (mark)

Lists

Unordered List

Item 1
Item 2

Ordered List

Default

Item 1
Item 2

With type

type="1"

Item 1
Item 2

type="A"

Item 1
Item 2

type="a"

Item 1
Item 2

type="I"

Item 1
Item 2

type="i"

Item 1
Item 2

Description List

Apples: They are red, pink, green etc.
Oranges: They are orange.

Details and Summary

Heading Title

Full long Description here

Images and Videos

Image - Figure and Figure Caption

random image — Fig1. - Trulli, Puglia, Italy.

Local Video on server

Tables

**Table Heading**
Col 1	Col 2	Col 3
Data 1 C1	Data 1 C2	Data 1 C3
Data 2 C1	Data 2 C2	Data 2 C3
Data 3 colspan 2		Data 3 C3

Div and Spans

Two main ways to display - block and inline

Link 1 Link 1

paragraph 1

paragraph 2

span are inline container
div are block container - block element

Form and Inputs

label always have for="element_id", WHY?

label is clickable and links to element with ID, so if I click label then it will select radio button with id in for attribute

Form Heading

Text Fields

Input Text

Password Text

Text Area

Date Fields

Date

Datetime (~~deprecated~~)

Week

Time

Datetime Local

Month

Specific Type (validated)

URL

Email

Phone (maxlength 5)

Range

Checkbox, Radio and Dropdown

Quantity (fieldset legend) Quantity

1 KG

2 KG

5 KG

fieldset tag can be diabled to disable all options

Options (fieldset legend) Radio Buttons

opt 1

opt 2

opt ALL

datalist - Car:

Select - Car:

others

Color

File

Search Text

Hidden input

Tags for Display

Meter : Meter

Progress : Progress

Submit Section

Submit Btn

Reset

Image

IFrame

iframe embeds another website in your page

Embed Youtube Video