What is HTML?

HTML (HyperText Markup Language) is the foundation of the web. It's not a programming language—it's a markup language that defines the structure and content of web pages using elements (tags). Every website you visit is built with HTML.

Think of HTML as the skeleton of a webpage: it provides structure. CSS adds the styling (skin and clothes), and JavaScript adds interactivity (movement and behavior).

Example: When you see a heading on a webpage, it's wrapped in HTML tags like <h1>Heading</h1>. The browser reads these tags and displays the content accordingly.

Basic HTML Structure

Every HTML document follows this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

🔍 Understanding Each Part

<!DOCTYPE html> — Tells the browser this is an HTML5 document (always include this first!)
<html lang="en"> — The root element; lang="en" helps screen readers and search engines
<head> — Contains metadata (info about the page) that doesn't appear on the page itself
<meta charset="UTF-8"> — Sets character encoding (supports all languages and symbols)
<meta name="viewport"...> — Makes your site mobile-friendly (essential!)
<title> — Shows in browser tabs and search results
<body> — Everything visible on the page goes here

Text Elements

HTML provides various elements for structuring text content:

Headings (h1 through h6)

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading

This is an h6 heading

<h1>Main Page Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<!-- h4, h5, h6 for deeper nesting -->

⚠️ Only use ONE h1 per page! It's like the title of a book.

Paragraphs and Text Formatting

This is a normal paragraph with some bold text and italic text.

This paragraph has a highlighted section and some inline code.

<p>Regular paragraph text.</p>

<strong>Bold text</strong> (important)
<em>Italic text</em> (emphasized)
<mark>Highlighted text</mark>
<code>Inline code</code>
<small>Smaller text</small>

<!-- Line breaks -->
Line one<br>
Line two

<!-- Horizontal rule -->
<hr>

Links and Images

Links (Anchor Tags)

External link to example.com

Internal link to /about

Jump to #section on this page

Email link

<!-- External link -->
<a href="https://example.com">Visit Example</a>

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

<!-- Anchor link (jumps to section on same page) -->
<a href="#section-id">Jump to Section</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank" rel="noopener">
  New Tab
</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Email us</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call us</a>

Images

<!-- Basic image -->
<img src="photo.jpg" alt="Description of image" />

<!-- With dimensions -->
<img src="photo.jpg" alt="Photo" width="400" height="300" />

<!-- Responsive image -->
<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;" />

⚠️ ALWAYS include the alt attribute! It's crucial for accessibility and SEO.

Lists

Unordered List (Bullets)

Coffee
Tea
Milk

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered List (Numbers)

First step
Second step
Third step

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Nested Lists

Fruits
- Apples
- Oranges
Vegetables
- Carrots
- Broccoli

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

HTML Attributes

Attributes provide additional information about HTML elements. They always go in the opening tag:

<!-- id: Unique identifier (only one per page) -->
<div id="header">Only one element can have this id</div>

<!-- class: Reusable identifier (for CSS/JS) -->
<p class="text-large blue">Can have multiple classes</p>

<!-- style: Inline CSS (not recommended for production) -->
<p style="color: red; font-size: 18px;">Red text</p>

<!-- title: Tooltip text on hover -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- data-*: Custom data attributes -->
<button data-user-id="123" data-action="delete">Delete</button>

<!-- Common input attributes -->
<input type="text" placeholder="Enter name" required disabled />

Containers: div and span

Generic containers for grouping content:

<div> - Block Container

Block 1

Block 2

<div>
  <p>Takes full width</p>
  <p>Starts on new line</p>
</div>

<span> - Inline Container

This is inline text with spans.

<p>
  Text with <span>inline</span>
  container.
</p>

⚠️ Common Beginner Mistakes

❌ Forgetting closing tags: <p>Text → ✓ <p>Text</p>
❌ Using deprecated tags: <center>, <font> (use CSS instead)
❌ Missing alt on images: Always include for accessibility!
❌ Incorrect nesting: <p><div></div></p> (can't put block in inline)
❌ Multiple h1 tags: Only one h1 per page for SEO
❌ Using onclick in HTML: Use JavaScript event listeners instead

✓ HTML Best Practices

✓ Always include <!DOCTYPE html> at the top
✓ Use semantic HTML (we'll cover this next!)
✓ Indent nested elements for readability
✓ Use lowercase for tags and attributes
✓ Always close tags (even self-closing ones with />)
✓ Include lang attribute on <html>
✓ Validate your HTML with W3C Validator

HTML Fundamentals