HTML — The Skeleton of a Web Page
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 sectionnav— primary navigationmain— the single main content block of the page (one per document)article— content that stands on its own meaning-wisesection— a region grouped by topicaside— a region with auxiliary relation to the main contentfooter— foot of the page or a sectionfigure·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.
Next
- 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.