Mark up text using structural tags

The Web offers a means to describe the function of text as opposed to simply defining its physical properties. A well-tagged Web document has layers of information beyond the printed page. When a printed paragraph contains a line of italicized text, the reader must determine the rationale: Are the italics intended for emphasis, to indicate a defined term, or to mark a foreign word or a citation? On the Web that same text can be tagged as EM for emphasis or CITE for citation. Basic HTML provides tags to identify structural elements such as lists, headings, tables, emphasis, acronyms, citations, and much more.

Structural markup creates machine-friendly text that can be put to many uses. For example, search engines can read heading tags, determine what a page is about, and index it accurately. Screen reader software can use markup to convey emphasis to the listener or to provide a page overview by reading only page headings. With structured documents, software could be designed to extract all occurrences of citations to generate a Works Cited document, or all occurrences of headings to create a table of contents. The potential uses for structurally encoded Web documents are limitless. However, for this potential to be realized, designers must employ correct, consistent use of standard Web markup.

When designing Web documents, designers should favor structural tags, such as H1-H6 for headings and EM for emphasis, over tags that only define the physical properties of a word or phrase, such as B for bold and I for italics. For instance, rather than tag a section heading as big and bold, determine what level the heading is in the information structure of the page—the main heading or some level of subheading—and mark it accordingly. Then style the heading as big and bold using style sheets.