Module 1 of 10 · 6 lessons
HTML Basics Tutorial: Tags, Elements and Page Structure
What HTML is, how a tag works and the skeleton every page sits on.
Every web page starts here. You will learn what HTML is, how a browser reads it and the handful of rules all pages follow. HTML (HyperText Markup Language) (opens in a new tab) is a markup language, so you will not meet loops or variables. You label content, and the label tells the browser what each part is: a heading, a paragraph, a link or an image.
The first lesson covers what HTML is. Tags and Elements sorts out two words that beginners mix up all the time, and Attributes shows how to give an element extra information, such as the address a link points to. Then you write the full page skeleton: the doctype, the <html> element and the split between head and body.
Everything later in the course sits on top of this. Lists, images, tables and forms are all elements with attributes, placed inside the same skeleton. Once nesting and the head/body split make sense to you, most beginner errors take seconds to find. Browsers follow the same rules, and they are written down in the HTML Living Standard (opens in a new tab).
Each lesson has a live editor and an automatic checker. You write real code in the first minute and see the result straight away. The module ends with a small project, a Hello World page: a correct skeleton, a title, one main heading and two paragraphs about you. Allow about 45 minutes. A web browser is all you need. If you want to practice outside the course, an online editor with live preview such as HTML Code Editor (opens in a new tab) works the same way.
What you will learn
- Describe what HTML is and what the browser does with it
- Tell a tag from an element, and an element from an attribute
- Nest elements and close them in the order you opened them
- Write a full page skeleton with the doctype, html, head and body
- Put each piece of content where it belongs: head or body
- Build a small web page from an empty file and check it
Lessons
- What HTML Is Find out what HTML does, then edit your first page.
- Tags and Elements Write opening and closing tags and put together your first elements.
- Attributes Use attributes to give an element extra information.
- The Page Skeleton Drag and dropBuild the skeleton that every HTML page needs.
- Head and Body Fix the bugsLearn what goes in the head and what goes in the body.
- Project: Hello World Page ProjectBuild a whole page from an empty file.
Frequently asked questions
What is the basic structure of an HTML document?
It opens with <!doctype html>. Below that sits one <html> element with two children. The <head> holds information about the page, such as the <title> and the character set. The <body> holds everything visitors see: headings, text, images and links. The Page Skeleton lesson goes through it line by line.
What is the difference between an HTML tag and an element?
Is HTML a programming language?
No. HTML is a markup language (opens in a new tab). It describes the structure and meaning of content and has no variables, conditions or loops. On the web, logic is the job of JavaScript and visual styling is the job of CSS. Every web page still begins as HTML, so it is the sensible first language to learn if you want to build for the web.