5 HTML Elements That You Probably Don’t Know

In the past we have covered a lot about HTML5 elements as well as demonstrating their functions. New elements such as header, footer, aside, nav, and main make our document structure more semantic or “meaningful”. In particular, these elements help machines to easily understand sections within the document.

But, HTML specifications are huge. If you visit W3.org where the documentation resides, you will find hundreds of pages documenting each element extensively. To this extent, there are possibly a few HTML elements that you have overlooked, and those include:

1. Sample Element

Sample Element or samp defines the output from a computer system, a program or a script. It was introduced far back in HTML3!. This element will be useful for tech tutorials or computer manuals. This example below shows how we wrap an error that occurred in Terminal.

view plaincopy to clipboardprint?

1. If you type dir in Terminal, it will output <samp>command not found: dir</samp>.   

All browsers, including IE5, support this element, and they will display it with Monospace typeface like thecode and pre elements.

2. Keyboard Input Element

Keyboard Input Element or kbd is an element that defines a user input. Similar to the sampelement, kbd would be commonly used in tech or computer-related articles.

Say, you want to instruct readers to enter particular characters in an input field of an Application. You can wrap the text characters with kbd, as follows:

view plaincopy to clipboardprint?

1. To confirm deletion of your account, type <kbd>DELETE</kbd>.  

kbd can also be used to represent actual keyboard keys.

view plaincopy to clipboardprint?

1. Press <kbd>Enter</kbd> to create a new line.  

But when used along with the samp element, it could represent input that is conducted through the Application screen such as the buttons or menus. Here is one example:

view plaincopy to clipboardprint?

1. Click <kbd><samp>Agree</samp></kbd> to proceed.  

Even though kbd element is explicitly described as “Keyboard Input”, we can also use it for other input type, such as a voice input. If you write tutorials or manuals on Siri, Google Voice, or Cortana that allow us to communicate with the device using voice commands, wrap the voice input this way.

view plaincopy to clipboardprint?

1. ...the <kbd>Ok Google</kbd> hotword isn't actually disabled according to region   
2. and can be easily enabled in just two steps.  

Similar to samp, kbdalso outputs with Monospace typeface by default.

Styling Suggestion

These elements help machines understand the content better. But since they are all rendered with Monospace typeface, readers will hardly see the difference. In this case, we can add some styling to make them look more distinct.

We can add a class, for example button-input if it represents a keyboard key or an Application button.

Then, in CSS, we put the following style rules.

view plaincopy to clipboardprint?

1. .button-input {  
2.     border: 1px solid #333;  
3.     background: linear-gradient(#aaa 0%, #555 100%); /* W3C */  
4.     color: #fff;  
5.     padding: 3px 8px;  
6.     border-radius: 3px;  
7.     box-shadow: 0px 2px 0px 0px #111;  
8. }  

This will make it look like an actual button.

3. Variable Element

Variable Element or var, as the name implies, represents a variable character. This element may be useful to write tutorials or articles that comprise of mathematical equations, such as:

view plaincopy to clipboardprint?

1. <code>var <var>y</var> = Math.sqrt(16);</code>  

In the above example, we wrap the equation with code element, as the equation is a JavaScript code. We only wrap the character that is a variable with var element.

4. Defining Element

Defining element or dfn is used to highlight a jargon or a specific term that is particularly used in a community or an industry. Web Development industry, for instance, is full of jargon that may not be well known outside the industry.

And below is an example where we use dfn element to wrap the word Breadcrumb; we took the following sentence from Wikipedia.

view plaincopy to clipboardprint?

1. <dfn>Breadcrumbs</dfn> or <dfn>breadcrumb trail</dfn> is a navigation aid   
2. used in user interfaces. It allows users to keep track of their locations within programs or documents.   
3. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.  

Browsers display it in italic, corresponding to the typographic convention to denote a new instance, or a foreign term.

5. Mark Element

Mark is a new element introduced as part of HTML5. In short, mark is used to highlight text that you want readers to pay attention to. Thus, by default, browsers render this element with bright fluorescent color as you can see below.

For more, you can head over to its documentation, Text Level Semantic – Mark Element, where you can see some detailed examples on the usage.