HTML for Absolute Beginners

Text and Headings

2 min read Last updated 45 minutes ago

Text is the heart of most pages. HTML gives you a set of tags for marking up text so browsers (and search engines) understand its structure.

Headings

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

html

<h1>Page title</h1>
<h2>Section heading</h2>
<h3>Sub-section heading</h3>

Use exactly one <h1> per page, and don't skip heading levels. Screen reader users rely on headings to navigate your content.

✓

SEO tip

Search engines use headings to understand your content. Put your most important keywords in your <h1> and <h2> headings.

Paragraphs and emphasis

html

<p>Regular paragraph text.</p>
<p>Use <strong>strong</strong> for importance and <em>emphasis</em> for stress.</p>

<strong> → bold text, means "this is important"
<em> → italic text, means "this is stressed"
<p> → a paragraph of text

Lists

Ordered lists use numbers, unordered lists use bullets:

html

<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

<ol>
    <li>Mix the flour and eggs</li>
    <li>Add the milk</li>
    <li>Whisk until smooth</li>
</ol>

Links

Links connect the web together:

html

<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>

Security on external links

Always add rel="noopener" when opening links in a new tab. It prevents the new page from accessing the original tab's window.

Putting it together

html

<article>
    <h1>My First Blog Post</h1>
    <p>Published on <time datetime="2025-01-15">January 15, 2025</time></p>
    <p>This is the opening paragraph of my post.</p>
    <h2>Why I started blogging</h2>
    <p>Blogging is a great way to <strong>learn in public</strong>.</p>
</article>

Previous What is HTML? Next Images, Video and Embedding