Using Lists on Steemit

reveurgam (60)in #editing • 6 years ago (edited)

I'll show you how to make numbered and bulleted lists this time, using HTML and MDL.

If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you!

Numbered Lists

You can either use the ordered list commands from HTML or with MDL. Unfortunately, I have found no way to create complex lists using decimal numbers or roman numerals, or symbols other than the period and the standard "bullet hole". There's a lot to explain here, so this article is long (and took me hours to write, especially because of the quirks in the Steemit interpreter).

HTML Ordered Lists

This technique is a bit more laborious than using MDL since it requires closing tags. It doesn't matter if you put tags on one or multiple lines - an enter will be added to the end of each numbered item. The line break (br) command won't work, but the horizontal line (hr) command will, as you can see below.

<ol>
<li>One</li>
<li>Two
<br>
    <li>Tabbed Once (2.1)</li>
   <li>(2.2)
      <li>Tabbed Twice (2.1.1)</li>
   </li><li>Tabbed Once (2.3)</li><hr><li>Tabbed Once (2.4)</li></li><li>Three</li>  <<<<Multiple list items on one line
The best thing about using HTML lists is that inserted text like this doesn't reset the numbering.
</ol>

One
Two
Tabbed Once (2.1)
(2.2)
Tabbed Twice (2.1.1)
Tabbed Once (2.3)

Tabbed Once (2.4)
Three

If you do not use the ordered list tag, it will default to a bulleted list.

<li>One</li><li>Two</li><li>Three</li>

One

Two

Three

Unfortunately, the HTML nested list (i.e. tabbed/indented and/or using non-integer numbers) function doesn't work on Steemit, as you can see above.

MDL Numbered Lists

Honestly, on Steemit, this is the best choice for most lists. You simply put an integer, a period "." or right parenthesis ")" followed by a space, then the text. E.G. 1. or 1). However, please note that the right paren will be displayed as a period, so you cannot make use of both in what's displayed unless you do it manually (without a space after the period or paren).

1000.No space after the period negates the list function.
1. Space
1. yields
1. a numbered
1.  list

1000.No space after the period negates the list function.

Space
yields
a numbered
list

If you use both right paren and period, switching resets the numbering to one each time:

1.
1.
1)
1)
1.

It doesn't matter what positive integers you use - the sequence will be built for you, starting from 1:

1999. Even a year will be interpreted as part of a list!
2.
52.
332.
423423523523.
01.
222222.
0.

Even a year will be interpreted as part of a list!

Tabbing for nested lists can accomplished by adding 3 spaces for each tab stop you want to use:

Incorrect indenting, as shown below, produces unexpected results, so always indent only 3 spaces (tab)from the previous level - clearly, a level cannot be skipped!

1.
       1. Four
         1.or more 
            1.spaces causes this to happen instead!

1. Four
  1.or more 
     1.spaces causes this to happen instead!

You can't use the HTML line break or horizontal line commands, as they reset the numbering and even impact indenting (note how the hr command screwed up the end of the list!).

1.
   1.
   1.
<br>
   1.
1.
1.
   1.
   1.
<hr>
   1.
1.

1. 1.

It's not possible to use numbers with decimal points, either, with or without a trailing period/right parens and space.

1.1 
1.1) 
1.1.

1.1
1.1)
1.1.

If you're using numbers, such as years, followed by a period, you'll need the backslash before the period to prevent inadvertent listing.

1999.
1999\.

1999.

Bulleted Lists

I've not found a way to change what the bullets look like with HTML or MDL.

HTML Bulleted Lists

With, or without, the "unordered list tag"; please note the difference in indentation:

<ul><li>With the ul tag</li><li>another line</li></ul>
<li>Without the ul tag</li><li>another line</li>

With the ul tag
another line

Without the ul tag

another line

The same rules from HTML Ordered Lists (above) apply.

MDL Bulleted Lists

To denote where a number is, start the line with an asterisk, plus or hyphen followed by a space. It doesn't matter which - the result will be bullets. As with the MDL numbered list rules (above), start a subsidiary indented list by using 3 spaces beforehand. Each additional 3 spaces will produce a further-indented subsidiary list.

* one
   + two
      - three
   * two
      * three
         * four
      *Note that if you don't use a space after the *, - or +, it'll indent one tab beyond the line above
*one

one
- two
  - three
- two
  - three
    - four
      *Note that if you don't use a space after the *, - or +, it'll indent one tab beyond the line above
      *one
      Make sure to put a blank line at the end of the list or THIS will happen!

See? Now it's not indenting!
The MDL rules for numbered lists (above) apply for bulleted lists, too.

Sometimes, you can double space some lists by adding a blank line between two of the lines of the list, but this doesn't work consistently for reason I've not figured out yet. Placing a blank line between any two list items may cause the list to double-space, but two blank lines won't make it triple-space. It worked once while I was making this article, then wouldn't work.

I put in several hours of effort to produce one of these editing articles!

Credits:

If you're looking for an all-in-one guide, you might find The Ultimate Guide To Formatting On Steemit (Markup and Markdown) by @sisygoboom useful. It contains a lot of info, briefly presented, and I even found a couple of new things!

A great deal of this involved experimenting, both with what I know about HTML and markdown, and because not everything in the articles I read worked.
As I was working on this, I found this article How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by @steemitguide. It's not as comprehensive as I needed, but it did remind me about divs and how to make columns, and the first 2 links to other articles (at the bottom of it) may help you. The third I found to be useless, except I got the "center" tag from it. Some of the info in the 2 other articles works, some doesn't, including the stuff about the Raw HTML editor.

I found this article to be difficult to use, and not everything works, but I gleaned some of the above content from it: Steemit Beginner Tips : Basic Guide on how to Adjust and Edit Fonts in Post. If you don't see something from here in my article, that's because it didn't work or I couldn't figure it out.

The article Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols, by @steemitguide, has some outdated info, but it was where I got the emoticon codes from and, by looking at the source code, I was reminded about using tables.

If you appreciate this article, please upvote/like, resteem/share and share it to Facebook, Twitter, Reddit, LinkedIn and wherever else you can!