Files

T

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

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>

2026-06-23 19:21:18 +09:00

12 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

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]

<!DOCTYPE html>

Use lowercase element names — mixing uppercase and lowercase looks bad; lowercase is cleaner and easier to type. [S1]

<!-- Good -->
<body>
  <p>This is a paragraph.</p>
</body>

<!-- Bad -->
<BODY>
  <P>This is a paragraph.</P>
</BODY>

Close all HTML elements [S1]

<!-- Good -->
<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

<!-- Bad -->
<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Use lowercase attribute names [S1]

<!-- Good -->
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

<!-- 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]

<!-- 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]

<!-- 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]

<!-- 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]

<!-- 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>

<!-- 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]

<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]

<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]

<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]

<!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]

<!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]

<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]

<!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]

<!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]

<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]

<!-- This is a comment -->

<!--
  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]

<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]

p.intro {font-family:Verdana;font-size:16em;}

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]

<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]

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:

<!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:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Simple external script load:

<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).

12 KiB Raw Blame History