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.- 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 the
code 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:- To confirm deletion of your account, type <kbd>DELETE</kbd>.
kbd can also be used to represent actual keyboard keys.- 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:- 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.- ...the <kbd>Ok Google</kbd> hotword isn't actually disabled according to region
- 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.
- .button-input {
- border: 1px solid #333;
- background: linear-gradient(#aaa 0%, #555 100%); /* W3C */
- color: #fff;
- padding: 3px 8px;
- border-radius: 3px;
- box-shadow: 0px 2px 0px 0px #111;
- }
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:- <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.- <dfn>Breadcrumbs</dfn> or <dfn>breadcrumb trail</dfn> is a navigation aid
- used in user interfaces. It allows users to keep track of their locations within programs or documents.
- 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.
