Challenge · medium
Semantic HTML News Article: Replace Div Soup
Goal: Turn a news story built from div soup into semantic HTML.
Learn
Div soup is a page made of nothing but <div> elements. It can look fine on screen. Underneath, though, browsers, search engines and screen readers see a pile of boxes and cannot tell the headline from the sidebar. The lesson on semantic HTML vs div soup puts the two side by side.
The fix is to use elements that say what they hold. <header>, <main>, <aside> and <footer> mark out the regions of the page. The story itself goes in <article>, and the HTML standard's article section (opens in a new tab) actually gives news stories as an example. Inside the article, the headline is a heading, text goes in <p>, a quotation in <blockquote> and the date in <time datetime="...">.
Writing class="header" on a div tells the browser nothing. Only the element name does. Many publishers also add structured data such as schema.org NewsArticle (opens in a new tab), and that sits best on top of clean semantic markup.
The short version
- Work out what each div does, then swap it for the element made for that job.
- A self-contained story goes in
<article>, with one<h1>for the headline. - Quotations belong in
<blockquote>and the publish date in<time datetime>. - Related links sit in an
<aside>inside<main>.
Example
<article>
<h2>Library extends hours</h2>
<p>Posted <time datetime="2026-02-10">10 February</time></p>
<p>The library now opens until 9 pm.</p>
</article>Your task
Rebuild the page so that not a single <div> is left:
- Put the site name in a
<header>and the copyright in a<footer>. - Wrap the story and the sidebar in
<main>, and the story on its own in an<article>. - Make the headline the only
<h1>on the page, inside the article. - Mark up the date as
<time datetime="2026-05-03">. - Write the text as paragraphs (3 or more inside the article) and the mayor's words as a
<blockquote>. - Move the related link into an
<aside>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Frequently asked questions
What HTML tags should a news article use?
Start with <article> around the story. Inside it, the headline is a heading, each paragraph is a <p>, the publish date is <time datetime="2026-05-03"> and longer quotations are <blockquote>. The article sits in <main> next to an <aside> of related links, with the site's <header> above and <footer> below. Drafting stories in a visual editor? A tool like WYSIWYG HTML (opens in a new tab) shows the source behind the formatted text, so you can see whether headings and quotes became real elements.
What is the difference between blockquote and q in HTML?
Size and position. <blockquote> holds a longer quotation that forms its own block, often with paragraphs inside, and browsers indent it (see the blockquote definition (opens in a new tab)). <q> holds a short quote in the middle of a sentence, and the browser puts the quotation marks around it for you. Either one can take a cite attribute pointing to the source URL.