Chapter 2

HTML Basics - The Skeleton of the Web

Learning Objectives

  • Understand what HTML is and its purpose
  • Learn basic HTML tags and structure
  • Create a simple HTML page
  • See how MixMind uses HTML for its interface

What is HTML?

HTML stands for HyperText Markup Language. It's not a programming language—it's a markup language. This means it doesn't do logic or calculations; instead, it describes the structure and content of a web page.

💡 Analogy:

If a web page were a building:

  • HTML = The structure (walls, floors, rooms)
  • CSS = The decoration (paint, furniture, layout)
  • JavaScript = The functionality (lights, doors, elevator)

HTML Tags - The Building Blocks

HTML uses tags to mark up content. Tags are surrounded by angle brackets < > and usually come in pairs: an opening tag and a closing tag.

<p>This is a paragraph</p>

<!-- Breakdown: -->
<p>              Opening tag (starts the paragraph)
This is text   Content between tags
</p>             Closing tag (ends the paragraph)

Common HTML Tags

Tag Purpose Example
<h1> to <h6> Headings (h1 is largest, h6 is smallest) <h1>Main Title</h1>
<p> Paragraph <p>Some text here</p>
<a> Link (anchor) <a href="https://example.com">Click me</a>
<img> Image (self-closing) <img src="photo.jpg" alt="Description">
<div> Generic container <div>Content</div>
<button> Clickable button <button>Click me</button>
<input> Input field (self-closing) <input type="text">

HTML Document Structure

Every HTML page has a standard structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is the content users see.</p>
</body>
</html>

Breaking Down the Structure

  • <!DOCTYPE html> - Tells the browser this is an HTML5 document
  • <html> - The root element that wraps everything
  • <head> - Contains metadata (info about the page, not visible to users)
    • <meta charset="UTF-8"> - Character encoding (supports all languages)
    • <meta name="viewport"> - Makes the page responsive on mobile
    • <title> - The page title shown in the browser tab
  • <body> - Contains all the visible content

Attributes - Adding Information to Tags

Tags can have attributes that provide additional information. Attributes are always in the opening tag.

<button id="playButton" class="primary-btn" disabled>Play</button>

<!-- Attributes explained: -->
id="playButton"     - Unique identifier (like a name tag)
class="primary-btn" - CSS class for styling
disabled            - Boolean attribute (makes button unclickable)

Common Attributes

Attribute Purpose Example
id Unique identifier id="main-content"
class CSS class for styling class="highlight important"
href Link destination href="https://example.com"
src Source file (images, scripts) src="audio.mp3"
type Type of element type="button" or type="text"

Nesting Elements

HTML elements can be nested (placed inside other elements). This creates a hierarchy.

<div class="container">
    <h1>Welcome</h1>
    <p>This is a <strong>very important</strong> message.</p>
    <ul>
        <li>First item</li>
        <li>Second item</li>
    </ul>
</div>
💡 Important Rule:

Tags must be closed in the correct order. If you open <strong> inside <p>, you must close <strong> before closing <p>.

How MixMind Uses HTML

MixMind's interface is built with HTML. Here are key elements:

1. The Upload Area
<div class="upload-zone">
    <input type="file" accept="audio/*" multiple>
    <h3>Drop audio files here</h3>
</div>
2. Control Buttons
<div class="controls">
    <button id="playBtn">▶ Play</button>
    <button id="downloadBtn">Download</button>
</div>

Exercise 2.1: Create Your First HTML Page

Goal: Build a simple web page from scratch

  1. Open a text editor (Notepad, TextEdit, or VS Code)
  2. Create a new file and save it as my-page.html
  3. Type the following code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
    <a href="https://mixmind.pages.dev">Visit MixMind</a>
</body>
</html>
  1. Save the file
  2. Double-click it to open in your browser
📝 Quick Reference:
  • HTML: Markup language for structuring web pages
  • Tag: <tagname> - defines an element
  • Attribute: Additional info in opening tag
  • Nesting: Elements inside other elements
  • DOCTYPE: Tells browser this is HTML5
← Previous: What is Code? Next: CSS Styling →