HTML elements and attributes that can reduce your bunch of lines of CSS and Javascript

Table of contents

There are plenty of tags offered by HTML, but as a developer, it's not always possible to remember all the tags and their usage. Instead what we can do as a developer is just to remember the things we can do with pure HTML. So our first priority will be to check the tags or attributes offered by the HTML which may solve our problem before moving to Javascript or CSS approach.

Let's dive into a curated list of such amazing tags and attributes out there

HTML TAGS

  1. <abbr> : The Abbreviation element The <abbr> HTML element defines an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation when the user hovers the cursor over the element.

  2. <wbr>: Word break opportunity The tag in HTML stands for word break opportunity and is used to define the position within the text which is treated as a line break by the browser. It is mostly used when the word is too long and there are chances that the browser may break lines at the wrong place for fitting the text.

  3. <optgroup>: The option group The tag is used to add a little definition between groups of options inside a select box. It helps to categorize the list and it's very easy to understand in terms of UX for an end-user.

  4. <progress>: The progress bar The element displays an indicator showing the completion progress of a task, typically displayed as a progress bar, with the help of javascript we can update the values of the progress element over time. It has mainly two attributes such as max and value. max: Specifies how much work the task requires in total. The default value is 1 value: Specifies how much of the task has been completed.

  5. <datalist> The HTML tag which can auto-complete the search in a dropdown list To make a searchable dropdown list one can go with the javascript approach, but it's already supported by the html5. Let's build the dropdown list which supports search.

  6. <q>: short quotation Browsers normally insert quotation marks around the quotation.

  7. <template> Use to hold some content that will be hidden when the page loads. Use JavaScript to display it. Let's do it in an example:

  8. <meter>: The meter, the progress bar with additional capabilities The tag defines a scalar measurement within a known range or a fractional value. This is also known as a gauge. The and tag looks similar but there is a difference between them like the meter can work within a given range or a fractional value. It has the following attributes:

value: The current numeric value. This must be between the minimum and maximum values (min attribute and max attribute) if they are specified.

min: The lower numeric bound of the measured range. This must be less than the maximum value (max attribute)

max: The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute)

low: The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively),

high: The lower numeric bound of the high end of the measured range. This must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively)

optimum: This attribute indicates the optimal numeric value. It must be within the range (as defined by the min attribute and max attribute).

Attributes

1. translate: Specify that some elements should not be translated The best example to use the translate is within the footer section where the company name is written, and we don't want it to get translated.

<p translate=”no”>©company.io</p>
</footer>

2. contenteditable : The contenteditable attribute specifies whether the content of an element is editable or not. It accepts the values as “yes” or “no”

contenteditable.gif

3. inputmode The inputmode global attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display when a user has selected any input or textarea element. It can be written like below: <input type=”text” inputmode=”numeric” /> <textarea inputmode=”” /> It may have the following values:

  • none: Using inputmode=none will not show a keyboard at all on Chrome for Android.
  • numeric: Using this mode will open up a numeric keypad
  • tel: Using inputmode set to tel will produce a standard-looking telephone keyboard, including keys for digits 0 to 9, the pound (#) character, and the asterisk (*) character
  • decimal: An inputmode set to the decimal value results in a keyboard with a decimal point.
  • email: Using this mode will open up the keyboard with characters on it with “@” symbol.
  • URL: Using this mode will open up the character keyboard with a slash(/) and dot(.) symbol.
  • Search: Using this mode will open up the keyboard with an additional button return/enter or in some keyboards it will be a search icon.

4. type: Input type There are various types of input provided in HTML5, some of the rarely used types are mentioned below:

  • color: With this input type it will show a color palette popup to choose, the value will be in hex code.
  • date: With this input type it will show a calendar popup to choose a date
  • datetime-local: With this input type it will show a calendar popup with time to choose a date
  • month: With this input type it will show a calendar popup to choose the month
  • week: With this input type it will show a calendar popup to choose a week
  • time: With this input type it will show a time popup to choose a date

Let me know in the comment section if you used these tags before or if you find this article helpful :)

Did you find this article valuable?

Support Vivek Kasture by becoming a sponsor. Any amount is appreciated!