Sign in Get started

Free course · 16 lessons · Beginner

HTML5 for Beginners: Build Your First Web Pages

Start from zero: what the web and HTML are, where HTML came from (from Tim Berners-Lee's 18 tags to HTML5 and today's Living Standard), and how to write your first page. Then learn text, links, images, lists, tables, page structure, forms, media and accessibility, one small step at a time, with live previews you can edit in your browser, and finish by building your own multi-page website. No experience needed.

Start the course

1. Getting Started

What the web and HTML are, where HTML came from, how to make your first page and how elements, tags and attributes work. No experience needed.

  1. What Is the Web, and What Is HTML? — How a web page travels from a server to your screen, what HTML actually is, and how HTML, CSS and JavaScript share the work.
  2. A Short History of HTML: From 18 Tags to HTML5 — How a physicist at CERN invented the web and HTML, how HTML grew through its versions, why HTML5 was a turning point and who looks after HTML today.
  3. Your First Web Page — Set up a free editor, create index.html, write the page skeleton line by line, open it in your browser and learn the edit, save, refresh routine.
  4. Elements, Tags and Attributes — The grammar of HTML: opening and closing tags, empty elements, attributes, nesting elements inside each other, comments and how browsers treat spaces.

2. Adding Content

The everyday building blocks: headings and text, links, images, lists and tables.

  1. Headings, Paragraphs and Text — Give a page an outline with headings, write paragraphs, and mark important, emphasised, quoted and code text with the right elements.
  2. Links: Connecting Pages — Create links to other sites, to your own pages, to a place on the same page and to email addresses, and write link text that makes sense.
  3. Images — Add pictures with img, write useful alt text, set width and height, pick the right file format and add captions with figure.
  4. Lists — Show items with bullet points or numbers, nest lists inside lists and pair terms with descriptions.
  5. Tables — Show data in rows and columns with table, headers, captions and grouped rows, and know when not to use a table.

3. Structuring a Whole Page

Organise a page into header, navigation, main content and footer with HTML5's semantic elements, and fill in the head so browsers, search engines and social sites understand it.

  1. Semantic HTML5: Header, Nav, Main and Footer — Use HTML5's structure elements instead of anonymous divs so browsers, search engines and screen readers know what each part of the page is.
  2. The Head: Titles, Meta Tags and Sharing — Fill in the head of your page: a good title, a description for search results, the viewport for phones, a favicon, a stylesheet and preview tags for social media.

4. Forms and Media

Collect information with forms, use the right controls and let the browser check answers, then add video, audio and embedded content.

  1. Forms: Collecting Input — Build a form with labels, text fields and a button, and learn what name, action and method do when the form is sent.
  2. More Form Controls and Built-in Validation — Use HTML5's input types, checkboxes, radio buttons and drop-downs, and let the browser check answers with required, min, max and pattern.
  3. Audio, Video and Embeds — Play video and audio with HTML5's built-in players, add captions, and embed maps or videos from other sites with iframe.

5. Good Habits and Your First Website

Make pages that everyone can use, check your HTML, and build and publish your own small website.

  1. Accessibility Basics and Checking Your HTML — Make pages that work for everyone, including people who use screen readers or only a keyboard, and check your code with the validator and your browser's developer tools.
  2. Capstone: Build Your Own Website — Build and publish a three-page personal website (home, projects and contact) using everything from this course.

Was this page helpful?