demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

The Two Kinds of Element: Block and Inline

html / elements

Estimated reading time: 1 minute, 37 seconds

Broadly speaking, there are two ways elements used around text can display their textual content by default. These are often referred to as block elements and inline elements.

Block elements influence entire sections of content. <p> is a block element: it specifies and sets apart an entire block of text. The heading tags <h1>…<h6> and <address> are also block elements. Visually, block elements will always render their content on separate lines: in other words, forcing a line break.

Inline elements influence a part of something without affecting the content immediately surrounding them. There would be little point that if every time we wanted to render text in italic, the browser forced the italicized text onto a new line. Instead, we want to render italic text together with normal text in the same line – that is, inline with the rest of the text.

Several important final points must be added:

  1. Inline elements must always be used in the context of block elements. For example, you cannot use <q> by itself to markup a quotation. Instead, it would typically be nested inside a <p> tag that provides a broader context:

    <p><q>Once more unto the breach, dear friends</q>, wrote Shakespeare.</p>
  2. While there are exceptions, a good rule for basic text formatting is that block elements may not contain other block elements. While inline tags inside of block tags is perfectly okay:

    <h1>The <em>Destiny</em> Corporation<h1>

    This does not make any sense:

    <p>This is a typical, and wrong-headed, attempt to make text <h1>bigger</h1> in a paragraph</p>

    This is also a common mistake:

    <p><h1>Is this content a heading, or a paragraph? It can’t be both, but that’s exactly what the markup surrounding it says.</h1></p>
  3. The display property of an element may be changed via CSS: that is, you can turn a tag that is block by default to display inline, and vice-versa. However, that possibility does not change the rules above, which still need to be followed.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.