Booklet

author

Fullstack HQ

Development

Html Elements That You Probably Don’t Know

Html Elements That You Probably Don’t Know

  • <picture>
    The <picture> tag is similar to <img>, it provides flexibility by allowing multiple <source> elements for the same resource, which can adapt based on a media query or image type support. e.g. it can supply WebP images to browsers that support the newer, smaller file size.
  • <datalist>
    When linked to an <input> using the list attribute, it can provide a drop-down list or even display autocomplete suggestions as the user types.
  • <dl>
    Serves as a container for groups of defined terms. Inside, each term (<dt>) and definition (<dd>) are grouped together to form a glossary-like structure. While it applies basic formatting by default, semantic HTML benefits screen readers and other automated tools such as crawlers.
  • <details>
    Accordions are a common design pattern when lots of data needs to be shown at once, such as a questions page. By using the <details> element alongside <summary>, we can achieve the same effect without JavaScript. Clicking the summary will toggle the rest of the content.
  • <dfn>
    Complex terms or abbreviations often need defining for those that are not familiar. A term wrapped in a <dfn> tag will be defined by the text that surrounds it. This is an inline element and is designed to be used to highlight definitions in human language.

<figure>
A figure is defined as a unit of content that often appears in the main flow of a document but can be also interpreted separately. The <figure> element wraps an image or other reference content and can also include a description of its contents with <figcaption>.

<code>
With technical writing, it can be useful to visually separate computer code from the rest of the sentence. By wrapping each occurrence in a <code> tag, the browser can apply some default formatting to display it more appropriately. Combine with <pre> for larger code blocks.

  • <time>
    We can write time values differently depending on the context or the language. By marking these values with the <time> tag, search engines and other automated tooling can quickly extract this information. Use the datetime attribute to supply a specific time in a more machine friendly format.

More booklets by Fullstack HQ

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets