CODEWITHSUNDEEP
html
FullStackDeveloper
FullStackDeveloper

Reputation: 968

Why some non self-closing HTML elements that do not have a close tag (self closing) will not display these elements, but some do

  1. <textarea> is not a self-closing element, right? If so, when I remove </textarea> in this w3school code example, why it still works?

  2. There are only 12 self-closing elements based on this explanation? Is it complete? Does it means we have to add closing tag except these 12 self-closing elements? If not, then element cannot display correctly?

Upvotes: 0

Views: 2077

Answers (2)

sideshowbarker
sideshowbarker

Reputation: 88046

It doesn’t “work” when you omit the </textarea> end tag. Instead as @Kaiido alludes to above, “</body>\n</html>” gets added to the contents of the textarea element as text. Look:

screenshot showing textarea eating markup

As you can see there, “</body>\n</html>” has become part of the textarea contents.

That is, by removing the </textarea> end tag, you’ve caused all the remaining HTML markup in the source to be parsed not as markup but instead as text contents of the textarea element.

And while it’s true that for some elements, the parser will infer where the end tag should be and add it to the DOM for you, the parser will never do that for the textarea element.

There are only 12 self-closing elements based on this explanation? Is it complete? Does it means we have to add closing tag except these 12 self-closing elements? If not, then element cannot display correctly?

Check https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element and you’ll see that for the Tag omission in text/html section there for the textarea element it says:

Neither tag is omissible.

Every element in the spec has a similar Tag omission in text/html section that explains whether or not you can ever omit the end tag or start tag for that element.

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

Self-closing tags accompany void elements, which don't allow any content within them.

The void elements are <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <menuitem>, <meta>, <param>, <source>, <track> and <wbr>.

Consider <textarea> Text </textarea>. That is not self-closing, because it makes sense for it to contain content; the text the user inputs.

Conversely, consider <br />. That is self-closing, because it's a line break; there can never be anything between the start and end of a new line.

Void elements have an implied closing tag if omitted; you can safely leave it out when writing the tag. <br> is just as valid as <br />.

Omitting the closing tag of a non-void element will still work in some circumstances. In fact, there's a list of optional start and end tags, that covers things such as </body> and </head>. This is because you cannot have a valid HTML document with these tags omitted, and if you choose to omit them yourself, the parser will automatically attempt to place them in for you. Inspection with the F12 Debugger will reveal that these closing tags will be created automatically if omitted.

Obviously, this can be confusing for the parser, and it's much safer for you to add the tags in yourself. Otherwise, you may end up with invalid markup. You can test whether your markup is valid or not with the W3 Markup Validation service.

Hope this helps! :)

Upvotes: 3

Related Questions