Main Points

  • Inline Elements Less complicated elements for structuring small portions of text.
  • Block Level Elements Container elements for structuring large sections of text and even other container elements.
  • Caveat Did we mention you can change anything?
  • Skip to Main Points links return to the Main Points menu.

One of the most fundamental concepts in CSS is the idea of block level elements. Gaining an understanding of how they operate and the differences in working with their counterparts, inline elements, is critical to taking some of the headaches out of your CSS work.

Inline Elements

These are basic HTML elements that lack some CSS functionality. Typically, anything related to the borders, margins, height, width, or padding, may work strangely or not at all. You can place an inline element inside a block level element or another inline level element. That's one of the advantages of an inline level element, they're very flexible and can be used anywhere; they're also important because they can be used to mark up sections as small as a sentence, a word, or even a single character. Inline elements rest in the visual flow of a webpage; if you place two inline elements, they will try to render as simply as possible one right after the other. Take this pair of <code> elements for example, they appear next to each other.

First piece of code. Second piece of code.

Different browsers render these inline elements differently, though you can style their appearance with CSS. Here are the Web Standards approved inline elements. Each sample is marked up with the tag so you can see it's output.

    Scientific & Computer Elements

  • <code> - Indicates computer code. Rendered in a monospace font.
  • <label> - . Rendered in a normal font.
  • <sub> - Indicates subscript text. Frequently used in mathematical and scientific formulas, e.g. H2O. Rendered in normal font, but lower. By default, it appears normal size in all current browsers, though this defies standard scientific and mathematical conventions. Like most websites, we have reduced the font size in our CSS which is why it does not display full size here.
  • <sup> - Indicates superscript text. Frequently used in mathematical and scientific formulas, e.g. E = mc2. Rendered in normal font, but higher. By default, it appears normal size in all current browsers, though this defies standard scientific and mathematical conventions. Like most websites, we have reduced the font size in our CSS which is why it does not display full size here.
  • <var> - Indicates a variable in computer code. Rendered in an italic font.

    • Tutorials

  • <kbd> - Indicates information to be entered on your keyboard, usually as part of a tutorial along with the computer responses using <samp>. Rendered in a monospace font.
  • <samp> - Indicates a sample response from a computer, usually as part of a tutorial along with the text for user input using <kbd>. Rendered in a monospace font.

    • Verbal Elements

  • <abbr> - Indicates an abbreviation - a shortened form. Examples are ft. for foot, lb. for pound, Mr. for Mister, abbr. for abbreviation, etc. Includes initials like US for United States, NW for Northwest, UN for United Nations, and e.g. exempli gratia (Latin, "for example"). Practically, it isn't used in these obvious cases, but it is very appropriate wherever a shortened form might cause confusion, and your visitors would be helped by the full form. Like <dfn> which it is often used with, it should be used for the first instance of an abbreviation only. You can then assume your audience will remember the meaning throughout the rest of the page. (Note: Sometimes confused with <acronym> which has stirred endless debate; here's the general rule of thumb - always use <abbr> how's that for easy. 99% of the time you'll be right and 1% of the time you'll have made a mistake, oops. 99% of the <acronym> tags on the internet today are completely or partially wrong. Always use <abbr>. Rendered in a normal font.
  • <cite> - Indicates a citation from another source, and typically uses the title attribute to specifically identify the source of the information as well. Rendered in an italic font.
  • <dfn> - Indicates the defining instance of a word, e.g. the first time you refer to NATO where you define it as "North Atlantic Treaty Organization"; thereafter you can simply say NATO and assume the reader will remember for the rest of the webpage. Rendered in an italic font.
  • <del> - Indicates deleted text that should be understood to be removed from the document. Rendered with a line-through. (sometimes called strike through)
  • <ins> - Indicates inserted text that has been added to the document since it was created. By default, it appears underlined in all current browsers, which is a crazy silly thing to do. We have turned this off in CSS which is why you don't see an underline here.
  • <q> - Indicates a quotation inserted into your text. In practice, this should take the cite attribute in order to specify the source of the quotation (just like the <cite> tag should take the title tag). Rendered in a normal font.

    • Primary Inline Elements

  • <a> - defines a link in a document, the single most important element in XHTML. Uses the href (hyperlink reference) attribute to specify the webpage to link to. By default it is rendered underlined in blue.
  • <em> - Indicates text to emphasize. Apply classes and / or ids to clarify for yourself the reason the text needs to be emphasized or for CSS styling purposes. Note that even with a class and / or id, browsers will not understand why the text is emphasized. This is the key reason that the <em> tag is for general purpose emphasis; if you are trying to emphasize text because it is a quote, inserted text, etc. don't use <em>, use the more specificly appropriate tag. Don't use <em> to apply italics, use CSS to style your text and apply a class, if necessary. Rendered in an italic font.
  • <strong> - Indicates text to strongly emphasize. Apply classes and / or ids to clarify for yourself the reason the text needs to be strongly emphasized or for CSS styling purposes. Note that even with a class and / or id, browsers will not understand why the text is emphasized. This is the key reason that the <strong> tag is for general purpose emphasis; if you are trying to emphasize text because it is a quote, inserted text, etc. don't use <em>, use the more specificly appropriate tag. Don't use <strong> to apply bold font, use CSS to style your text and apply a class, if necessary. Rendered in a bold font.
  • <span> - Indicates text to note as special, <span> is the tag you use when none of the other inline tags seems appropriate. Rendered in a normal font.
Skip to Main Points

Block Level Elements

These are HTML elements that serve as containers and as such have full CSS functionality. You can place a block level element inside another block level element, but you may Not place one inside an inline level element. Browsers will behave strangely because the programming for block level element is incompatible with the freedom that inline elements provide. The most important conflict is that block elements create their own space in the document, inserting margins, or at least, line breaks before and after the element. So while you could technically mark up small pieces of text using a block level element, it will wind up on it's own line. While there are ways around this with CSS, you can see this is a problem created by not using a more appropriate inline element. In strict DOCTYPEs, only block level elements are permitted inside the <body> of the document. Any inline elements you use are supposed to be nested inside a block level element.

    Specialized Block Elements

  • <address> Indicates the contact information of the page's author. As this is a very good way to have your identity stolen, I don't recommend this practice. It is Far better practice to build a reliable contact form in any case; consider this one more reason.
  • <blockquote> - Indicates a long quotation inserted into your text. (as opposed to short quotations which are marked up inline with the <q> element) In practice, this should take the cite attribute in order to specify the source of the quotation. (just like the <cite> tag should take the title attribute)
  • <fieldset> - Indicates a related group of form elements. Used in conjunction with the nested <legend> tag which describes the content of the fieldset. (just like the <caption> tag should be used to provide a title for a <table> element) <fieldset> elements allow you to visually group related form elements and it displays a border by default. You may nest one or more <fieldset> elements inside a <form> element.
  • <form> - Indicates a group of form elements. The <form> tag includes the all-important action attribute which specifies the webpage with instructions for processing the user input when the user submits the form.

    • List Elements

  • <dd> - Indicates a definition description in a definition list. It is only used nested within a <dl> element.
  • <dl> - Indicates a definition list, contains definition terms marked up by <dt> elements and the accompanying definition for that term <dd>. (technically, definition description)
  • <dt> - Indicates a definition term in a definition list. It is only used nested within a <dl> element. For example...
    Definition Term
    Definition Description
  • <li> - Indicates a list item which may be nested in either an ordered <ol> or an unordered <ul> list.
  • <ol> - Indicates an ordered list, which displays numbers before each item. Contains list items marked up by <li> element. For example...
    1. List Item 1
    2. List Item 2
  • <ul> - Indicates an unordered list, which displays bullets before each item. Contains list items marked up by <li> element. For example...
    • A List Item
    • Another List Item

    • Primary Block Elements

  • <div> - Indicates a block that's special, <div> is the tag you use when none of the other block elements seems appropriate.
  • Headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> - Indicates a title or subtitle within the web page. Very simple, but critical accessibility and SEO practice.
  • <p> - Indicates a paragraph of text.
For example... This is text in a div

This is a level 4 heading

This is a paragraph

Skip to Main Points

Caveat

Keep in mind that everything we've said so far is true. However... you can change the presentation of all of them by using the CSS display property. For example, we use this with the menus in the menu bar. Note that when the page first loads the menus are not present, a style rule sets them to display: none. "None" is a value which appears to remove the element from the page. In order to make the menu appear when you mouse over the menu bar, a javascript function changes the display from none to block. With the introduction of IE8, we have changed this practice. There is still an IE only statement that supports a javascript solution for IE6, however, we can now use the :hover pseudo-class to control the display property of the menus. [chroniclemaster1, 2009/07/09] This gives the list item elements their usual block level structure and the menu appears. However, you can apply the same style rule to an inline level element. This overrides its default behavior so that you can style the element like a block level element.

Contrarily, you can also use a third value of the display property, display:inline. The inline value either restores inline level behavior to an inline element or overrides block level behavior so you can style the element like an inline level element. Thus while elements have a default behavior, you are not constrained by it. You can change their appearance at will. That's why you can always use the appropriate tags so that browsers will not become confused; no matter what appearance you want, implement the look of the element in CSS. This practice will save you from a number of occasional, yet oh-so-hard-to-debug glitches. You'll thank me later.

Skip to Main Points
← Back to 1. CSS Tips
Continue to CSS / Design Play →
← ← Jump back to CSS / Design Play