Learning HTML - Basic Text and Block Elements
This episode breaks down basic text and block elements: headings h1 through h6, paragraphs, text formatting elements like strong and em, and div and span as generic wrapper elements.
#Introduction
After the document skeleton stood in episode 2, it's time to fill body with real content. Episode 3 covers basic text and block elements — the main ingredients of nearly every web page: headings, paragraphs, and wrapper elements. Mastering these means you can already write a page that reads well.
We'll also break down a key concept that often confuses beginners: the difference between block and inline elements. This understanding determines how elements arrange themselves on the page before CSS even gets involved.
#Block vs Inline
#Two Classes of Elements
Every HTML element falls into one of two display behavior categories:
- Block: starts a new line and spans full width. Examples:
h1,p,div. - Inline: flows within the same line as surrounding text. Examples:
strong,em,span.
Blocks form full boxes that stack downward; inline elements flow sideways. When CSS arrives in episode 13, this behavior can be changed — but correct structure from the start makes everything easier.
#Headings: Marking Titles and Subtitles
#The h1 to h6 Hierarchy
HTML provides six levels of headings, from h1 for the main title down to h6 for the lowest-level title. Headings mark content structure, not just font size.
<h1>Judul Utama Halaman</h1>
<h2>Bagian Pertama</h2>
<h3>Sub Bagian dari Bagian Pertama</h3>
<h2>Bagian Kedua</h2>A page should ideally have only one h1, and headings should not skip levels without reason — for example jumping from h2 straight to h5. This rule matters for accessibility and SEO, and we'll deepen it in episode 12.
#Paragraphs and Text Formatting
#The p Element
The p element marks a paragraph. The browser adds spacing between paragraphs automatically, so don't use repeated br tags to create space.
<p>Ini paragraf pertama. Browser memberi jarak antar paragraf secara otomatis.</p>
<p>Ini paragraf kedua, masih satu paragraf yang utuh dan mengalir.</p>#Text Formatting Elements
A few inline elements for marking text meaning:
strongfor important text, usually rendered bold.emfor emphasis, usually rendered italic.markfor highlighted text.brfor a line break inside a paragraph.hrfor a thematic break between sections.
<p>
Pelajari <strong>struktur dokumen</strong> dengan <em>sungguh-sungguh</em>.
<br>
Ini baris baru di dalam paragraf yang sama.
</p>Notice that strong and em carry semantic meaning, not just bold or italic styling. This meaning is what screen readers and search engines read.
#div and span
#Generic Wrapper Elements
div and span are elements without specific meaning — pure wrappers for layout and styling purposes. div is block-level, span is inline.
<div class="kartu">
<h2>Kartu Produk</h2>
<p>Harga: <span class="harga">Rp150.000</span></p>
</div>Although div is very useful, don't make a habit of wrapping everything in div. In episode 7 you'll learn semantic elements that fit many cases better. Use div only when no element with matching meaning exists.
#Exercise: A Profile Page
Combine everything into a simple profile page:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Saya</title>
</head>
<body>
<h1>Profil Saya</h1>
<h2>Tentang</h2>
<p>Saya sedang belajar HTML dan suka <strong>membangun web</strong>.</p>
<h2>Keahlian</h2>
<p>Markup dasar, struktur dokumen, dan <em>semangat belajar</em>.</p>
<div class="catatan">
<p>Catatan: halaman ini akan terus berkembang sepanjang series.</p>
</div>
</body>
</html>Save it as index.html, then open it through the server and observe in DevTools how headings, paragraphs, and div arrange themselves. The python3 -m http.server 8080 command from episode 2 still works to preview the result.
#Common Mistakes and Solutions
#Using Headings for Font Size
Don't use h1 just because you want big text. Headings mark structure; size is handled by CSS. If you need large text without heading meaning, use p or span and set the size with CSS.
#Repeated br for Spacing
Using three br tags in a row to create empty space is a sign of wrong structure. Space between blocks is a CSS margin job, not br's.
#Closing
Episode 3 fills body with basic elements: hierarchical headings, flowing paragraphs, meaningful text formatting, and div and span as generic wrappers. The block-versus-inline concept becomes the lens for reading how elements are arranged.
Key takeaways:
- Block elements start a new line; inline elements flow within a line.
- One
h1per page, and headings should not skip levels. strongandemcarry meaning, not just styling.divandspanare generic wrappers; use them only when no more appropriate element exists.- Avoid repeated
brand using headings just to change size.
In the next episode, episode 4, we'll cover lists, tables, and structured content — ul, ol, li, plus table with thead, tbody, and th. Your content will start getting organized into structures that both machines and humans can read easily.