Page Structure (Parents and Children)

One point of housekeeping that's important to get out of the way is the way a page is structured, and how we refer to elements being contained in other elements. In programming, this is referred to as inheritance, but in HTML, we mostly refer to it as parents and children.

Parents and children

HTML is all about nesting elements. When you open an element while another one is open, it's said to be the latter element's child:

<main>
	<p><strong>Tesserae</strong> is an HTML and CSS help site with a different focus.</p>
</main>

In this example, the <p> element is the child of the <main> element. Likewise, the <main> is the parent of the <p>. The parent is also referred to as the container of the child, because it's the element the child element is nested in.

Why page structure is important

It's important to keep this distinction in mind when we discuss page structure, semantics, and styling. HTML is all about defining the purpose of content, and if you think of HTML pages in terms of a tree structure:

It'll become a lot easier to manage and style. The blog posts (perhaps each inside <article> elements) are nested in, or are the children of, the main content (using a <main>), and so, the <main> is the container, or parent, of the <article> elements. Thus, if you wanted to style the background of all the blog posts at once, you'd style the <main>.

As you get further into styling, you'll also be able to select multiple elements simply by referring to their relationships to other elements. In our case, main > article is a perfectly valid CSS selector that'll pick all of the <article> elements nested directly inside <main> elements in one go.

Child elements also inherit certain styling information from the parent, hence why this type of thing is called inheritance.

Summary:

  1. HTML is all about structure and nesting tags. Therefore, keeping a clean page structure is important for writing easy to manage and style pages.
  2. An element nested inside another element is called that element's child. For an <article> inside a <main>, the <article> is the child.
  3. The element another element is contained inside is called the parent. For an <article> inside a <main>, the <main> is the parent.
  4. Parents are also called containers, because it's what the child element is contained inside.