Beginner Friendly

LearnHTML.

HTML is the standard markup language for web pages. Combined with CSS and JavaScript, you can build beautiful, functional, and exciting websites — starting today.

Start Learning → Setup Guide
<html> Structure
✦
<head> Metadata
✦
<body> Content
✦
<p> Paragraphs
✦
style="" Inline CSS
✦
<div> Containers
✦
<a> Links
✦
<img> Images
✦
<html> Structure
✦
<head> Metadata
✦
<body> Content
✦
<p> Paragraphs
✦
style="" Inline CSS
✦
<div> Containers
✦
<a> Links
✦
<img> Images
✦
01 — Getting Started

Set Up Your Environment

Before writing code, you need two things: a text editor and a browser. That's it. No complicated installs required.

🖥️

On PC / Mac

  • Download VS Code (recommended)
  • Or use Notepad (Windows built-in)
  • Copy the code into the editor
  • Save the file as index.html
  • Open it in any browser
📱

On Phone

  • Download Treb Edit from your app store
  • Create a new .html file
  • Paste your code in
  • Preview directly in the app
  • Keep internet on for best results
💡
Keep your internet connection on and refresh the page after saving changes for best performance.
02 — Examples

Try It Yourself

The best way to learn HTML is by running real code. Click Run on any example to see it live.

Example 01 — Basic Structure

Every HTML page starts with this skeleton. The <body> is where visible content lives. It's empty here — so the output is blank.

html
<!-- Basic HTML structure -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- Content goes here -->
  </body>
</html>
⬡ preview — output
Example 02 — Adding Text

Now we add a paragraph inside the body. The <p> tag wraps a block of text and adds spacing around it automatically.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>This is a test. For more, contact us.</p>
  </body>
</html>
⬡ preview — output
Example 03 — Adding Style

Using the style="" attribute, we can add CSS directly to any element. Here we change the background and text color.

html
<body style="background-color: bisque;">

  <p style="color: darkgoldenrod;">
    This is a test on what we are practicing.
    For more contact us.
  </p>

</body>
⬡ preview — output
03 — What's Next

Keep Building

You've got the foundation. Here's what to tackle next on your web dev journey.

01
More HTML Tags — Learn <h1>–<h6>, <img>, <a>, <ul>, and <table> to build richer layouts.
02
CSS Stylesheets — Move from inline styles to a separate .css file for cleaner, more powerful design.
03
JavaScript — Add interactivity — buttons that respond, dynamic content, forms that validate.
04
Build a Project — Apply everything by building something real: a portfolio page, a calculator, or a to-do list.