Why does input not require a closing tag?

Why does ‘input’ seemingly not require a closing tag?

Also in the lesson I was a bit confused regarding the “value” attribute, it’s mentioned before the first screenshot example, but doesnt appear in the screenshot, only type and name are shown as attirbutes for the .

I understand (as it’s explained further down) that value is tied to the name attribute, I just found it a little confusing at first to see it mentioned, but not shown in the initial example screenshot.

So far though, absolutely loving the lesson structure, keep up the great work!

2 Likes

I know this is 24 days late so you probably have the answer, but I was confused as well and this lesson seems to be useful and timeless. It seems the doesnt require a closing tag for the same reason doesn’t, as it’s just placing the box/picture there.

2 Likes

<input> is among those few that we call void elements, named so because they do not enclose content in a wrapper the way <p></p> and all the other content sectioning tags do.

Self-closing tags contain their data in attributes which are properties of that element object. The value attribute takes all the user input from the keyboard and on Submit, packages it with the name given in the name attribute for that content.

45 Likes

Hello, Im new in this and I have a question. Why does the element hasn’t a closing tag?

Thank you.

Hi :slight_smile:

In normal HTML elements, we put content between the start and end tag. But in case of some elements, it does not make sense for them to have any content. For example, let’s take a look at <br> element - this element produces a line break… and that’s it. It’s really hard to imagine how content inside the line break could be rendered, right? :slight_smile:

Another example - <hr> element - this element represents a paragraph-level thematic break which is usually visually represented in the form of a horizontal line (like the one below this paragraph). And again, it simply does not make any sense for this element to have any content.


And the same goes for <input> element. What could be the content of this element? Ok, it got value, but the value is based on the input from the user so it belongs to the attribute, it’s not really content.

In HTML5 elements that can’t have any content are known as Void elements, there are only a few void elements: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.

Void elements only have a start tag; end tags must not be specified for void elements. Sometimes you can find code that looks like this:

<input type="text" value="hello" name="hello" />

The /> is sometimes referred to as a self-closing tag, but this is incorrect. / does not mean anything in HTML5 (except for foreign elements, which are rather uncommon) and does not change anything, it can be omitted.

28 Likes

Would this not also apply to HTML5 served as XML? It must conform to XHTML, as I understand it, though in HTML5 the space preceding the slash is optional.

2 Likes

In XHTML there are self-closing tags, no void elements (different mechanics). So the / or a full end tag (<br/> will be treated as <br></br>) would be necesarry in XHTML. So to maintain compatibility with XHTML you would have to use /.

But today there are not really many reasons to care for compatibility with XHTML. There are many differences between XHTML and HTML5 (for example named character references, attributes without values), trying to provide compatibility when you don’t really need it is just a waste of time.


I strongly advocate to not call void elements self-closing. In my opinion, this makes it a lot easier to understand what is going on when we use foreign elements (that might be truly self-closing) - for example from the SVG namespace. It would be so confusing to say:

  • img is a self-closing element, you can add /, but it is not required, you cannot add </img> tag
  • circle in SVG namespace is a self-closing element, you have to add / or </circle> tag

:slight_smile:

10 Likes

Thanks for the highlight of the /> closing slash as not required. Answered my question.

1 Like

Very well explained… :grinning: :grinning:

1 Like

Hi, I noticed the content of this lesson: “After users type into the element, the value of the value attribute becomes what is typed into the text field”.I want to know if the converse is true?


As shown in the screenshot, when I type “Simon” into text input field, is it possible that the value of the value attribute update to “Simon” automatically? That is to say, my input in the browser can change the HTML code.

After reading this conversation, I am still confused. Why is the /> here is invalid or incorrect?
I remember that HTML doesn’t have a strict syntax, just a suggestion for a specification.

It is not invalid, and neither is it incorrect. It’s just not needed when the page is served as “text/html”. It is needed if the HTML is to be XML compliant (read up on XHTML) and served as “application/xml”.

For our purposes it is unneeded, and if the lesson checker is not accepting it then to satisfy it, leave the space-slash out.

Thank you, could you please answer this question?

It is not changing the HTML. The value attribute is what holds all form input.