HTML Basics —
Understanding the Skeleton of a Web Page
Every website starts with HTML. In this part, we'll unpack the code you wrote last time line by line, learn the concept of semantic tags, and build the skeleton of the café SOEL page from scratch.
Quick Recap
- Installed VS Code and added extensions (Live Server, etc.)
- Created the cafe-soel project folder and downloaded image assets
- Created index.html and displayed "Hello World!" in the browser
If the index.html you created last time is showing up in your browser, you're all set for today. Whether you changed the heading text or left it as is, either is fine.
Goals for This Part
- Understand the basic structure of HTML (DOCTYPE, html, head, body)
- Learn the concept of semantic HTML
- Write the structural skeleton of the café SOEL website
See the Part 2 result →
We won't be using CSS yet, so the result will be plain text on a white background. Don't worry — just like building a house, we start with the frame. The interior design comes later.
What Exactly Is HTML?
HTML stands for HyperText Markup Language, and it's the language that defines the structure of a web page.
Think of building a house. The very first thing you do is put up the frame — the beams, walls, and roof structure. That frame doesn't have paint, furniture, or decorations yet, but it defines the shape of every room. HTML works exactly the same way for a web page.
"This is a heading." "This is a paragraph." "This is a link." "This is an image." HTML's job is to label each piece of content with its meaning and role.
Making things look nice is CSS's job, which we'll cover in Part 4. HTML and CSS have clearly separated roles — if HTML is the frame of a house, CSS is the paint, wallpaper, and furniture.
HTML is a language for writing meaning, not appearance. Once you grasp that, you're already halfway there.
Unpacking the Code You Wrote Last Time
Open the index.html from last time. It should look something like this (the heading text may differ if you edited it, but the structure is the same):
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>café SOEL</title>
</head>
<body>
<h1>ようこそ、café SOELへ</h1>
<p>café SOELのWebサイトを作っていきます。</p>
</body>
</html>This code already contains most of the basic HTML structure: <!DOCTYPE html>, <html>, <head>, <body>. Last time we described the first line as "a kind of magic spell." Today, let's understand what each line is actually doing.
<!DOCTYPE html> — Declaring "This Is HTML5"
The very first line, <!DOCTYPE html>, tells the browser, "This file is written in HTML5." Last time we called it a magic spell — now let's get a bit more specific.
Without this declaration, browsers may render your page in "quirks mode" — an older rendering method that can cause layout problems. Always put it on line one.
<html lang="ja"> — The Root Element
The <html> tag wraps everything on the page. It's the root element — the outermost container for all your HTML content. You already had this in your Part 1 code.
The lang="ja" attribute tells browsers and search engines, "This page is in Japanese." For an English page, you'd write lang="en". Screen readers (assistive technology for visually impaired users) use this attribute to choose the correct pronunciation rules.
<head> — Behind-the-Scenes Information
The <head> section contains information that doesn't appear on screen but is essential for the page to work correctly. This includes character encoding, the page title, and CSS imports.
If the <body> is the meal on the plate, the <head> is the recipe card and nutrition label. The customer doesn't see it, but the kitchen can't work without it.
<body> — The Visible Content
Everything you write inside <body> shows up on screen. Text, images, links, buttons — everything the user sees and interacts with goes here.
Adding One Important Line to <head>
Your Part 1 code had <meta charset="UTF-8"> and <title> inside the <head>. Now we're going to add one crucial line. Update your <head> section to look like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- ← add this line -->
<title>café SOEL</title>
</head>The only change is that one new <meta name="viewport"> line. Let's go through all three elements in the <head>.
meta charset="UTF-8" — Preventing Garbled Text
<meta charset="UTF-8"> tells the browser which character encoding the page uses. This was already in your Part 1 code, so it should look familiar.
UTF-8 is the universal standard that supports virtually every writing system in the world — Japanese, English, Chinese, Arabic, emoji, you name it. Without this line, Japanese characters can turn into a mess of question marks and symbols. I once forgot this single line and saw my entire page become unreadable. Small tag, big job.
meta name="viewport" — The Foundation for Mobile
<meta name="viewport" content="width=device-width, initial-scale=1.0"> is the new line we just added. It tells mobile browsers to match the page width to the device's screen width.
Without it, your phone would display the page as if it were a desktop site shrunk down to fit a tiny screen — text becomes microscopic and users have to pinch-zoom to read anything. This single line prevents that.
This is the foundation for the responsive design we'll build in Part 6. For now, just think of it as "getting mobile-ready."
title — The Name in the Browser Tab
The text inside <title> appears in the browser tab. Take a look at your tab right now — does it say "café SOEL"?
This title also shows up in search engine results. It's the very first thing users see when they find your site on Google. Short, but extremely important.
Block Elements vs. Inline Elements
Before we dive into building our site structure, there's one key concept to understand. HTML elements fall into two broad categories: block elements and inline elements.
Block elements take up the full width of their container and always start on a new line. Think of them as cardboard boxes stacked on top of each other — <p> (paragraph), <h1> (heading), and <section> are all block elements.
Inline elements flow within text without breaking the line. <a> (link) and <strong> (emphasis) are inline — they sit right alongside the text around them.
<!-- Block elements: stack vertically -->
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<!-- Inline elements: flow within text -->
<p>See <a href="#">this link</a> for details.</p>Remember how the <h1> and <p> from last time appeared stacked vertically? That's because they're both block elements. For now, just picture block elements as big boxes and inline elements as parts inside those boxes. The distinction will become much more tangible once we start working with CSS layouts.
Essential HTML Tags to Know First
Before we build the café SOEL skeleton, let's quickly review the most commonly used tags.
Headings: h1 through h6
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Lower numbers mean higher importance and larger default text. In your Part 1 code, you used <h1> for the "Hello World!" heading.
<h1> is the top-level heading, and the convention is to use only one per page. For café SOEL, the main catchphrase will be our <h1>. Section titles like "Concept" and "Menu" will be <h2>.
One important rule: never use heading tags just to make text bigger. Headings represent document structure — like chapters and sections in a book. If you want bigger text, that's CSS's job.
Paragraphs: p
The <p> tag represents a paragraph of text. It's the go-to tag for body copy. You already used it in Part 1. Browsers automatically add spacing above and below each <p>, making text more readable.
Links: a
The <a> tag creates a hyperlink. You specify the destination in the href attribute.
<a href="https://example.com">External link</a>
<a href="#concept">In-page link</a>When href starts with #, it links to an element on the same page that has a matching id. Since café SOEL is a single-page site, we'll rely heavily on these in-page links for navigation.
Lists: ul and li
<ul> creates an unordered list, and <li> marks each list item. Navigation menus are semantically "a list of links," so wrapping them in <ul> + <li> is the right approach.
<ul>
<li>Coffee</li>
<li>Latte</li>
<li>Cake</li>
</ul>The Idea Behind Semantic HTML
Now that you've seen <h1> and <p>, there's a broader concept I want you to understand: semantic HTML — writing HTML that carries meaning.
Take a navigation menu. You could wrap it in a <div> (a generic container with no inherent meaning). But HTML provides a <nav> tag specifically for navigation.
<div class="navigation">
<!-- nav content -->
</div><nav>
<!-- nav content -->
</nav>Both look identical in the browser. But with <nav>, search engines understand "this is navigation," and screen readers can announce "navigation landmark" to their users. The tag itself carries meaning.
HTML offers several semantic tags like this. Here are the ones we'll use for café SOEL:
<header> represents the header of a page or section — typically containing the logo and navigation.
<nav> marks a block of navigation links.
<main> identifies the primary content of the page. Only one per page.
<section> represents a thematic grouping of content, usually with its own heading.
<footer> represents the footer of a page or section — copyright notices, secondary navigation, and so on.
Choosing the right tag means communicating your page's structure clearly — to humans and machines alike.
Building the café SOEL Skeleton
Now let's put all of this into practice. We're going to replace the contents of <body> with the real skeleton of the café SOEL website, using semantic HTML.
The finished site has this overall structure: a header (logo + navigation), hero section (main visual + catchphrase), concept section, menu section, gallery section, access/shop info section, and a footer.
Expressed in semantic HTML, it looks like this:
<header> <!-- Site header -->
</header>
<main>
<section> <!-- Hero -->
</section>
<section> <!-- Concept -->
</section>
<section> <!-- Menu -->
</section>
<section> <!-- Gallery -->
</section>
<section> <!-- Access -->
</section>
</main>
<footer> <!-- Site footer -->
</footer><header> → <main> (containing five <section>s) → <footer>. That's the backbone of our site. The <h1> and <p> from Part 1 have served their purpose, so now we'll replace them with real site content. Let's go step by step.
Writing the Header
Header and Navigation
Delete the <h1> and <p> inside <body> and replace them with the following code:
<header>
<a href="#top">café SOEL</a>
<nav>
<ul>
<li><a href="#concept">Concept</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#access">Access</a></li>
</ul>
</nav>
</header>The logo is just text for now — we'll replace it with an image in the next part. The navigation links point to #concept, #menu, and so on. These are in-page links that will jump to the matching id attributes we'll add to each section.
Writing the Hero and Concept Sections
Hero Section
Below the header, open <main> and add the hero section — the main visual area of the site.
<main>
<section id="hero">
<h1>そよぐ光と、ひと息つくひととき。</h1>
<p>café SOEL — Natural Light & Coffee</p>
</section>We've replaced the practice <h1> from Part 1 with the real catchphrase. This is the one and only <h1> on the page.
Notice the id="hero" attribute. Every id must be unique within a page; using the same id twice is invalid HTML.
& is an HTML entity — a special way to write the "&" character. Because & has a reserved meaning in HTML, you need to use this entity form when you want to display it as text.
Concept Section
Below the hero, add the section that explains the café's concept.
<section id="concept">
<h2>コンセプト</h2>
<p>café SOEL（カフェ ソエル）は、「そよぐ光」をイメージした造語から名づけました。</p>
<p>大きな窓から差し込む自然光、ナチュラルな木のぬくもり、丁寧に淹れた一杯のコーヒー。忙しい日常からすこしだけ離れて、穏やかな時間を過ごしていただける場所でありたいと思っています。</p>
</section>Notice the heading hierarchy: the hero has <h1>, and the concept uses <h2>. The heading levels flow in order, just like chapters in a book.
Writing the Menu and Gallery Sections
Menu Section
Below the concept, add the menu section.
<section id="menu">
<h2>メニュー</h2>
<p>素材を活かしたシンプルなおいしさを、丁寧にお届けします。</p>
</section>Individual menu items (coffee, latte, cake…) will be added in the next part along with images. For now, we're establishing each section's presence with just a heading and a short description.
Gallery Section
Below the menu, add a gallery section to showcase the café interior.
<section id="gallery">
<h2>ギャラリー</h2>
<p>店内の様子をご覧ください。</p>
</section>Writing the Access Section and Footer
Access / Shop Info Section
Below the gallery, add the section with the shop's address and hours.
<section id="access">
<h2>アクセス</h2>
<p>〒156-0054 東京都世田谷区桜丘町3-12-8</p>
<p>平日 10:00 – 19:00 / 土日 9:00 – 19:00</p>
<p>定休日：毎週水曜日</p>
</section>
</main>We're closing </main> right after this section. Everything between the opening <main> and this closing tag represents the page's primary content.
Footer
Finally, add the footer at the very bottom of the page.
<footer>
<p>© 2025 café SOEL. All rights reserved.</p>
</footer>© is the HTML entity for the copyright symbol "©". Just like & earlier, it's a way to display special characters in HTML.
Checking Your Complete Code
You've written every section. Save your file and open it in the browser.
Your complete index.html should now look like this:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>café SOEL</title>
</head>
<body>
<header>
<a href="#top">café SOEL</a>
<nav>
<ul>
<li><a href="#concept">Concept</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#access">Access</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>そよぐ光と、ひと息つくひととき。</h1>
<p>café SOEL — Natural Light & Coffee</p>
</section>
<section id="concept">
<h2>コンセプト</h2>
<p>café SOEL（カフェ ソエル）は、「そよぐ光」をイメージした造語から名づけました。</p>
<p>大きな窓から差し込む自然光、ナチュラルな木のぬくもり、丁寧に淹れた一杯のコーヒー。忙しい日常からすこしだけ離れて、穏やかな時間を過ごしていただける場所でありたいと思っています。</p>
</section>
<section id="menu">
<h2>メニュー</h2>
<p>素材を活かしたシンプルなおいしさを、丁寧にお届けします。</p>
</section>
<section id="gallery">
<h2>ギャラリー</h2>
<p>店内の様子をご覧ください。</p>
</section>
<section id="access">
<h2>アクセス</h2>
<p>〒156-0054 東京都世田谷区桜丘町3-12-8</p>
<p>平日 10:00 – 19:00 / 土日 9:00 – 19:00</p>
<p>定休日：毎週水曜日</p>
</section>
</main>
<footer>
<p>© 2025 café SOEL. All rights reserved.</p>
</footer>
</body>
</html>See the Part 2 result →
Does your browser show each section's text stacked vertically? With no styling, you'll see black text on a white background with headings in different sizes. That's exactly right.
This is the skeleton of a website. It may not look like much yet, but every section is in place, the heading hierarchy is correct, and the semantic structure is solid.
If something looks off, check that you haven't forgotten to close a tag. Every <section> needs a matching </section>. A mismatched pair can throw off the entire page.
Testing Your In-Page Links
Since we built the navigation, let's make sure it works. Click on "Concept" at the top of the page.
Did the page scroll down to the concept section? That's the in-page link in action — the href="#concept" in the nav matches the id="concept" on the section. Try "Menu," "Gallery," and "Access" too. They should all jump to the right spot.
Why Bother with Semantic Tags?
We've used <header>, <nav>, <main>, <section>, and <footer> throughout. Honestly, you could replace every one of them with <div> and the page would look identical. So why go to the trouble?
Three reasons.
First, search engines (SEO). Google uses HTML tags as clues to understand what's on a page. When it sees <nav>, it knows that's the navigation. When it sees <main>, it knows that's the core content. Using the right tags helps search engines index your site accurately.
Second, accessibility. Screen readers rely on semantic tags to help visually impaired users navigate a page. Tags like <nav> and <main> generate "landmarks" that screen readers announce — "navigation," "main content" — so users can jump to the section they need quickly.
Third, code readability. Six months from now, when you look at your code again, <nav> tells you instantly "this is navigation." A <div class="nav"> takes an extra mental step. On a team, semantic HTML is the foundation of maintainable code.
There's a small but meaningful difference between "it works" and "it's written correctly."
Don't worry if this feels abstract right now. We'll dive deeper into SEO in Part 8 and accessibility in Part 9. The reason we start with semantic HTML from the very beginning is simple: it's much easier to build correctly from the start than to go back and fix everything later.
What You Learned
- <!DOCTYPE html> declares the document as HTML5 and must always be the first line of the file
- Every HTML document has a three-layer structure: <html> (root) → <head> (metadata) → <body> (visible content)
- <meta charset="UTF-8"> prevents character encoding issues, and <meta name="viewport"> lays the groundwork for mobile responsiveness
- Semantic HTML means using meaningful tags like <header>, <nav>, <main>, <section>, and <footer> instead of generic <div>s
- Heading tags (<h1>–<h6>) define the document's hierarchy, and <h1> should appear only once per page
- In-page links work by matching a navigation href="#id" with a section's id attribute
- You built the full skeleton of café SOEL: header → main (with five sections) → footer
If you've made it this far, the HTML fundamentals are solidly in place. In the next part, we'll fill this skeleton with real content — images, detailed text, and all the elements that make each section come alive. The page will start looking much more like a real website, so look forward to it.