In front end development, most of our learning has been in JavaScript, and we’ve spent very little time on CSS, let alone HTML, so much so that by now it would have taken you a while to write a form without using the UI component library.

All in all, thanks to the UI component library, we can write a complete interface with just the most common HTML tags, but this article will focus on the ones you haven’t seen yet that are useful.

Because of the particularity of HTML tags, so unlike CSS and JavaScript, browsers do not know this tag is not known, there is no way to do compatibility, so some seemingly practical tags, may be due to compatibility problems or have to be careful (yes, it is IE).

1. <fieldset />

This tag is used to combine related elements in a form.

You can see that the key tags are

and < Legend />.

2. <input />

Input should be a very common tag, but it has a lot of type attributes.

See the HTML type attribute

value	describe
button	Define clickable buttons (often used with JavaScript to launch scripts).
checkbox	Define check boxes.
color New	Define a color picker.
date New	Define the date control (including year, month, day, but not time).
datetime New	Define date and time controls (including year, month, day, hour, minute, second, and fraction of a second, based on the UTC time zone).
datetime-local New	Define date and time controls (including year, month, day, hour, minute, second, and fraction of a second, without time zone).
email New	Defines fields for E-mail addresses.
file	Define file selection fields and “browse…” Button for file upload.
hidden	Define hidden input fields.
image	Define the image as the submit button.
month New	Define month and Year controls (without time zone).
number New	Defines the fields used to enter numbers.
password	Define a password field (the characters in the field are obscured).
radio	Define radio buttons.
range New	Controls that define input numbers whose precise values are not important (such as the slider control).
reset	Define the reset button (resets all form values to default values).
search New	Defines the text field used to enter the search string.
submit	Define the submit button.
tel New	Defines a field for entering a phone number.
text	The default. Defines a single-line text field (default width: 20 characters).
time New	Defines a control (without a time zone) for entering a time.
url New	Defines the field used to enter the URL.
week New	Define week and year controls (without time zone).

For example:

You can try the above attributes yourself.

3. <progress />

Progress bar tag, in ordinary times we want to implement a progress bar? Use CSS to adjust the width of the box to look like a progress bar, and most UI frameworks already have a progress bar, but you can implement it directly with the HTML tag.

You can control the display of the progress bar by using JavaScript to set the Max and value properties.

4. <sub />,<sup />

• Sup: superscript
• Sub: subscript

It is easy to use, such as H2O, O2, 232 and other similar tags can be done with these two tags, of course, if you want to use CSS implementation can also be done, but a little bit more complicated.

Code: H₂O, O₂, 2³².

5. <picture />

Display different images depending on the size of the screen match, or use the IMG element if there is no match or the browser does not support the picture attribute.

It is also very simple to use, so let’s look at the effect directly:

As you can see, depending on the screen size, the resulting image is also different. This TAB is very useful for responsive interfaces.

Demo code:

<picture>
  <source media="(min-width:650px)" srcset="Https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1091405991, & FM = 26 & gp = 0. 859863778 JPG">
  <source media="(min-width:465px)" srcset="Https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=137628589, & FM = 26 & gp = 0. 3436980029 JPG">
  <img alt="Flowers" src="Https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726, & FM = 26 & gp = 0. 2864900975 JPG" style="width:auto;">
</picture>
Copy the code

6. <template />

The HTML content template (

A template in HTML is equivalent to a template, a template that has already been written.

First we write the following code in the HTML:

<template>
  <div class="box">
    <h2 class="title">Testing the Template tag</h2>
    <p>This is casual content</p>
  </div>
</template>
Copy the code

In Chrome developer Tools, we can check the element: the template tag is present, but the template tag is not visible because of the display: None attribute.

So how does it work?

Let’s take a look at how we would create a corresponding HTML tag if we didn’t use template, without considering using jQuery, which makes manipulating the DOM much easier.

document.addEventListener("DOMContentLoaded".() = > {
  const df = document.createDocumentFragment();
  const div = document.createElement("div");
  const h2 = document.createElement("h2");
  const p = document.createElement("p");
  h2.textContent = "Test the Template tag";
  p.textContent = "This is casual content.";
  div.className = "box";
  h2.className = "title";
  df.appendChild(div);
  div.appendChild(h2);
  div.appendChild(p);
  document.body.appendChild(df);
});
Copy the code

Display on the interface:

As you can see, creating a DOM element natively using JavaScript is a bit of a hassle, so how do you do it using template?

document.addEventListener("DOMContentLoaded".() = > {
  const temp = document.querySelector("template");
  const content = temp.content;
  document.body.appendChild(content);
});
Copy the code

The DOM element created using template has a content property that contains all the elements in the template. You can create a DOM element on the fly by attaching this property to the DOM and manipulating its child nodes.

What if you want to create multiple template elements?

<script>
  document.addEventListener("DOMContentLoaded".() = > {
    const temp = document.querySelector("template");
    const content = temp.content;
    document.body.appendChild(content.cloneNode(true));
    document.body.appendChild(content.cloneNode(true));
  });
</script>
Copy the code

There is one more on templatecloneNodeProperty to create multiple templates.

Note: This tag is different from the template tag in Vue.

7. The last

Not knowing these HTML tags doesn’t really affect our development at all, because there are so many UI libraries that have already built common components, we just need to put them together and focus on implementing the business logic.

Reference:

Using HTML5 Templates

5 Must Know HTML Tags That Almost Nobody Knows