Content is everything that we download to the requesting client. As for what elements may contain (including permitted attributes) is defined in the W3C recommendations. w3.org
What is most important is that we use markup to structure the document, not to present it.
Given the generic nature of content we use some tags for structure, and some for semantics. Our HTML if well formed will be easily readable in raw form. There is meaning in structure, both to a reader of the source, and to search engines. Where structure alone doesn’t provide enough information to the user agent we resort to semantic elements to convey meaning.
The user is getting meaning from the content; the user agent is deriving meaning from the structure and semantic elements. It’s important to draw this distinction. We’re not talking about one kind of meaning, but two.
From the interpretation of our structure we derive the behavior of the document, which again drives the APIs. Using style sheets and script we can enhance those behaviors, or make them more readily visible (accessible) to the user. This takes us into the presentation, which is not part of the above discussion.
Now given that the DOM is a tree, in its most general form, we have a root element, the
<html></html> indicated by
<!DOCTYPE html>, and all others fall into that as child elements.
In the above, DIV is the parent element. Its content, or child element is the P. Collectively they are a part of the content of the page, not separately or distinctly. The only thing distinct is the message we publish to the user.
Given we have by the point of the above a well formed document, we will have a root element, a direct child element, the BODY, and it will contain the above. HTML is a parent, and all elements that follow are children. BODY is a direct child of HTML, and only one of a handful that are allowed. Everything the user sees will be contained in the body of the document. That is the content.
So now we can construct the tree.
+ text node
+ text node
+ text node
The root of the tree is html, the trunk, body. DIV is a branch node, and P a leaf node off that, with the text being the surface of the leaf. Note that the user sees the leaves of the tree.
Bottom line, spend as much time as it takes to track down and study the specifications and recommendations, and a little history thrown in and study of earlier releases. One cannot stress enough how important it is that you not only become fluent with HTML, but fluent at delving deep into the W3C specifications. Look up every new element you learn about… The same day, preferably. You’ll find links to most in the MDN pages, for a simpler approach.
Cement this stuff into your brain. Seriously. This will give you all the legs you need to stand on once you embark on CSS and script.