HTML Lists Tag Tutorial : Step-by-Step Guide for Beginners
HTML Lists Tag Tutorial ACTE

HTML Lists Tag Tutorial : Step-by-Step Guide for Beginners

Last updated on 27th Jan 2022, Blog, Tutorials

About author

Deji Saman (Html Developer )

Deji Saman is an Html Developer with 6+ years of experience in a reputed company. He has expertise in HTML & CSS, PHP & MySQL, Javascript, and Node JS. He spends most of his time researching technology and startups.

(5.0) | 19857 Ratings 1918

    Subscribe For Free Demo


      Introduction to Html – Lists :

      HTML records show up in internet browsers as bulleted lines of text. There are really three unique kinds of HTML records, including unordered records (slugs), requested records (numbers), and definition records (think: word references). Each rundown type uses its own special rundown tag, which we’ll show underneath.

      HTML List Item Code:

    • I am a list item!>
    • I am a list item too!>
    • I am a list item also!>

      HTML List Items:

    • I am a list item!
    • I am a list item too!
    • I am a list item also!
    • The genuine rundown labels themselves, for example, , are only compartment components for list things (). They work in the background to recognize the start and finishing of a HTML list component.

      Html – unordered records:

      An unordered rundown () connotes to an internet browser that all rundown things contained inside the tag ought to be delivered with a slug going before the text. The default shot sort for most internet browsers is a full plate (dark circle), yet this can be changed utilizing a HTML trait called type.

    • Milk
    • Toilet Paper
    • Cereal
    • Bread

      HTML Default Disc Bullets:

    • Shopping List
    • Milk
    • Toilet Paper
    • Cereal
    • Bread
    • To deliver a rundown with an alternate projectile sort, add a sort property to the unordered rundown component. Involving a similar code in the model above, supplant the line from the past model with any of the lines recorded beneath to change the slug from plate shape to another shape.

      HTML Unordered List Type Code:

      Html – ordered lists :

      An arranged rundown is characterized utilizing the tag, and rundown things set within an arranged rundown are gone before with numbers rather than shots.

      HTML Numbered List:

    • Goals
    • Find a Job
    • Get Money
    • Move Out
    • The numbering of a HTML rundown can be changed to letters or Roman Numerals by and by changing the sort quality.

      HTML Code:

      Ordered List Types:

    • Lower-Case Letters
    • Upper-Case Letters
    • Lower-Case Numerals
    • Upper-Case Numerals
    • The beginning quality permits you to additionally modify a HTML requested rundown by setting another beginning digit for the arranged rundown component.

    Course Curriculum

    Learn Advanced HTML Certification Training Course to Build Your Skills

    Weekday / Weekend BatchesSee Batch Details

      HTML Definition List Code:

      French word for cheese.
      French word for car.

      HTML Definition List Display:

    • Fromage-French word for cheese.
    • Voiture-French word for car.
    • html – tags

      An internet browser peruses a HTML report through and through, left to right. Each time the program observes a tag, the tag is delivered appropriately. Passage labels render section text, picture labels render pictures, and so on By adding labels to a HTML archive, you are coding HTML, yet in addition motioning to the program, “Hello look, this is passage text; presently treat it in that capacity!”

      Do you review that HTML components are involved three significant parts: the initial tag, the substance, and the end tag? As you will realize, there are endless blends of HTML labels/components, including those utilized for structures, pictures, and records. Everything showed on a page requires the utilization of a tag or two.

      HTML Tag Code:


      This text will be rendered like a paragraph.

      Labels should forever be written in lowercase letters in the event that you anticipate distributing the page on the web, as this is the web standard for XHTML and Dynamic HTML.

      HTML More Tag Code:

      Html – elements without closing tags :

    • There are a couple of components that don’t need formal shutting labels. As it were, they actually have the 3 sections (opening/shutting and content), yet they are combined into one tag.
    • The justification behind this is that these labels don’t actually need any substance to be put inside them, yet in some cases might require traits like source URLs for pictures.
    • One prime, simple illustration of a HTML label that doesn’t need an end tag is the line break tag.

      HTML Line Break Code :-

      To tell the program we need to put a line break (carriage return) onto the site, it isn’t important to type linebreak. This would require a colossal measure of effort,and in the event that each line break label required every one of the three parts as different labels do, life would become repetitive genuine speedy. The better arrangement is to consolidate the opening and shutting labels into a solitary configuration and abbreviate the quantity of characters expected to deliver a line break. Different labels, for example, picture labels and information labels, have likewise been changed in such a way.


      As you can see from the abovementioned, the internet browser is equipped for deciphering the picture tag as long as we illuminate the program where the picture document is found, utilizing the src property. Traits will be talked about in more detail all through the rest of the instructional exercise. For the present, it’s a happy chance to begin contemplating what sort of site you need to make. It is simpler all the time to make content for a theme or to accomplish an objective.HTML Lists are utilized to indicate arrangements of data. All rundowns might contain at least one rundown components. There are three distinct kinds of HTML records:

    • Requested List or Numbered List (old)
    • Unordered List or Bulleted List (ul)
    • Depiction List or Definition List (dl)
    • HTML records permit web engineers to bunch a bunch of related things in records.

      An ordered HTML list:

    • First item
    • Second item
    • Third item
    • Fourth item

      Unordered HTML List :

      An unordered rundown begins with the tag. Each rundown thing begins with the tag.

      The rundown things will be set apart with projectiles (little dark circles) naturally:

    Course Curriculum

    Get JOB Oriented HTML Training for Beginners By MNC Experts

    • Instructor-led Sessions
    • Real-life Case Studies
    • Assignments
    Explore Curriculum

        Requested HTML List :-

        An arranged rundown begins with the tag. Each rundown thing begins with the tag. The rundown things will be set apart with numbers of course:

        HTML Description Lists :

      • HTML likewise upholds depiction records.
      • A portrayal list is a rundown of terms, with a depiction of each term.
      • The tag characterizes the portrayal list, the tag characterizes the term (name), and the tag depicts each term:

        HTML List Tags :

          <'ul'> Defines an unordered list
          <'ol'> Defines an ordered list
          <'li'> Defines a list item
          <'dl'> Defines a description list
          <'dt'> Defines a term in a description list
          <'dd'> Describes the term in a description list

        HTML offers web creators three different ways for determining arrangements of data. All rundowns should contain at least one rundown components. Records might contain −

      • An unordered rundown. This will list things utilizing plain shots.
      • An arranged rundown. This will utilize various plans of numbers to list your things.
      • A definition list. This orchestrates your things similarly as they are organized in a word reference.

        HTML Unordered Lists:

        An unordered rundown is an assortment of related things that have no exceptional request or grouping. This rundown is made by utilizing HTML tag. Every thing in the rundown is set apart with a projectile.

        This will produce the following result −The type Attribute You can utilize type property for tag to indicate the kind of slug you like. Naturally, it is a circle. Following are the potential choices −

        HTML Ordered Lists :-

        Assuming that you are needed to place your things in a numbered list rather than bulleted, then, at that point, HTML requested rundown will be utilized. This rundown is made by utilizing tag. The numbering begins at one and is augmented by one for each progressive arranged rundown component labeled with.

        This will produce the following result −The type Attribute. You can use type attribute for <'ol'> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options-

        HTML Definition Lists

        HTML and XHTML upholds a rundown style which is called definition records where passages are recorded like in a word reference or reference book. The definition list is the best method for introducing a glossary, rundown of terms, or other name/esteem list.

        Definition List utilizes following three labels.

      • Defines the beginning of the rundown
      • A term
      • Term definition
      • Defines the finish of the rundown
      HTML Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

          Conclusion :-

          Therefore, I have summarized what the ordered list has done to the end, and it is almost supported in all browsers. Certainly, you can create any numbers of lists in the HTML tag element; in this article, we just focused on selected examples to understand the basic implementation. Thus, learning this topic might not the toughest job, as the <'ol'><'li'> tag used here is very simple to remember.

    Are you looking training with Right Jobs?

    Contact Us
    Get Training Quote for Free