bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

Browse Source 
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
g1nation
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topic_HTML/HTML_Style_Guide.md
+343
View File
@@ -0,0 +1,343 @@
---
id: html-style-guide
title: "HTML Style Guide"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HTML coding conventions", "HTML syntax", "HTML best practices", "lowercase elements", "close all elements", "lang attribute"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.90
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "style-guide", "conventions"]
raw_sources: ["https://www.w3schools.com/html/html5_syntax.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Style Guide]]
## 🎯 한 줄 통찰 (One-line insight)
A consistent HTML style guide — lowercase elements and attributes, quoted attribute values, closed elements, declared doctype/lang/charset, proper indentation, and always-present `<title>` — produces cleaner, more portable, and more maintainable code. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Declare the document type** — always start with `<!DOCTYPE html>`. [S1]
- **Lowercase names** — use lowercase element names and lowercase attribute names; cleaner and easier to type. [S1]
- **Close elements & quote values** — close all HTML elements and always quote attribute values (required when the value contains spaces). [S1]
- **Image attributes** — always specify `alt`, `width`, and `height` for images (alt for fallback; width/height reduce flickering). [S1]
- **Readable formatting** — no spaces around `=`, avoid long lines, use blank lines and two-space indentation (not tabs). [S1]
- **Required `<title>`** — never skip it; it is required and important for SEO. [S1]
- **Recommended structure** — add `<html>`, `<head>`, `<body>`, `lang`, and `charset` even though pages can validate without some of them. [S1]
- **File naming** — use lowercase file names; `.html`/`.htm` for HTML, `.css`, `.js`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Good vs. bad lowercase** — `<p>...</p>` not `<P>...</P>`; `href=` not `HREF=`. [S1]
- **Quoted value with spaces** — `class="table striped"` works; `class=table striped` does not. [S1]
- **No spaces around equals** — `href="styles.css"` not `href = "styles.css"`. [S1]
- **lang declaration** — `<html lang="en-us">`. [S1]
- **Early charset** — `<meta charset="UTF-8">` as early as possible. [S1]
- **Simple link/script syntax** — `type` attribute is not necessary. [S1]
## 📖 세부 내용 (Details)
**Always declare document type** [S1]
```html
<!DOCTYPE html>
```
**Use lowercase element names** — mixing uppercase and lowercase looks bad; lowercase is cleaner and easier to type. [S1]
```html
<!-- Good -->
<body>
<p>This is a paragraph.</p>
</body>
```
```html
<!-- Bad -->
<BODY>
<P>This is a paragraph.</P>
</BODY>
```
**Close all HTML elements** [S1]
```html
<!-- Good -->
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
```
```html
<!-- Bad -->
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
```
**Use lowercase attribute names** [S1]
```html
<!-- Good -->
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
```
```html
<!-- Bad -->
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
```
**Always quote attribute values** — quoted values are easier to read; you MUST use quotes if the value contains spaces. [S1]
```html
<!-- Good -->
<table class="striped">
<!-- Bad -->
<table class=striped>
<!-- Very bad (will not work, value contains spaces) -->
<table class=table striped>
```
**Always specify alt, width, and height for images** — `alt` is important if the image cannot be displayed; defining `width`/`height` reduces flickering because the browser can reserve space before loading. [S1]
```html
<!-- Good -->
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
<!-- Bad -->
<img src="html5.gif">
```
**Spaces and equal signs** — space-less is easier to read and groups entities better together. [S1]
```html
<!-- Good -->
<link rel="stylesheet" href="styles.css">
<!-- Bad -->
<link rel = "stylesheet" href = "styles.css">
```
**Avoid long code lines** — when using an HTML editor, avoid too-long code lines, since scrolling left-right is inconvenient. [S1]
**Blank lines and indentation** — do not add blank lines, spaces, or indentations without a reason; for readability, add blank lines to separate large or logical code blocks and add two spaces of indentation. Do not use the tab key. [S1]
```html
<!-- Good -->
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the
most populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest
population centers in Europe.</p>
</body>
```
```html
<!-- Bad -->
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo
Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous
city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the
largest population centers in Europe.</p>
</body>
```
Table example using two-space indentation: [S1]
```html
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
```
List example: [S1]
```html
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
```
**Never skip the `<title>` element** — the title element is required in HTML and is very important for SEO; it defines a title in the browser toolbar, provides a title when the page is added to favorites, and displays a title in search-engine results. Make it as accurate and meaningful as possible. [S1]
```html
<title>HTML Style Guide and Coding Conventions</title>
```
**Omitting `<html>` and `<body>`?** — an HTML page will validate without the `html` and `body` tags, but it is strongly recommended to always add them. Omitting `body` can produce errors in older browsers, and omitting `html` and `body` can also crash DOM and XML software. [S1]
```html
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
```
**Omitting `<head>`?** — the head tag can also be omitted; browsers will add all elements before `body` to a default head element. However, using the head tag is recommended. [S1]
```html
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
**Close empty HTML elements?** — both forms are allowed; if you expect XML/XHTML software to access your page, keep the closing slash, because it is required in XML and XHTML. [S1]
```html
<meta charset="utf-8">
<meta charset="utf-8" />
```
**Add the lang attribute** — always include the `lang` attribute inside the `html` tag to declare the language of the page; this assists search engines and browsers. [S1]
```html
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
**Meta data** — to ensure proper interpretation and correct search engine indexing, both the language and the character encoding `<meta charset="...">` should be defined as early as possible. [S1]
```html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
```
**Setting the viewport** — the viewport is the user's visible area of a web page; include this meta element in all web pages. `width=device-width` sets the page width to the device screen-width; `initial-scale=1.0` sets the initial zoom level. [S1]
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
**HTML comments** — short comments on one line; long comments indented with two spaces. [S1]
```html
<!-- This is a comment -->
```
```html
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
```
**Using style sheets** — use simple syntax for linking style sheets (the `type` attribute is not necessary). [S1]
```html
<link rel="stylesheet" href="styles.css">
```
Short CSS rules can be on one line; long rules: opening bracket on the same line as the selector, one space before it, two-space indentation, a semicolon after each property-value pair (including the last), quotes only when a value contains spaces, and the closing bracket on a new line without leading spaces. [S1]
```css
p.intro {font-family:Verdana;font-size:16em;}
```
```css
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
```
**Loading JavaScript in HTML** — use simple syntax for loading external scripts (the `type` attribute is not necessary). [S1]
```html
<script src="myscript.js">
```
**Accessing HTML elements with JavaScript** — untidy HTML code can result in JavaScript errors; these two statements produce different results because IDs are case-sensitive. [S1]
```javascript
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
```
**Use lowercase file names** — some web servers (Apache, Unix) are case sensitive about file names; others (Microsoft IIS) are not. To avoid problems when moving between servers, always use lowercase file names. [S1]
**File extensions** — HTML files should have a `.html` extension (`.htm` is allowed); CSS files `.css`; JavaScript files `.js`. There is no difference between `.htm` and `.html` — both are treated as HTML by any browser and server. [S1]
**Default filenames** — when a URL does not specify a filename at the end (like `https://www.w3schools.com/`), the server adds a default filename such as `index.html`, `index.htm`, `default.html`, or `default.htm`. If the server is configured only with `index.html` as default, the file must be named `index.html`; servers can be configured with multiple default filenames. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The paired good/bad examples (lowercase, closing tags, quoting, image attributes, spacing, indentation) and the recommended document skeletons (doctype + lang + charset + title + viewport) are the canonical applied conventions to copy. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Recommended document head conforming to the guide:
```html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Meaningful Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
...
</body>
</html>
```
Well-formed image:
```html
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
```
Simple external script load:
```html
<script src="myscript.js"></script>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`.htm` vs `.html`** — no difference; both are treated as HTML by any browser/server. [S1]
- **Closing slash on empty elements** — optional in HTML, but keep it (`<meta ... />`) if XML/XHTML software will read the page. [S1]
- **Omitting `<html>`/`<body>`/`<head>`** — pages may validate without them, but always include them to avoid errors in older browsers and crashes in DOM/XML software. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[HTML Tutorial]]
- **관련 개념:** [[HTML Head]], [[HTML Responsive]], [[HTML File Paths]], [[HTML Semantics]]
- **참조 맥락:** Referenced whenever writing or reviewing HTML for consistency, readability, validity, and portability.
## 📚 출처 (Sources)
- [S1] W3Schools — HTML Style Guide — https://www.w3schools.com/html/html5_syntax.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Style Guide" page (Astra wiki-curation, P-Reinforce v3.1 format).