Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 58

element is often abused by WYSIWYG (What You See Is What You Get) web author-
ing software as a quick and dirty spacer for adding padding between content. You have
likely seen markup such as the following, where an author has pressed the Enter key a
few times in their editor:
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
This is a prime example of (X)HTML being co-opted into acting in a presentational
manner. We find here multiple, pointless paragraphs, with a non-breaking space entity
inside (because of some browsers not displaying empty elements), but the effect should
really be achieved with CSS. A quick way of adding some space beneath your content
is to add a class to the relevant content:
<p class="section">Your content here.</p>
and then style the class with CSS to add padding on the top or bottom:
.section { padding-bottom: 3em; }
Note Use of ems has traditionally been the preferred unit of measurement by profes-
sional web developers, because it is a relative unit of length, and will resize proportion-
ally if the page is scaled up or down by the user (or developer). However, preference
for ems has become less pronounced in recent years as web browsers have become bet-
ter at handling resizing of absolute units (such as pixels). There is considerable debate
over whether to use ems or pixels for sizes. An em may be less intuitive to use, while a
pixel won't accommodate cascading size changes. It generally would not be a disaster
to choose one or the other, so go with whichever you feel more comfortable using. At
the end of the day you should be testing your pages under a variety of scenarios any-
way, so issues should reveal themselves pretty quickly.
Break in thought: hr
The hr element, or horizontal rule, has historically been a presentational element, but
it has been redefined to represent a thematic break between one piece of content and
another. The hr element came with several attributes— size , width , noshade , and
align —but all have been declared obsolete in HTML5, so CSS must be used for the
horizontal rule's style, as it should be.