HTML - (Content of an element|Content Model)

About

The contents of an element are its children in the DOM tree.

Each element has a content model: a description of the element's expected contents.

HTML Authors must not use HTML elements anywhere except where they are explicitly allowed, as defined for each element, or as explicitly required by other specifications (such as ATOM)

Category

Each element in HTML falls into zero or more categories that group elements with similar characteristics together.

Content Venn

Rendering

The content is rendered within the css box in the middle.

Boxdim

See CSS - Content (Property)

DOM (Javascript)

This code shows you how to select element by Id and set the content with the Javascript DOM API

textContent

textContent will do the following text transformation:

In the example below, we demonstrate that:

Example:

  • The javascript that selects the p element and set the text content
document.getElementById('myId').textContent = `<strong>New 
Content
</strong>
`;
  • The HTML
<p id="myId"></p>
  • The result

innerText

innerText will do the same as textContent except that it will preserve the EOL (end of line) by transforming them as br element

Example:

  • The javascript that selects the p element and set the innerText
document.getElementById('myId').innerText = `<strong>New 
Content
</strong>
`;
  • The HTML
<p id="myId"></p>

innerHTML

innerHTML will see the text passed as HTML markup and transform it in DOM elements

Example:

  • The javascript that selects the p element and set the innerHTML
document.getElementById('myId').innerHTML = `<strong>New 
Content
</strong>
`;
  • The HTML
<p id="myId"></p>
  • The result: the text was interpreted as HTML

Documentation / Reference





Discover More
Css Padding
CSS - Padding

The padding area is the space between the content of the box and its border. In the below image, this are the areas: TP (top padding) BP (bottom padding) LP (left padding) RB (right padding)...
CSS - Block And Inline Layout (Block Formatting context)

CSS - Block And Inline Layout (Block Formatting context) CSS Block and inline layout is the first layout model of CSS. It's also known as: block formatting flow layout The component are laid...
Boxdim
CSS - Content (Property)

The content CSS property is used with: the ::before and ::after pseudo-elements to generate content respectively: before or after the content of an element. Visually, the content is located at...
DOM - Element content

Content is a type of node that represents a XML content element (and therefore also a HTML content element if the document type is HTML) ie API With the WebAPI DOM, the Element.innerHTML property...
HTML - (Element|Tag|Markup)

element in HTML where: Tag In HTML, Tag name of an element are TR/html-markup/documents.htmlcase-insensitive. In XHTML, tag names are case sensitive and must be written in their canonical...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
HTML - Aside (Content Element)

aside is an element: that indicates content that is only tangentially related to the rest of the content. asideparentheticalsmain content The element can be used for: typographical effects...
HTML - Embedded Content

Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document. HTML Elements that...
HTML - Metadata Content

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other “out of...
HTML - Palpable content

As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents: that is palpable content (Can be manipulated ?) and that...



Share this page:
Follow us:
Task Runner