What type of content might an HTML element contain?

Question

The element in this exercise contains text but can elements contain other types of content? If so, what types of content might an HTML element contain?

Answer

It depends on the element. As you will learn, <p>, <div>, and <span> elements can contain text whereas elements like <ul> or <ol> should only contain <li> elements as direct children.

Block level tags like the <div> can contain all tags that can exist within the <body> (in other words, we can nest other elements within a <div>) whereas self-closing tags like <img> can not contain any content at all!

24 Likes

Use Markdown,BBCcode or HTML format

4 Likes

Where can I find a list of html tags that helps explain what kind of content they can contain?

66 Likes

The most common types of content that HTML elements contain are text, images, and video.

18 Likes

What about this case here : <div><p>hello world</p></div>

can i say that the <p> tag and the text (the paragraph element) is the content of the <div> element, or just the text “hello world” is the content or just the paragraph tag is the content?
I need to understand this exemple to understand the whole lesson.
thanks

7 Likes

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.

I often suggest to learners that they should not embark upon the study of CSS and script (JavaScript, ECMAScript, ES(n)) until well aquainted with HTML in its detail. The HTML is the root document from which the DOM is constructed. Understand the HTML side of the DOM and the rest will fall into place in short order with no confusion. Skip this step and expect trouble in the other two. That’s a promise.

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.

<div>
  <p>Hello World!</p>
</div>

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.

html
* head
* body
    + div
        + p
            + 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.

107 Likes

thank you very much for your detailed answer,i think i understand.
so, the content is what users get mening from it such as texts,images it is like you said the surface of the leaf, thus for the user the surface of the leaf is the content (the thing that he can derive the meaning from it). in this lesson we mean this type of content
as for user agent, the content is the structure and the semantic elements that it can derive the meaning from it.
also, i can understand that HTML is like a tree with HTML is the root and head and body element are direct children of the html element and the body and head are siblings (they will be in the same line in the tree) and like that.
thanks for your advice i will follow by it.

12 Likes