--- 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 `` β€” 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 ``` **Omitting `` and ``?** β€” 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 Page Title

This is a heading

This is a paragraph.

``` **Omitting ``?** β€” 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 Page Title

This is a heading

This is a paragraph.

``` **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 ``` **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 Page Title

This is a heading

This is a paragraph.

``` **Meta data** β€” to ensure proper interpretation and correct search engine indexing, both the language and the character encoding `` should be defined as early as possible. [S1] ```html Page Title ``` **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 ``` **HTML comments** β€” short comments on one line; long comments indented with two spaces. [S1] ```html ``` ```html ``` **Using style sheets** β€” use simple syntax for linking style sheets (the `type` attribute is not necessary). [S1] ```html ``` 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 ``` ## βš–οΈ 비ꡐ 및 선택 κΈ°μ€€ (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 (``) if XML/XHTML software will read the page. [S1] - **Omitting ``/``/``** β€” 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).