Introduction to HTML: What It Is and How Web Pages Work

HTML (HyperText Markup Language) is the language that describes the content and structure of every web page. It tells the browser "this is a heading", "this is a paragraph", "this is a link", "this is an image". It is not a programming language: it has no variables, loops or calculations. It is a markup language, which means you wrap content in tags that give it meaning.

A first look#

Here is a small piece of HTML and what the browser shows for it:

<h1>My Favourite Fruits</h1>
<p>These are the fruits I eat <strong>every week</strong>:</p>
<ul>
  <li>Mango</li>
  <li>Banana</li>
  <li>Guava</li>
</ul>

The Result box on this site is a real browser frame. The code above it is rendered exactly as a browser renders it in a normal tab, with no extra styling added.

• <h1> marks the main heading, so the browser shows it large and bold.
• <p> marks a paragraph.
• <strong> marks text as important, shown in bold.
• <ul> and <li> make a bulleted list.

How a web page reaches your screen#

1. You type an address or click a link.
2. The browser asks a web server for the page.
3. The server sends back an HTML file (plus any CSS, JavaScript and images it refers to).
4. The browser reads the HTML, builds a tree of elements called the DOM (Document Object Model), and draws it on the screen.

You do not need a server to learn HTML. A browser can open an .html file straight from your computer, which is exactly what you will do in the next lessons.

HTML, CSS and JavaScript#

Every website you use is built from three languages working together:

HTML comes first: CSS styles HTML elements and JavaScript works with them. After this course, continue with the CSS course and then the JavaScript course.

Why HTML matters#

• Every web page uses it. Frameworks such as React, Angular and Vue still produce HTML in the end.
• Accessibility. Screen readers and other assistive technology rely on correct HTML to describe a page to people who cannot see it.
• Search engines. Search engines read your HTML to understand what a page is about.
• It is the first step for web roles. The Web Developer path starts here.

What you will learn#

• The building blocks: elements, attributes and the structure of a document.
• Text, links, images, lists and tables.
• Forms that collect input and validate it without any JavaScript.
• Semantic layout elements such as <header>, <nav>, <main> and <footer>.
• Audio, video, embeds, SVG and canvas.
• The <head>: titles, meta tags for search and social sharing, and loading CSS and JavaScript.
• Accessibility, ARIA basics and best practices.

Key takeaway#