5 HTML attributes you probably didn’t know about 🤓

365kim
3 min readJan 22, 2023

--

It’s no surprise that you might encounter alien HTML attributes even today, considering more than 100 tags exist in HTML5, and each HTML tag has different HTML attributes to support its role.

Photo by Jackson Sophat on Unsplash

Today, I will introduce 5 HTML attributes I newly learned from real-world development projects, which are:

  • enterkeyhint
  • aria-activedescendant
  • title
  • accept
  • rel=’canonical’

1. enterkeyhint

enterkeyhint is an HTML attribute that allows you to customize the label of the enter key on virtual keyboards.

<div enterkeyhint='enter' />
A Virtual Keyboard in Mobile
Virtual Keyboards with different enterkeyhints

It accepts 7 values:

  • enter: inserts a new line.
  • done: closes the input method editor.
  • go: takes the user to the target of the text typed.
  • next: takes the user to the next field that will accept text
  • previous: takes the user to the previous field that will accept text.
  • search: takes the user to the results of searching for the text typed.
  • send: delivers the text to its target.

Note that how it is displayed also depends on the user agent as well as the user language.

To set this attribute in React, you can pass a prop ‘enterkeyHint’.

<MyComponent enterkeyHint='search' />

If you don’t set it, the agent might assume the most suitable one among the 7 values from the contextual information.

🔖 Reference

2. aria-activedescendant

aria-activedescendant is a useful HTML attribute when you want to let the screen reader know where the focus is on, regardless of which value is selected at the moment.

The focus is on Blue, not on Red.

🔖 Reference

3. title

title is the easiest way to make a tooltip effect. All you have to do is to set the title attribute with the value of what you want to show on the tooltip.

Basically, the attribute is inherited. You can set it to the empty string(‘’) if you want to stop showing the tooltip.

<div title="CoolTip">
<p>Hovering here will show "CoolTip".</p>
<p title="">Hovering here will show nothing.</p>
</div>
Hovering on the second sentence will show no tooltip.

Note that there’re some accessibility concerns, because of inconsistent browser support for better accessibility support.

🔖 Reference

4. accept

accept helps users select the correct file types more quickly when using an input tag as the file type.

The example shows how to give hints for browsers to accept only pdf file format.

<input type="file" accept=".pdf">

To accept multiple file types, you can pass a comma-separated value.

<input type="file" accept="image/png, image/jpeg">

You can also use the wild card(*) to accept a type of any format.

<input type="file" accept="video/*">

🔖 Reference

5. rel=”canonical”

Finally, rel=”canonical” is useful for Search Engine Optimization.

Imagine you have multiple URLs with the same content. The crawler then thinks they are all different content and marks them separately, leading to a lower SEO score.

To tackle this problem, you can add rel=”canonical” with a link tag in the head section to all duplicate pages.

rel=”canonical” defines the genuine URL. (Canonical means ‘according to canon law.’ or ‘included in the list of sacred books officially accepted as genuine.’ by the dictionary.)

// https://www.mysite.com/random-event.html

<head>
<link rel="canonical" href="https://www.mysite.com/genuine">
</head>

Now, the crawler understands this page(/random-event.html) is a duplicate of that page(/genuine.html).

🔖 Reference

Please feel free to correct me or advise me of anything to improve.

--

--

365kim

Web Front-End Developer who believes Every Day Counts!