Given the following HTML:
<div style="background-color:green"/>
<div>text</div>
Most browsers display the text in green which indicates that the <div/> shorthand is not recognized as 'ended' and it spans to wrap the 2nd <div>.
Or is this what the standard says?
Strictly speaking, the <div> element is a non-void/non-empty element in HTML, i.e. it is not meant to self-close. Although <div /> is valid XHTML — due to /> being indicative of a self-closing (or empty) XML element — it's interpreted by common HTML parsers and some validators as an unclosed opening tag, and is therefore invalid HTML 4.01 and HTML5.1
In fact, running your given HTML fragment through the W3C validator (as HTML5) results in this error message:
Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.
Hence what you see.
From the HTML5 spec (in the first link):
A non-void element must have an end tag, unless the subsection for that element in the HTML elements section of this reference indicates that its end tag can be omitted.
Following that, the subsection for the <div> element states:
A div element must have both a start tag and an end tag.
This makes <div> unlike <p> or <li> which are known to not always require an end tag.
If you place a <p> immediately after an unclosed <p>, it implicitly closes that previous <p>. Likewise goes for <li>. This is because you can't directly nest multiple paragraphs or list items together. However, <div> is nestable to any depth. Thus, an opening <div> tag does not close a previously-unopened <div> tag.
And that's why you're seeing what you're seeing.
1 In true XHTML pages (serialized as XML by serving as application/xhtml+xml), the first <div /> element will not expand to wrap the second <div>text</div> element. Instead, as XHTML it will follow XML rules and contain itself as an empty element, rather than follow HTML tag soup rules and be interpreted as an opening tag by itself.
The tag needs a separate closer at this point - maybe that may be appended.
Note that in a proper syntax, even self-closing tags need an extra space (<br />, not <br/>)
Related
I notice that most people use the words HTML tags and HTML elements interchangeably.
But what is the difference between them?
The way I see it is that tags are in the source code and elements are processed tags (by the browser) in the DOM. Am I wrong?
HTML tag is just opening or closing entity. For example:
<p> and </p> are called HTML tags
HTML element encompasses opening tag, closing tag, content (optional for content-less tags)
Eg:
<p>This is the content</p> : This complete thing is called a HTML element
HTML tags vs. elements vs. attributes
HTML elements
An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>
This is the content of the paragraph element.
</p>
HTML tags
Tags are used to mark up the start and end of an HTML element.
<p></p>
HTML attributes
An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.
The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. Alt is an attribute, not a tag.
<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">
Source: 456bereastreet.com: HTML tags vs. elements vs. attributes
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag.
Source
HTML Attributes
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value.
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Source
HTML Tag vs Element
"Elements" and "tags" are terms that are widely confused. HTML documents contain tags, but do not contain the elements. The elements are only generated after the parsing step, from these tags.
Source: wikipedia > HTML_element
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.
Source:tutorialspoint > html_elements
lets put this in a simple term. An element is a set of opening and closing tags in use.
Element
<h1>...</h1>
Tag
H1 opening tag
<h1>
H1 closing tag
</h1>
http://html.net/tutorials/html/lesson3.php
Tags are labels you use to mark up the begining and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
HTML is all about elements. To learn HTML is to learn and use different tags.
For example:
<h1></h1>
Where as elements are something that consists of start tag and end tag as shown:
<h1>Heading</h1>
Html Elements:
An Html Element consists of an opening and closing tag with the content inserted in between:
For Example:
<p>HTML Element</p>
Html tag:
The HTML tag is just an opening or closing entity.
For Example:
<p> and </p> are called Html tags.
Tags and Elements are not the same.
Elements
They are the pieces themselves, i.e. a paragraph is an element, or a header is an element, even the body is an element. Most elements can contain other elements, as the body element would contain header elements, paragraph elements, in fact pretty much all of the visible elements of the DOM.
Eg:
<p>This is the <span>Home</span> page</p>
Tags
Tags are not the elements themselves, rather they're the bits of text you use to tell the computer where an element begins and ends. When you 'mark up' a document, you generally don't want those extra notes that are not really part of the text to be presented to the reader. HTML borrows a technique from another language, SGML, to provide an easy way for a computer to determine which parts are "MarkUp" and which parts are the content. By using '<' and '>' as a kind of parentheses, HTML can indicate the beginning and end of a tag, i.e. the presence of '<' tells the browser 'this next bit is markup, pay attention'.
The browser sees the letters '' and decides 'A new paragraph is starting, I'd better start a new line and maybe indent it'. Then when it sees '' it knows that the paragraph it was working on is finished, so it should break the line there before going on to whatever is next.
- Opening tag.
- Closing tag
This visualization can help us to find out difference between concept of element and tag (each indent means contain):
- element
- content:
- text
- other elements
- or empty
- and its markup
- tags (start or end tag)
- element name
- angle brackets < >
- or attributes (just for start tag)
- or slash /
<p>Here is a quote from WWF's website:</p>.
In this part <p> is a tag.
<blockquote cite="www.facebook.com">facebook is the world's largest socialsite..</blockquote>
in this part <blockquote> is an element.
I notice that most people use the words HTML tags and HTML elements interchangeably.
But what is the difference between them?
The way I see it is that tags are in the source code and elements are processed tags (by the browser) in the DOM. Am I wrong?
HTML tag is just opening or closing entity. For example:
<p> and </p> are called HTML tags
HTML element encompasses opening tag, closing tag, content (optional for content-less tags)
Eg:
<p>This is the content</p> : This complete thing is called a HTML element
HTML tags vs. elements vs. attributes
HTML elements
An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>
This is the content of the paragraph element.
</p>
HTML tags
Tags are used to mark up the start and end of an HTML element.
<p></p>
HTML attributes
An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.
The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. Alt is an attribute, not a tag.
<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">
Source: 456bereastreet.com: HTML tags vs. elements vs. attributes
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag.
Source
HTML Attributes
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value.
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Source
HTML Tag vs Element
"Elements" and "tags" are terms that are widely confused. HTML documents contain tags, but do not contain the elements. The elements are only generated after the parsing step, from these tags.
Source: wikipedia > HTML_element
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.
Source:tutorialspoint > html_elements
lets put this in a simple term. An element is a set of opening and closing tags in use.
Element
<h1>...</h1>
Tag
H1 opening tag
<h1>
H1 closing tag
</h1>
http://html.net/tutorials/html/lesson3.php
Tags are labels you use to mark up the begining and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
HTML is all about elements. To learn HTML is to learn and use different tags.
For example:
<h1></h1>
Where as elements are something that consists of start tag and end tag as shown:
<h1>Heading</h1>
Html Elements:
An Html Element consists of an opening and closing tag with the content inserted in between:
For Example:
<p>HTML Element</p>
Html tag:
The HTML tag is just an opening or closing entity.
For Example:
<p> and </p> are called Html tags.
Tags and Elements are not the same.
Elements
They are the pieces themselves, i.e. a paragraph is an element, or a header is an element, even the body is an element. Most elements can contain other elements, as the body element would contain header elements, paragraph elements, in fact pretty much all of the visible elements of the DOM.
Eg:
<p>This is the <span>Home</span> page</p>
Tags
Tags are not the elements themselves, rather they're the bits of text you use to tell the computer where an element begins and ends. When you 'mark up' a document, you generally don't want those extra notes that are not really part of the text to be presented to the reader. HTML borrows a technique from another language, SGML, to provide an easy way for a computer to determine which parts are "MarkUp" and which parts are the content. By using '<' and '>' as a kind of parentheses, HTML can indicate the beginning and end of a tag, i.e. the presence of '<' tells the browser 'this next bit is markup, pay attention'.
The browser sees the letters '' and decides 'A new paragraph is starting, I'd better start a new line and maybe indent it'. Then when it sees '' it knows that the paragraph it was working on is finished, so it should break the line there before going on to whatever is next.
- Opening tag.
- Closing tag
This visualization can help us to find out difference between concept of element and tag (each indent means contain):
- element
- content:
- text
- other elements
- or empty
- and its markup
- tags (start or end tag)
- element name
- angle brackets < >
- or attributes (just for start tag)
- or slash /
<p>Here is a quote from WWF's website:</p>.
In this part <p> is a tag.
<blockquote cite="www.facebook.com">facebook is the world's largest socialsite..</blockquote>
in this part <blockquote> is an element.
<textarea> is not a self-closing element, right? If so, when I remove </textarea> in this w3school code example, why it still works?
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?
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! :)
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:
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.
I notice that most people use the words HTML tags and HTML elements interchangeably.
But what is the difference between them?
The way I see it is that tags are in the source code and elements are processed tags (by the browser) in the DOM. Am I wrong?
HTML tag is just opening or closing entity. For example:
<p> and </p> are called HTML tags
HTML element encompasses opening tag, closing tag, content (optional for content-less tags)
Eg:
<p>This is the content</p> : This complete thing is called a HTML element
HTML tags vs. elements vs. attributes
HTML elements
An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>
This is the content of the paragraph element.
</p>
HTML tags
Tags are used to mark up the start and end of an HTML element.
<p></p>
HTML attributes
An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.
The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. Alt is an attribute, not a tag.
<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">
Source: 456bereastreet.com: HTML tags vs. elements vs. attributes
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag.
Source
HTML Attributes
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value.
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Source
HTML Tag vs Element
"Elements" and "tags" are terms that are widely confused. HTML documents contain tags, but do not contain the elements. The elements are only generated after the parsing step, from these tags.
Source: wikipedia > HTML_element
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.
For example <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.
Source:tutorialspoint > html_elements
lets put this in a simple term. An element is a set of opening and closing tags in use.
Element
<h1>...</h1>
Tag
H1 opening tag
<h1>
H1 closing tag
</h1>
http://html.net/tutorials/html/lesson3.php
Tags are labels you use to mark up the begining and end of an element.
All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
HTML is all about elements. To learn HTML is to learn and use different tags.
For example:
<h1></h1>
Where as elements are something that consists of start tag and end tag as shown:
<h1>Heading</h1>
Html Elements:
An Html Element consists of an opening and closing tag with the content inserted in between:
For Example:
<p>HTML Element</p>
Html tag:
The HTML tag is just an opening or closing entity.
For Example:
<p> and </p> are called Html tags.
Tags and Elements are not the same.
Elements
They are the pieces themselves, i.e. a paragraph is an element, or a header is an element, even the body is an element. Most elements can contain other elements, as the body element would contain header elements, paragraph elements, in fact pretty much all of the visible elements of the DOM.
Eg:
<p>This is the <span>Home</span> page</p>
Tags
Tags are not the elements themselves, rather they're the bits of text you use to tell the computer where an element begins and ends. When you 'mark up' a document, you generally don't want those extra notes that are not really part of the text to be presented to the reader. HTML borrows a technique from another language, SGML, to provide an easy way for a computer to determine which parts are "MarkUp" and which parts are the content. By using '<' and '>' as a kind of parentheses, HTML can indicate the beginning and end of a tag, i.e. the presence of '<' tells the browser 'this next bit is markup, pay attention'.
The browser sees the letters '' and decides 'A new paragraph is starting, I'd better start a new line and maybe indent it'. Then when it sees '' it knows that the paragraph it was working on is finished, so it should break the line there before going on to whatever is next.
- Opening tag.
- Closing tag
This visualization can help us to find out difference between concept of element and tag (each indent means contain):
- element
- content:
- text
- other elements
- or empty
- and its markup
- tags (start or end tag)
- element name
- angle brackets < >
- or attributes (just for start tag)
- or slash /
<p>Here is a quote from WWF's website:</p>.
In this part <p> is a tag.
<blockquote cite="www.facebook.com">facebook is the world's largest socialsite..</blockquote>
in this part <blockquote> is an element.
There are HTML tags, such as <img />, <input /> and <button />, that need no ending tag (</img>, </input> and </button>). What is the term that describes this type of tags?
This syntax has a variety of names depending on what language you are using. The best way to find out what it is called is to look at the specification for the specific language.
HTML 4.x
I can't find any mention of this syntax in the HTML 4.x specification. It is not valid syntax.
HTML 5
In the HTML 5 specification the / character (called a SOLIDUS) is valid but has no effect for void elements such as <br />, <hr />, <img />, <input />, etc. and for foreign elements (such as SVG tags) it designates a start tag that is marked as self-closing. It is not a valid syntax for all other tags (such as <button /> mentioned in your question).
Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.
XML
According to the XML specification it is called an empty-element tag:
The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag.
XHTML
According to the XHTML specification it is called the minimized tag syntax for empty elements:
C.2. Empty Elements
Include a space before the trailing / and > of empty elements, e.g. <br />, <hr /> and <img src="karen.jpg" alt="Karen" />. Also, use the minimized tag syntax for empty elements, e.g. <br />, as the alternative syntax <br></br> allowed by XML gives uncertain results in many existing user agents.
C.3. Element Minimization and Empty Element Content
Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).
In general if you want to be precise I would recommend using the names as defined in the appropriate standard. Then if people aren't exactly sure what you mean they can look it up in the standard to find out. However if you don't want to use the name in the standard you are free to call it something else if you want. The important thing is that the people who communicate with you can understand you. I don't think anyone would misunderstand you if you used the term 'self-closing tag' for a tag in an XML document even if the standard officially calls it something else.
Thanks to Alohci for the HTML 5 reference.
The term is self-closing.
HTML tags can be of two types. They are
Paired Tags
Unpaired Tags
Paired Tags:
A tag is said to be a paired tag if the text is placed between a tag and its companion tag. In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as Closing Tag.
Example:
<i>This text is in italics. </i>
Note: Here <i> is called opening tag. and </i> is called closing tag.
Unpaired Tags:
An unpaired tag does not have a companion tag. Unpaired tags are also known as Singular or Stand-Alone Tags.
Example : <br> , <hr> etc. These tags does not require any companion tag.
Those tags are called "Standalone Tags". Standalone tags are having no closing tags in HTML
But in XHTML they have to be self closed by adding forward slash before the closing angular bracket
I've always called them Singleton tags!
Optional closing tags like p, li, etc.
It is also worth mentioning that several other tags besides those mentioned in the question don't need a closing tag: they just close automatically when something specified in the standard appears.
For example:
<body>
<p>abc
<p>def
</body>
is equivalent to:
<body>
<p>abc
</p>
<p>def
</p>
</body>
because the p closes both at:
the start of another p
when the parent of the p closes
This is specified at 12.1.2.4 "Optional tags" https://html.spec.whatwg.org/multipage/syntax.html#optional-tags but I don't think there's an actual name besides "an element with an optional closing tag".
See also: P-end-tag (</p>) is not needed in HTML
That is called a self closing tag
There are paired and unpaired tags.
Unpaired tags are opened and do not have to be closed. They stand alone.
<img />, <input /> and <button />
I know them as bachelor tags.
e.g. here: http://moodle.cs.huji.ac.il/cs09/file.php/67782/xml-intro.pdf (page 30)
I've called them self-closing, single tags and monotags, I don't know why I haven't adopted a single term though.
I've seen them referred to as singlet (Which is presumably a short form of single-tag)
This sort of Element is an empty element (since it does not contain anything, it just may have attributes). That's the correct way according to the specification, AFAIK. (If the Element is not empty, the Element consists of the opening tag, the closing tag, and the content inbetween.)
Those tags are also called "unpaired", "single", or "bachelor tags". The term "self-closing" I don't like because they don't close themselves any more than other tags, it's still you or your program that puts the "/>" in there.
According to here:
An element consists of a start tag, content, and an end tag.