HTML is a markup language that tells the browser how to interpret a page’s structure. It doesn’t program logic — it describes content: here’s a heading, here’s a paragraph, here’s a link. CSS handles appearance, JavaScript handles behaviour. In this article we’ll look at how an HTML document is structured and build the skeleton of our DevBlog.
HTML is not a programming language
HTML stands for HyperText Markup Language. It has no variables, conditions, or loops. Its job is to wrap content in tags and tell the browser what it’s looking at: a heading, a list, a form, or an image.
Compare the roles of the three core web technologies:
| Technology | Responsible for | Python-project analogy |
|---|---|---|
| HTML | Structure and meaning | Data models |
| CSS | Visual appearance | Templates / themes |
| JavaScript | Interactivity | Client-side logic |
HTML document structure
Every HTML file starts with a required document-type declaration and a few root elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevBlog — a Python developer's notes</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML file.</p>
</body>
</html>
What each part does:
<!DOCTYPE html>— tells the browser the document follows the HTML5 standard.<html lang="en">— root element; thelangattribute helps search engines and screen readers.<head>— meta-information: charset, tab title, CSS links.<meta charset="UTF-8">— character encoding; without it non-ASCII text may render as gibberish.<meta name="viewport" ...>— correct scaling on mobile devices.<title>— text on the browser tab and in search results.<body>— everything the user sees.
Tags, elements, and attributes
A tag is a name wrapped in angle brackets: <p>. Most tags come in pairs — opening <p> and closing </p>. Some are self-closing: <br />, <img />.
An element is a tag plus its content: <p>Paragraph text</p>.
An attribute is extra information inside the opening tag:
<a href="https://python.org" target="_blank">Python website</a>
Here href and target are attributes of the <a> tag. Attributes are always written as name="value".
Nesting
An HTML document is a tree. Elements nest inside each other, and the order in which tags are closed must match the order in which they were opened:
<!-- Correct -->
<div>
<p><strong>Bold text</strong> inside a paragraph.</p>
</div>
<!-- Wrong — tags overlap -->
<div>
<p><strong>Bold</div>
</strong></p>
Browsers can recover from malformed markup, but the result is unpredictable. Write clean, properly nested HTML.
DevBlog skeleton
Create devblog/index.html — this will be the blog’s home page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevBlog</title>
<!-- We'll add link rel="stylesheet" here later -->
</head>
<body>
<!-- Site header -->
<header>
<h1>DevBlog</h1>
<p>A Python developer's notes</p>
</header>
<!-- Main content -->
<main>
<article>
<h2>First post</h2>
<p>A short description of the post.</p>
<a href="/posts/first.html">Read more</a>
</article>
</main>
<!-- Footer -->
<footer>
<p>© 2025 DevBlog</p>
</footer>
</body>
</html>
Key point: <header>, <main>, and <footer> are semantic tags. They don’t change the visual appearance, but help the browser, search engines, and assistive tools understand the role of each block.
What’s next
Open index.html directly in your browser — drag the file onto a tab or press Ctrl+O. You’ll see unstyled but working HTML. In the next articles we’ll add content tags and connect CSS.
💬 Comments (0)
No comments yet
Be the first to share your opinion about this article!