I bet you don’t know about these 11 functional HTML elements
Tags: javascript, html, webdev, programming
Published: 2023-01-22 05:35:59

HTML stands for **Hypertext Markup Language**. It is the standard markup language used to create web pages and other types of documents that can be displayed in web browsers. HTML is used to structure the content of a web page, including text, images, and other types of media, and to create the layout and design of the page using elements such as headings, paragraphs, lists, and tables.

HTML is a markup language, which means that it uses a set of tags and attributes to define the structure and layout of the content. These tags and attributes are used to create elements such as headings, paragraphs, links, images, and other types of content.

HTML is constantly evolving, and it is currently on version HTML5 which has introduced some new tags and attributes that are more semantically meaningful for modern web development such as <header> <nav> <section> <article> and <footer> to mention a few.

HTML is the backbone of any website and it is used in conjunction with other technologies such as CSS and JavaScript to create dynamic and interactive websites. In this article, I’ll be discussing HTML elements.

So, here are some of the most practical HTML elements you should know about:

## Details Element
The <details> element is used to create a collapsible section of content, which can be expanded and collapsed by the user. This element is not widely used, but it can be useful for creating accordions or other types of content that can be hidden and revealed as needed.

## Mark Element
The <mark> element is used to highlight text within a document. This element is useful for highlighting keywords or phrases within a block of text, such as in a search result or in a document with a lot of text.

## Output Element
The <output> element is used to display the result of a calculation or other output from a script. This element is useful for creating forms that include calculations or other dynamic content.

## Time Element
The <time> element is used to represent a specific date or time. This element can be used to mark up dates and times in a way that is machine-readable, which can be useful for indexing and searching content.

## Figure Element
The <figure> and <figcaption> elements are used to create captions for images and other types of media. These elements can be used to create more accessible and semantic content by providing context for images and other media.

## Progress Element
The <progress> element is used to create a progress bar, indicating the completion status of a task. This element is useful for creating interactive interfaces, such as file uploads, form submissions, and other types of tasks that have a progress indicator.

## DataList element
The <datalist> element is used to create a list of predefined options for an input element. This element can be used to provide a list of suggestions for the user, such as a list of countries or a list of product names. This can be useful for creating forms with input fields that have a large number of possible options.

## Meter Element
The <meter> element is used to create a gauge or meter, which can be used to display a value within a specific range. This element is useful for displaying data such as disk usage, battery level, or other types of data that can be represented as a value within a range.

## Ruby Element
The <ruby> element is used to create ruby annotations, which are small text annotations that are typically used in East Asian languages to provide pronunciation or translation information. This element is not widely used, but it can be useful for creating content in languages that use ruby annotations.

## Template Element
The <template> element is used to define a template of HTML that can be reused later in the document. This can be useful for creating reusable components in web applications, such as forms, modals, or other types of content that can be reused across the application.

## Picture Element
The <picture> element is used to create responsive images that can be displayed differently based on screen size, viewport, and other factors. This element allows you to specify different source images for different screen sizes and resolutions, and it’s a powerful way to optimize images for the web.

---

That’s a wrap. Thanks for reading.

[Follow me](https://medium.com/@piyushkesarwani72 ) for weekly new tidbits on the domain of tech.

Want to see what I am working on? Check out my [Personal Website](https://piyush-webdev.netlify.app/), [Twitter](https://twitter.com/Hy_piyush), and [GitHub](https://github.com/piyushkesarwani  ).

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/piyush-kesarwani-809a30219/). Follow me on [Instagram](https://www.instagram.com/piyush_kesarwani22/)