Semantic Markup

Built-in extensibility is where HTML really shines. By annotating your HTML elements with “class” and “id” attributes, whose names and meanings you’re free to dream up in whatever way suits you, you can effectively define your own markup language. TypeMetal was designed to help unlock the full potential of this extensibility, by making it easy and efficient to use.

Styling Using Classes: An Example

Any HTML element can be given one or more "class" names, that distinguish it as being of (a) particular kind(s). When you choose a set of class names and apply them consistently, you prepare your content to be easily, flexibly, and consistently sled using CSS.

“id” names can be leveraged in much the same way, but are somewhat less useful than “class” names for repeated application, since a given “id” name may only appear once in a given document.

Suppose, for example, that you frequently reference journal articles in your writing. You might define a "journal-article" class that you apply to such citations.

In HTML, you could mark up such a citation like so:

See <span class="journal-article">Advances on the Frontier of Ice Cream Flavor Research</span>.

When possible, it’s nice to choose an existing HTML element whose purpose is closely suited to the content you’re marking up. In this case, HTML’s <cite> element is appropriate, so instead of using the generic <span> element, you might instead write the above as:

See <cite class="journal-article">Advances on the Frontier of Ice Cream Flavor Research</cite>.

By inventing the class name “journal-article” and applying it to the text “Advances on the Frontier of Ice Cream Flavor Research”, you’ve effectively defined your own extension to HTML’s standard element set. If you use this class name consistently when marking up titles of journal articles that you reference, you’ll be able to identify all journal article references in the documents where you follow this convention, and you gain the ability to style them all consistently, using CSS such as the following:

.journal-article {
    font-style: italic;
}

As you develop your styling vocabulary for some particular set of documents, take advantage of the ability to codify that vocabulary using a TypeMetal snippet set. This helps you remember the conventions you’ve chosen, while making them easier to quickly find and apply while you’re writing.