HTML fundamentals
Tags, page structure, forms and accessibility.
Level 101 · 19 lessons · 15 practice labs
Lessons
The document skeleton
- Document structure: DOCTYPE, head, body: You will understand what the DOCTYPE, head and body parts of an HTML document do and build the skeleton of an empty page.
- Head metadata: meta, viewport, Open Graph: You control a page’s title, mobile scaling and share preview using meta tags.
- Character encoding and HTML entities: You prevent garbled characters and write special marks like < and & safely using entities.
- Headings, paragraphs and formatting: You will add headings, paragraphs and emphasised text so a page's content is clearly organised.
- Lists: You will write ordered and unordered lists in HTML and know when to use each.
- Links and images: You will link pages together, add images and learn why every image needs a text description.
- Embedding audio, video and figure: You add audio and video with captions and figure elements so media stays accessible.
- Short task: write a page that introduces you
Tables and forms
- Tables: You will show data in rows and columns using the right table tags.
- Forms: input, label, textarea: You will build form fields that collect information from users, together with the labels that belong to them.
- Form controls: select, checkbox, radio, fieldset: You build dropdowns, checkboxes and radio buttons and group related fields with fieldset.
- Built-in form validation attributes: You catch bad input in the browser with required, pattern and type, and know it never replaces server checks.
- Password fields and autocomplete: You set up password fields that work with password managers and configure autocomplete safely and usably.
- Short task: an event signup form
Meaning, accessibility and security
- Semantic tags and accessibility: You will organise a page with meaningful tags and make it accessible to people who use screen readers.
- ARIA and keyboard access: You test a page using only the keyboard and apply ARIA roles only where needed and correctly.
- Security in HTML: links, iframes, form targets: You will learn what risks external links, iframes and form targets carry and how to write them safely.
- Checking a page with a validator
- Capstone: a personal page: You bring the tags together to build a small page for a fictional person, with headings, a list, links and a form.
Practice labs
- Complete a missing skeleton: Fill in the DOCTYPE, lang, charset and viewport missing from a page.
- Fix broken Turkish characters: The letters ğ, ş and ı look broken on a menu page; fix the encoding and the needed entities.
- Prepare a share card: Add Open Graph tags to Fındık Workshop's event page and prove it previews correctly.
- Turn plain text into headings and lists: Turn a recipe written as one paragraph into a heading, an ingredient list and numbered steps.
- Repair broken links and images: Half the relative paths on a page are broken; check the folder layout, fix them all and add alt text.
- Build a nested menu with lists: Build three levels of product categories with nested lists and in-page links in an accessible way.
- Put a timetable into a table: Turn a weekly timetable into a proper table with header cells and a caption.
- Fix a table with merged cells: Repair a price table that slips because of colspan and rowspan mistakes.
- Embed a video with fallbacks: Embed a promo video in two formats with a poster and figcaption, offering a download link to browsers that can't play it.
- Label unlabeled fields: Tie every contact form field to a label and verify clicking it focuses the field.
- Build an event signup form: Write a signup form with name, email, session choice and a checkbox using built-in validation.
- Configure password fields properly: Fix autocomplete values, minlength and password manager compatibility on the signup and login forms.
- Run a page through a validator: Fix the validator's errors one by one and finish with zero errors.
- Turn a div pile into semantic tags: Replace the divs on a personal page with header, nav, main and footer and test keyboard navigation.
- Secure links and iframes: Add rel values to external links that open in a new tab and apply a sandbox to the embedded map.
About this course
Tags, page structure, forms and accessibility.
What you will learn
- The document skeleton
- Tables and forms
- Meaning, accessibility and security
Prerequisites
No prior knowledge is needed; the course starts from zero.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at beginner level; every term is explained where it first appears.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.