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:
Recommended Reading: Obtaining User Location With HTML5 Geolocation API
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 thecode
and pre
elements.
2. Keyboard Input Element
Keyboard Input Element or kbd
is an element that defines a user input. Similar to the samp
element, 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 Ok Google hotword isn't actually disabled according to region and can be easily enabled in just two steps.
Similar to samp, kbd
also 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.
Final Thought
Instead of using a generic element like div
or span
, it is better to wrap your content within a more semantic element as listed above, so that the machine – be it an Application, a bot, or a reading device – could better understand the content. Hopefully, this article can be a good reference for getting started.
via hongkiat.com http://ift.tt/1l7oVyU