HTML Basics · Text Elements · Links and Images in Depth

What you'll learn

• 1Explain the role of DOCTYPE, head, and body
• 2Write proper headings (h1–h6) and paragraphs
• 3Use lists, links, and images correctly
• 4Validate your HTML with the W3C validator
• 5Use <strong> and <em> for meaning, not just bold/italic
• 6Mark code samples with <code> and <pre>
• 7Quote external content with <blockquote> and <cite>
• 8Use <sub> and <sup> for math and footnotes
• 9Use href, target, and rel correctly
• 10Write alt text that actually helps
• 11Serve responsive images with srcset and sizes
• 12Caption images with <figure> + <figcaption>

HTML Basics

Learn the structure of an HTML document: DOCTYPE, head/body, and the most common tags. Build a clean foundation before styling or scripting.

1. The Skeleton of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>
<body>
  <h1>Hello</h1>
  <p>Welcome to my site.</p>
</body>
</html>

• <!DOCTYPE html> — declares HTML5
• <html lang="en"> — the root element (lang helps screen readers and SEO)
• <head> — metadata (not visible)
• <body> — what users actually see

2. Headings and Paragraphs

<h1>Main title (only one per page)</h1>
<h2>Section</h2>
<h3>Sub-section</h3>
<p>A paragraph of text. Keep one idea per paragraph.</p>

3. Lists, Links, and Images

<ul>
  <li>Unordered item</li>
  <li>Another item</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

<a href="https://example.com" target="_blank" rel="noopener">External link</a>
<img src="cat.jpg" alt="A photo of my cat" width="240">

4. Validate Your HTML

• Paste your code into https://validator.w3.org
• Fix errors before styling — invalid HTML produces inconsistent browser behavior
• Run a validator pass at the end of every project

Text Elements

Use the right tag for the right meaning. Master inline text elements like strong, em, code, and the typographic helpers blockquote, sub, sup.

1. Emphasis: strong vs em

<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save.</p>
<p><strong>Warning:</strong> this action cannot be undone.</p>
<p>This is <em>really</em> important.</p>

• <strong> = strong importance (often bold)
• <em> = stress emphasis (often italic)
• <b> and <i> are visual-only — use sparingly

2. Code and Preformatted Text

<p>Run <code>npm install</code> to add a package.</p>
<pre><code>function greet(name) {
  return `Hello, ${name}`;
}</code></pre>

<pre> preserves whitespace; <code> marks something as code. They are commonly nested together for multi-line snippets.

3. Quotes and Citations

<blockquote cite="https://example.com">
  <p>Programs must be written for people to read.</p>
  <footer>— <cite>Hal Abelson</cite></footer>
</blockquote>

<p>As <q>he said</q> in passing.</p>

4. Math and Footnotes

<p>H<sub>2</sub>O is water.</p>
<p>E = mc<sup>2</sup>.</p>
<p>See note<sup><a href="#fn1">1</a></sup>.</p>

Links and Images in Depth

Go beyond <a href="...">. Learn safe targets, accessible image patterns, responsive images with srcset, and figure/figcaption for captions.

1. Anchor Tag Anatomy

<!-- Internal link -->
<a href="/about">About</a>

<!-- External link, open in new tab safely -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External
</a>

<!-- Email and phone -->
<a href="mailto:hello@example.com">hello@example.com</a>
<a href="tel:+821012345678">+82 10-1234-5678</a>

<!-- In-page jump -->
<a href="#section-2">Jump to Section 2</a>

2. Image Basics

<img src="hero.jpg"
     alt="A panoramic photo of the city skyline at sunset"
     width="1200" height="600"
     loading="lazy">

• alt — describe the meaning of the image (leave empty alt="" for purely decorative)
• width/height — reserve layout space (prevents content jumps)
• loading="lazy" — defer below-the-fold images for faster page loads

3. Responsive Images

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1600.jpg 1600w"
     sizes="(min-width: 768px) 50vw, 100vw"
     alt="Mountain landscape">

The browser picks the smallest source that meets the display size — saves bandwidth on mobile.

4. Captioned Figures

<figure>
  <img src="chart.png" alt="Bar chart showing 2024 revenue by quarter">
  <figcaption>Figure 1. 2024 quarterly revenue ($M).</figcaption>
</figure>