Quick & Dirty - Paragraphs & Line Breaks


First thing first, get open your new HTML file and start typing. This main thing a webpage needs, even more than the fancy HTML stuff, is content. No content, no page - or, at least, a very boring page. So go ahead and create something to put onto the page. We can worry about how to make it work in a bit.

Got it?

Good. Now, open the webpage up and see what it looks like online. Chances are, it won't look very good. In fact, it will probably look like there's some sort of problem. All the extra spaces or tabs you used for spacing will be gone. Any new paragraphs you created will just be mashed together. Everything will display as just a single large paragraph, with one sentence just following the next until the end of the page.

This isn't necessarily a bug. In fact, it is a bit of a feature. However, it does show that we need to do more than simply type out a HTML page in the same way we might a standard text processing file. We need markup, or some HTML code which tells the website how to show up when online. Thankfully, that is what HTML is designed to do. HTML stands for HyperText Markup Language, and the "Markup Language" is the part that allows HTML websites to split into paragraphs and have all kinds of features you see.

The first thing we want to be familiar with is the <p> tag. We should also know about the </p> tag. This two are used around paragraphs to show that they are separate from the other paragraphs, and to separate them from the others. The <p> tag is put at the beginning of a paragraph, while the </p> tag is put at the end. Putting these around each separate paragraph will keep them separate and individual. The term tag in HTML is used to refer to HTML-specific code that changes how the website is displayed. Tags in HTML always begin with the < character, and always end with the > character, so you can tell if something in HTML is a tag by these.

Next, take a look at the <br /> tag. This one is a bit different, in that it is all alone. While <p> has a matching </p>, there isn't a second <br /> that gets used. Also, notice that there is a space in the middle of the tag; not every HTML tag is a continuous bunch of characters. Frequently, you'll find spaces in between the first < and ending >. What <br /> does is that it makes the webpage start a new line when it shows up. While the <p> tags will generate a new line between them, using <br /> keeps lines together in the same "paragraph block", as it was.

And with that, go back and try your webpage again. Try to edit the existing page you typed up, this time putting <p> and </p> around paragraph breaks and <br /> whenever you just want to move to the next line. Notice that, on webpages, paragraphs are blocks of text separated by a blank space. At least, normally. It'll be awhile before we know enough to make changes to that basic assumption, though.