HTML Basics for Beginners
Build real webpages from your very first lesson. Type HTML into a live code editor, see the result instantly, and finish with a simple website you made yourself.
- Free, no sign-up
- 34 short lessons
- About 3 hours
- 107 hands-on activities
- Beginner level
By the end of this course, you can
- Write a complete HTML page from DOCTYPE to closing tag
- Format text with headings, paragraphs, lists, links, and images
- Build accessible tables and contact forms
- Structure pages with semantic tags that search engines and screen readers understand
- Add SEO markup like title tags, meta descriptions, and canonical links
Who it is for
- Complete beginners who have never written code
- SEO specialists and VAs who edit title tags, headings, and blog posts
- Small business owners who want to fix their own website text and images
- Students preparing for web development or digital marketing work
What you need
- A computer with a web browser
- A free text editor such as VS Code or Notepad, or just the live editor in each lesson
- No coding experience needed
How each lesson works
- ReadA 5 to 10 minute lesson in plain language with local examples.
- TryA quiz, tool, or checklist that gives instant feedback.
- ApplyOne small task to do on your own site or account today.
Curriculum
Module 1: Introduction to HTML
Understand what HTML does and how webpages are built. 4 lessons · about 23 min
- 1.1 What is HTML?
What is HTML? HyperText Markup Language tells a web browser what each part of a webpage is. A plain intro with real examples and a live code editor.
- 1.2 How websites work: HTML, CSS, and JavaScript
How do websites work? HTML builds the structure, CSS adds style, JavaScript adds action. See how browsers request pages from a server and how all three fit.
- 1.3 HTML elements, tags, and attributes
HTML elements vs tags vs attributes, explained with opening and closing tags, void elements like img and br, nesting rules, and correct attribute syntax.
- 1.4 Setting up your first HTML file
Set up your first HTML file with a free code editor like VS Code: save it as index.html, open it in a browser, and keep your project folder organized.
Module 2: HTML Document Structure
Learn the skeleton every HTML page needs. 4 lessons · about 19 min
- 2.1 The basic HTML document
The basic HTML document structure every webpage needs: the HTML boilerplate explained line by line, with a starter template you can copy and edit live.
- 2.2 DOCTYPE, html, head, and body explained
What do <!DOCTYPE html>, <html>, <head>, and <body> do? Standards mode vs quirks mode, the lang attribute, and the root element explained simply.
- 2.3 The page title and metadata
The HTML title tag and meta tags at work: add a page title, meta description, viewport tag, favicon, and Open Graph tags for sharing on Facebook.
- 2.4 Writing your first webpage
Write your first webpage in HTML from scratch: a simple personal profile page with a title, heading, paragraphs, and a link, checked in a browser.
Module 3: Text and Content Elements
Format headings, paragraphs, emphasis, and lists. 4 lessons · about 19 min
- 3.1 HTML headings: h1 to h6
HTML headings h1 to h6 set the outline of a page. Heading levels, outline order, why skipping levels hurts, and how screen readers use headings.
- 3.2 Paragraphs and line breaks
The HTML p tag, why browsers collapse extra spaces, when to use br and hr, and how to show addresses with line breaks that stay readable.
- 3.3 Bold, emphasis, and text formatting
HTML text formatting tags: strong vs b, em vs i, plus mark, small, sup, sub, code, and blockquote. Which tags add meaning and which only change style.
- 3.4 Ordered and unordered lists
HTML lists made easy: ul for bullet lists, ol for numbered steps, li for items, nested lists, and dl, dt, and dd for terms. Try each one live.
Module 4: Links and Navigation
Connect pages and build a simple menu. 4 lessons · about 19 min
- 4.1 Creating links with the a tag
Create HTML links with the a tag and href attribute: clear anchor text, safe new tab links, and links that call a phone number or open an email.
- 4.2 Relative URLs and absolute URLs
Relative vs absolute URLs in HTML: the parts of a URL, root-relative paths, ../ for parent folders, and when each kind of link path works best.
- 4.3 Linking to sections within a page
HTML jump links scroll to a section of the same page. Add id attributes, use fragment identifiers, and build a table of contents with back to top links.
- 4.4 Building basic website navigation
Build a basic website navigation menu in HTML with nav, ul, and links. Mark the current page with aria-current, plan menu labels, and add breadcrumbs.
Module 5: Images and Embedded Content
Add images, videos, and maps the right way. 4 lessons · about 20 min
- 5.1 Adding images with the img tag
The HTML img tag in practice: src, alt, width, and height, choosing JPG, PNG, WebP, or SVG, lazy loading, and captions with figure and figcaption.
- 5.2 Image paths and file locations
Broken image icon? Fix HTML image paths: organize an images folder, write relative and absolute src paths, and name image files the right way.
- 5.3 Alternative text and image accessibility
How to write good alt text, with examples for photos, logos, linked images, and decorative images, and how screen readers use the alt attribute.
- 5.4 Embedding videos and external content
Embed videos and external content in HTML: video and audio tags, YouTube and Google Maps with iframe, plus titles and lazy loading for speed.
Module 6: Tables and Data
Show rows and columns of data clearly. 3 lessons · about 14 min
- 6.1 Creating HTML tables
Create HTML tables with table, tr, th, and td. Build a price list step by step and see when tables suit tabular data and when they do not.
- 6.2 Table rows, headers, and cells
HTML table structure, one level deeper: group rows with thead, tbody, and tfoot, add a caption, and merge cells with colspan and rowspan.
- 6.3 Organizing tabular data accessibly
Make HTML tables accessible for screen readers: th with scope for column and row headers, captions, simple structure, and scrolling on phones.
Module 7: Forms and User Input
Collect names, emails, and messages from visitors. 4 lessons · about 21 min
- 7.1 Understanding HTML forms
How HTML forms work: the form element, action and method attributes, GET vs POST, the name attribute, and how form data reaches a server.
- 7.2 Text fields, email fields, and text areas
HTML input types for forms: text, email, tel, number, date, and password, plus textarea for long messages, with placeholder and autocomplete done right.
- 7.3 Labels, buttons, and required fields
Connect HTML form labels with for and id, pick the right button type, mark required fields, and add checkboxes, radio buttons, and select menus.
- 7.4 Basic form structure and submission
Build a complete HTML contact form from start to finish: structure the fields, send submissions with a form service, add a thank you page, block spam.
Module 8: Semantic HTML and Accessibility
Use meaningful tags so everyone can use your page. 3 lessons · about 16 min
- 8.1 What is semantic HTML?
What is semantic HTML? Meaningful tags beat generic div and span elements, helping screen readers, search engines, and teams that maintain the code.
- 8.2 header, nav, main, section, and footer
HTML5 semantic layout elements: header, nav, main, section, article, aside, and footer, shown in a full page layout with screen reader landmarks.
- 8.3 Using HTML to improve accessibility
Improve web accessibility with HTML: lang, headings, alt text, labels, keyboard focus, link text, and ARIA only when needed. Beginner checklist included.
Module 9: HTML for SEO
Write the tags Google reads first. 3 lessons · about 15 min
- 9.1 HTML title tags and meta descriptions
Write HTML title tags and meta descriptions that earn clicks: length limits in pixels and characters, keyword placement, and why Google rewrites them.
- 9.2 Heading hierarchy and content structure
Heading hierarchy for SEO and readability: plan an h1 to h3 outline from search intent, write descriptive subheadings, and structure pages for skimmers.
- 9.3 Canonical links, robots directives, and basic metadata
Canonical tags, meta robots directives like noindex and nofollow, hreflang, and structured data basics, so search engines index the right pages.
Module 10: Practice Project and Validation
Build, check, and fix a small website. 1 lessons · about 9 min
- 10.1 Build a simple HTML website
Build a simple three page HTML website for a local business, validate it with the W3C validator, fix common errors, and review its basic SEO elements.
Frequently asked questions
Do I need to install anything?
No. Every lesson has a live editor that runs in your browser. Installing a free editor like VS Code helps when you build your own site in Module 10.
How long does the course take?
About 4 hours of lessons, split into 34 short lessons of 5 to 10 minutes each.
Does this course cover CSS and JavaScript?
It explains what CSS and JavaScript do and how they work with HTML, but the focus is HTML. Styling and scripting come in later courses.
Why should an SEO learn HTML?
Title tags, headings, links, alt text, and canonical tags all live in HTML. Reading it lets you check and fix SEO issues yourself.
Ready to begin?
Lesson 1.1 takes about 7 minutes. No account needed.
Start the first lessonMore free courses
- SEO for BeginnersGet your website found on Google, starting from zero.
- Google Ads for BeginnersTurn a small peso budget into real leads.
- Digital and Web AnalyticsMake marketing decisions with data instead of guesses.
- Technical SEO AuditingAudit any website the way professional SEO specialists do.
- AI Search and Answer Engine OptimizationGet your website cited by ChatGPT, Perplexity, and Google AI Overviews.
- Local SEOGet your business found by nearby customers on Google Search and Google Maps.