Tutorials / HTML

HTML Fundamentals HTML5

Learn the building blocks of every website

1 What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure and content of a web page using "elements" represented by tags. HTML is not a programming language - it's a markup language that tells browsers how to display content.

📝 Definition

HTML = HyperText Markup Language. "HyperText" refers to links connecting pages. "Markup" means annotating text with tags that describe structure. Browsers read HTML and render visual pages.

The Three Pillars of Web Development
HTML
Structure
+
CSS
Style
+
JavaScript
Behavior
=
Website
Complete

🔑 Key Concept: HTML Elements

An HTML element consists of: Opening tag + Content + Closing tag
Example: <p>Hello World</p>
Some elements are self-closing: <img />, <br />

2 HTML Document Structure

Every HTML document follows a specific structure. Understanding this skeleton is essential before adding content. The structure tells browsers what kind of document they're reading and how to process it.

HTML Document Structure
<!DOCTYPE html>
Declaration
↓
<html>
Root Element
↓
<head>
Metadata
<body>
Content
HTML - Basic Structure 
<!-- DOCTYPE tells browser this is HTML5 -->
<!DOCTYPE html>

<!-- html tag is the root - contains everything -->
<!-- lang="en" helps screen readers and search engines -->
<html lang="en">

<!-- head contains metadata (not displayed on page) -->
<head>
    <!-- charset defines character encoding -->
    <meta charset="UTF-8">
    
    <!-- viewport ensures mobile responsiveness -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- title appears in browser tab -->
    <title>My First Web Page</title>
</head>

<!-- body contains all visible content -->
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first paragraph.</p>
</body>

</html>
▶ BROWSER OUTPUT
Welcome to My Website

This is my first paragraph.

3 Your First Web Page

Let's create a complete web page from scratch. Save this code in a file with .html extension and open it in any web browser.

HTML - Complete Page 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is my first webpage. I'm learning HTML!</p>
    
    <h2>About Me</h2>
    <p>I am a web developer in training.</p>
    
    <h2>My Hobbies</h2>
    <ul>
        <li>Coding</li>
        <li>Reading</li>
        <li>Gaming</li>
    </ul>
    
    <p>Contact me at: <a href="mailto:me@example.com">me@example.com</a></p>
</body>
</html>

💡 How to View Your Page

1. Save the code as index.html
2. Double-click the file to open in browser
3. Or right-click → "Open with" → Choose browser

4 Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Headings create hierarchy and help both users and search engines understand your content structure.

💡 SEO Tip

Use only ONE <h1> per page (main title). Search engines use heading hierarchy to understand page content. Don't skip levels - go h1 → h2 → h3, not h1 → h3.

HTML - Headings 
<!-- h1 is the main heading - use once per page -->
<h1>Main Page Title (h1)</h1>

<!-- h2 for major sections -->
<h2>Section Heading (h2)</h2>

<!-- h3 for subsections within h2 -->
<h3>Subsection Heading (h3)</h3>

<!-- h4, h5, h6 for deeper nesting -->
<h4>Sub-subsection (h4)</h4>
<h5>Minor Heading (h5)</h5>
<h6>Smallest Heading (h6)</h6>
▶ BROWSER OUTPUT
Main Page Title (h1)

Section Heading (h2)

Subsection Heading (h3)

Sub-subsection (h4)

Minor Heading (h5)

Smallest Heading (h6)

5 Paragraphs

The <p> tag defines a paragraph. Browsers automatically add space before and after paragraphs. For line breaks within a paragraph, use <br>.

HTML - Paragraphs 
<!-- Basic paragraphs -->
<p>This is the first paragraph. It contains some text that 
describes the topic. Paragraphs automatically wrap to fit 
the container width.</p>

<p>This is the second paragraph. Notice how browsers add 
space between paragraphs automatically.</p>

<!-- Line break within paragraph -->
<p>
    123 Main Street<br>
    New York, NY 10001<br>
    United States
</p>

<!-- Horizontal rule (divider line) -->
<p>Content above the line</p>
<hr>
<p>Content below the line</p>

<!-- Preformatted text (preserves spacing) -->
<pre>
    This text preserves
    all spaces     and
    line breaks exactly.
</pre>

6 Text Formatting

HTML provides various tags to format text - make it bold, italic, highlighted, or give it semantic meaning.

HTML - Text Formatting 
<!-- Bold text -->
<strong>Important text</strong>  <!-- Semantic: important -->
<b>Bold text</b>              <!-- Visual only -->

<!-- Italic text -->
<em>Emphasized text</em>      <!-- Semantic: emphasis -->
<i>Italic text</i>            <!-- Visual only -->

<!-- Other formatting -->
<mark>Highlighted text</mark>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub> (H<sub>2</sub>O)
<sup>Superscript</sup> (x<sup>2</sup>)

<!-- Code and keyboard input -->
<code>console.log("Hello")</code>
<kbd>Ctrl + C</kbd>

<!-- Quotations -->
<blockquote>
    This is a long quote that deserves its own block.
</blockquote>
<q>This is an inline quote.</q>
▶ BROWSER OUTPUT
Important text Bold text
Emphasized text Italic text
Highlighted text Deleted text Inserted text
H2O (water) x2 (squared)
console.log("Hello")

7 Lists

HTML supports three types of lists: unordered (bullets), ordered (numbers), and description lists. Lists are perfect for navigation menus, feature lists, steps, and any grouped items.

HTML - All List Types 
<!-- UNORDERED LIST - bullet points -->
<h3>Shopping List (Unordered)</h3>
<ul>
    <li>Apples</li>
    <li>Bread</li>
    <li>Milk</li>
    <li>Cheese</li>
</ul>

<!-- ORDERED LIST - numbered items -->
<h3>Recipe Steps (Ordered)</h3>
<ol>
    <li>Preheat oven to 350°F</li>
    <li>Mix dry ingredients</li>
    <li>Add wet ingredients</li>
    <li>Bake for 25 minutes</li>
</ol>

<!-- NESTED LIST - list inside list -->
<h3>Web Technologies (Nested)</h3>
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </li>
</ul>
▶ BROWSER OUTPUT
Shopping List (Unordered)
• Apples
• Bread
• Milk
• Cheese

Recipe Steps (Ordered)
1. Preheat oven to 350°F
2. Mix dry ingredients
3. Add wet ingredients
4. Bake for 25 minutes

Web Technologies (Nested)
• Frontend
    ◦ HTML
    ◦ CSS
    ◦ JavaScript
• Backend
    ◦ Node.js
    ◦ Python

9 Images

Images make web pages visually engaging. The <img> tag is self-closing and requires a src (source) attribute for the image path.

HTML - Images in Depth 
<!-- Basic image -->
<img src="images/photo.jpg" alt="Description of image">

<!-- Image with width and height -->
<img 
    src="logo.png" 
    alt="Company Logo"
    width="200"
    height="100"
>

<!-- Image from URL -->
<img 
    src="https://example.com/image.jpg" 
    alt="External image"
>

<!-- Figure with caption (semantic) -->
<figure>
    <img src="chart.png" alt="Sales chart 2024">
    <figcaption>Figure 1: Quarterly Sales Data</figcaption>
</figure>

<!-- Clickable image (link) -->
<a href="https://example.com">
    <img src="banner.jpg" alt="Click to visit">
</a>

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

💡 Image Best Practices

• Always include descriptive alt text
• Use width and height to prevent layout shift
• Compress images for faster loading
• Use WebP format for better compression

10 Tables

Tables display data in rows and columns. Use them for actual tabular data like schedules, statistics, or comparisons - not for page layout!

HTML - Tables 
<table>
    <!-- Caption - table title -->
    <caption>Employee Directory</caption>
    
    <!-- Table header -->
    <thead>
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Email</th>
        </tr>
    </thead>
    
    <!-- Table body -->
    <tbody>
        <tr>
            <td>Alice Smith</td>
            <td>Engineering</td>
            <td>alice@company.com</td>
        </tr>
        <tr>
            <td>Bob Johnson</td>
            <td>Marketing</td>
            <td>bob@company.com</td>
        </tr>
    </tbody>
    
    <!-- Table footer (optional) -->
    <tfoot>
        <tr>
            <td colspan="3">Total: 2 employees</td>
        </tr>
    </tfoot>
</table>
▶ BROWSER OUTPUT
Employee Directory
Name Department Email
Alice Smith Engineering alice@company.com
Bob Johnson Marketing bob@company.com

11 Forms

Forms collect user input - login credentials, search queries, contact messages, etc. The <form> element wraps input fields and defines where data goes when submitted.

HTML - Complete Form 
<!-- form: action = where to send data, method = how to send -->
<form action="/submit" method="POST">
    
    <!-- Text input with label -->
    <!-- 'for' attribute links label to input by 'id' -->
    <label for="username">Username:</label>
    <input 
        type="text" 
        id="username" 
        name="username"
        placeholder="Enter your username"
        required
    >
    
    <!-- Email input - validates email format -->
    <label for="email">Email:</label>
    <input 
        type="email" 
        id="email" 
        name="email"
        placeholder="you@example.com"
        required
    >
    
    <!-- Password input - hides characters -->
    <label for="password">Password:</label>
    <input 
        type="password" 
        id="password" 
        name="password"
        minlength="8"
        required
    >
    
    <!-- Dropdown select -->
    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="">Select a country</option>
        <option value="in">India</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
    </select>
    
    <!-- Textarea for multi-line text -->
    <label for="message">Message:</label>
    <textarea 
        id="message" 
        name="message" 
        rows="4"
        placeholder="Type your message..."
    ></textarea>
    
    <!-- Checkbox -->
    <input type="checkbox" id="subscribe" name="subscribe">
    <label for="subscribe">Subscribe to newsletter</label>
    
    <!-- Submit button -->
    <button type="submit">Submit</button>
    
</form>
▶ BROWSER OUTPUT
Username:    [________________]
Email:       [________________]
Password:    [••••••••••••••••]
Country:     [▼ Select a country]
Message:     [________________]
             [                ]
             [________________]
☐ Subscribe to newsletter

[  Submit  ]

12 Input Types

HTML5 introduced many new input types that provide built-in validation and better user experience, especially on mobile devices.

HTML - All Input Types 
<!-- Text inputs -->
<input type="text" placeholder="Regular text">
<input type="password" placeholder="Hidden text">
<input type="email" placeholder="Email validation">
<input type="url" placeholder="URL validation">
<input type="tel" placeholder="Phone keyboard">
<input type="search" placeholder="Search field">

<!-- Number inputs -->
<input type="number" min="0" max="100" step="1">
<input type="range" min="0" max="100">

<!-- Date/Time inputs -->
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">

<!-- Selection inputs -->
<input type="checkbox"> Remember me
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

<!-- Other inputs -->
<input type="color">
<input type="file" accept="image/*">
<input type="hidden" name="token" value="abc123">

<!-- Buttons -->
<input type="submit" value="Submit Form">
<input type="reset" value="Clear Form">
<button type="button">Click Me</button>

Input Types Reference

Type Purpose Mobile Keyboard
emailEmail with @ validation@ symbol shown
telPhone numbersNumber pad
urlWebsite URLs.com button
numberNumeric input with spinnersNumber pad
dateDate pickerCalendar picker
colorColor pickerColor palette

13 Semantic HTML

Semantic elements clearly describe their meaning to both browsers and developers. Instead of generic <div> containers, use elements like <header>, <nav>, <main>, <article>, and <footer>.

🔑 Why Semantic HTML Matters

Accessibility: Screen readers understand page structure
SEO: Search engines better understand content
Maintainability: Code is easier to read and modify

Semantic Page Layout
<header>
Logo, Navigation
<nav>
Main Menu Links
<main>
<article> <section>
<aside>
Sidebar
<footer>
Copyright, Links
HTML - Semantic Structure 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Semantic HTML Example</title>
</head>
<body>

    <!-- Header: top of page, contains logo/nav -->
    <header>
        <h1>My Website</h1>
        
        <!-- Nav: navigation links -->
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>

    <!-- Main: primary content area -->
    <main>
        <!-- Article: self-contained content -->
        <article>
            <h2>Blog Post Title</h2>
            <p>Published on <time datetime="2025-01-27">January 27, 2025</time></p>
            
            <!-- Section: thematic grouping -->
            <section>
                <h3>Introduction</h3>
                <p>This is the introduction paragraph...</p>
            </section>
            
            <section>
                <h3>Main Content</h3>
                <p>This is the main content...</p>
            </section>
        </article>
        
        <!-- Aside: sidebar content -->
        <aside>
            <h3>Related Posts</h3>
            <ul>
                <li><a href="#">Another Post</a></li>
            </ul>
        </aside>
    </main>

    <!-- Footer: bottom of page -->
    <footer>
        <p>© 2025 My Website. All rights reserved.</p>
    </footer>

</body>
</html>

Semantic Elements Reference

Element Purpose
<header>Page or section header
<nav>Navigation links
<main>Main content (one per page)
<article>Self-contained content
<section>Thematic grouping
<aside>Sidebar content
<footer>Page or section footer
<figure>Image with caption
<time>Date/time

8 Multimedia (Audio & Video)

HTML5 provides native support for audio and video without plugins. You can embed media files and control playback directly in the browser.

HTML - Video Element 
<!-- Basic video with controls -->
<video 
    controls
    width="640"
    height="360"
    poster="thumbnail.jpg"
>
    <!-- Multiple sources for browser compatibility -->
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <!-- Fallback text -->
    Your browser doesn't support video.
</video>

<!-- Autoplay (muted required for autoplay) -->
<video autoplay muted loop playsinline>
    <source src="background.mp4" type="video/mp4">
</video>

<!-- YouTube Embed (iframe) -->
<iframe 
    width="560" 
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video title"
    allow="accelerometer; autoplay; clipboard-write"
    allowfullscreen
></iframe>
HTML - Audio Element 
<!-- Basic audio player -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser doesn't support audio.
</audio>

<!-- Audio with all attributes -->
<audio 
    controls
    preload="metadata"   <!-- none | metadata | auto -->
    loop                   <!-- repeat playback -->
>
    <source src="podcast.mp3" type="audio/mpeg">
</audio>

Video/Audio Attributes

Attribute Purpose
controlsShow play/pause, volume, etc.
autoplayStart playing automatically
mutedStart muted (required for autoplay)
loopRepeat when finished
posterThumbnail image (video only)
preloadnone | metadata | auto

9 Accessibility (A11y)

Accessible websites work for everyone, including users with disabilities who use screen readers, keyboard navigation, or other assistive technologies. Good accessibility is also good SEO.

Accessibility Benefits Everyone
Screen Readers
Visually impaired
+
Keyboard
Motor impairments
+
SEO
Search engines
HTML - Accessibility Best Practices 
<!-- 1. Always add alt text to images -->
<img 
    src="chart.png" 
    alt="Bar chart showing sales growth from 2020-2024"
>

<!-- Decorative images: empty alt -->
<img src="decorative-border.png" alt="">

<!-- 2. Use proper heading hierarchy -->
<h1>Page Title</h1>           <!-- One h1 per page -->
  <h2>Section Title</h2>       <!-- Don't skip levels -->
    <h3>Subsection</h3>
  <h2>Another Section</h2>

<!-- 3. Label form inputs -->
<label for="email">Email Address:</label>
<input 
    type="email" 
    id="email" 
    name="email"
    required
    aria-describedby="email-hint"
>
<span id="email-hint">We'll never share your email</span>

<!-- 4. ARIA roles for custom elements -->
<div 
    role="button" 
    tabindex="0"
    aria-pressed="false"
>
    Toggle Setting
</div>

<!-- 5. Skip link for keyboard users -->
<a href="#main-content" class="skip-link">
    Skip to main content
</a>

<!-- 6. Lang attribute for screen readers -->
<html lang="en">
<p lang="es">Hola mundo</p>

<!-- 7. Accessible tables -->
<table>
    <caption>Monthly Sales Data</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>$10,000</td>
        </tr>
    </tbody>
</table>

💡 Quick A11y Checklist

✓ All images have alt text
✓ Headings are hierarchical (h1→h2→h3)
✓ All form inputs have labels
✓ Color contrast ratio is at least 4.5:1
✓ Site is navigable by keyboard (Tab key)
✓ Page has lang attribute

10 Meta Tags & SEO

Meta tags provide metadata about your webpage. They're crucial for SEO (Search Engine Optimization), social media sharing, and browser behavior.

HTML - Essential Meta Tags 
<head>
    <!-- Character encoding -->
    <meta charset="UTF-8">
    
    <!-- Responsive viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Page title (important for SEO!) -->
    <title>Learn HTML - Complete Tutorial | MyWebsite</title>
    
    <!-- Meta description (shown in search results) -->
    <meta 
        name="description" 
        content="Learn HTML from basics to advanced. Free tutorial covering tags, forms, semantic HTML, and accessibility."
    >
    
    <!-- Keywords (less important now, but still used) -->
    <meta name="keywords" content="HTML, tutorial, web development, forms">
    
    <!-- Author -->
    <meta name="author" content="Your Name">
    
    <!-- Open Graph (for Facebook/LinkedIn sharing) -->
    <meta property="og:title" content="Learn HTML - Complete Tutorial">
    <meta property="og:description" content="Master HTML with our free comprehensive guide">
    <meta property="og:image" content="https://example.com/images/og-image.jpg">
    <meta property="og:url" content="https://example.com/html-tutorial">
    <meta property="og:type" content="article">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Learn HTML - Complete Tutorial">
    <meta name="twitter:description" content="Master HTML with our free guide">
    
    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    
    <!-- Canonical URL (prevents duplicate content) -->
    <link rel="canonical" href="https://example.com/html-tutorial">
    
    <!-- Robots (indexing instructions) -->
    <meta name="robots" content="index, follow">
</head>

⚠️ SEO Tips

• Title should be 50-60 characters
• Description should be 150-160 characters
• Use unique titles and descriptions per page
• Include target keyword in title and description

Next: CSS Tutorial →