Is HTML tags closed or not?

When writing HTML5 code, do you have to worry about whether to write <br/> or <br>, whether to write <input/> or <input>. Why is it wrong to write <script src = "script. js"/>? I have struggled with it, and I found this topic more interesting than I thought.

If you are not interested in my research process, you can jump to the "legitimacy" section to get the answer.

NO content element (Void elements)

A content-free element is a special element that cannot contain any content. Other elements, such as <div>, can neither contain any content nor contain another element or text.

Common Content-free elements include:

<Br>

Less common content-free elements include:

<Area> <base> <col> <command> <embed> <keygen>
<Param> <source> <track> <wbr>

All the existing content-free elements are the above.

<Br> </br> This method is invalid because it implies that the br can contain content (but <br> hello! </Br> is completely meaningless ). Both <br> and <br/> are common writing methods.

Although we all know that XHTML forces you to write <br/>, there is no clear text in HTML.

Trace history

To fully understand the content-free elements, we need to understand its history.

Both HTML, XML, and XHTML are based on SGML. The full name of SGML is "standard common Markup Language", which was drafted in 1986.
Both HTML and XML are derived from SGML, where XML is a binding subset of SGML, while XHTML is based on XML.

XHTML is basically the same as HTML, but it is based on XML.

After knowing this layer of relationship, we will go to the most interesting part of this article.

SGML has a feature called "No End Tag (NET, Null End Tag )". When there is only simple text in a tag, you can use a tag without a tail to close the tag. For example, you can write <quote> Quoted text </quote> as <quote/Quoted text /. (You are not mistaken. This label does not include> .)

Then, the label that does not contain any content can be written as <quote //, where quote is the tag name, the first/is used to enable the no-end tag, and the second/indicates that the no-end tag ends.

According to this logic, <br // The first half of <br/will be parsed as <br>, so <br/> isn't it resolved to <br>? If you think the same way as you do, you will surely think this syntax is stupid.

Unfortunately, the developers of the HTML4 standard do not think so and write it into the standard. However, the browser vendors did not agree with this syntax at the time, and the support was not great. (In this regard, browser vendors may have done a good thing .)

XML (also applies to XHTML) standards developers realize that this syntax is not very good, it directly does not contain the feature of No-tail labels,
At the same time, it provides a better understanding of the syntax for NO content tag. The syntax is called "No element tag", which looks like this: <br/>. This syntax looks very natural, so most developers thought this was the correct way to write.

Fortunately, HTML has been improving, and W3C members have been learning from their past mistakes. Therefore, HTML5 has made such great progress compared with the previous version.

When introducing the new HTML5 syntax, W3C said:

The HTML5 syntax is fully compatible with HTML4 and XHTML1, but not the obscure HTML4 features in SGML. For example, no tail tag (<em/content /).

HTML5 is good!

(I think they should keep the "Short tag" feature, such as <strong> nice labels </>. I think this feature is cool. However, at least the current HTML is no longer so messy .)

Legitimacy

Okay, let's go back to the question about legitimacy at the beginning of the article. The current HTML5 specification's explanation of non-content tags is as follows:

Such labels should consist of the following parts, in the same order as the following table:

• It is a character of <.
• Tag name.
• This option is optional. One or more attributes must have one or more spaces before each attribute.
• Optional. One or more spaces.
• This option is optional. It is a "/" character. This option can only appear in NO content element.
• A ">" character.

The "/" character in the penultimate part is optional and has no actual meaning. Therefore, there is no substantial difference between <br> and <br/>.

Correctness

Developers who like XML and XHTML may say, "Yes, although/is optional, the <br/> statement is 'more right ."

I must tell you that you are wrong. In fact, some people think that the/In the content tag is actually a tolerable syntax error. This tolerance is based on compatibility, so that all browsers and parsers treat <br> and <br/> equally.

In this regard, the Google Code Style Guide clearly stipulates that no content tag should be disabled.

Disadvantages

Of course, there are drawbacks if you don't close the content-free tag, but I don't think it can cover up its advantages: Make your code clean and concise.

The first drawback is that developers must know which labels have no content labels. If you don't know if has no content tag, when you cannot find its closed tag, you will wonder whether to close it. However, there are only a few tags with no content, and it can be seen at a glance whether a tag has no content tag.

The second disadvantage is that the editor may not be able to handle unclosed, non-content tags. Editor developers must understand that there is no content tag and provide appropriate syntax highlighting and code completion. When you write a <input> In the editor, the editor must know that it will never be followed by one </input>.

However, the implementation of these functions is very simple. The editors I know have a good support for this aspect, so this is not a real disadvantage.

My Opinion on NO content tag

I think the concept of "NO content tag" can be removed from HTML. We can add content to these tags to replace some of its attributes.

Take the label as an example. It has a mandatory alt attribute, which is used to make users who cannot see the image (possibly due to physiological defects, it may also be because the devices they use do not support images.) they know the content of the image. (If the image is beautiful, you should not add the alt attribute ).

My question is: why not replace the alt attribute with the content of ? I think this is more intuitive:

Image of doge </img>.

<Meta> the tag even has an attribute called content! Why not directly write the content value in the TAG content? <Input value = "Value content"> it should be written as <input> Value content </input>, just like <textarea>. Other labels are missing.

Therefore, there are only a few non-content tags that should be retained, but W3C must consider backward compatibility, so it is still difficult to change the status quo.

Last thought: <script> tag

This label is really bothering me, because it has a very simple meaning, but it is very arrogant in writing. The syntax of <script src = "my-script.js"> </script> seems to be wrong, because the content of <script> is not logically associated with the my-script.js. (The HTML specification allows you to add content and src attributes to it at the same time)

The problem is that the <script> tag is not a content-free tag. You can write JavaScript in it. Therefore, there is no optional/Close mark (Note: This is why <script src = "script. js"/> is incorrect ).

Using the <link> label instead of <script> is perfect because it has been used to import external files and provides all the required attributes. Of course, Web platforms always need to consider backward compatibility, otherwise all old browsers that do not support this syntax will not be able to parse your page.

Original article: Matias Meno