HTML roadmap

HTML stands for HyperText Markup Language, which is the foundational code used to build every page on the web. It uses special labels called tags to wrap around your content, telling the web browser how to display text, images, and other media.

Think of HTML like the timber frame of a house, defining where the rooms go before any decorating happens. For example, wrapping words in a paragraph tag tells the browser to show them as a standard block of text. This matters because it gives raw information a clear, structured format that browsers can read.

Learning HTML is your first step into web development, allowing you to turn simple ideas into real, working web pages that anyone around the world can view.

• HTML uses tags to wrap content
• Browsers read HTML to display pages
• It structures text, images, and links
• It is the foundation of the web

Every web page requires a standard set of building blocks to work correctly. The skeleton starts with a doctype declaration, followed by the main html element, a head section for behind-the-scenes data, and a body section for visible content.

Imagine baking a loaf of bread, where you always need flour, water, and yeast in the correct order before adding extra ingredients. In web design, missing the basic skeleton can cause browsers to display your page incorrectly. The opening tags tell the browser that a modern webpage is being loaded.

Knowing this structure matters because every single website you visit uses this exact same underlying blueprint to organise its content properly.

• Doctype tells the browser to use modern HTML
• The html element wraps the whole document
• Head holds behind-the-scenes settings
• Body holds the visible page content

The head section of your document is a hidden control room for your web page. It contains metadata, which is data about your data, such as the page title that appears on the browser tab and character encoding rules.

Think of this like the spine of a book, showing the title and author details so you know what the book is before opening it. If you set the character encoding to utf-8, symbols and accented letters will display correctly without turning into random gibberish.

This matters because proper metadata helps browsers understand your site and ensures visitors see correct titles and readable text.

• Hidden section at the top of the file
• Sets the title shown on browser tabs
• Defines character encoding for symbols
• Invisible to regular site visitors

Comments are special notes you can write directly inside your code. Web browsers completely ignore them when rendering the page, meaning visitors will never see them on screen.

Think of this like leaving sticky notes inside a notebook to remind yourself where you left off or to explain a tricky puzzle to a friend. If you return to your project weeks later, comments help you remember why you structured a section a particular way.

This matters for keeping your workspace organised, especially when collaborating with other people on larger web projects.

• Ignored entirely by web browsers
• Written using special syntax markers
• Great for leaving notes for yourself
• Helps teams understand shared code

Headings and paragraphs are the bread and butter of readable web content. Heading tags range from the main title down to subheadings, while paragraph tags group sentences into tidy blocks of text.

Think of reading a newspaper, where large bold headlines draw your eye to important stories, followed by neat columns of descriptive text. Without these tags, all your words would blur together into one giant, unreadable wall of text.

This matters because clear headings and paragraphs make your pages approachable, helping visitors scan for information quickly and comfortably.

• Headings range from level one to six
• Paragraph tags wrap normal text blocks
• Breaks up large walls of words
• Improves overall page readability

Sometimes you need to highlight specific words within a sentence without starting a brand new block of text. Inline tags allow you to add emphasis or make important words stand out.

Think of using a highlighter pen on a printed page to draw attention to a key phrase in a paragraph. If you want to stress a point, wrapping a word in an emphasis tag tells the browser to style it differently.

This matters because it adds nuance and visual variety to your writing, guiding the reader's eye to crucial details.

• Works inline within existing paragraphs
• Adds emphasis or strong importance
• Does not create new line breaks
• Highlights key words naturally

Semantic elements are descriptive tags that give meaning to the structure of your web page. Instead of using generic containers, tags like header, main, and footer tell the browser what kind of content lives inside them.

Think of a book with clearly labelled chapters, an introduction, and an index, making it simple to find what you need. A web page with semantic tags clearly separates the top banner from the core article and bottom copyright notes.

This matters because it helps search engines and accessibility tools understand the layout of your site effortlessly.

• Tags describe their contents clearly
• Includes header, main, and footer
• Improves document organisation
• Replaces vague generic containers

Line breaks and horizontal rules let you visually separate content without adding whole new paragraphs. They are single tags that draw dividing lines or force text onto a new line.

Think of poetry where line breaks matter for the rhythm, or a printed divider line separating different chapters in a story. If you need to write an address on separate lines, a simple break tag keeps everything compact.

This matters because it gives you fine control over the visual spacing and presentation of your text content.

• Single tags with no closing counterpart
• Forces text onto a new line
• Adds visual dividing lines
• Controls tight spacing needs

Hyperlinks are the connections that turn static documents into an interactive web. Using anchor tags, you can point users to external websites or different sections of your own project.

Think of a reference book with page numbers pointing you to related topics in the back, letting you jump around freely. Clicking a hyperlink whisks you away to a new destination seamlessly.

This matters because links form the fundamental navigation network of the internet, allowing people to explore connected information easily.

• Uses the anchor tag with a destination
• Connects to other web pages
• Can link to external or internal sites
• Makes content interactive

Images bring visual interest to your web pages, making them engaging and colourful. The image tag allows you to embed pictures, while alternative text describes the image for people who cannot see it.

Think of picture books where illustrations complement the story, helping readers visualise what is being discussed. If an image fails to load, the alternative text ensures context is not lost.

This matters because alternative text is vital for accessibility, allowing screen readers to describe pictures to visually impaired users.

• Embeds pictures into web pages
• Requires a file source location
• Uses alternative text descriptions
• Enhances visual appeal

Modern HTML allows you to embed sound clips and movies directly into your web pages without requiring extra browser plugins or downloads.

Think of a built-in music player on a blog post that lets you listen to a podcast right inside the article. The browser handles the play and pause buttons automatically for you.

This matters because rich media makes your website more engaging and interactive for visitors who prefer watching or listening over reading text.

• Embeds sound and video files
• Built-in browser playback controls
• No extra browser plugins needed
• Enriches user experience

Lists help you group related items together clearly and neatly. Unordered lists use bullet points for items where order does not matter, while ordered lists use numbers for step-by-step instructions.

Think of writing a shopping list with bullet points for groceries, contrasted with a numbered recipe showing the exact order to mix ingredients. This prevents clutter and helps readers digest information quickly.

This matters because structured lists are much easier to scan than long paragraphs when dealing with multiple items or steps.

• Unordered lists show bullet points
• Ordered lists show numbers
• Groups related items together
• Great for steps and ingredients

Description lists are specialised structures used to pair terms with their matching definitions or explanations.

Think of a dictionary layout where a word is printed on one line, followed by its definition indented underneath. This format keeps glossaries neat and easy to reference.

This matters because it gives you a semantic way to present glossaries, metadata pairs, or question-and-answer sections on your website.

• Pairs terms with descriptions
• Ideal for glossaries and FAQs
• Uses specific wrapper elements
• Keeps definitions neatly organised

Data tables allow you to organise complex information into neat rows and columns. They use specific tags to define the table itself, header cells, table rows, and individual data cells.

Think of a sports league results table or a train timetable, where columns and rows cross-reference information clearly. Trying to present this data in regular paragraphs would be confusing.

This matters because tables make numerical or categorical comparisons straightforward and readable for your visitors.

• Organises information in a grid
• Uses rows and data cells
• Includes header cells for labels
• Great for comparing data

The form element acts as a container that gathers user input and prepares it to be sent to a server for processing.

Think of filling out a paper feedback slip at a restaurant and posting it into a suggestion box. The form container bundles all your answers together so the business can receive them as a single package.

This matters because forms are the main way users interact with websites, allowing them to log in, search, or buy products.

• Acts as a container for inputs
• Gathers user data for processing
• Enables interactive communication
• Essential for user signups

Input fields let users type text, select checkboxes, or click submit buttons. Clear labels tell the user what each field expects them to enter.

Think of filling out a registration form on a clipboard where printed titles guide you to write your name or check a box. Different input types adapt to accept emails, passwords, or dates correctly.

This matters because properly labelled inputs make your forms accessible and easy to complete without frustration.

• Adds text boxes and checkboxes
• Uses labels for clear guidance
• Includes clickable submit buttons
• Supports various data types

Dropdown menus and text areas give users more advanced ways to provide input. Dropdowns let people pick one option from a list, while text areas provide a large box for longer messages.

Think of selecting your country from a long menu or writing a detailed customer review in a large feedback box. These elements handle choices and paragraphs smoothly.

This matters because they give you flexible input options when single-line text boxes are simply not enough.

• Dropdowns save space with options
• Text areas allow multi-line messages
• Expands form input capabilities
• Improves user experience for feedback

Basic form validation ensures that users fill out required fields or enter information in the correct format before submitting the form.

Think of a ticket machine at a station that refuses to print your ticket until you type in a valid card number. This stops incomplete information from being sent through.

This matters because it saves time by catching simple mistakes instantly in the browser before the data ever reaches a server.

• Checks fields before submission
• Requires mandatory information
• Prevents incomplete data entry
• Improves data quality

Web accessibility means writing proper HTML so that screen readers and other assistive technologies can interpret your pages correctly for disabled users.

Think of installing a wheelchair ramp alongside front steps so everyone can enter a building easily. Semantic tags and descriptions act like ramps for digital visitors.

This matters because the internet is for everyone, and inclusive websites ensure that blind or visually impaired users never get locked out of content.

• Helps assistive tech read pages
• Ensures inclusive web design
• Relies on correct HTML tags
• Opens content to all users

Search Engine Optimisation involves using clear titles, headings, and descriptions so search engines can easily index and understand your site.

Think of a well-organised library catalogue where books are placed in correct genres with clear spine labels so readers find them instantly. Good structure helps search engines rank your content correctly.

This matters because it helps interested visitors find your website naturally when searching online without needing direct links.

• Uses clear headings and titles
• Helps search engines index sites
• Improves online discoverability
• Organises content logically

The language attribute is a simple setting added to the opening html tag that declares the primary spoken language of your document.

Think of a book cover stating whether the text inside is written in English, French, or Spanish so readers open the right edition. This tells browsers and screen readers how to pronounce words correctly.

This matters because screen readers switch their speech synthesis voices based on this attribute to give a natural reading experience.

• Added to the opening html tag
• Declares the primary page language
• Assists screen reader pronunciation
• Improves international standards