HTML For Dummies: De-Mystifying Line Breaks


To human eyes it all runs together, but to a browser, it’s very distinct

Let’s talk about line breaks and spacing. Most writing sites try to do some sort of text parsing when you submit an article. Their software scans your submission and tries to do some minimal formatting. The most common thing these sites do is look for double returns (you pressed “Enter” twice) and convert those into paragraph breaks. In HTML a paragraph is enclosed in the <p> tag.

You type:

          ... blah, blah, end of paragraph one

          start of paragraph two, blee, blee ...

After parsing the text, if the site translated into strict HTML, it looks like:

     <p>... blah, blah, end of paragraph one</p><p>start of paragraph two, blee, blee ...</p>

Notice that your double return was translated into </p><p> with corresponding open and close tags.

Not all sites will create strict HTML. Some will take advantage of the browser’s built-in correction capabilities. Proper HTML is “<p>text text text</p>”. However, if you just use <p> and never close it, most browsers will fill-in the closing </p> when they encounter another open-paragraph tag (<p>).

At AC, you can see what they did to your article if it’s still in the submission queue or if it’s a display-only submission, by putting it back in edit mode and looking at step two of the submission template. Here’s what my last article looked like when AC got done with it. I’ve added the bold to emphasize all the HTML tags. AC added the <p> and I supplied all the rest.

The best thing about Inauguration Day 2009 is … I went to work. The traffic lights all functioned. The other drivers were courteous. There were no blazing tire fires on the sides of the road. No barricades. Besides work matters, people in the office discussed their holiday weekend and their favorite television shows. And that’s how it should be.<p>The best part about Inauguration Day is seeing a parade of High School bands instead of tanks in the streets of Washington, D.C. It does the soul good to know the people standing on the sidewalks are waving flags and not throwing Molotov cocktails. The best thing about Inauguration Day is it was a peaceful transition of power.<p>Now, I don’t want to detract from those who made the pilgrimage to D.C. to participate in the festivities. Attending the event is a perfectly acceptable choice. Some feel it was a historic event. Some just happened to be near by. Others have been unable to orgasm in the intervening months since election night and needed some release. Who am I to judge? That’s the great thing about Inauguration Day. We can all celebrate in our own, peaceful way.<p>Even now, in the twenty-first century, dictatorships and despots still rule much of our globe. Just yesterday, Taliban <strike>wackjobs</strike> fundamentalist bombed five schools in Pakistan<sup>1</sup> because they think educating girls is a <strike>sin</strike> crime. A peaceful transition of government is almost something rare. One that is mandated by the will of the populous through their uninhibited vote, is something rarer still.<p>Whether you relished Obama’s inauguration speech or took snide pot-shots at it, is unimportant. That you had the freedom to do either or neither is. I had the freedom to work in peace and safety. I didn’t have to take up arms. I didn’t have to hide my family in the basement. I didn’t have to stare down tanks and shoot guerrillas. My most difficult decision was where to have lunch because all the restaurants were open. I chose a burger at my desk so I could listen to the speech on my computer. Then I went back to my daily routine, safe in the knowledge that bombs would not fall on the building. Not because of the speech, but because of our Constitution, every citizen who defends it, and those who participate in the process.<p>Some of the world hates the United States of America, but most of the world just envies the fact that we can sleep in peace tonight. When you climb into bed tonight, think about those poor Canadian children in war-torn Qu&eacute;bec<sup>2</sup> who are going to bed hungry and frightened. The best part about Inauguration Day 2009 is … this isn’t Canada.<p><sup>1</sup><a href=”http://www.google.com/hostednews/ap/article/ALeqM5hkiMxbHNH0BqgpWA2ZG6VD6wVTmAD95Q9ULG0″&gt;School bombings in Pakistan, AP</a><br><sup>2</sup>Qu&eacute;bec is not really war-torn, it just looks that way to those snobs in Ontario.

It’s very difficult for a human to read that continuous block, but a browser has no trouble seeing all the tags and spacing the text accordingly. You can see the final output & format of the article on the AC site. Notice how the <p> tags tell your browser to display a blank line between the paragraphs? That’s the magic of HTML. If you ever need to edit an article, putting it back with the tags intact will save you a lot of heartburn.

Deconstruction
A concrete example is always worth a thousands words. You have the HTML of the article above and the final results at AC to compare. We’ve discuss here what the <p> tag is doing. Let’s take a look at the other tags. Most of these tags were presented in the first five articles of this series.

Here I used the <strike> tag to make it look like there are leftover edits in the article:
<strike>wackjobs</strike> = wackjobs
<strike>sin</strike> = sin

Here is a footnote that leads to the AP article about the school bombings:
schools in Pakistan<sup>1</sup> = schools in Pakistan1

Here is the actual footnote at the end of the article:
<a href=”http://www.google.com/hostednews/ap/article/ALeqM5hkiMxbHNH0BqgpWA2ZG6VD6wVTmAD95Q9ULG0″>School bombings in Pakistan, AP</a> = School bombings in Pakistan, AP

Here is a combination of the French é character and 2nd footnote:
Qu&eacute;bec<sup>2</sup> = Québec2

And this last one allowed me to control the single spacing between the footnotes:
</a><br><sup> =
Well it doesn’t equal anything by itself, but the <br> caused the browser to make a one line return so the superscript for 2 starts on a new line.

How to use this knowledge to your advantage
If you are frustrated with your submission being split by uncontrollable page breaks, you can use your new-found knowledge to keep your sub-headings and follow-on paragraph together. Most sites only break pages when a paragraph changes. A <br> is seen as part of the paragraph. If you use a <br> at the end of your sub-heading, and continue straight away with your text, the site won’t separate them.

Find and replace
This brings me back to a point I made in this installment. Invest in a decent HTML and/or text editor. It is so easy to mark-up your text with a decent piece of software. It’s also just as easy to unmark the same text. A global find & replace from tags to text or the reverse will change your unreadable HTML into something legible. Another trick is to save your HTML document and open it in your browser (File > Open File). You can then see exactly how it will look on the web. Without a decent find & replace function, I would have spent much more time writing today’s article. I was able to grab the HTML of the AC article, paste it here, and do a global replacement on the < and > characters to their equivalent escape characters so you could read the HTML and not have it translated by your browser.

My momma didn’t raise no fool.

More resources @ W3schools

Advertisements

One Comment

Add yours →

  1. Hi there to every one, the contents present at this web
    site are actually remarkable for people experience,
    well, keep up the nice work fellows.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: