SyntaxShelf
HC

Document Structure

HTML & CSS · 8 entries

DOCTYPE Declaration

syntax
<!DOCTYPE html>
example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

Note Always place this as the very first line. Without it, browsers fall into quirks mode and render inconsistently.

start htmlhtml boilerplatenew pagehtml template

<html> Root Element

syntax
<html lang="language-code"> ... </html>
example
<html lang="en" dir="ltr">
  <!-- entire document goes here -->
</html>

Note The lang attribute is critical for screen readers and search engines. Use BCP 47 codes like "en", "fr", "es", "zh-Hans".

set languagehtml rootpage languageaccessibility language

<head> Metadata Container

syntax
<head> ... </head>
example
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Dashboard</title>
  <link rel="stylesheet" href="styles.css">
</head>

Note The head element holds metadata, links to stylesheets, and scripts. Nothing inside head renders visually on the page.

html headadd metadatalink stylesheetpage setup

Character Encoding

syntax
<meta charset="UTF-8">
example
<head>
  <meta charset="UTF-8">
</head>

Note Must appear within the first 1024 bytes of the document. UTF-8 handles virtually all global characters and emoji.

character encodingutf-8special charactersemoji support

Viewport Meta Tag

syntax
<meta name="viewport" content="width=device-width, initial-scale=1.0">
example
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Note Without this, mobile browsers render at a desktop width and then shrink the result. Essential for every responsive site.

responsivemobile friendlyviewportmobile scaling

<body> Content Container

syntax
<body> ... </body>
example
<body>
  <header>Site Header</header>
  <main>Primary Content</main>
  <footer>Site Footer</footer>
</body>

Note Only one body element per document. All visible page content lives here.

page bodyvisible contenthtml body

Linking a Stylesheet

syntax
<link rel="stylesheet" href="path/to/file.css">
example
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="https://fonts.example.com/sans.css" crossorigin>

Note Stylesheets in the head block rendering until they load. For non-critical CSS, consider loading asynchronously.

add csslink css fileexternal stylesheetinclude css

Adding Scripts

syntax
<script src="file.js" defer></script>
<script type="module" src="app.js"></script>
example
<script src="analytics.js" defer></script>
<script type="module" src="app.js"></script>

Note Use defer for classic scripts so they run after HTML parsing completes. Module scripts are deferred by default. Avoid placing scripts in the head without defer or async.

add javascriptinclude scriptdefer scriptmodule script