20+ HTML Elements to Write Better Text Semantics

HTML5 has several new layers, including a new set of semantic tags. While there is still some debate about whether or not we should be using and styling these tags I think at the very least we should start learning them.

The following HTML tags are used to format the appearance of the text on your web page. This can jazz up the look of a web page, however, too much variety in the text formatting can also look displeasing.


The <mark> Element

The HTML <mark> element represents highlighted text, i.e., a run of text marked for reference purpose. For example it can be used in a page showing search results to highlight every instance of the searched word. Most browsers will display the <mark> element with the background-color as yellow and color value as black.

Example:

<p>The <mark>marked</mark> text will be highlighted with a yellow color.</p>

The <code> Element

The HTML <code> Element represents a fragment of computer code. By default, it is displayed in the browser's default monospace font.
It's typically used to indicate sections of computer code that should not be executed, but rather should be rendered as readable code.

Example:

<p>An example of a regular text and <code>a piece of computer code.</code></p>

A CSS rule can be defined for the code selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.


The <cite> Element

The HTML <cite> element is used for representing a citation in an HTML document.
Text enclosed in <cite> tags is intended to represent the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theater production, a play, an opera, a musical, an exhibition, etc).

Use the <cite> attribute on a <blockquote> or <q> element to reference an online resource for a source.

Example:

<p><cite>The Red Light</cite> by Eric Simon. Painted in 1893.</p>

Most browsers will render cite content in italics, but this style can be overridden using CSS.


The <q> Element

The HTML <q> element indicates that the enclosed text is a short inline quotation. It is important to remember that the <q> tag is for inline quotations that don't require paragraph breaks; for long quotations use <blockquote> element.

Example:

<p>Did you know <q>The quick brown fox jumps over the lazy dog</q> contains every letter of the alphabet?</p>

In the above example, you should see quotation marks around “The quick brown fox jumps over the lazy dog.” If you don’t, I guess you’re using IE or Windows.
Most modern standards-aware browsers, like Chrome, Firefox, Safari, and Opera, should add quotes around text enclosed within the <q> element. Some browsers, like Internet Explorer, may not make any sort of style change for quotations, but it is possible to apply a style rule.

Most browsers will display the <q> element with the following default values:

q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}

The <samp> Element

The <samp> element purpose is to identify a sample of characters that form the output or result of a computer program. It is usually displayed in the browser's default monotype font (such as Lucida Console). Line breaks are handled just like elsewhere in HTML. Thus, in reality <samp> element is similar to the <code> element.

Example:

<p>To save the image file, select <samp>File</samp> - <samp> Save as... </samp></p>

Most browsers will display the <samp> element with the font-family value as monospace, a CSS rule can be defined for the <samp> selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.


The <kbd> Element

As the name might suggest, the <kbd> element is used to represent user input that is typically entered via a keyboard. You might use this when you are describing what a user would enter to carry out a specific task. It’s most likely to be found in online technical manuals or support sites.

Example:

<p>To undo your last action, press <kbd>Ctrl</kbd> + <kbd>Z</kbd>.</p>

Most browsers will render kbd content in a monospace font, but it’s possible to style its display with CSS (for example, setting a background color and a border to make the character appear a little more like a key on a keyboard).


The <s> Element

The <s> element specifies text that is no longer correct, accurate or relevant. The <s> tag is not appropriate to define replaced or deleted text, use the <del> element to define replaced or deleted text. An example of its usage can be found on ecommerce site, where a price tag is no longer relevant and a new one is been introduced.

Example:

<h1>T-shirts Locker</h1>
<p>Versace <s>$104.99</s> - Now $69.99
Burberry <s>$90</s> - Now $65
Zara <s>$94.55</s> - Sold Out</p>

The <s> puts a horizontal line (a strike-through) over its content by default. Note that using this will cause your page to be invalid in HTML 4.1/XHTML 1, 1.1. This element was first introduced in HTML 3.0, but was not carried through to HTML 3.2. Both <s> and <strike> are deprecated in HTML4.
If the strike-through is purely for presentational effect, you should use CSS to style the affected text instead of using this element.


The <data> Element

The <data> element along with the value attribute, links a given content with a machine-readable translation. If the content is time- or date-related, the <time> element should be used instead.

For example, you might like to display a list of products or services for your users to choose from. Each product has a unique product ID. Because the product ID is a lengthy number, and users probably won't know what the product is simply by looking at its ID. Therefore, you place the product ID into the value attribute of the <data> element. You then display the product title to the user.

Example:

<p>New Products</p>
<ul>
<li><data value ="764-46236099">Coffee cups</data></li>
<li><data value ="764-46236100">Spoon sets</data></li>
<li><data value ="764-46236101">Electric cooker</data></li>
</ul>

The <time> Element

The <time> element represents either a time on a 24 hour clock, or a precise date in the calendar, optionally with a time and a time-zone offset.

This element is intended as a way to encode modern dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user's calendar.

Example:

<p>We open at <time>09:00</time> every morning.</p>

<p>I have a meeting <time datetime="2014-11-17T14:00">next week</time>.</p>

<p>The concert took place on <time datetime="2014-11-01T12:00-05:00">November 01</time>.</p>

As you might have noticed from the above examples, we have 3 examples. The 1st example demonstrates basic usage of the <time> tag, the 2nd shows how to use the datetime attribute, which represents the date, time, or duration for whatever text you are representing in a machine readable format. That means it is for computers, not humans, so it has very specific formats, and must have a valid date with an optional time string, and the 3rd example uses the datetime attribute to provide an even more specific date.

Here's a well-detailed guide by Ty Strong about the <time> element.


The <hr> Element

The <hr> element creates a horizontal ruler, which can be used to separate different vertical sections of your webpage. Two paragraphs following each other with a <hr> element in between will have a horizontal line displayed in between them.

Example:

<p>HTML is a language for describing web pages...</p>
<hr>
<p>CSS defines how HTML should appear in browsers...</p>

Most browsers will display the <hr> element with the following default values:

hr {
border-style: inset;
border-width: 1px;
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
}

In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.


The <var> Element

The <var> variable elements represents a variable in a mathematical expression or a programming context. When text is put between the opening and closing <var> tag it is displayed as a variable text.

Example:

<p>A simple equation: <var>x</var>=<var>y</var>+2</p>

The <var> has good browser support; with all of the major browsers rendering the variable text in italics.


The <sup> Element

The <sup> (superscript) element defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.

Example:

<p>Value of 2² + 3³ =31</p>

Note that this element must not be used for styling purpose like the styling of the product name Latex. CSS style should be used: the vertical-align property with super as value will achieve the same effect.


The <sub> Element

The <sub> (subscript) element is an opposite of the <sup> element. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H₂O.

Example:

<p>The chemical formula of water is H₂0</p>

You can also achieve similar results using the vertical-align: sub; style property.


The <ins> Element

The <ins> element can be used to identify anything from a specific word or phrase that’s been inserted (in which case the ins is deemed to be an inline element) to an entire block of content, which could include a number of nested block-level elements. If the ins is an immediate child of <body> (with a Strict Doctypes declaration), it’s a block-level element. If it’s a child of a <p> element, it’s deemed to be an inline element.

Example:

<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page.</p>

Browsers will normally underline inserted text and strike a line through deleted text.


The <del> Element

The <del> element defines text that has been deleted from a previous version of the document. This element is commonly used together with the HTML <ins> element in situations when a piece of content is replaced by a new one.

Example:

<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page :)</p>

The <dfn> Element

The <dfn> element represents the defining instance of a term. This element has no element-specific attributes, the title attribute has special semantics for this element. If the <dfn> tag has a title attribute, then the exact value of that attribute is the term being defined.

If it contains only an <abbr> element with a title attribute, then the term is the value of that attribute. Otherwise, the text content of the <dfn> element is the term being defined.

The definition of the term should be given by the surrounding <p> , <section> or  definition list group (usually a <dt>, <dd> pair).

Example:

<p><dfn title="Microsoft web browser">Internet Explorer</dfn></p>

<p><dfn><abbr title="Internet Corporation for Assigned Names and Numbers">ICANN</abbr></dfn> is the international organization which helps ensure that Internet domain names are assigned in an orderly manner.</p>

Most HTML 5 browsers such as Firefox and Opera, display the text inside the <dfn> element in an italic font, WebKit browsers such as Chrome and Safari will display it in an upright font.


The <abbr> Element

The <abbr> element contains abbreviated text and is commonly used together with the title attribute to expand/explain the abbreviation.

Example:

<p><abbr title="HyperText Markup Language">HTML</abbr> is the best thing since sliced web.</p>

An <abbr> element does not necessarily need a title attribute, although it never hurts to include it. Marking abbreviations can give useful information to browsers, translation systems and search-engines.

The <abbr> element is supported by most browsers, but in varying visual styles. Internet Explorer seems not to support this tag, Firefox and Opera underline a marked-up abbreviation that has an associated title attribute with a light dotted line (this can be styled using CSS); Safari and Chrome recognize the <abbr> content, but with no underline. Firefox, Opera, Chrome and Safari all display the title attribute for the abbreviation as a tooltip on mouse over.


The <ruby>, <rt>, and <rp> Elements

The <ruby> element is used for specifying Ruby annotations, which is commonly used in East Asian typography.

As the name implies, Ruby characters are small, annotative glosses that can be placed above or to the right of a character when writing logographic languages such as Chinese or Japanese to show the pronunciation.

The <ruby> element is often used with the <rt> (ruby text) element, which describes the pronunciation of an individual character in a Ruby annotation, and the <rp> (ruby parentheses) element, which wraps opening and closing parentheses around <rt> ruby text. These are for user agents that don’t support ruby text, so that it makes sense when displayed inline. Browsers that support <ruby> hide <rp> via display: none;.

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>

The <wbr> Element

The <wbr> (Word Break Opportunity) element specifies where in a text it would be ok to add a line-break (indicated with an hyphen). When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities. This element can be very helpful for particularly long words, URLs, or sections of code.

Example:

<p>Remember that song from Mary Poppins 'Super<wbr>califragilistic<wbr>expialidocious'?</p>

The difference between the <wbr> tag and the <br> tag is that the <br> tag forces a line break. The <wbr> tag, on the other hand, simply represents a line break opportunity - the browser should only render a line-break if necessary.

When the <wbr> element is used inside the nobr (no break) element, its purpose is somewhat different. Rather than hinting at where a word break may occur, it tells the browser that a word break should occur (simply using a br element inside a nobr would not have any effect).


The <bdo> Element

The <bdo> (Bi-Directional Override) element is used to override the Unicode bidirectional algorithm. What it basically does was what, it reverse the direction of text enclosed between the opening <bdo> and closing </bdo> tags.

This is usually used with languages that are read in a different direction to the default language. For example, if Hebrew were used in an English document, it would need to be defined as being read from right-to-left.

Example:

<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

Note the presence of dir in the above code. It's used to specify the direction of text inside the <bdo> element. Other possible values are:

• ltr: Indicates that the text should go in a left-to-right direction.
• rtl: Indicates that the text should go in a right-to-left direction.
• auto: The browser decides which direction based on the element's content.

Conclusion

There you have it, an array of highly semantic and really nifty text-level elements to use in your work; some old, some new but all useful.

You can view the live demo of each elements below:

See the Pen Text-level HTML Semantics Elements by Durodola Ridwan (@durodolaridwan) on CodePen.

Not all browsers are supporting these tags, however you can still use them today. Most browsers not named Internet Explorer allow you to create any element you like and let you style those elements how you want. They simply won’t give those tags any default styling.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz