0

  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?

FullStackDeveloper
  • 910
  • 1
  • 16
  • 40

2 Answers2

3

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! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • is not a self-closing element. Does this means we should always add to a in this https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea, why it still works? – FullStackDeveloper Aug 01 '17 at 02:13
  • Omitting the `` would result in invalid markup. When you attempt to do this, the parser will **automatically** attempt to 'correct' this for you. If you inspect the element with your F12 Debugger, you'll find that the element has indeed been given an ending tag, even though you did not create it yourself :) – Obsidian Age Aug 01 '17 at 02:18
  • "Omitting the would result in invalid markup" Although we have invalid markup, but parse correct it. So, we will not have any issue/bugs when we missing a close tag for a non self-closing element? – FullStackDeveloper Aug 01 '17 at 02:22
  • Whether or not you have bugs is **entirely** up to the parser. It is **inconsistent** between browsers, and should be avoided. ``. If you write it in the correct place yourself, you will never have to leave it up to chance. – Obsidian Age Aug 01 '17 at 02:26
  • So, except above 12 void elements, we should always write close tag for other elements to avoid bugs? Or we had better write close tag for all elements? – FullStackDeveloper Aug 01 '17 at 02:29
  • 1
    "*Whether or not you have bugs is **entirely** up to the parser*" Nope, there are clear specifications on how parser should treat markup. In this case, everything after `

    ` nor an `

     – Kaiido Aug 01 '17 at 02:30
  • @Kaiido What is the parse here? Browser's parse? How can I find any info about parse? – FullStackDeveloper Aug 01 '17 at 02:38
1

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.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197