How do I present product ingredients or materials clearly on a website?

Treat this as two separate jobs: verify the content, then organize it. First, copy the product-specific wording from a record or label your organization has approved. Mark any detail you cannot confirm; do not fill gaps from memory or infer an ingredient, material, percentage, origin, or product benefit. This guide can help with presentation, but it cannot establish which product facts are correct or what disclosure wording applies.

For the page, give the details a descriptive heading, such as “Materials” or “Ingredients,” and group related information beneath it. Short, descriptive headings and a meaningful heading hierarchy help readers navigate sections; styling a line to look like a heading is not the same as giving it heading structure [S1]. Use an unordered list for items with no required sequence, an ordered list only if the sequence matters, or a term-and-description format when each named item needs its own explanation [S2].

Here is a copyable structure. The bracketed text is a placeholder, not a claim about a real product:

Product details

Ingredients

• [Ingredient wording copied from approved product information]
• [Ingredient wording copied from approved product information]

Materials

• [Material name as verified]
• [Material name as verified]

Notes

• [Verified explanation, if needed]
• [Question or detail awaiting review]

Keep the list itself faithful to the approved source. Put an explanation in a separate note rather than quietly rewriting an item. For example, if an approved record names “[material],” do not change that to “[material] made from [unverified source]” just to make the page sound more informative. If you cannot confirm a note, omit it or mark it internally for review; do not publish the placeholder as though it were product information.

For several distinct items, a paragraph can make individual entries harder to pick out. A list is usually a clearer presentation choice when readers need to scan separate ingredients or materials; use an unordered list if there is no meaningful order. If the sequence itself is important, use a numbered list and verify that the ordering comes from the approved product information rather than an editorial choice. WAI describes lists as suited to different relationships: unordered for items without a required order, ordered for sequences, and description lists for terms paired with descriptions [S2].

Keep headings logical and nested instead of choosing them just for their visual size. Well-structured content supports navigation, including for people using screen readers or a keyboard [S3]. Those structure recommendations do not check the product facts or decide required labeling language.

Compare every published item with the approved product record or label, and ask the responsible reviewer which wording must remain exact. The right wording can depend on the product and the requirements that apply; the web-structure guidance cited here does not determine those requirements. Do not present this layout advice as legal labeling advice.

A practical final pass is to check that each detail has a source, the headings describe what follows, the list type fits the relationship between entries, and no unverified explanation has slipped into the copy. If exact wording is uncertain, pause publication of that detail and ask the appropriate product or compliance reviewer. Clear page structure helps readers navigate; it does not validate claims or establish that a disclosure is complete [S1] [S3].