Python for All

Part One

Why Semantics Matter

Until this chapter, we have used generic containers. You could wrap everything in <div> tags and the page would look identical. But a browser — and a search engine, and a screen reader — cannot tell a headline from a byline from a footer if they are all just <div> elements.

HTML5 introduced semantic elements: tags whose names describe the role of the content they contain. When Google sees an <article> tag, it knows that content is a self-contained piece of journalism. When a screen reader encounters a <nav>, it offers to skip directly to navigation. These tags cost nothing to write, and they make your pages more discoverable, more accessible, and more professional.

Part Two

article, header, and footer

The three most important structural tags for a news article are:

• <article> — a self-contained piece of content: a news story, a blog post, a review. It should make sense on its own, extracted from the page.
• <header> — introductory content for its parent element. Inside an <article>, it holds the headline, byline, publication date, and section label.
• <footer> — concluding information: tags, related links, copyright, author bio.

Part Three

section and aside

<section> groups related content within an article. Each section typically has a heading. If you find yourself writing a long article with named parts — "Background", "Reactions", "What happens next" — each of those is a <section>.

<aside> holds content that is tangentially related to the main text: a sidebar fact box, a glossary of terms, a related-articles list. On screen, it is often displayed next to the main content.

Part Four

Lists — Ordered and Unordered

Lists are among the most useful structures in journalism: bullet-point summaries, numbered timelines, key facts boxes. HTML provides two types:

• <ul> (unordered list) — bullet points, for items where order does not matter.
• <ol> (ordered list) — numbered items, for sequences, rankings, or steps.

Both contain <li> (list item) elements.

Part Five

Your Turn — A Structured Article

Build a properly structured article using the semantic tags you have learned. Your article should include:

• <article> as the outer container
• <header> with a kicker label, <h1>, and byline with <time>
• At least two <section> elements, each with an <h2>
• An <aside> with a key-facts list
• <footer> with topic tags