HTML5 Tutorial | KNOWe Platform

KNOWe Learning Module

Learn HTML5

Master modern web markup, semantic elements, and responsive design fundamentals.

Start Learning Jump to Mini Project

Why Learn HTML5?

Semantic Markup

Better meaning and structure for web content

Multimedia Support

Native audio and video capabilities

Responsive Design

Mobile-first approach with flexible layouts

Form Enhancements

Better input types and validation

HTML5 Basics

HTML5 introduces a simplified DOCTYPE and new semantic elements that provide better structure.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>My HTML5 Page</title>

</head>

<body>

  <header><h1>Welcome to HTML5</h1></header>

  <main><p>Main content</p></main>

  <footer><p>© 2026</p></footer>

</body>

</html>

HTML5 Elements & Tags

<header>Page header</header>

<nav>Navigation menu</nav>

<main>Main content</main>

<article>Article content</article>

<section>Content section</section>

<aside>Sidebar content</aside>

<footer>Page footer</footer>

<input type="email"> <input type="tel"> <input type="date">

<input type="number" min="1" max="100"> <input type="range">

HTML5 Forms

<form>

  <label for="name">Name:</label>

  <input type="text" id="name" required>

  <label for="email">Email:</label>

  <input type="email" id="email" required>

  <label for="age">Age:</label>

  <input type="number" id="age" min="18" max="100">

  <button type="submit">Submit</button>

</form>

Semantic HTML

<article>

  <header>

    <h1>Article Title</h1>

    <time datetime="2026-03-30">March 30, 2026</time>

  </header>

  <section>

    <h2>Introduction</h2>

    <p>Article content...</p>

  </section>

</article>

Media Elements

<video controls width="320" height="240">

  <source src="movie.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

<audio controls>

  <source src="audio.mp3" type="audio/mpeg">

</audio>

Live HTML Editor

HTML Code

Live Preview

Try Examples:

🎯 Mini Project: Personal Portfolio

Portfolio Code

<div style="font-family: Arial, sans-serif;">
    <header style="background: linear-gradient(135deg, #e34c26, #f06529); color: white; text-align: center; padding: 2rem;">
        <h1>John Developer</h1>
        <p>Web Developer & HTML5 Specialist</p>
    </header>
    <nav style="background: #333; padding: 1rem; text-align: center;">
        <a href="#" style="color: white; text-decoration: none; margin: 0 1rem;">About</a>
        <a href="#" style="color: white; text-decoration: none; margin: 0 1rem;">Projects</a>
        <a href="#" style="color: white; text-decoration: none; margin: 0 1rem;">Contact</a>
    </nav>
    <main style="max-width: 1100px; margin: 2rem auto; padding: 0 1rem;">
        <section style="margin-bottom: 2rem;">
            <h2 style="color: #e34c26; border-bottom: 2px solid #e34c26; display: inline-block;">About Me</h2>
            <p>I'm a passionate web developer specializing in HTML5, CSS3, and modern web technologies.</p>
        </section>
        <section>
            <h2 style="color: #e34c26; border-bottom: 2px solid #e34c26; display: inline-block;">Projects</h2>
            <div style="background: #f9f9f9; padding: 1rem; margin: 1rem 0; border-left: 4px solid #e34c26;">
                <h3>✨ HTML5 Portfolio</h3>
                <p>A responsive portfolio built with semantic HTML5.</p>
            </div>
            <div style="background: #f9f9f9; padding: 1rem; margin: 1rem 0; border-left: 4px solid #e34c26;">
                <h3>🎨 Interactive Form</h3>
                <p>Form with HTML5 validation and modern input types.</p>
            </div>
        </section>
    </main>
    <footer style="background: #333; color: white; text-align: center; padding: 1rem; margin-top: 2rem;">
        <p>© 2026 John Developer - Built with HTML5</p>
    </footer>
</div>

Portfolio Preview

HTML5 Assessment

1. What is the correct DOCTYPE for HTML5?
<!DOCTYPE html5> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN"> <!DOCTYPE html>

2. Which element is used for navigation links?
<navigation> <nav> <menu>

3. Which input type is best for email addresses?
<input type="text"> <input type="email"> <input type="mail">

Complete the quiz and click submit.

Learner Progress

Course Progress0%

Intro & Why HTML5

HTML5 Basics & Elements

Forms & Validation

Semantic HTML & Media

Mini Project (Portfolio)

Assessment Completed

Next Steps

✓ Practice building responsive layouts with semantic HTML5
✓ Learn CSS3 for styling and modern animations
✓ Master JavaScript for interactive web applications
✓ Explore accessibility (ARIA) and SEO best practices