There are three parts of web design:
- the behaviors
- the styles
- the content
Defining the Semantics of Content—What Does That Mean?
Content is more than just text on a page. Most content has a function of some type. On HTML pages, the function of most text is as paragraphs within a larger document. However, some text holds meaning beyond just as a paragaph block. This meaning is defined in HTML tags that are semantic.
A semantic HTML tag is one that defines a meaning to the enclosed content that a computer can be programmed to understand. In most cases, browsers create some visual difference to content in semantic tags, for example, content in the
CODE element is usually displayed in a monospaced font. But this is not a requirement.
Many people feel that semantic HTML elements are a waste of bandwidth. “These elements do nothing, and so shouldn’t be used,” they will say. But semantic HTML provides clues to the meaning of the content and can help make that content more accessible to everyone. My article Why Use Semantic HTML goes into more detail about why semantic HTML is important.
Semantic HTML Elements
There are a number of HTML elements that serve a semantic purpose beyond just the HTML tag.
HTML—the primary tag on a page. It tells the user agent that this document is HTML.
HEAD—another basic tag. This does no formatting at all, just tells the browser that there is header information enclosed.
TITLE—this tag describes the text enclosed as the title. Browser convention is to display the title at the top of the browser window.
BODY—this tag defines the body content for a Web page.
ADDRESS—this tells the browser that the enclosed text is an address.
ACRONYM—the enclosed text is an acronym, and you can include a title attribute to define the acronym. Some browsers display the title when you mouse over it.
CITE—indicates that the enclosed text is a citation.
CODE—while this is usually displayed in mono-spaced font, all it is saying to the browser is that the enclosed text is programming code.
DEL—an interesting tag, this tag indicates text that has been deleted from a document, and includes the deletion date and a URL for any explanations.
DFN—the definition tag allows you to highlight text the first time you use it, and define it. Dictionary-type search engines might use this tag to create dynamic dictionaries.
EM—emphasis. One of the oldest descriptive tags, it normally displays in italics, but it is really meant to emphasize the enclosed text.
INS—insert is the counterpart to the delete tag.
KBD—similar to the code tag, the keyboard tag indicates text that should be typed in at a computer.
Q—the quotation tag is similar to the cite tag, but it also includes information about the source of the citation (in a cite attribute).
SAMP—yet another computer related tag, this one defines sample code or text such as in a directions list.
STRONG—the counterpart to the emphasis tag, strong denotes text that has a strong emphasis. It is usually displayed in bold, but it is up to the browser.
VAR—the variable tag is for computer code to denote variables in the text, such as file names in a command.
HTML5 Semantic Elements
HTML5 adds several new elements with a semantic meaning.
MARK—text that should be highlighted or stand out for reference purposes.
METER—content that is a scalar gauge within a known range.
PROGRESS—content that describes the completion progress of a task.
TIME—content that is a date or time.
HTML5 also changed the meaning of some elements to give them a semantic context:
B—Beyond turning the enclosed text bold, this element now defines text that would normally be displayed as bold, but does not have any extra emphasis.
HR—This element adds a horizontal line in the text and now represents a thematic break in the document.
I—Beyond turning the enclosed text italic, this element now defines text that would normally be displayed in italics, but does not have any extra emphasis.
S—Beyond drawing a line through the enclosed text, this element now defines content that has been “struck” from the document.
SMALL—This makes the text smaller and represents “small print” such as in legal documents.
U—Beyond drawing a line under the enclosed text, this element now defines content that would normally be displayed underlined.