Write an outline first
A heading explains what the next block of content is about. On a portfolio project, the page title could identify the project, followed by sections covering the problem, approach, implementation and outcome. Writing that outline before designing cards makes it easier to notice missing explanations and sections that repeat the same idea.
Separate hierarchy from size
Choose the heading level from the document relationship, not the font size you want. A small card title can be an h3, while an introductory h2 can be visually enormous. Classes control appearance. This separation lets you change the design without silently changing the information structure a reader encounters through heading navigation.
Use one clear page title
A practical default is one h1 that describes the current page. Beneath it, use h2 for major sections and h3 for subsections. For example, an h2 named Implementation could contain h3 headings for Data flow and Accessibility. The nesting should explain how the ideas relate rather than imitate a collection of typographic styles.
Make headings useful out of context
Compare Learn more with Image compression tradeoffs. The second heading tells someone what the section contains even when heard in a list of headings. Avoid stuffing headings with variations of a keyword. Readers need accurate labels that distinguish sections, especially when a long article contains several closely related implementation details.
Handle reusable cards carefully
A component cannot always assume that its title should be h2. The same project card might appear under an h2 on the homepage and directly beneath the page title on a directory. Pass an appropriate heading element into the component, or create a clear rule for the contexts in which it is used.
Review the outline as a reader
List the headings without their paragraphs and ask whether they tell a coherent story. Check for empty headings, skipped levels caused by visual styling and decorative text incorrectly marked as a heading. Test a long translated title and larger text settings as well: semantic correctness does not excuse clipping or a layout that conceals the title.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.