VibeKoding / Ensiklopedia · Fondasi KuatEnsiklopedia · Fondasi Kuat / Fundamentals of HTML/CSS LayoutFundamentals of HTML/CSS Layout
VK

Fundamentals of HTML/CSS LayoutFundamentals of HTML/CSS Layout

📚 Ensiklopedia · Fondasi KuatEnsiklopedia · Fondasi Kuat 🌏 Dual Bahasa (ID / EN) ⚡ VibeKoding Native

Ensiklopedia VibeKoding: Fundamentals of HTML/CSS Layout.Ensiklopedia VibeKoding: Fundamentals of HTML/CSS Layout.

💡 Tips Praktis💡 Pro Tip

How are web pages made? Why do some pages only have text, while others are as interactive as applications? This question leads to the three cornerstones of web development, helping you understand the structure behind every web page.How are web pages made? Why do some pages only have text, while others are as interactive as applications? This question leads to the three cornerstones of web development, helping you understand the structure behind every web page.

------

1. Overview of HTML, CSS, and JavaScript1. Overview of HTML, CSS, and JavaScript

1.1 From Static Pages to Dynamic Applications1.1 From Static Pages to Dynamic Applications

Imagine a poster you see on the street. You can only look at it, not interact with it — the poster won't change its content just because you looked at it, nor will it pop up more information because you tapped somewhere.Imagine a poster you see on the street. You can only look at it, not interact with it — the poster won't change its content just because you looked at it, nor will it pop up more information because you tapped somewhere.

Early web pages were exactly like these "electronic posters": view-only, immutable, with fixed content.Early web pages were exactly like these "electronic posters": view-only, immutable, with fixed content.

But modern web pages are completely different. They behave like desktop applications:But modern web pages are completely different. They behave like desktop applications:

The core reason for this transformation is the three cornerstones of web technology: HTML + CSS + JavaScript.The core reason for this transformation is the three cornerstones of web technology: HTML + CSS + JavaScript.

1.2 An Analogy: Building a House1.2 An Analogy: Building a House

Technology🏠 House AnalogyActual RoleConcrete Example
HTMLThe house's structure and materialsDefines the content and hierarchy of the pageThis is a wall, this is a window, this is a room
CSSThe house's decoration and appearanceControls the style and layout of the pagePaint the wall blue, place the window on the east side, tile the floor
JavaScriptThe house's appliances and smart systemsEnables interactivity and logic on the pagePress the switch and the light turns on, open the door and the curtains automatically draw
💡 Tips Praktis💡 Pro Tip

HTML → CSS: You need a house first before you can decorate it. HTML is the foundation, CSS is the beautification. HTML + CSS → JavaScript: You need the house and decoration before you can install smart systems. JavaScript makes a "dead" page come "alive." Core Idea: Each of the three has its own role, and none is dispensable. A page with only HTML is ugly, a page with only HTML+CSS can't be interactive, and only with all three can you build "web applications" like WeChat Web or Taobao.HTML → CSS: You need a house first before you can decorate it. HTML is the foundation, CSS is the beautification. HTML + CSS → JavaScript: You need the house and decoration before you can install smart systems. JavaScript makes a "dead" page come "alive." Core Idea: Each of the three has its own role, and none is dispensable. A page with only HTML is ugly, a page with only HTML+CSS can't be interactive, and only with all three can you build "web applications" like WeChat Web or Taobao.

1.3 Try It Yourself1.3 Try It Yourself

👇 The demo below shows how HTML/CSS/JavaScript work together:👇 The demo below shows how HTML/CSS/JavaScript work together:

------

2. HTML: The Skeleton of a Web Page2. HTML: The Skeleton of a Web Page

2.1 Motivation for needing HTML2.1 Motivation for needing HTML

Before HTML existed, content on the internet was just plain text. Like the text you're reading right now — no formatting, no hierarchy, no links.Before HTML existed, content on the internet was just plain text. Like the text you're reading right now — no formatting, no hierarchy, no links.

What's wrong with plain text?What's wrong with plain text?

HTML (HyperText Markup Language) was created to solve these problems. It uses "tags" to mark the meaning of content, telling the browser "what this is."HTML (HyperText Markup Language) was created to solve these problems. It uses "tags" to mark the meaning of content, telling the browser "what this is."

2.2 What Does HTML Code Look Like2.2 What Does HTML Code Look Like

The basic unit of HTML is the "tag." Tags are wrapped in angle brackets < > and come in pairs:The basic unit of HTML is the "tag." Tags are wrapped in angle brackets < > and come in pairs:

html 
<h1>This is a heading</h1> <p>This is a paragraph</p> <a href="url">This is a link</a>

Key Concepts:Key Concepts:

ConceptExplanationExample
TagA marker wrapped in angle brackets

,

ElementThe tag + its content as a whole

Heading

AttributeAdditional information on a taghref="#", class="card"
NestingTags placed inside other tags

Text

2.3 How to Read HTML Code2.3 How to Read HTML Code

💡 Tips Praktis💡 Pro Tip

Many beginners get dizzy seeing a bunch of . Actually, reading HTML code follows a fixed pattern: Step 1: Find the "outermost layer" ``html

← This is a container, holding content inside

Title

Description text

` Step 2: Guess the meaning from the tag name | Tag Name | Quick Memory | What Goes Inside | |----------|-------------|-------------------| |
| Big box | Any content, used for grouping | | | Small box | Text fragments, used for marking | |

| Paragraph | A block of text | |

-

| Heading | Heading text, smaller number = more important | | | Anchor/Link | Clickable content that navigates | | | Image | No content inside, uses src to point to an image | | 
<h1>This is a level-1 heading</h1> <h2>This is a level-2 heading</h2> <p>This is a paragraph</p> <div>This is a container (for grouping)</div> <span>This is an inline container (for marking text)</span>

Links and Media (enrich the page):Links and Media (enrich the page):

html 
<a href="https://example.com">Click here to navigate</a> <img src="photo.jpg" alt="Photo description" /> <video src="movie.mp4" controls></video>

Forms (collect user input):Forms (collect user input):

html 
<form> <input type="text" placeholder="Enter username" /> <input type="password" placeholder="Enter password" /> <button type="submit">Log in</button> </form>

Semantic Tags (HTML5 additions, make page meaning clearer):Semantic Tags (HTML5 additions, make page meaning clearer):

html 
<header>Page header</header> <nav>Navigation bar</nav> <main>Main content area</main> <article>An article</article> <aside>Sidebar</aside> <footer>Footer</footer>
💡 Tips Praktis💡 Pro Tip

and
seem to produce the same visual effect, so why use the latter? 1. SEO-friendly: Search engines can better understand page structure 2. Accessibility: Screen readers can quickly locate areas like "navigation" and "main content" 3. Code readability: Seeing
tells you immediately it's a header When to use div? When there's no suitable semantic tag. For example, a purely decorative container.
and
seem to produce the same visual effect, so why use the latter? 1. SEO-friendly: Search engines can better understand page structure 2. Accessibility: Screen readers can quickly locate areas like "navigation" and "main content" 3. Code readability: Seeing
tells you immediately it's a header When to use div? When there's no suitable semantic tag. For example, a purely decorative container.

2.5 Approach to remembering So Many HTML Tags2.5 Approach to remembering So Many HTML Tags

💡 Tips Praktis💡 Pro Tip

"There are over a hundred HTML tags, how can I remember them all?" The answer: You don't need to remember them all. In actual development, 90% of cases only use about 20 tags."There are over a hundred HTML tags, how can I remember them all?" The answer: You don't need to remember them all. In actual development, 90% of cases only use about 20 tags.

Memorize by PurposeMemorize by Purpose

1. Page Structure (drawing the skeleton)1. Page Structure (drawing the skeleton)

TagMemory AidPurpose
HeadHeader of a page or section
NavigationNavigation link area
MainMain content of the page (only one per page)
ArticleIndependent content block (still meaningful if taken out alone)
SectionThematic content grouping
AsideSidebar, supplementary content
FootFooter of a page or section

Memory method: Imagine a newspaper — it has a masthead (header), table of contents (nav), body text (main/article), columns (aside), and footer (footer).Memory method: Imagine a newspaper — it has a masthead (header), table of contents (nav), body text (main/article), columns (aside), and footer (footer).

2. Content Marking (clarifying what it is)2. Content Marking (clarifying what it is)

TagMemory AidPurpose

-

Heading 1-6Heading hierarchy, h1 is the largest and most important

ParagraphA block of text
    /
      /
Unordered/Ordered/List ItemLists
AnchorLinks, for navigation
ImageImages
/Video/AudioMultimedia
/Strong/EmphasisSemantic emphasis

Memory method: stands for "anchor" — imagine a ship dropping anchor at a spot; a link "anchors" you to another page.Memory method: stands for "anchor" — imagine a ship dropping anchor at a spot; a link "anchors" you to another page.

3. Form Interaction (collecting user input)3. Form Interaction (collecting user input)

TagMemory AidPurpose
FormForm container
InputVarious input fields (type determines the kind)