The HTML article element marks up a complete, self-contained piece of writing. Think of it as the container for the page’s main composition: a newspaper-style article, review, blog entry, forum post, or essay. An article layout works especially well when writing stays focused on one topic but divides that topic into smaller subtopics. section 12.2.2 section 12.6
On a typical page, place one article inside main. Give it a title, usually an h2 heading, followed by one or more introductory paragraphs. Add section elements when the composition needs distinct subtopics; each section can contain an h3 heading and one or more paragraphs. A short article does not need sections: a title and paragraphs are also valid. section 12.2.2 section 12.3
<main>
<article>
<h2>Article Title</h2>
<p>Introductory paragraph</p>
<section>
<h3>Section 1 heading</h3>
<p>
Section 1 paragraph 1
</p>
<p>
Section 1 paragraph 2
</p>
<p>
etc.
</p>
</section>
<section>
<h3>Section 2 heading</h3>
<p>
Section 2 paragraph 1
</p>
<p>
Section 2 paragraph 2
</p>
<p>
etc.
</p>
</section>
<section>
<h3>Section 3 heading</h3>
<p>
Section 3 paragraph 1
</p>
<p>
Section 3 paragraph 2
</p>
<p>
etc.
</p>
</section>
</article>
</main>
Use this skeleton as a starting shape: replace the placeholder title and paragraph text, then add or remove section elements to fit the writing. section 12.2.2
A practical article page commonly separates page-wide structure from the composition itself:
- header holds the site logo, title, and tagline. section 12.1
- nav links to other areas of the site. section 12.1
- main contains the article and, when useful, an aside arranged alongside it. section 12.2.10
- aside holds indirectly related material, such as related links, news, social feeds, or advertisements. section 12.6
- footer supplies closing content such as a copyright notice. section 12.1
Build an article skeleton, then write the content
A generated page can include an h2 article title and an HTML comment marking where content belongs. Open the HTML file, write introductory text in p elements below the title, then add sections with h3 headings and paragraphs. Keep sidebar material in aside, where it can be a few paragraphs, a list of links, or other content related to the article. This separates the page framework from the writing you supply. section 12.3 section 12.2.10
When requesting generated code, name the article element explicitly and specify its title heading level. Also state the surrounding layout and styling needs, such as a main element with article and aside, CSS Grid for a two-column desktop layout, and a smaller-screen layout that changes main to one column. Specific prompts can include colors, fonts, font sizes, and heading levels. section 12.2.10 section 12.6
An article element can also begin empty. In an interactive course catalog, JavaScript fetches JSON data and writes the resulting text and HTML into the article, while filtering, sorting, and searching change what appears. Here, article serves as the page area populated by code rather than manually entered prose. section 13.5
