HTML — The Skeleton of a Web Page

Everything the browser shows on screen ultimately starts from a text document. The format of that text document is HTML. It is the first language a beginner meets, and the place we keep returning to no matter what other technology we learn. This article covers HTML's origins, document structure, common elements, semantic markup, and accessibility basics.

1. About HTML

Short for HyperText Markup Language. Tim Berners-Lee proposed it at CERN in 1991. The first public spec was the 1993 "HTML Tags" memo, and IETF's HTML 2.0 was standardized as RFC 1866 in 1995. Afterwards W3C took over the spec and carried it through to 4.01 (1999).

In 2004 Apple, Mozilla, and Opera formed the WHATWG and proposed a format called the "HTML Living Standard". It coexisted for a while alongside W3C's HTML5 (formal recommendation in 2014), and from 2019 onwards WHATWG's Living Standard became the single SSOT. In other words, today when we say "the HTML spec", we mean the living document at html.spec.whatwg.org.

Per the markup-language classification, HTML is not a programming language. It is closer to a tag system that gives meaning to data.

2. Minimal Document Structure

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>본문이 들어가는 자리입니다.</p>
  </body>
</html>

<!DOCTYPE html> — declares the document as HTML5. If omitted, the browser falls into quirks mode and some CSS is interpreted differently.
<html lang="ko"> — the document's primary language. Affects screen-reader pronunciation, search engines, and translation.
<head> — metadata. Page title, encoding, viewport, links to external stylesheets / scripts.
<body> — the visible content on screen.

3. Common Elements

Category	Tag	Use
Headings	`h1` ~ `h6`	Document hierarchy. Generally one `h1` per page
Paragraph	`p`	Plain text block
Link	`a href="..."`	Navigate to another document
Image	`img src="..." alt="..."`	Picture
List	`ul` · `ol` · `li`	Unordered / ordered list
Form	`form` · `input` · `button` · `label`	User input
Table	`table` · `thead` · `tbody` · `tr` · `th` · `td`	Tabular data
Inline emphasis	`strong` · `em`	Meaningful emphasis

There are also div and span. Both are meaningless containers, often used as hooks for styling or scripting.

4. Semantic HTML

Stacking everything in div produces a similar result on screen, but using meaning-carrying tags lets assistive technology and search engines understand the structure. Semantic elements added by HTML5:

header — head of the page or a section
nav — primary navigation
main — the single main content block of the page (one per document)
article — content that stands on its own meaning-wise
section — a region grouped by topic
aside — a region with auxiliary relation to the main content
footer — foot of the page or a section
figure · figcaption — image, table, diagram with caption

5. Form Example

<form action="/login" method="post">
  <label for="email">이메일</label>
  <input id="email" name="email" type="email" required />

  <label for="pw">비밀번호</label>
  <input id="pw" name="pw" type="password" required minlength="8" />

  <button type="submit">로그인</button>
</form>

When label's for is bound to input's id, clicking the label activates the field and a screen reader reads the field's name.

6. Other Paths

A static page made purely with HTML is the 1990s style. The branches we see today:

Server rendering — backends like PHP, Ruby on Rails, Django, Spring, ASP.NET produce HTML and send it.
Static site generators — Hugo, Jekyll, Astro, 11ty produce HTML at build time.
Client rendering — React, Vue, Svelte produce HTML in the browser via JavaScript.
Meta frameworks — Next.js, Nuxt, SvelteKit, Remix mix server and client rendering.

Whichever path we take, what the browser ultimately receives is HTML.

7. Common Shape

In VS Code, Sublime, or even Notepad, create a .html file and double-click it — it opens in the browser. To serve via a local server:

# If Python is installed
python -m http.server 8000

# If Node is installed
npx serve .

Then http://localhost:8000 in the browser. Same on Windows and macOS.

8. Common Pitfalls

Unclosed tags — opening <div> and forgetting </div>. Editor auto-close and a formatter (Prettier) catch most of these.

Duplicate id — must be unique within a document. If we put the same id twice, getElementById only finds the first. class can be repeated freely.

Meaningless alt — filling it with values like "사진" doesn't help screen-reader users. For decorative images, use alt="".

Block vs inline — placing inline elements (a, span) inside block elements (div, p) is natural, but the reverse (block inside inline) is grammatically awkward or forbidden in some places.

<a href="javascript:..."> — has many security and accessibility weaknesses. If button-like behavior is needed, use <button>.

Closing thoughts

HTML looks simple as a markup language, but its true value comes out when semantics, accessibility, and form labeling stand together. Even in an era when frameworks generate HTML, choosing meaningful elements is still a human decision. The small habit of picking semantic tags like nav or article instead of two divs helps search engines and screen-reader users a great deal.

css
javascript-basics

WHATWG HTML Living Standard · W3C HTML5 Recommendation · MDN Web Docs HTML · web.dev Learn HTML · W3C WAI ARIA Authoring Practices · a11yproject.com · WorldWideWeb first browser simulation for reference.

HTML — The Skeleton of a Web Page

1. About HTML

Per the markup-language classification, HTML is not a programming language. It is closer to a tag system that gives meaning to data.

2. Minimal Document Structure

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>첫 페이지</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>본문이 들어가는 자리입니다.</p>
  </body>
</html>

<!DOCTYPE html> — declares the document as HTML5. If omitted, the browser falls into quirks mode and some CSS is interpreted differently.
<html lang="ko"> — the document's primary language. Affects screen-reader pronunciation, search engines, and translation.
<head> — metadata. Page title, encoding, viewport, links to external stylesheets / scripts.
<body> — the visible content on screen.

3. Common Elements

Category	Tag	Use
Headings	`h1` ~ `h6`	Document hierarchy. Generally one `h1` per page
Paragraph	`p`	Plain text block
Link	`a href="..."`	Navigate to another document
Image	`img src="..." alt="..."`	Picture
List	`ul` · `ol` · `li`	Unordered / ordered list
Form	`form` · `input` · `button` · `label`	User input
Table	`table` · `thead` · `tbody` · `tr` · `th` · `td`	Tabular data
Inline emphasis	`strong` · `em`	Meaningful emphasis

There are also div and span. Both are meaningless containers, often used as hooks for styling or scripting.

4. Semantic HTML

header — head of the page or a section
nav — primary navigation
main — the single main content block of the page (one per document)
article — content that stands on its own meaning-wise
section — a region grouped by topic
aside — a region with auxiliary relation to the main content
footer — foot of the page or a section
figure · figcaption — image, table, diagram with caption

5. Form Example

<form action="/login" method="post">
  <label for="email">이메일</label>
  <input id="email" name="email" type="email" required />

  <label for="pw">비밀번호</label>
  <input id="pw" name="pw" type="password" required minlength="8" />

  <button type="submit">로그인</button>
</form>

When label's for is bound to input's id, clicking the label activates the field and a screen reader reads the field's name.

6. Other Paths

A static page made purely with HTML is the 1990s style. The branches we see today:

Server rendering — backends like PHP, Ruby on Rails, Django, Spring, ASP.NET produce HTML and send it.
Static site generators — Hugo, Jekyll, Astro, 11ty produce HTML at build time.
Client rendering — React, Vue, Svelte produce HTML in the browser via JavaScript.
Meta frameworks — Next.js, Nuxt, SvelteKit, Remix mix server and client rendering.

Whichever path we take, what the browser ultimately receives is HTML.

7. Common Shape

In VS Code, Sublime, or even Notepad, create a .html file and double-click it — it opens in the browser. To serve via a local server:

# If Python is installed
python -m http.server 8000

# If Node is installed
npx serve .

Then http://localhost:8000 in the browser. Same on Windows and macOS.

8. Common Pitfalls

Unclosed tags — opening <div> and forgetting </div>. Editor auto-close and a formatter (Prettier) catch most of these.

Duplicate id — must be unique within a document. If we put the same id twice, getElementById only finds the first. class can be repeated freely.

Meaningless alt — filling it with values like "사진" doesn't help screen-reader users. For decorative images, use alt="".

Block vs inline — placing inline elements (a, span) inside block elements (div, p) is natural, but the reverse (block inside inline) is grammatically awkward or forbidden in some places.

<a href="javascript:..."> — has many security and accessibility weaknesses. If button-like behavior is needed, use <button>.

Closing thoughts

css
javascript-basics

HTML — The Skeleton of a Web Page

HTML — The Skeleton of a Web Page

1. About HTML

2. Minimal Document Structure

3. Common Elements

4. Semantic HTML

5. Form Example

6. Other Paths

7. Common Shape

8. Common Pitfalls

Closing thoughts

Next

More in web-fundamentals

HTML — The Skeleton of a Web Page

HTML — The Skeleton of a Web Page

1. About HTML

2. Minimal Document Structure

3. Common Elements

4. Semantic HTML

5. Form Example

6. Other Paths

7. Common Shape

8. Common Pitfalls

Closing thoughts

Next

More in web-fundamentals