HTML 43 min

HTML Introduction

Understand what HTML does and create your first web page.

HTML stands for HyperText Markup Language. It is the language that gives a web page its meaning and structure: what is a heading, a paragraph, a navigation area, a button, a form, or an image. Browsers turn that structure into the pages people see, while search engines and assistive technology use it to understand the page.

A notebook filled with colorful code lines beside web-page cards and a keyboard — Learning HTML is a practical loop: understand the structure, edit a small example, then inspect the result in a browser.

What problem does HTML solve?

A browser receives a text file. Without markup, it cannot reliably tell whether the first line is a page title, a quotation, a warning, or a list of steps. HTML wraps content in elements so the browser can build a useful document rather than guessing.

A heading gives a section a clear label.
A paragraph groups a complete thought.
A link connects the reader to another resource.
An image gets alternative text for people who cannot see it.
A form label tells a person what information to enter.

Elements, tags, and attributes

Most HTML elements use an opening tag, content, and a closing tag. The complete unit is an element. Attributes sit inside the opening tag and add information, such as a link destination or the language of the document.

<a href="/courses/html">
  Continue the HTML course
</a>

<!-- opening tag: <a href="..."> -->
<!-- content: Continue the HTML course -->
<!-- closing tag: </a> -->

<main> <h1>Neighborhood web workshop</h1> <p>Learn to create a useful page with HTML.</p> <h2>When to arrive</h2> <p>Saturday at 10:00. Bring a laptop if you have one.</p> <h2 id="booking">Reserve a place</h2> <p>Email the organizers for availability.</p> </main>

HTML Getting Started

HTML Core

Links, Media & Data

Page Structure

Quality & Reference

HTML Introduction

What problem does HTML solve?

Elements, tags, and attributes

The anatomy of an HTML document

Head and body: two different jobs

Build, save, and inspect your first page

Use HTML for meaning

What you can do now

Understand it. Build it. Explain it.

What you should be able to do

A web page is a document before it is an application

Source, DOM, and pixels are different views

From event brief to meaningful markup

Code

Result

Why this example works

A heading that only looks important

A useful notice, not a hello-world fragment

Your build plan

Review your result

Can you explain the decision?

Experiment with document structure

Code

Result

Build a small personal page

Code

Result

Test what you learned

Test what you learned

Test what you learned

Check your understanding