CodeVent Digital Home
0%
Course Progress

Start Your HTML5 Journey

Work through the lessons below, then head to the Resources tab for external materials from W3Schools, MDN, and FreeCodeCamp. Use the Editor to practice live as you learn.

2 Lessons ~20 min Free Access HTML5 · CSS · JS

What is HTML5?

HTML5 is the latest version of HyperText Markup Language, the foundation of every web page. It defines the structure and meaning of web content through elements and tags.

Basic Document Structure

<!-- Every HTML5 page starts with this boilerplate -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML5 Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Key Concepts

  • <!DOCTYPE html> — tells the browser this is an HTML5 document
  • <html lang="en"> — root element; lang improves accessibility & SEO
  • <head> — metadata: title, charset, viewport, styles
  • <body> — everything visible on the page lives here
  • <h1> to <h6> — headings in order of importance
  • <p> — paragraph text

💡 Try this code in the Editor tab — paste it and click Run!

Semantic HTML5 Elements

HTML5 introduced semantic elements, tags that describe meaning, not just appearance. Search engines and screen readers rely on them.

Structural / Layout Elements

  • <header> — top of a page or section (logo, nav)
  • <nav> — navigation links
  • <main> — primary content; only one per page
  • <section> — thematic grouping of content
  • <article> — self-contained content (blog post, card)
  • <aside> — sidebar or supplementary content
  • <footer> — bottom of a page or section

Content Elements

  • <h1>–<h6> — headings (h1 = most important)
  • <p> — paragraph
  • <a href=""> — hyperlink
  • <img src="" alt=""> — image (always include alt)
  • <ul> / <ol> / <li> — lists
  • <div> — generic container (no semantic meaning)
  • <span> — inline container

Example: Semantic Page Skeleton

<body>
  <header>
    <nav><a href="/">Home</a></nav>
  </header>
  <main>
    <section>
      <h1>Welcome</h1>
      <p>This is the main content.</p>
    </section>
  </main>
  <footer><p>&copy; 2025</p></footer>
</body>
Stuck? Join the Community Get live help, code reviews, and mentorship from fellow learners and instructors.
Join Free
Up Next in Your Journey

Ready to Practice?

Open the Editor tab to try the code from these lessons live, no setup needed. Then test yourself with the Quiz.

Sandboxed Live Editor Write HTML below and press Run to see it rendered safely in real-time. Your code is isolated in a sandbox, no scripts can escape.
Preview runs in a sandboxed iframe. JavaScript execution is disabled for security.
Next Step

Test Your Knowledge

You've practised in the editor, now prove what you know with the quick quiz.

HTML5 Knowledge Check

Test your understanding of the lessons. Select your answers and click Submit Quiz.

Question 01
What does HTML stand for?
Question 02
Which HTML5 element defines the main content of a page?
Question 03
What attribute must always be included on an <img> tag for accessibility?
Keep the Momentum

Explore Deeper Resources

Go beyond these lessons with W3Schools, MDN, and FreeCodeCamp, the industry's best free learning platforms.

Join Community

Comprehensive Learning Resources

Click any resource below to access free, in-depth HTML, CSS, and JavaScript tutorials. Use all three platforms together for the best results.

3 Platforms All Free Industry Standard

W3Schools

Interactive tutorials with live examples and exercises. The go-to reference for quick lookups and beginners learning syntax.

Open W3Schools

MDN Web Docs

Mozilla's authoritative reference for web standards. Deep technical documentation for understanding how and why things work.

Open MDN Docs

FreeCodeCamp

Structured bootcamp with real projects and certifications. Build portfolio-worthy projects while earning proof of your skills.

Open FreeCodeCamp
Pro Strategy Use W3Schools for quick syntax lookups, MDN to understand the deeper "why", and FreeCodeCamp for structured projects that go in your portfolio. Rotate between all three.
Your Journey, Monetize Stage

Turn Your Skills Into Income

You're learning the fundamentals. The next step is building real projects, getting them validated by the community, and discovering how to earn from your skills through the CodeVent Shop and mentorship network.

Explore Shop Join Community