There are over 100 elements in the HTML specification, and it’s fair to say that some are more used by others. Elements like div, ul and table are used on almost every project whereas some are rarely used such as kbd, var and wbr. Some of this is down to browser support and I’ll be honest in my case some down to ignorance of it’s existence.
I’ve done a bit of research into some of these lesser known elements and listed them below, and I certainly intend to use them more in projects now where appropriate.
The base element is a way to declare a base href for the document, which is then used by the relative urls on the page. There is a maximum of one base element per page and is a similar syntax to normal a elements:
The var element is used to markup variables, or text that represents a variable value. In a maths or programming concept, it represents a value which is a variable, or can be used to indicate a value which the user will mentally replace with a custom value.
The samp element is used to mark up sample output of a program. Again, more suited to web applications than standard websites, it’s used for sample output for example a demo of a process or system which generates a value or result depending on a user’s interaction.
The mark element is a new element in html5 and refers to text that is to be marked or highlighted in some way, in reference to the context. A prime example would be to highlight the term that a user has searched for on the results page, this provides context to the search result.
This element refers to text that has been inserted into a document, with an example being the sale price of an item on an e-commerce site. When an item is listed, it will have an RRP price, and when it is discounted and a sale price added to the item, the ins element is ideal as the sale price has been inserted into the document.
The del element represents text which has been deleted from the document. When used with the datetime attribute it signals the date that the text was deleted. The del element can be used in conjunction with the ins element to markup changes to the document, for example old price and sale price in an e-commerce site or updates to blog posts which change to reflect more accurate information.
The kbd element is used to mark up user input onto a page. More useful in web applications I have to be honest and say that this has a very narrow usage, as the spec says that “The kbd element typically represents keyboard input, though it may also represent other input, such as voice commands.” If anyone has any example uses, then feel free to add them in the comments.
The bdo element is to indicate the direction of text and when marked up with
Sample text will be output as txet elpmaS. More applicable to languages such as Arabic which is written in a right to left format.
The bdi element is new to HTML5 and has the same effect as the bdo element but is to be used when the span of text is different from it’s surroundings.
The wbr element represents a a line-break within the page and suggests to the browser an appropriate place to break a word over two lines. Unfortunately, there is very little browser support for this tag currently so use other solutions if possible until there is more complete support.
The meter element provides a way to mark up a measurement within a range, or a fraction value. The spec specifically refers to “a scalar measurement within a known range” so we must know the maximum and minimum numbers to use it.
Example uses a quiz score or a countdown to an event or date. When I first saw this new element, I immediately thought of it as ideal to mark up progress through a form process, however then I saw the progress element and that made much more sense!
The progress element is to be used for the completion of a task. It can be used in conjunction with value and max attributes to set the progress values. When used with the max attribute it means there is a definitive result and end point or it can de “indeterminate” in that it is unclear how much of the task is left.