8 HTML Elements You Might Not Know About

By Jethro May • Aug 3

Tags
  • Development
  • Front-end development
  • Website
HTML which stands for “Hypertext Markup Language,” is used to structure the content of a web page. It consists of a series of elements which enclose different parts of the page content to make them appear or act in a certain way. As a developer, being able to write high-quality, accessible and semantic HTML is a great skill to have in your toolset. In this guide, we will cover eight elements that you may not have heard of, or used before and look at examples of how you could use them in your next project.

Abbreviation:

The abbr tag defines text which is an abbreviation or an acronym, it also allows for an optional title attribute to provide a full description of the abbreviation or acronym.

The abbr tag has full browser support. View a detailed list of which browser versions this tag can be used in, here.

Cite:

The cite tag defines the reference to a cited creative work, and it must include the title of that work. Examples of where this can be used include the title of a song, book, research paper, website or blog post etc.

The cite tag has full browser support. View a detailed list of which browser versions this tag can be used in, here.

Details:

The details element creates a widget which can be opened or closed by the user. The default state of the widget is closed, opening the widget will reveal the hidden content inside of the element.

details This content is hidden.

The details element is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Mark:

The mark tag will define text which should be marked or highlighted by the browser.



The mark tag has full browser support. View a detailed list of which browser versions this tag can be used in, here.

Output:

The output tag specifies the result of a calculation. In the following example, you can select a value between 0 – 100 as well as enter a second number into the second element, outputting the sum of the two numbers.

The output element is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Summary:

The summary tag defines a heading for the details element. The summary tag must be the first child element inside the details element.

The summary tag is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Time:

The time tag represents a time or date value. Optionally, you may include a ‘datetime’ attribute which will translate the value into a machine-readable format. Using the time tag allows for better search engine results.

The time tag is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Word Break Opportunity:

The wbr tag tells the browser where the ideal location is to break text when the browser window size changes.

pThis is a very loooooooooowbroooo/wbroooooooooooong sentence showing us how to use this tag./p

The wbr tag is supported in all browsers apart from Internet Explorer. View a detailed list of which browser versions this tag can be used in, here.

Conclusion

In this article, we reviewed a variety of different HTML tags that you can use in your projects. There are many other useful HTML tags, all of which seek out to solve specific problems. I hope you have learnt a thing or two and will be able to use these tags in your projects!