5 HTML Elements You Should Know

Before, we’ve gone in-depth about HTML5 elements and shown what they do. HTML5 brought us new elements like header, footer, aside, nav, and main. These additions made our web pages smarter because they tell computers what each part of the page is for.

However, HTML is a big topic. If you take a look at the W3.org website, where all the details are kept, you’ll see there’s a lot to learn. With so much information, you might not have noticed some HTML elements. Here are a few you may have missed:

Understanding the Sample Element

The ‘Sample Element’ or samp is used to show text output from a computer, program, or script. Believe it or not, it’s been around since HTML3! It’s really handy for tech guides or instruction manuals.

Look at this example where we use it to show an error message in Terminal.

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

This element is supported by all web browsers, including older ones like IE5. They will display it in a Monospace font, which is the same style used for the code and pre elements.

Exploring the Keyboard Input Element

The kbd element, also known as the Keyboard Input Element, is used to represent user input. Just like the samp element, the kbd is often seen in technical or computer-related articles.

For instance, if you need to tell your readers to type certain characters in an application’s input field, you would use the kbd element like this:

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

The kbd element can also denote actual keys on a keyboard.

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

When paired with the samp element, kbd can signify inputs made via the application’s interface, such as buttons or menus. Here’s an example:

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

Although primarily for “Keyboard Input,” the kbd element can also be used for other types of input like voice commands. For tutorials involving voice commands with Siri, Google Voice, or Cortana, you can enclose the spoken words within a kbd tag.

 ...the <kbd>Ok Google</kbd> hotword isn't region-locked and can be activated in a couple of steps.

By default, the kbd is displayed in Monospace just like the samp element.

Adding Style to Distinguish Elements

While these elements are beneficial for machines to understand content, they look the same to readers because they’re all shown in Monospace. To differentiate them, we can style them uniquely.

Let’s say we want to make keyboard keys or app buttons stand out. We could assign them a class like button-input.

Then we’d add these CSS styles:

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

This styling will give them a realistic button appearance.

Understanding the Variable Element

The var element, short for Variable Element, is utilized to indicate a variable in mathematical expressions or programming contexts. This tag is particularly handy when writing tutorials that include equations:

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

In the example above, the entire equation is encapsulated in a code element because it represents a line of JavaScript code. The variable within that equation, ‘y’, is wrapped with a var element to denote it as a variable.

Highlighting Terms with the Defining Element

The dfn element, or Defining Element, is used to signify a term being defined or introduced, often seen in specialized fields or industries laden with jargon. Here’s how you might use dfn to define industry-specific terminology:

 <p><dfn>Breadcrumbs</dfn> or <dfn>breadcrumb trail</dfn> are used in user interfaces to help users track their locations within programs or documents. The term is derived from the breadcrumb trail left by Hansel and Gretel in the classic fairy tale.</p>

Web browsers typically render the dfn element in italics, aligning with the traditional typographic practice of introducing a new or foreign term.

The Mark Element: Highlighting Text in HTML5

Introduced in HTML5, the mark element is designed to highlight parts of text that should stand out to the reader. By default, it’s displayed in a bright, attention-grabbing color:

Further information and examples of the mark element can be found in the W3C’s documentation on Text Level Semantics – Mark Element.

Final Thoughts on Semantic HTML

Rather than defaulting to generic tags like div or span, it’s advantageous to use more semantic elements. This practice helps machines — whether applications, search engine bots, or assistive devices — to better parse and understand the content. Hopefully, this exploration serves as a helpful guide for those looking to adopt more meaningful HTML structures.