HTML (HyperText Markup Language) is the foundation of every webpage you visit. Understanding how HTML code transforms into visual elements is key to becoming a web developer. This tutorial bridges the gap between the code you write and what appears in your browser.

For each HTML tag, we'll show you both the code and the result side by side, helping you build a mental model of how HTML works.

Expert-Reviewed Content

This tutorial has been reviewed by experts in web development, accessibility, and education to ensure it provides clear, accurate, and comprehensive guidance for all learners.

How Browser Shows HTML

Document Structure

Every HTML document needs a basic structure. These tags form the skeleton of your webpage.

Document Structure Template

Every HTML document follows this basic structure. Think of it as the blueprint for your webpage.

CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>

RESULT

Hello, World!

This is my first webpage.

Mental Model 🧠

Think of the HTML document as a human body:

<!DOCTYPE> - The birth certificate
<html> - The whole body
<head> - The brain (unseen but controls how things work)
<body> - The visible parts that others can see

Headings & Text

Headings and paragraphs form the basic content structure of web pages. Think of headings as newspaper headlines and paragraphs as the story text.

<h1> to <h6> Heading Tags

Headings define the hierarchy of your content, with h1 being the most important and h6 the least. Like chapter titles in a book.

CODE

<h1>Main Heading (H1)</h1>
<h2>Subheading (H2)</h2>
<h3>Section Heading (H3)</h3>
<h4>Subsection Heading (H4)</h4>
<h5>Minor Heading (H5)</h5>
<h6>Smallest Heading (H6)</h6>

RESULT

Main Heading (H1)

Subheading (H2)

Section Heading (H3)

Subsection Heading (H4)

Minor Heading (H5)

Smallest Heading (H6)

Mental Model 🧠

Imagine an outline or table of contents in a book:

<h1> - Book title
<h2> - Chapter titles
<h3> - Main sections
<h4> to <h6> - Subsections of decreasing importance

<p> Paragraph Tag

The paragraph tag defines blocks of text. Most of your content will be in paragraph tags.

CODE

<p>This is the first paragraph. It contains multiple sentences. 
Notice how the text wraps automatically.</p>

<p>This is a second paragraph. The browser automatically adds 
space between paragraphs.</p>

RESULT

This is the first paragraph. It contains multiple sentences. Notice how the text wraps automatically.

This is a second paragraph. The browser automatically adds space between paragraphs.

Mental Model 🧠

Think of paragraphs as distinct thoughts or ideas. Just like in a book or essay, each paragraph represents a cohesive block of related text with natural spacing between them.

Semantic HTML Elements

Semantic elements clearly describe their meaning to both browsers and developers, creating more structured and accessible web pages.

Semantic Structure Tags

These tags provide meaning about the structure of your content, helping search engines, screen readers, and developers understand your page organization.

CODE

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
    <section>
      <h3>Section Heading</h3>
      <p>Section content...</p>
    </section>
  </article>
  
  <aside>
    <h3>Related Info</h3>
    <p>Sidebar content...</p>
  </aside>
</main>

<footer>
  <p>© 2025 My Website</p>
</footer>

RESULT

Website Title

Home
About

Article Title

Article content...

Section Heading

Section content...

<main>

Related Info

Sidebar content...

<aside>

Mental Model 🧠

Think of semantic HTML like the blueprint of a building:

<header> - The entrance with signage
<nav> - The directory or map
<main> - The main hallways and rooms
<article> - A self-contained exhibit or display
<section> - A themed area within the exhibit
<aside> - Information booths on the side
<footer> - Exit information and credits

Accessibility Benefits: Screen readers and assistive technologies use these semantic elements to help users navigate web content more effectively.

Text Formatting

Formatting tags help emphasize and style your text, adding visual cues about importance and meaning.

Text Formatting Tags

These tags help emphasize and highlight portions of your text for better readability and emphasis.

CODE

<p>
  This text is <strong>bold and important</strong>.
  This text is <em>emphasized/italic</em>.
  This text is <mark>highlighted</mark>.
  This is <code>computer code</code>.
  This is <sub>subscript</sub> and this is <sup>superscript</sup>.
</p>

RESULT

This text is bold and important.
This text is emphasized/italic.
This text is highlighted.
This is computer code.
This is _subscript and this is ^superscript.

Mental Model 🧠

Think of text formatting like how you'd speak in conversation:

<strong> - Words you'd emphasize strongly
<em> - Words you'd stress slightly
<mark> - Like using a highlighter on important phrases
<code> - Technical terms that need special attention

Accessibility Note: Screen readers can interpret semantic tags like <strong> and <em> to convey emphasis to users, but purely visual tags like <b> and <i> don't provide this context.