HTML and CSS Reference
In-Depth Information
Block vs. Inline Elements
Most elements are either block- or inline-level elements. What's the difference?
Block-level elements begin on a new line, stacking one on top of the other, and
occupy any available width. Block-level elements may be nested inside one an-
other and may wrap inline-level elements. We'll most commonly see block-level
elements used for larger pieces of content, such as paragraphs.
Inline-level elements do not begin on a new line. They fall into the normal flow
of a document, lining up one after the other, and only maintain the width of their
content. Inline-level elements may be nested inside one another; however, they
cannot wrap block-level elements. We'll usually see inline-level elements with
smaller pieces of content, such as a few words.
Both
<div>
s and
<span>
s, however, are extremely valuable when building a website in
that they give us the ability to apply targeted styles to a contained set of content.
A
<div>
is a block-level element that is commonly used to identify large groupings of
content, and which helps to build a web page's layout and design. A
<span>
, on the other
hand, is an inline-level element commonly used to identify smaller groupings of text within
a block-level element.
We'll commonly see
<div>
s and
<span>
s with
class
or
id
attributes for styling pur-
poses. Choosing a
class
or
id
attribute value, or name, requires a bit of care. We want
to choose a value that refers to the content of an element, not necessarily the appearance of
an element.
For example, if we have a
<div>
with an orange background that contains social media
links, our first thought might be to give the
<div>
a
class
value of
orange
. What hap-
pens if that orange background is later changed to blue? Having a
class
value of
orange
no longer makes sense. A more sensible choice for a
class
value would be
social
, as
it pertains to the contents of the
<div>
, not the style.
1.
<!-- Division -->
2.
<div class="social">
3.
<p>I may be found on...</p>
4.
<p>Additionally, I have a profile on...</p>
5.
</div>
6.
7.
<!-- Span -->
8.
<p>Soon we'll be
<span class="tooltip">
writing HTML
</span>
with
Search WWH ::
Custom Search