Adding Line Breaks and Lines on Steemit

in #editing6 years ago (edited)

This article will demonstrate how to use HTML & MDL to add line breaks (force a carriage return/enter) and horizontal lines.


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/or MDL may be frustrated because only certain tags from each work, or you may have to play around to prevent cross-contamination and negation (like I did while making these articles). 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!


Horizontal Lines

MDL Horizontal Line

You can use 3 different MDL choices: a trio of underscores , hyphens or asterisks can be used, but if you don't see a horizontal line, you may need to insert a blank line above and/or below the trio. Nearby HTML may also negate MDL.

Underscore: 3 in a row on a blank line. ___



Hyphen: 3 in a row after a blank line, on a blank line. ---


Asterisk: 3 in a row after a blank line, on a blank line. ***


Please note that sometimes the hyphen command doesn't work very well. I had to put a <br> before that line, otherwise the text on the "Hyphen" line became bold and larger. This is likely because of a prior HTML or MDL command was interfering.

HTML Horizontal Line

The self-closing tag <hr/> - (you can also type <hr>) - will consistently produce a line by itself, even if in the editor it's on the same line with other things. Keep in mind that this tag, like many other HTML tags, may interfere with MDL immediately after it. If you have a problem, put a blank line or <br./> between them. Honestly, on my screen these lines are hard to see.
<hr> produces:


Line Breaks

A line break (formerly called carriage return, from the days of typewriters) is when you force the display down to the next line on the screen, normally by using the enter key. Programs like the word processors from MS Office, Open Office and Libre Office hide the "special character" that represents the line break unless you turn on the function that shows the invisible characters.

Sometimes, Steemit unexpectedly doesn't insert a line break - even when you've put in a blank line, thus you have to add one so that the spacing looks good. Given that Steemit also strips out extra empty lines, inserting a line break can give you the ability to have multiple blank lines. As with all HTML allowed on Steemit, you don't need to put the break tag on its own line; it can be anywhere in the line. To my knowledge, when Steemit is not inserting line breaks that should exist because you pressed enter, you'll need to use the self-closing HTML 'line break" tag <br/> (or <br>).

This is an example of a line<br>break in a single line.
This is an example of a line
break in a single line.

I inserted a line break between the code box and the example, instead of using a blank line. Notice how much space it added! Following this paragraph are three blank lines, but Steemit only displays one because it doesn't display multiple blank lines.

Image showing the multiple lines that were not displayed by Steemit

By using the HTML line break tag, I can <br><br><br><br><br>insert multiple lines.
By using the line break tag, I can




insert multiple lines.
image showing how I used the break tags


Many of my articles take hours, days or even weeks to produce.



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!

Sort:  

Yours is a good read and very educational, I resteemed it, maybe you need to put a photo or photos to bring more attraction. This is just a suggestion...God bless @reveurgam!

Thank you! What kind of photos do you suggest?

Coin Marketplace

STEEM 0.28
TRX 0.13
JST 0.032
BTC 65229.52
ETH 2946.17
USDT 1.00
SBD 3.67