HTML lists, HTML Images, HTML Image Maps

0 23

HTML lists Ordered Unordered Definition Images Image Maps

in this tutorial i will teach you HTML lists Ordered Unordered Definition Images Image Maps

What is html lists

List in html is a collection of some items, which might be organized in a sequential or unsequential manner. In html you can use lists to display related items to the particular category, For example to display the types of smartphone companies name such as Apple, Samsung, windows, blackberry etc. You would organize these items one below the other under the Types of smartphone category.

HTML support 3 types list and they are..

  • Ordered
  • Unordered
  • Definition

HTML Ordered List

When we talk about html order list you can understand easily that list should be in ordered manner in other words order list is a list of items arranged in a particular order. For example to display months in a years you need to use numbered bullets. Similarly html allows you to implement orders list in your webpage where you need to display numbered or alphabetic bullets. Order list will starts, start <ol> tag and close with </ol> closing tag .each list item in <ol> tag will start with </li> .

HTML Ordered List attributes

In ordered list type attribute can be added to define that type of marker.

Type attribute Description
type="1" type "1" attribute will show Ordered list items with numbered (default).
type="A" type "A" attribute will show Ordered list items with (uppercase) letters.
type="a" type "a" attribute will show Ordered list items with lowercase letters
type="I" type "I" attribute will show Ordered list items with uppercase roman numbers
type="i" type "i" attribute will show Ordered list items with lowercase roman numbers

HTML Unordered List

Unordered is a that list where item are in unordered other word unordered list item are arranged in random order. This means you create an unordered listen when the related item order is not important. un order list will starts, start <ul> tag and close with </ul> closing tag .each list item in ul tag will start with <li>

HTML Unordered List style attributes

Style attribute can also to be added to the unordered list to display different types of markers like bullets, circles, squares.

Unordered List style attributes Description
list-style-type:disc this attribute will show bullets (default) with list item.
list-style-type:circle this attribute will show circles with list item.
list-style-type:square this attribute will show square with list item.
list-style-type:none The list items will not be marked.

HTML nested lists

Lists can be nested also (list inside another list)

HTML Horizontal Lists

With CSS you can style your lists in many different popular way to display your list horizontal.

HTML Description/ Definition Lists

A Description/ Definition is a terms of such kind list which describe Description/ Definition of each term.


dl is container element in html which contain on DT and DD sub elements It specifies that a Description/ Definition list can created using these elements


DT Specifies the term to be defined or described.


Specifies the definition or description of the term.

HTML Images

you can add image to your html page with <img> tag to make your website more attractive, you can use these images as a image slider, thumbnail, icons, hyperlinks. we can add different types images with different extensions, in html images are not technically inserted, they are just linked to html page.<img> tag is a standalone tag don’t not have any closing tag, we can specify height and width of image in <img> tag only just using inline style with height and width.

<img> tag has two types attributes and they are src and alt

HTML src attribute

As mentioned above <img> tag is empty don’t have any closing tag, so we can use src attribute to specify URL (web address) of the image

HTML alt attribute

The alt image attribute provides an alternative text in some conditions if the image can’t be displayed. this might be happened in case of slow connection, an error in the src attribute, or if the user uses a screen reader.We will strongly recommend you to use alt text in your image for good SEO result!

HTML image as a hyperlink

You can use your image as a link/hyperlink to perform it simply nest the <img> tag inside the <a> tag:

HTML Image Maps

image map is an image areas which can be make click able. These areas in image-maps when clicked will link to another page. To define image map use <map> tag. The name attribute of the <map> tag is associated with the <img>’s usemap attribute and creates a relationship between the image and the map.The <map> tag containing numbers of areas that will define click able area in image map.

Attribute Value Description
name mapname name Attribute is used to define the name of an image-map.

Attribute and values of <map> tag are..
Follow these guidelines to create an image map.
1: Use the <img> tag to insert and link an image. In the <img> tag,
2: use the usemap attribute to define the image map name. Use the <map> tag to create a    map with the same name. Inside this

    tag, define the clickable areas with the <area> tag.


HTML Animated Images

GIF type images allows standard images.



Leave A Reply

Your email address will not be published.