Tag Alternatives

This code was created to provide alternatives to avoid using tags where line breaks are needed for formatting purposes.

This demo will begin with an example where NO line breaks are used and then progressively introduce examples where line breaks can be implemented in different ways.

1. No Line Breaks

Notes:

Without tags or block elements, the text in the HTML output below will flow together wrapping to the next line only when reaching the right side border.

Output:

Here are some random lines that, for some reason, require special points for specific line breaks.

HTML: (No line breaks)

<p>
  Here are some
  random lines that,

  for some reason,
  require special
    
  points for specific
  line breaks.
</p>

CSS:

  /* No CSS Required */

2. Using (Discouraged)

Notes:

The output below uses one tag and multiple tags to explicitly set line breaks after 2 to 3 words and after every other line.

However, tags should NOT be used for the purposes of formatting where CSS and semantic tags can be used instead.

Output:

Here are some
random lines that,

for some reason,
require special

points for specific
line breaks.

HTML: (8 tags)

<p>
  Here are some<br>
  random lines that,<br>
  <br>
  for some reason,<br>
  require special<br>
  <br>
  points for specific<br>
  line breaks.<br>
</p>

CSS:

  /* No CSS Required */

3. Using per Line

Notes:

The output below matches the previous example. However, this example makes use of tags + CSS to accomplish the same results.

The CSS applies 2 changes to this context:

Change from an inline to a block element.
Apply a padding-top to the 3rd and 5th tags.

The inner dashed borders around two of the lines indicates where padding-top style was applied to the 3rd and 5th tags.

Output:

Here are some random lines that, for some reason, require special points for specific line breaks.

HTML: (6 sets of tags)

<p>
  <span>Here are some</span>
  <span>random lines that,</span>

  <span>for some reason,</span>
  <span>require special</span>
    
  <span>points for specific</span>
  <span>line breaks.</span>
</p>

CSS:

p > span { display: block; }
p > span:nth-child(2n+3) { 
  padding-top: 1.2em; 
}

4. Using Single (Preferred)

Notes:

The output below matches the previous 2 examples. However, this version is a simplified version of the previous example just reviewed.

Rather than placing tags around each line, a single tag is placed around the 3rd and 4th lines.

The rest is accomplished with CSS.

The CSS for this version applies the following changes:

Just like the previous example, change from an inline to a block element.
Apply a padding to the top and bottom of the single tag to accomplish the same spacing effect.
Specify a fixed width on an inner container to force the lines to break at a specific location.

See the outer dashed border around the entire paragraph to see the container width sized for the appropriate line breaks.

See the inner dashed border around the 3rd and 4th lines to see where the tag was applied.

Output:

Here are some random lines that, for some reason, require special points for specific line breaks.

HTML: (1 set of tags)

<p class="simple">
  Here are some
  random lines that,

  <span>for some reason,
  require special</span>
    
  points for specific
  line breaks.
</p>

CSS:

p { width: 152px; }
p > span { 
  display: block;
  padding: 1.2em 0;
}

<br> Tag Alternatives

1. No Line Breaks

Output:

HTML: (No line breaks)

CSS:

2. Using <br> (Discouraged)

Output:

HTML: (8 <br> tags)

CSS:

3. Using <span> per Line

Output:

HTML: (6 sets of <span> tags)

CSS:

4. Using Single <span> (Preferred)

Output:

HTML: (1 set of <span> tags)

CSS:

br Tag Alternatives