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:
| Type | Behaviour | Examples |
|---|---|---|
| Block | Takes full width, starts on a new line | <div>, <p>, <h1>โ<h6>, <pre>, <hr> |
| Inline | Flows within text | <span>, <a>, <strong>, <em>, <code>, <br> |
<!-- 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.
๐ฌ Comments (0)
No comments yet
Be the first to share your opinion about this article!