Moving on, we’ve now reached pretty much the smallest elements you can give meaning. These are all inline elements, added around small pieces of content. As always, use them for their meaning, not for how they might look by default.
Formatting
These are your basic formatting elements. These are also the first thing you see in a text editor, such as Microsoft Office, and the things you’ll use most often.
| Tag | Description |
|---|---|
<strong> | To heavily emphasize text. (Bold by default.) |
<em> | To emphasize text. (Italic by default.) |
<sup> | For superscripted text. |
<sub> | For subscripted text. |
You probably know superscript/subscript from mathematics and science. But they’re also used for footnotes or references, and sometimes even remarks about a specific word. In general, they provide some details or extra info about the word to which they’re attached.
More specific tags
I’m honestly not sure why these tags were added early on (while HTML was being developed), but not others that you might expect (like an <email> tag). Anyway, here’s the table.
| Tag | Description |
|---|---|
<abbr> | For acronyms or abbreviations. |
<address> | For contact information, both physical (like a location) or digital (email or social media). |
<dfn> | Specifies a word or term that will be defined inside the content. |
Quotes & Citations
Quotes are used when referring to something else, from another source, usually literally (without changing anything).
These are from “outside the flow” of the current text. For example, you can quote yourself … from ten paragraphs ago. Or you can cite the exact title of a book you’re going to talk about.
| Tag | Description |
|---|---|
<q> | For referencing a specific term or name mentioned earlier. (Most browsers add quotes by default.) |
<blockquote> | For referencing an entire string of text from another source. (Indented by default.) |
<cite> | For citing the exact title of a work, place, person, whatever. (Italic by default.) |
If you’re not used to it, you might forget when to use one of these tags. Remember the general rule: it’s for referencing external things, outside the flow of the current content. (Often literally, but it doesn’t need to be.)
Editing
Most formatting standards arose from editing. As most writers know: “all writing is rewriting”. It wouldn’t surprise me if more time is spent on marking edits and changes for novels, than actually formatting the original novel.
This is still true for webpages, depending on your purpose. For example, you often see authors updating blog posts after publishing them. They’ll use these elements to signal what changed, so visitors know the original article was different, or that updates were added.
| Tag | Description |
|---|---|
<del> | For content that has been (or should be) deleted. |
<ins> | For content that has been (or should be) inserted. |
<mark> | For content that should be highlighted or marked for whatever reason. |
The <mark> tag can be used similarly to a real life (colored) marker, used to highlight passages of a text book.
Conclusion
Next chapter will also talk about text formatting, but only tags related to computer (code) content.
Why? Because it has many tags, including a few crucial ones related to that “whitespace collapsing” that HTML does. If you don’t aim to markup content related to computers or code, you can skip it.
But I promise it’s useful information, and I will explain why there are so many computer-related tags.
Want to support me?
Buy one of my projects. You get something nice, I get something nice.
Donate through a popular platform using the link below.
Simply giving feedback or spreading the word is also worth a lot.