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.
Click here to view code image
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>
7. <!-- Span -->
8. <p>Soon we'll be <span class="tooltip"> writing HTML </span> with
Search WWH ::

Custom Search