HTML & CSS: Separating Text

When writing long pieces (or almost any piece) of content, you will often want ways of separating out the text. There are a variety of ways to accomplish this using HTML and CSS, and we will be outlining three HTML solutions in this tutorial in the form of three different elements.

p

Having paragraphs is very common when writing long pieces of content, and using the p element to surround paragraphs in HTML is probably the most common method of text separation used on the modern day web. Simply wrap whatever text you want to be in a paragraph in the p and /p tags and then they will be separated by default as paragraphs (and if you want to, it's then possible to style the paragraphs using the p selector). An example of using the p element is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum diam lorem, sollicitudin ut vulputate at, posuere non arcu.
Duis fringilla consectetur nisi sit amet elementum. Nulla sed mi vitae
arcu ullamcorper dictum quis eu ligula. Nulla tincidunt vehicula suscipit.
Mauris id enim ac sapien blandit varius. Morbi eget porttitor diam.
Nulla aliquam leo sed lacus imperdiet pretium. Cras vel leo vitae
mauris pellentesque dignissim. Donec feugiat urna in enim
tempus ornare. Nam a lorem at sapien lobortis auctor.</p>
<p>Maecenas consequat feugiat aliquam. Sed sit amet ipsum
mauris. Nam sem risus, sagittis id pulvinar non, porta eget tellus.
Praesent in lorem vel dolor vulputate malesuada. Morbi ut quam
ut enim sagittis ullamcorper vel sed ligula. Cras viverra dolor quis
velit elementum tempus adipiscing est volutpat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum porttitor tortor in tellus aliquam commodo. Vestibulum
a laoreet ante. Aenean non orci sem. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

It's worth noting that the text I've used for the test paragraphs above is called lorem ipsum text. It's basically filler text with some nice spacing that is often used during a website design process.

br

Another form of separating text is simply using a line break -- like a "carriage return" in most word processing programs. Line breaks are created in HTML by using the 'empty' br element. When I say it's an 'empty' element, I mean that it's a bit like the link element because it doesn't have an ending tag. In XHTML you'll need (to make your code valid) to use <br/> instead of <br> - remember that the slash can also be used in other version of HTML, but it's personal preference. Obviously there are many situations in which you just need to insert a force line-break - but be careful that you don't use these line breaks for design aspects in which having a margin on an element might be better (we'll learn more about these in the future). It's a bit weird on the whole that we specify line breaks in the HTML since they are simply styling and not part of the structure of the document, however the br element remains in the specification, mainly for ease of use. An example usage is:

1
2

Dev-HQ.net is awesome.<br/>
It helps me learn HTML and CSS.

hr

Sometimes it's useful to have a horizontal rule (line) across the page to separate content out. This is achieved using the empty hr tag in HTML. As with br, a forward slash after hr is optional in most versions of HTML, but it required in XHTML. Also like br, it's a bit strange that a horizontal line across the page is specified in the HTML of the document, when it really belongs in the CSS - but the hr element has made it's way into the modern specifications, mainly because of ease of use.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum diam lorem, sollicitudin ut vulputate at, posuere non arcu.
Duis fringilla consectetur nisi sit amet elementum. Nulla sed mi vitae
arcu ullamcorper dictum quis eu ligula. Nulla tincidunt vehicula suscipit.
Mauris id enim ac sapien blandit varius. Morbi eget porttitor diam.
Nulla aliquam leo sed lacus imperdiet pretium. Cras vel leo vitae mauris
pellentesque dignissim. Donec feugiat urna in enim tempus ornare.
Nam a lorem at sapien lobortis auctor.</p>
<hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum diam lorem, sollicitudin ut vulputate at, posuere non arcu.
Duis fringilla consectetur nisi sit amet elementum. Nulla sed mi vitae arcu
ullamcorper dictum quis eu ligula. Nulla tincidunt vehicula suscipit.
Mauris id enim ac sapien blandit varius. Morbi eget porttitor diam.
Nulla aliquam leo sed lacus imperdiet pretium. Cras vel leo vitae mauris
pellentesque dignissim. Donec feugiat urna in enim tempus ornare.
Nam a lorem at sapien lobortis auctor.</p>

Headings!

While we're talking about some new elements - headings seem to naturally fit into the topic here! Headings are accomplished in HTML using the different header tags. These range from h1 (the biggest heading on the page) to h6 (the smallest heading on the page). You then just end the element using the 'normal' ending tags (/h1, /h2 etc.).

1
2
3

<h1>I'm a big heading!</h1>
<h2>I'm a slightly smaller and less important heading!</h2>
<h6>No one loves me :(</h6>