Basic HTML Tags

Tags are the building blocks of every HTML page. Knowing the core tag set lets you mark up most content: articles, navigation, code, quotes. In this article we’ll cover the most essential tags and learn the difference between block and inline elements.

Headings h1–h6

Six heading levels — from the most important (<h1>) to the least significant (<h6>). A page should have only one <h1> — it’s the main heading that search engines index.

<h1>DevBlog</h1>
<h2>Python Articles</h2>
<h3>Asynchronous Programming</h3>
<h4>asyncio.gather</h4>

Rule: don’t skip levels just to get a different font size. <h4> right after <h2> is a logical error. Adjust sizes with CSS.

Paragraphs and text elements

<p>
  Python was created in 1991 by Guido van Rossum.
  The language is named after the comedy group Monty Python.
</p>

<p>
  <strong>Bold text</strong> highlights important information.
  <em>Italic</em> is used for emphasis or technical terms.
</p>

• <p> — a paragraph. The browser adds top and bottom margin automatically.
• <strong> — semantically important text (visually bold).
• <em> — emphasis (visually italic).

Code and preformatted text

For a programming blog, these tags are used constantly:

<!-- Inline code within text -->
<p>The <code>print()</code> function outputs text to the console.</p>

<!-- Code block preserving whitespace -->
<pre><code>def greet(name):
    return f"Hello, {name}!"

print(greet("world"))
</code></pre>

<code> marks a code fragment. <pre> preserves spaces and line breaks. Together they produce a properly formatted code block. Later we’ll add highlight.js for syntax highlighting.

div and span

<div> and <span> are “neutral” containers with no semantic meaning. They’re used for grouping and applying styles.

<!-- div — block container -->
<div class="post-card">
  <h2>Post title</h2>
  <p>Short description.</p>
</div>

<!-- span — inline container -->
<p>Status: <span class="badge">Python 3.12</span></p>

Prefer semantic tags where they fit: <article> instead of <div> for a post, <nav> instead of <div> for navigation.

Dividers

<p>First section.</p>

<hr />  <!-- horizontal rule — thematic break -->

<p>Second section.</p>

<p>Line 1.<br />Line 2 in the same paragraph.</p>

• <hr /> — a thematic break between sections (not just a decorative line).
• <br /> — a line break inside a paragraph. Use sparingly: for poems, addresses, or similar content.

Block vs inline elements

This fundamental distinction affects document flow:

<!-- Block elements stack vertically -->
<p>First paragraph</p>
<p>Second paragraph — starts on a new line</p>

<!-- Inline elements flow within text -->
<p>Read <a href="#">our article</a> on <strong>FastAPI</strong>.</p>

You should not wrap a block element inside an inline element — it violates the spec:

<!-- Wrong: <a> is inline, <div> is block -->
<a href="#"><div>Entire block as a link</div></a>

<!-- Correct -->
<div><a href="#">Link</a></div>

Post card in DevBlog

Let’s combine what we’ve learned into a real content block:

<div class="post-card">
  <h2>Python Decorators: the Complete Guide</h2>
  <p>
    <span class="tag">Python</span>
    <span class="tag">Advanced</span>
  </p>
  <p>
    Decorators let you modify a function's behaviour without changing its code.
    This article covers <code>@wraps</code>, decorator factories,
    and practical examples from real projects.
  </p>
  <hr />
  <p><em>5 min read</em> · <strong>15 March 2025</strong></p>
</div>

This is pure HTML structure with no styles. In the CSS articles we’ll turn it into a polished card.