Skip to main content

Marking Up Text

You must assign an element to all the text in a document. In other words, all text must be enclosed in some sort of block element. Text that is not contained within tags is called "naked" or "anonymous text", and it will cause a document to be invalid. It will also make your page impossible to style with CSS later on.


Choose elements that describe your content as accurately as possible.

You should always choose elements that describe your content as accurately as possible. If you don’t like how it looks, change it with a style sheet. A semantically marked up document ensures your content is available and accessible in the widest range of browsing environments, from desktop computers to cell phones to screen readers. It also allows non-human readers, such as search engine indexing programs, to correctly parse your content and make decisions about the relative importance of elements on the page.

Your content should also read in a logical order in the source. Doing so improves its readability in all browsing environments. Information that should be read first should be at the beginning of the XHTML source document. You can always use style sheets to position elements where you want them on the final web page.


Building Blocks

Block-level elements make up the main components of content structure.

Most browser's built-in style sheets will cause block-level elements to start on a new line and usually have margins added above and below, stacking up like blocks in the normal flow of the document.

Block-level elements
Headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Paragraphs <p>
Long quotes <blockquote>
Preformatted text <pre>
Various list elements <ol>, <ul>, <li>, <dl>, <dt>, <dd>
Horzontal rules <hr>


Inline-level elements

Inline text elements fall into two general categories: semantic elements and presentational elements. Browser default styles usually cause these elements to flow inline, or just stay in the flow of text and do not cause line breaks.

The semantic elements describe the meaning of the text; for example, an acronym or emphasized text. The presentational elements provide descriptions of the element’s typesetting or style, such as bold, italic, or underlined.

It should come as no surprise that the presentational inline elements are discouraged from use in contemporary web design where style information should kept be separate from the markup. So let's just examine the semanic elements:

Semantic inline-level elements
Element Description
<abbr> abbreviation
<acronym> acronym
<cite> citation; a reference to another document, such as a book title
<code> program code sample
<del> deleted text; indicates an edit made to a document
<dfn> the defining instance or first occurrence of a term
<em> emphasized text
<ins> inserted text; indicates an insertion in a document
<kbd> keyboard; text entered by a user (for technical documents)
<q> short, inline quotation
<samp> sample output from programs
<strong> strongly emphasized text
<var> a variable or program argument (for technical documents)


Tables & Forms

Tables and forms are also block-level elements, but require more than one element to function. Additionally, form elements have required attributes, such as type, name, and value that define their functionality. Examine this document's source code as an example.

table elements form elements
<table> <form>
<caption> <input>
<thead> <select>
<th> <option>
<tfoot> <textarea>


Generic Elements <div> and <span>

There are endless types of information in the world, but not all that many semantic elements. XHTML provides two generic elements that can be customized to describe your content perfectly. The <div> (short for “division”) element is used to indicate a generic block-level element, while the <span> element is used to indicate a generic inline element. You give a generic element a name using either an id or class attribute.

The <div> and <span> elements have no presentation qualities of their own, but you can use CSS to format the content however you like. Generic elements are a primary tool in standards-based web design because they enable authors to accurately describe content and offer plenty of hooks for adding style rules.