HTML Introduction

What HTML is

HTML is the structure and meaning of a web page.

HTML stands for HyperText Markup Language. It is the language used to describe the content of a web page: headings, paragraphs, links, images, lists, forms, navigation, articles, tables and more. HTML does not calculate business logic and it does not design the page by itself. Its first job is to tell the browser what the content is.

A browser does not see a page like a designer sees it. The browser reads markup, builds a document tree and then combines that structure with CSS and JavaScript. That is why strong HTML matters. If the structure is weak, everything built on top of it becomes harder: styling, accessibility, SEO, automation and maintenance.

Simple idea: HTML gives content meaning. CSS controls presentation. JavaScript adds behavior.

The three browser layers

HTML, CSS and JavaScript each have their own job.

A beginner mistake is to see a website as one thing. A browser page is usually built from layers. HTML creates the document. CSS styles the document. JavaScript changes the document or reacts to user actions.

HTML

Defines the content and structure: titles, text, links, media, forms and sections.

CSS

Defines how the content looks: color, spacing, layout, typography, animation and responsiveness.

JavaScript

Defines interaction and behavior: menus, validation, requests, updates and app logic.

<h1>HTML creates the heading</h1>
<style>h1 { color: green; }</style>
<script>console.log("JavaScript runs behavior");</script>

First document

Every HTML page starts with a document skeleton.

A normal HTML document starts with <!doctype html>. This tells the browser to use modern standards mode. The html element wraps the full document. The head contains metadata such as the page title and viewport. The body contains the visible content.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My first HTML page</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Elements and attributes

HTML is built from elements, and elements can have attributes.

An element is a meaningful part of a page. A paragraph uses p. A link uses a. An image uses img. Most elements have an opening tag, content and a closing tag. Some elements, such as img, br, meta and input, do not wrap text content.

Attributes add extra settings to an element. In a link, href tells the browser where the link goes. In an image, src tells the browser what image to load and alt describes the image for accessibility and fallback text.

Element

<p>This is a paragraph.</p>

Element with attributes

<a href="/html/headings.php">
  Learn headings
</a>

Semantic HTML

Good HTML describes the role of content.

Semantic HTML means choosing elements that describe what the content is. Use nav for navigation, main for the main page content, article for standalone content, button for actions and a for navigation. A div is useful, but it has no meaning by itself.

Semantic markup helps developers, browsers, search engines, screen readers and future you. It also makes CSS and JavaScript easier because the structure is predictable.

<header>
  <nav aria-label="Main navigation">...</nav>
</header>

<main>
  <article>
    <h1>HTML Introduction</h1>
    <p>HTML describes content structure.</p>
  </article>
</main>

How browsers use HTML

The browser turns markup into a document tree.

When a browser receives HTML, it parses the markup and creates the DOM: the Document Object Model. The DOM is the live tree of nodes that CSS can style and JavaScript can read or change. That is why invalid nesting, missing closing tags and unclear structure can create surprising results.

1. HTML arrives

The browser receives markup from a file, server response or generated document.

2. Browser parses it

The markup is interpreted as elements, attributes, text nodes and document structure.

3. DOM is created

CSS styles the DOM and JavaScript can interact with it.

Beginner mistakes

Most early HTML problems come from mixing meaning and appearance.

HTML should not be used as a visual hack. Do not choose headings only because they look big. Do not use tables for layout. Do not use line breaks to create spacing. Do not use clickable div elements when a real button or a element would be correct.

Wrong element

Using a div when the content is clearly navigation, a button, a heading or an article.

Styling in HTML

Choosing tags because of default browser styles instead of meaning.

No accessibility text

Images without useful alt, forms without labels and vague link text.

Live code lab

Build your first complete HTML page.

Edit the HTML and CSS. The preview updates live. Start by changing the title, the heading, the paragraph and the link text. Then add a second section.

HTML CSS

Live preview

Where to go next

After the introduction, learn the building blocks.

The best next step is understanding elements and attributes. Elements are the words of HTML. Attributes are the settings on those words. After that, headings and paragraphs will teach you how real page content becomes readable and structured.

Next: HTML Elements Also learn attributes

Self-check

Before you continue, prove that you own this lesson.

Basic

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?