HTML Basics

Headings & Text

⏱ 5 min read📖 Beginner

HTML provides six heading levels (<h1> through <h6>) and several text elements for paragraphs, emphasis, and inline formatting. Using them correctly gives your content structure and meaning.

The words on a web page aren't just text — they have hierarchy. Headings tell readers (and search engines) what a page is about and how its sections relate to each other. Inline elements like <strong> and <em> add emphasis without breaking the flow of a paragraph.

Headings

There are six heading levels, from <h1> (most important) to <h6> (least important):

<h1>Page Title</h1>
<h2>Main Section</h2>
<h3>Sub-section</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest heading</h6>

💡

Every page should have exactly one <h1> — it's the main title. Think of headings like a document outline: <h2> for top-level sections, <h3> for sub-sections inside those. Don't skip levels (e.g. don't jump from <h2> to <h4>).

Paragraphs

The <p> tag wraps a block of text into a paragraph. Browsers add spacing above and below each paragraph automatically:

<p>This is the first paragraph. It can contain as much text as you need.</p>

<p>This is the second paragraph. Each one is treated as a separate block.</p>

Bold and Italic

Use <strong> for important text (rendered bold) and <em> for emphasis (rendered italic):

<p>Please <strong>save your work</strong> before closing the tab.</p>
<p>The answer is <em>always</em> in the last place you look.</p>

You may also see <b> and <i> used for bold and italic. The difference is semantic: <strong> conveys importance, while <b> is just visual styling with no added meaning. Prefer <strong> and <em> for meaningful content.

Line Breaks

HTML ignores extra whitespace in your source code — multiple spaces or line breaks collapse into one. To force a line break inside a paragraph, use the self-closing <br> tag:

<p>
  123 Main Street<br>
  Springfield, IL 62701
</p>

Inline Code

Use <code> to display inline code or technical terms in a monospace font:

<p>Use the <code>margin</code> property to add space outside an element.</p>

Blockquotes

Use <blockquote> for longer quoted passages:

<blockquote>
  <p>The web does not just connect machines, it connects people.</p>
</blockquote>

Horizontal Rule

The <hr> element creates a thematic break — a horizontal divider between sections:

<p>End of one section.</p>
<hr>
<p>Start of the next section.</p>

Putting It Together

Here is a complete example combining everything from this lesson. The output renders automatically below — click Try It Yourself to edit the code live.

Write It Yourself

Now try writing your own HTML from scratch. Use what you've learned — add headings, paragraphs, bold and italic text, and anything else you want. Hit Run to see your result.

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.