Once I read a technical article and there was a sample HTML source code with a datalist tag, which I automatically assumed was a component. When I looked for the implementation of the component, I found it nowhere

Then IT occurred to me that component tag names should start with uppercase letters or contain hyphens. This all-lowercase tag should be recognized as HTML native tags. How does it compile? What did I realize when I copied and pasted it? Sure enough, datalist is a native HTML tag

<datalist id="cars">
  <option value="a">
  <option value="b">
  <option value="c">
</datalist>
Copy the code

It’s embarrassing, it’s fucking embarrassing, it’s hooks, functions, immutable, serverless, it doesn’t know a basic HTML tag

Although in the current tide of all station DIV, do not know the tag other than div, for interview, work will not have the least impact, but the front-end three swordsmen are the foundation of front-end engineers, after all, under the painful reflection, the HTML tag all over again, suddenly found that W3C has made so many HTML tags, All have their respective roles, some work used div, CSS, JS simulation function, if the use of appropriate HTML tags can save a lot of effort

Here are a few tags that I think might be useful/encountered in the real world

select

With the option tag, you can implement the basic drop-down selection function. The select style itself is well supported, such as codepen. IO /FrankieDood… , but the drop-down menu can define a limited number of styles

And it can automatically handle dropdown menus that overflow the screen

datalist

Normally used with input (label also works), datalist and its options are not displayed. It is just alist of valid input values, similar to the filter function on select

The purpose of this TAB is to bring up a drop-down menu component that displays options, but the drop-down menu component cannot be styled, or even checked elements

area

This example on MDN is more graphic

For the image above, there are six clickable areas: CSS, Graphics, HTML, JavaScript, Web APIS, MDN, and the jump links for each region are different. If YOU let me implement this, the region of each side of the pentagon uses 5 elements, each element with one ::before, ::after, Add one more element to the middle circle, and then use CSS to close the elements together so that no pixel is missing

But with the area tag, you just ask the designer to draw the image (no deviation, no font different from what the designer wants), then you calculate the position, write it to the tag properties, and you’re done

del,ins,b

When it comes to bolding, deleting and underlining characters, I tend to use CSS properties such as font-weight and text-decoration. HTML already provides semantic tags

<b>A dozen of</b>There are<del>twenty</del> <ins>twelve</ins>A.Copy the code

The INS tag indicates the addition of text. Together with the DEL tag, the INS tag describes the updating action of the Document

details,summary

These two tabs are used together to create a collapseable panel that can be opened and folded. I often see this TAB used in README documents of open source projects on Github. I was surprised when I first saw this, because I thought it was a js capability. However, most sites that support Markdown rendering will not allow js execution in Markdown files for security reasons. When you open the Inspector tool, it turns out to be a plain HTML tag

<details>
  <summary>The title</summary>
  <p>The content of the detailed description</p>
</details>

<hr />

<details open>
  <summary>The title</summary>
  <p>The content of the detailed description</p>
</details>
Copy the code

meter,progress

<meter value="3" min="0" max="10"></meter>
Copy the code

<progress value="22" max="100" />
Copy the code

The two tabs look similar in function, but there are semantic differences. Meter represents a scale, measure, and progress represents progress. The default style of the two tabs may be different on different platforms and browsers

sup,sub

It is very easy to represent superscript and subscript, if you don’t know these two tags, you may have to struggle to combine elements with CSS

mark<sub>1</sub>
<br>
x<sup>2</sup>
Copy the code

template

Yes, that is the often see the template in the vue, I always thought this is vue rules themselves before a special label (although is ok), now only to find that this is a root is well-connected HTML element tag, actually think about also know, this cargo is all lowercase letters, and not in the line, it is only the original label

There's a template tag between us, but you can't see anything<template>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</template>There's a template tag between us, but you can't see anythingCopy the code

This is used to save client-side content that is not rendered when the page is loaded, i.e. the element/content wrapped by this tag is not rendered in the document stream and behaves as if it were applied to display: “None”, “childNodes”, “childElement”, and “js” are undefined, but “content” is a read-only #document-fragment

summary

Although there are a number of HTML tags that can directly provide some common functions in common scenarios, they are generally not used for business development or component library encapsulation. The code can run and the functions can be used normally, but most of the time it is not enough

Style cannot be customized or behavior is customized, in some similar to the technical documents, tools, site, these for functions such as government websites, not so strict style, directly use these HTML tags can directly provide the corresponding function to save time and effort, but most of the scene is not in this situation

The point of relearning HTML is not to try to use these native tags in future development, but to one day, when you see these tags written, you, as a front-end developer title person, know what it is, and what do these tags mean when they’re written here