Headings and Paragraphs

Structure Alex's portfolio content with heading hierarchy and paragraph text that search engines and screen readers understand.

Every website needs structure. Think of a newspaper — it has headlines, subheadings, and body text. HTML gives you the same tools. Headings create hierarchy and importance. Paragraphs hold your main content. Search engines read your headings to understand what your page covers. Screen readers jump between headings to help visually impaired users navigate. And browsers apply default styling that makes content instantly readable.

Heading Tag Anatomy

HTML provides six heading levels — from h1 to h6. Here's how they break apart: The number tells you the heading level. h1 is biggest and most important. h6 is smallest. Most websites only use h1 through h3.

The Six Heading Levels

Alex wants to add proper headings to their portfolio homepage. Let's see all six heading levels in action: Notice how each heading gets progressively smaller. Browsers have built-in styles for headings. h1 typically renders around 32px. h2 around 24px. And so on.

Heading Hierarchy Rules

You can't just pick heading numbers randomly. There's a logical order: - Use only one h1 per page - Never skip levels (don't go h1 → h3) - Think of them like a book outline - Search engines use this structure

Paragraph Basics

The p tag wraps blocks of text. Every paragraph gets its own p element. Browsers add spacing above and below each paragraph automatically. Alex needs to write an "About Me" section for their portfolio: Each paragraph creates a new "block" on the page. Block elements take up the full width available and stack vertically. Paragraphs are block elements.

Real Portfolio Structure

Let's combine headings and paragraphs into something that looks like a real portfolio homepage. Alex wants sections for their intro, skills, and contact info: Now you can see the hierarchy in action. The h1 stands out as the page title. h2 elements mark major sections. h3 creates subsections under Skills.

Empty Lines Don't Create Paragraphs

A common mistake — thinking empty lines in your HTML create paragraph breaks. They don't. Watch: See that? The first three lines all ran together into one blob of text. Whitespace collapses in HTML — any amount of spaces, tabs, or line breaks becomes one single space. Only the proper p tags created actual paragraph breaks with spacing.

SEO and Accessibility Benefits

Proper headings and paragraphs aren't just for looks. They solve real problems: Companies like Apple and Airbnb use clear heading hierarchies on every page. Check out apple.com — notice how they never skip from h1 to h3. The structure flows logically.

Line Breaks vs Paragraphs

Sometimes you want a line break without paragraph spacing. HTML has the br tag for this. But use it carefully. The br tag is self-closing — no closing tag needed. It forces a line break right where you put it. Perfect for addresses, poems, or any content where line breaks matter.

Complete Portfolio Example

Here's a final example showing everything together. Alex's complete homepage with proper structure: Perfect structure. One h1 for the page title. h2 elements for major sections. h3 for project subsections. Each paragraph holds one complete thought. This HTML structure works for screen readers, search engines, and future developers who need to edit the code. And it looks professional in any browser without any CSS styling.

Quiz