Two <tr> elements

Two <tr> elements <tr></tr><tr></tr>
In other words, each opening and closing tag represents one element. I this correct?

Yes, in most cases. Elements that are meant to contain text or other objects have both an OPENTAG and an ENDTAG.

<p></p>

<tr></tr>

Elements that are not meant to contain text or other objects are called void elements and contain only attribute nodes. For example,

<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<img src="image.png" width="100%" alt="">
<input type="text" value="" placeholder="Enter your name">
<br>
<hr>

None of the above are containers.

1 Like

Some elements do not stand on their own, such as the <tr></tr>. This element must be inside a <table></table> at the very minimum, but may also appear inside a <thead></thead>, <tbody></tbody>, or <tfoot></tfoot>, where all of the above must be inside a TABLE.

The last descendant element is the <td></td> where tables are concerned. It, along with <th></th> are the elements that contain the content of the table. None of the parent elements contain text or other objects.

<table>
  <caption>description of table</caption>
  <thead>
    <tr>
      <td>empty cell</td>
      <th scope="col">column heading</th>
      <th scope="col">column heading</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th scope="row">row heading</th>
      <td>content</td>
      <td>content</td>
    </tr>
  </tbody>
</table>
1 Like

Thanks for the great responses above. You bring up some good HTML 5 jargon that I must master.

Elements that are not meant to contain text or other objects are called void elements and contain only attribute nodes.

descendant element is the <td></td>

Is a descendant element the same as saying a child elements?

So a void element is an element that does NOT contain text or objects?

A descendant element is an element that can only exist inside another a main element? Such as

the main element. the descendant element? A descendant element is the same as a child element?

Is this correct? In HTML 5 they are called descendant element and in CSS they are called descendant selectors?

Yes, more or less. To keep them separate in my mind I think of child node.

Correct. The element has only attributes and no content. Take for instance the IMG element…

<img src="image.png" width="100%" alt="">

There is no such ENDTAG as </img> since there would never be anything between the tags. Content that comes down from the server separately and is inserted into the document tree once the dimensions are calculated. The browser gets all the information from the attributes. When it encounters a src attribute it bundles a request to the host server for the resource at that URL. Same applies to,

<link href="style.css" rel="stylesheet">

The resource at the URL in the HypertextReference (href) is requested when the browser encounters that attribute.

Void elements are self-closing tags.

An element is synonymous with selectors. They essentially mean the same thing. Content can only be selected if it has a reference element.

<p></p>

an element node, of type p.

p {}

is a selector rule for that type of node.

A descendant is any element that is contained in another element. It is a child of that element, but also of the element that contains its parent.

TD descends from TR which descends from TBODY (etc.) which descends from TABLE which descends from BODY which descends from HTML, the document root. In short, <td></td> is a descendant of <html></html>.

In HTML5, <!DOCTYPE html> is the document type declaration that tells the user agent (browser, robot, screen reader) what namespace to reference for the parsing specifications, and that the root element is <html></html>. HTML is the great-great-great grandparent and every element in the document are its children.

Selectors have what are called combinators that modify it to narrow down the specificity.

p {}    /* type selector */

is a generic selector rule that targets ALL paragraph nodes (P-nodes) in the document.

td p    /* descendant selector */

is also generic, but more specific since it only targets P-nodes that are descendants of table data nodes. They may be nested at any level inside the TD.

<td>
  <p></p>
  <div>
    <p></p>
    <blockquote>
      <p></p>
      <p></p>
    </blockquote>
    <p></p>
  </div>
  <p></p>
</td>

All of the above P-nodes will be affected by the td p {} selector rule.

td > p    /* child selector */

is even more specific because it targets only P-nodes that are a direct child of TD and ignore all others that may be nested in that TD inside other elements, such as a DIV.

td > p:nth-child(2)    /* pseudo-class child selector */

is more specific still as it targets only the P that is the nth direct child of TD.

This will come out in greater detail as you study CSS.