Home How to find empty elements in html5
Reply: 3

How to find empty elements in html5

santhosh
1#
santhosh Published in 2018-01-13 07:42:28Z

What is empty element in html 5 ?

From the below options how can I find out empty elements?

1. <br/>
2. <p> </p>
3. </img>
4. </p>

Thanks in advance

Harsh Patel
2#
Harsh Patel Reply to 2018-01-13 07:49:25Z

The term "empty element" comes from SGML, on which HTML standards prior to HTML5 were based, and where the EMPTY keyword is used to represent elements with an empty content model. Here's what the HTML 4 spec says:

The allowed content for an element is called its content model. Element types that are designed to have no content are called empty elements. The content model for such element types is declared using the keyword "EMPTY".

With an example declaration for the img element:

This example illustrates the declaration of an empty element type:

<!ELEMENT IMG - O EMPTY>
  • The element type being declared is IMG.
  • The hyphen and the following "O" indicate that the end tag can be omitted, but together with the content model "EMPTY", this is strengthened to the rule that the end tag must be omitted.
  • The "EMPTY" keyword means that instances of this type must not have content.

XML defines an "empty element" quite differently:

[Definition: An element with no content is said to be empty.]

The difference here is that XML does not say that an "empty element" is "an element whose content model is empty". Instead, it simply says that an "empty element" is one that has no content. This is regardless of whether or not the document type or XML schema defines that specific element to have no content by necessity; XML itself by nature places no such restrictions.

An additional term, "empty-element tag", is used to describe the shortcut syntax /> commonly used to indicate empty elements (again, regardless of whether or not they are empty by definition). This is also commonly referred to as "self-closing" syntax.

The term "void element" is new to HTML5. It has the same definition as the pre-HTML5 definition of "empty element": namely, an element that only has a start tag, no end tag, and cannot have any content whatsoever. Although the W3C HTML5 spec does not reference the term "empty element", the term "empty-element tag" as described in XML is used in a related document:

In the HTML syntax, void elements are elements that always are empty and never have an end tag. All elements listed as void in the HTML specification or in an extension spec, MUST in polyglot markup have the syntactic form of an XML empty-element tag (<foo/>). Other elements MUST NOT use the XML empty-element tag syntax.

It seems that modern HTML standards now prefer the XML definition and eschew the former definition. This seems fitting because modern HTML is no longer an SGML application, but a markup language in its own right. (It's not XML either, but that's where polyglot markup comes into play.)

So,

  • An empty element is one that has no content, regardless of whether it is allowed to have content in the first place.
gavgrif
3#
gavgrif Reply to 2018-01-13 07:56:29Z

In this context - empty means no content and no children - as can be seen from this demo - even whitespace counts as content - so there is only one :empty li in the list (<li></li>) and using the elements from your post (modifiying to correct hte structure <img/> is also showing as empty.

#emptyTest * {
  display:block; 
  min-width:100px;
  min-height:30px;
}

#emptyTest *:empty {
  background:red;
}
<div id = "emptyTest">
  <ul>
    <li>1</li>
    <li></li>
    <li> </li>
  </ul>
  
  <br/>
  <p> </p>
  <img/>
</div>

imhotap
4#
imhotap Reply to 2018-01-13 13:07:30Z

As Harsh Patel has pointed out, the concept of an empty element comes from SGML, on which HTML is based.

In SGML, empty elements are those declared as follows:

<!ELEMENT x - - EMPTY>

or just

<!ELEMENT x EMPTY>

(where the - - characters are tag omission indicators, another feature of SGML not to be confused with empty elements; you can read more about it in any text on SGML, or in my attempt at a modern account on SGML).

SGML empty elements, when following traditional SGML parsing rules, must not have end-element tags. In the updated WebSGML (ISO 8879 Annex K) revision of SGML, end-element tags for elements with declared content EMPTY are tolerated according to the FEATURES MINIMIZE EMPTYNRM setting of the effective SGML declaration (a set of parsing flags and properties for an SGML parser).

ISO 8879 Annex K was published in 1999 to align SGML with XML, the then-new subset/profile of SGML introduced by W3C members to simplify parsing, with the intent to eventually replace SGML as basis for HTML. In XML, elements with declared content EMPTY must either have end-element tags, or use the XML-style empty element syntax <x/> which represents a sequence of a start-element tag immediately followed by an end-element tag (and which is also supported by WebSGML, but has no meaning in HTML, even though you often see markup such as <p ... /> in an attempt to make markup parse as both HTML and XML/XHTML). The overriding goal of XML was to allow schema-less parsing of markup, eg. eliminating the need to tell a parser empty element, tag omission, attribute quoting and other short form rules via markup declarations such as the ones above.

But XHTML kindof failed as a widely supported standard for browsers (for whatever reason), and around 2005/2006, the Google-led WHATWG group of browser vendors started working on HTML 5, defining their own rules for HTML parsing which are normatively not based on SGML, much less on XML. Even though the HTML 5 specification doesn't normatively reference the SGML ISO 8879 standard, HTML 5 is of course still based on SGML, and modern HTML, with all its special rules, can be parsed cleanly as SGML (see DTD for HTML 5.1 and HTML 5 DTD reference; disclaimer: this is my project and the full paper of a talk I gave at the XML Prague 2017 conference).

In the W3C HTML 5.2 recommendation version (published yearly by W3C from WHATWG materials), the following elements are empty elements: base, link, meta, hr, br, wbr, source, img, embed, param, track, area, col, and input. This is essentially a fixed set of elements which isn't ever going to change (save for removals, eg. in W3C HTML 5.2, the keygen element which used to be an element with declared content EMPTY in the HTML 5.1 version was removed).

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.330993 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO