Make

What Is HTML? The Basics of Web Pages

HTML is not the paint. It is the skeleton: headings, paragraphs, links. Paint needs bones.

So, What Exactly Is HTML?

HTML stands for HyperText Markup Language — a language that "marks up" hypertext (documents connected by links) to tell the browser which part is a heading, which is a paragraph, and which is a link. Tim Berners-Lee invented it in 1991 alongside the birth of the web. More than 30 years later, HTML is still the foundation of every web page in the world.

How It Works: Tagging "This Part Is ___"

HTML wraps text in "tags" like <h1> or <p> to identify what each part is. Tags come in opening/closing pairs, and the browser reads them to automatically build the layout.

HTML Size of Major Pages (before compression, approximate) Bar width is proportional to HTML byte count. Your first page needs only a few KB Your First HTML 1KB (30 lines) School Notice Page 8KB (200 lines) Wikipedia Article 120KB Yahoo! News 350KB X (formerly Twitter) 950KB YouTube Top Page 1.5MB 0KB 500KB 1000KB 1500KB Your first HTML is fine at 1KB A tiny file you can write in any text editor ※Sizes are 2025 approximations. In SPAs (Single Page Applications), JS makes up most of the size, so the raw HTML is actually small.
Fig 1: HTML is just a collection of text. From 1KB up to massive websites — it is all HTML.

HTML Describes "Meaning," Not Just Appearance

A common pitfall is using <h1> just to make text bigger. Tags carry semantic meaning: <h1> is the page topic, <h2> marks a major section, <p> is a paragraph, <ul> is a bullet list. Appearance — colors, spacing — is handled by CSS. Well-structured HTML is more readable by search engines and screen readers, and much easier to restyle later.

8 Essential HTML Tags

HTML has over 100 tags, but you only need to memorize 8 to start. With just these 8 tags you can build a profile page or a simple blog site from scratch.

The Same HTML Code — Here Is How It Looks in a Browser Left: actual HTML code / Right: browser display. Colors indicate tag type. 1 <!DOCTYPE html> 2 <body> 3 <h1> Profile </h1> 4 <p> I love soccer </p> 5 <img src="me.jpg"> 6 <ul> 7 <li> Math </li> 8 <li> English </li> 9 </ul> 10 <a href="x.com"> Find me on SNS </a> Profile I love soccer img photo • Math • English Find me on SNS Tag color legend h1 (heading) p (paragraph) img (image) ul/li (list) a (link) These 5 tags alone are enough to build a basic profile page skeleton
Fig 2: HTML code and its browser output. The colors show how each tag on the left maps to the right side.

Minimal Sample: A Profile Page

You can write an HTML file in Notepad. Copy the code below, save it as "mypage.html," and double-click it to open in a browser.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>マイページ</title>
</head>
<body>
  <h1>こんにちは、ゆうきです</h1>
  <p>趣味はサッカーとプログラミングです。</p>
  <ul>
    <li>数学</li>
    <li>英語</li>
  </ul>
</body>
</html>

When It Does Not Display Correctly

If your first HTML does not render, check the file name and save location before looking at the code itself. If the extension is still .txt, the browser cannot open it as HTML. On Windows, enable "File Name Extensions" in Explorer and confirm it reads mypage.html. Then check for unclosed tags, half-width angle brackets, and that the character encoding is UTF-8. Learning to track down errors is a core part of web development.

Common Pitfalls to Watch Out For

3 Traps Beginners Often Fall Into
  • Forgetting the closing tag. <p> always needs its matching </p>
  • Accidentally mixing in full-width spaces. Inside tags, only half-width spaces are allowed
  • Trying to change colors and fonts with HTML alone. Appearance is the job of CSS, a separate language

How Will This Help You in the Future?

Being able to write HTML lays the foundation for building your own portfolio site or a club activity page. And once you can read HTML, you can use the browser DevTools to inspect any page's structure — a concrete window into how the web works. Designers, writers, marketers, and engineers alike find it much easier to communicate when they understand page structure.

What You Can Do Starting Today

Today: introduce yourself with tags
  1. In a text file, use only h1, p, and a
  2. Save as .html and open it in a browser
  3. Look at the size difference yourself

Summary

HTML is the language that builds the skeleton of web pages and is the foundation of every website. With just 8 basic tags, you can build a profile page or a simple blog-style site. The path to becoming a web creator starts the moment you open a text editor and type your very first <h1>.

Check HTML's job is?