There are only so many HTML tags that people typically use when building websites. But as there are over 100+ HTML elements, I wondered if there were any more beginner-friendly tags that I didn't know about – and that others might find useful, too.

After doing some research, I came up with this collection of some less well-known, but still very useful, HTML tags. Here is a list of some very useful HTML tags that are less commonly used.

1. The <base> element

When you set the href attribute on an a tag to a relative URL, the default base URL it considers is the location.href URL. You can override this behavior by defining this tag above all HTML elements which deal with relative URLs.

For example, if I do this:

then, the href URL for the a tag will be https://syntackle.live/contact/. Keep in mind that there can be only one <base> tag per page. If you define multiple <base> tags, then only the first tag will be considered.

You won't need this element most of the time, but if you feel like all of the URLs on a page point to another site, then declaring it is beneficial. Keep in mind that this might not work in platforms like NextJS since they have a custom header.

However, NextJS also allows us to configure the base path in the config file. basePath allows you to set a path prefix for the application. For example, to use /docs instead of '' (an empty string, the default), open next.config.js and add the basePath config:

2. The <aside> element

You can use this element for any content not directly related to the main content of the page. It works well for displaying advertisements, related posts, promotional content, blockquotes, nav elements, and so on.

For example, in the above snippet, the post is mainly about dogs and their breeds. But if you wrote an article about cats and you wanted to link to it from the dog article, then you could use the aside element to mention it. The content in the aside element can be tangentially related to the page. One most use case is in articles to help readers ignore unnecessary contents.

3. The <search> element

You can use the <search> element as a container for elements dealing with search or filtering. For example, a form sending a POST request to get search results or a search component relying on JavaScript for filtering.

You should use this element because it provides semantic value to the browser and accessibility tools such as screen readers.

4. The <q> element

Most people just use quotation marks (") to quote something. But there is a dedicated HTML tag just for this. Using it, you can quote something from another source and by defining its cite attribute, you can also link to that source.

Output:

This is a quote from another source.

5. The <var> element

If you are dealing with math in your webpage, explaining a concept, or solving a problem, then this element can come in handy when mentioning variables while describing the problem.

Output:

These are three variables, a, b and c².

You can use this element to show a visual representation of known or unknown variables, as shown above.

6. The <samp> element

This element depicts the output from another software or computer system. There's also a kbd element (used for displaying user inputs) which is visually similar to this element.

You can use this element to display the output of the console or the output of a computer program.

Output:

    console.log(1 + 2)
    3

7. The <datalist> element

You might be familiar with the select element that lets you provide users with a bunch of options to select from. A similar element is the datalist element.

The only difference between them is the datalist element provides suggestions instead of a finite set of options. Users can also type in their own input if none of the suggestions match their requirements, whereas when using the select element, users must pick from the list of options in the dropdown.

You can use <datalist> with the input element so the user can type anything they want. Then if it matches the values in the datalist, the user can select that value.

In order to link the input element with the datalist, you'll need to use a list attribute on the input element. The value of the list attribute must be the id of the datalist. However, this has partial browser support as of now.

Output:

8. The <dialog> element

I consider this the most useful element nowadays because it saves you from the hassle of creating your own modal with z-index workarounds. But that doesn't mean you should overuse it. You can use it to create modal/non-modal interactive dialogs in order to alert users or show a one-time message.

For example, if you want to show a one-time message to users visiting your site, then you can wrap a form element in a dialog and then mention "dialog" as the form method. Clicking on the button inside the form will close the dialog.

This is a type of non-modal dialog and it doesn't require JavaScript. The open attribute tells you that the dialog will be shown as soon as the page loads.

To create a modal dialog, you need a bit of JavaScript to handle click events to show and hide the modal. There are two methods — showModal() and close() – which you can use on the dialog element after accessing it with JavaScript.

There's so much you can do with the dialog element but it's only good for certain use cases such as presenting the user a sign up form which is closable, displaying a warning before the user performs a critical action, and so on.

One situation where you shouldn't use them is during the checkout process of an ecommerce application. This is because the user is performing something critical, and if they accidentally close the dialog, then it creates disruption in user flow and experience.

Semantic HTML

The elements mentioned above fall under an umbrella term: Semantic HTML. Semantic HTML gives meaning to your HTML content – not only to users but to browsers, crawlers, and accessibility tools as well.

Not everyone can see the screen or use devices such as a mouse to navigate the web. Instead, they rely on assistive technologies which help them interpret the content.

Also, search engines can find relevant content more easily by traversing through semantic HTML. That's why it should be one of your top priorities when you're building a website.

You also don't want your website to be just a bunch of divs because a div element doesn't mean anything to a browser in terms of content — for a browser, it's just a division element to separate content.

Conclusion

Today, you learned about some HTML elements or tags which you probably didn't know about earlier. There's a specific purpose for each HTML element and you should wrap your content within the appropriate elements. You also learned about semantic HTML and that it's the best way to give meaning and structure to your content.