HTML Tutorial Topic 3

HTML Tutorial Topic 4
HTML Tutorial Topic 4

HTML Tutorial Topic 3


  • Today I Cover This All Topics
  • List
  • Blocks
  • Classes and id
  • Iframes
  • Some Useful Tips 


List as we know it contains list of item in ordered or unordered.

Unordered List

  • Apple
  • Mango
  • Guava
  • Orange

Ordered List

  1. Apple
  2. Mango
  3. Guava
  4. Orange
  5. Banana

We Can Create Easily List in HTML By Using

    – for unorder list

      – for ordered list.

    1. is a nested Element Which Comes Inside Both in ul and ol for list Items.E.g –
      • First Item

We Can Customize List Item Easily Like Ordered List in Roman no. Format or Unordered List Item in square type items.
For Ordered List

We Use Attribute type=”value”

Where Values is
1 = For Number List Items
A= For uppercase Numbered List Item
a= For Lowercase Numbered
I = For Uppercase Roman Numbered
i = For Lowercase Roman Numbered

For UnOrdered List

We Use CSS style=”list-style:values”

Where Values is
circle = For Circle Number List Items
disc = For disc Numbered List Item
square = For Square  Numbered
none = For Simply Print item without Bullets

List Example HTML


Unordered List

  • Mango
  • Guava
  • Orange
  • Apple
  • Banana
Ordered List
  1. Carrot
  2. Onion
  3. Potato
  4. Tomato
  5. Cabbage


Block and Inline Elements 

Block Elements – Block elements are such elements that stretch full width under body and start with new line.

E.g :


Inline Elements – Inline Elements are such which does not takes full width cover only small part that it needs.

E.g : , 

Simple Example 

I am A Block Element, I used Border So it Clearly Show Much It Takes Width, Padding For items don’t touch the Div Border and Margin bottom So i dont Touch the Span
I am a inline with border and (Padding so i dont Touch the Border Of Span

HTML Blocks and Inline

Some List Of Block Elements

A Journey Of Coding to Became a Best Software Developer