Document Structure

HTML Boilerplate

Standard starter template for every HTML file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document Title</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <script src="script.js"></script>
</body>
</html>
Head Elements

Common tags inside <head>

<!-- Character encoding -->
<meta charset="UTF-8" />
<!-- Responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Page title -->
<title>Page Title</title>
<!-- CSS stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- Favicon -->
<link rel="icon" href="favicon.ico" />
<!-- SEO description -->
<meta name="description" content="Page description" />

Text Elements

Headings 
<h1>Heading 1 (Largest)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 (Smallest)</h6>
Text Formatting 
<p>Paragraph text</p>
<strong>Bold / Important</strong>
<em>Italic / Emphasis</em>
<u>Underline</u>
<del>Strikethrough</del>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<sup>Superscript</sup> and <sub>Subscript</sub>
<code>Inline code</code>
<br /> <!-- Line break -->
<hr /> <!-- Horizontal rule -->
Blockquote & Pre 
<blockquote cite="source-url">
  A quote from somewhere.
</blockquote>

<pre>
  Preformatted   text
  preserves    spacing
</pre>

Lists

Unordered List 
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
</ul>
Ordered & Description 
<!-- Ordered (numbered) -->
<ol start="1" type="1">
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- Description list -->
<dl>
  <dt>Term</dt>
  <dd>Definition of the term</dd>
</dl>

Tables

Basic Table 
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>New York</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">Footer</td></tr>
  </tfoot>
</table>
Colspan & Rowspan 
<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <td>Normal</td>
  </tr>
  <tr>
    <td rowspan="2">Spans 2 rows</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Forms

Form Structure 
<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="John" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <label for="pass">Password:</label>
  <input type="password" id="pass" name="pass" />

  <button type="submit">Submit</button>
</form>
Input Types 
<input type="text" />       <!-- Text -->
<input type="number" />     <!-- Number -->
<input type="email" />      <!-- Email -->
<input type="password" />   <!-- Password -->
<input type="checkbox" />   <!-- Checkbox -->
<input type="radio" />      <!-- Radio button -->
<input type="file" />       <!-- File picker -->
<input type="date" />       <!-- Date picker -->
<input type="range" />      <!-- Slider -->
<input type="color" />      <!-- Color picker -->
<input type="hidden" />     <!-- Hidden value -->
<textarea rows="4"></textarea>
<select><option>Option</option></select>

Semantic HTML

Page Layout 
<header>Site header / logo / nav</header>

<nav>Navigation links</nav>

<main>
  <article>
    <section>Section of content</section>
  </article>
  <aside>Sidebar content</aside>
</main>

<footer>Site footer</footer>
Div vs Span 
<!-- div = block-level container -->
<div class="container">
  <p>Block of content</p>
</div>

<!-- span = inline container -->
<p>Text with <span style="color:red">red</span> word.</p>

<!-- Other generic containers -->
<details>
  <summary>Click to expand</summary>
  Hidden content shown on click.
</details>

Media

Video & Audio 
<!-- Video -->
<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support video.
</video>

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Your browser does not support audio.
</audio>

<!-- Iframe embed -->
<iframe src="https://example.com" width="600" height="400"
  title="Embedded page" frameborder="0">
</iframe>

Meta & Head

SEO Meta Tags 
<meta name="description" content="Page description (150-160 chars)" />
<meta name="keywords" content="keyword1, keyword2" />
<meta name="author" content="Your Name" />
<meta name="robots" content="index, follow" />

<!-- Open Graph (for social sharing) -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/img.jpg" />
<meta property="og:url" content="https://example.com" />