Web Development

HTML Lists

HTML Lists is the section 10 of Beginner’s Guide to HTML.

If you can present your data lists nicely to the reader, they can get a better meaning of your list easily. So in HTML, it facilitates to show a data list either numbered or with bullet points. We called them as ordered lists and un-ordered lists in HTML.

Ordered And Unordered List

Just look at the following example.

Unordered List

  • Robin Hood
  • Merlin
  • Touch
  • Falling Skies
Ordered List

  1. Robin Hood
  2. Merlin
  3. Touch
  4. Falling Skies

Let’s see how the Unordered List was written. By default unordered html list comes with a certain bullet point type. You can change this bullet type, but for that you’ll need to learn little bit about CSS.

[code language=”html”]
  • Robin Hood
  • Merlin
  • Touch
  • Falling Skies
[/code]

Ordered list can be write as this. By default ordered html list comes with Indo-Arabic numbers. But you can change this as Roman numbers and alphabatic letters with either lowercase or uppercase.

[code language=”html”]
  1. Robin Hood
  2. Merlin
  3. Touch
  4. Falling Skies
[/code]

So here we used

    tag to define the unordered list.
      tag to define the ordered list.
    1. tag to defines the each data item on both list types.

      Description List

      Sometimes you may need a list with each list item name term has a description.

      Data List tag,
      Data Term tag and
      Data Description tags come in handy to fulfill this.

      Let’s see an example.

      Robin Hood
      A British television programme based on the legend of Robin Hood.
      Merlin
      A British fantasy-adventure television programme based on a wizard featured in Arthurian legend.
      Touch
      An American thriller television series.
      Falling Skies
      An American science fiction post-apocalyptic dramatic television series.

       

      [code language=”html”]
      Robin Hood
      A British television programme based on the legend of Robin Hood.
      Merlin
      A British fantasy-adventure television programme based on a wizard featured in Arthurian legend.
      Touch
      An American thriller television series.
      Falling Skies
      An American science fiction post-apocalyptic dramatic television series.
      [/code]

      You can put a character in the text of each

      tag to look it more dramatic. And keep remember to put close together the matching and
      pair.

       

      So we learned almost everything about creating lists on HTML. Most important thing is you can create lists as text, images, links and nested lists. Now it’s time to do some workout.

      Let’s Tryout Lists

      Changing the number system.

      In the

        tag, it has a attribute called type. Following attribute values are allowed for that.

        Uppercase Alphabet Characters [code language=”html”]
          [/code]
        Lowercase Alphabet Characters [code language=”html”]
          [/code]
        Uppercase Roman Numbers [code language=”html”]
          [/code]
        Lowercase Roman Numbers [code language=”html”]
          [/code]

        Nested List

        Sometimes you may need lists inside lists with a little bit indent. Both in unordered way and ordered way. You can put a unordered list inside of an ordered lists. It can be done as follows.

        1. My Movie List
        2. My TV Series List
          • Robin Hood
          • Merlin
          • Touch
          • Falling Skies
            • Tom Mason
            • Anne Glass
        3. My Documentary List

        See how it was done. See how automatically they were being indent.

        [code language=”html”]
        1. My Movie List
        2. My TV Series List
          • Robin Hood
          • Merlin
          • Touch
          • Falling Skies
            • Tom Mason
            • Anne Glass
        3. My Documentary List
        [/code]

        So in this section we learned to present a data list in both numbered way and bullet pointed way. Also we created nested lists. It comes in handy when you are creating a table of content (TOC) page on HTML. To create a TOC you will need nested ordered lists with links. So a reader can easily turn to the chapter or the subsection he need to look at. Then in the next section we’re going to look at a most important topic. As we already know the most wanted elements in HTML, we’re going to start layout our webpage.

        WHAT’S NEXT?

        Learn to Layout Your Webpage.

        Join Our Newsletter Today

        Stay updated with all latest updates.
        Give it a try, you can unsubscribe anytime.
        Subscribe
        SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW