Overview, Rules, Structure, Semantic Tags & Lists
What HTML is, how a valid document is structured, the difference between semantic and non-semantic elements, and organising content with lists
HTML (HyperText Markup Language) is the standard language for creating web pages. It defines the structure and meaning of web content using elements — represented by tags. HTML is not a programming language. It has no logic, no variables, no functions. It is a markup language — you annotate content to describe what it is.
Every webpage you have ever visited — no matter how complex — begins with HTML. It has been the foundation of the web since Tim Berners-Lee invented it in 1991 at CERN. HTML5, the current standard, was finalised in 2014 and introduced powerful semantic elements, native audio/video support, form validation, and canvas drawing.
The "Hyper" in HyperText refers to hyperlinks — the ability to link documents together, which is what makes the web a web rather than a collection of isolated pages.
- Every tag must be properly opened and closed:
<p>content</p>. Self-closing tags (void elements) like<img>,<br>,<input>,<meta>, and<link>need no closing tag. - Tags must be properly nested: Inner tags must close before outer tags.
<b><i>text</i></b>is correct.<b><i>text</b></i>is invalid. - All HTML attribute values must be quoted:
href="https://example.com"— always use double quotes for consistency. - HTML is case-insensitive but always write tags and attributes in lowercase — it is the W3C standard and makes code more readable.
- One <h1> per page — it represents the single most important heading. Multiple h1 tags harm SEO and accessibility.
- Do not skip heading levels: go h1 → h2 → h3, not h1 → h3. Skipping confuses screen readers and search engines.
- Validate your HTML: Use the W3C Validator at validator.w3.org before submitting or deploying. Invalid HTML can render differently across browsers.
Every valid HTML document has the same foundational skeleton. Each part has a specific purpose and location. Writing a page without this structure may work in some browsers but will fail validation and may behave unpredictably.
HTML browsers ignore most whitespace — extra spaces, tabs, and blank lines are compressed to a single space in rendered output. However, proper indentation is absolutely essential for human readers. An unindented HTML file with 200 elements becomes impossible to understand and maintain.
The standard is 2 spaces per indentation level (some teams prefer 4 — be consistent within a project). Every child element is indented one level more than its parent. Closing tags align with their opening tag. Inline elements (<strong>, <a>, <span>) can stay on the same line as their content. Block elements (<div>, <p>, <section>) always get their own line.
This is one of the most important concepts in modern HTML. A semantic element carries meaning — it tells both the browser and the developer what the content is. A non-semantic element carries no meaning — it says nothing about its content.
Before HTML5, developers built entire layouts with <div> and <span> — meaning nothing. HTML5 introduced elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> that describe purpose. This matters for three reasons: search engine rankings (Google understands your page structure), accessibility (screen readers navigate by landmarks), and developer experience (code is self-documenting).
| Semantic Element | Purpose | Notes |
|---|---|---|
| <header> | Introductory content or navigation at the top of a page or section | A page can have multiple — one for the page, one inside an <article> |
| <nav> | A set of navigation links | Not all groups of links — only major navigation blocks |
| <main> | The dominant, unique content of the page body | Only ONE <main> per page. Never put it inside <header>, <nav>, <aside>, or <footer> |
| <article> | Self-contained, independently distributable content | Blog posts, news articles, forum posts, product cards — content that makes sense on its own |
| <section> | A thematic grouping of content with a heading | Chapters, tabs, or regions of a page. Should almost always have an <h2> or deeper heading inside |
| <aside> | Content tangentially related to the surrounding content | Sidebars, pull quotes, advertising, author bios — supplementary content |
| <footer> | Footer of its nearest section or the page | Typically contains copyright, links, contact info |
| <figure> / <figcaption> | Self-contained media (image, diagram, code) with optional caption | Links the caption to the media semantically for screen readers |
| <time> | A specific time or date | <time datetime="2024-03-15">March 15, 2024</time> — machine-readable |
| <address> | Contact information for nearest <article> or <body> | Physical address, email, phone, social links of the author/owner |
| Non-Semantic Element | Purpose | When to Use |
|---|---|---|
| <div> | Generic block-level container — no meaning | Layout grouping when no semantic element fits. Used extensively with CSS classes. |
| <span> | Generic inline container — no meaning | Styling a portion of text inline (e.g., colouring one word) when no semantic tag fits. |
HTML has four types of lists, each for a different purpose. Lists are not just for bullets — they are the correct semantic element for any collection of related items: navigation menus, recipe ingredients, steps in a process, or definition glossaries. A navigation bar is technically an unordered list of links.
<nav><ul><li><a> — an unordered list of links inside a nav element. This is the semantically correct and universally expected structure for navigation in professional HTML.✏️ Day 1 Exercise
- Create a properly structured HTML5 page with the correct DOCTYPE, charset, viewport meta, and title. Include: a <header> with a <nav>, a <main> section, and a <footer>.
- Inside the main section, add an h1 heading, two h2 sub-headings each with a paragraph, an unordered list of your skills, an ordered list of your career goals (steps 1 to 5), a nested list showing Nigeria → 3 cities, and a description list defining 4 HTML terms.
- Validate your HTML at validator.w3.org and fix every error before submission.
Formatting Tags, Attributes, Links, Images, Audio & Video
Styling content semantically, understanding how attributes work, and embedding media
HTML has two types of text-level formatting elements: semantic (carry meaning — e.g. <strong> means "important," <em> means "stressed emphasis") and presentational (purely visual — e.g. <b> makes text bold without meaning "important"). Always prefer semantic elements — they help screen readers and search engines understand your content.
<center> tag is deprecated in HTML5 — it no longer exists as a valid element. Never use it. Use CSS text-align: center or margin: 0 auto for centring.An attribute provides additional information about an HTML element. Attributes always go inside the opening tag and follow the format name="value". Some attributes apply to every element (global attributes), while others are specific to certain elements.
Key global attributes every developer must know: id (unique identifier — one per page), class (reusable CSS/JS hook — many elements can share), style (inline CSS — avoid), title (tooltip on hover), lang (language of element content), hidden (hides element), tabindex (keyboard focus order), and data-* (custom data attributes — covered below).
The anchor tag <a> creates hyperlinks — the defining feature of the web. Without links, webpages would be isolated islands. The href attribute specifies the destination. There are several types of links: external URLs, internal pages, same-page anchor jumps, email addresses, and telephone numbers.
| Attribute | Values | Effect |
|---|---|---|
| href | URL, relative path, #id, mailto:, tel: | The destination. Without href, <a> is a placeholder link. |
| target | _blank, _self, _parent, _top | _blank = new tab. _self = same tab (default). _parent/_top = for frames (rare) |
| rel | noopener noreferrer, nofollow, canonical | Relationship between pages. noopener noreferrer is security-critical with _blank. |
| download | Filename string or boolean | Causes file to download rather than navigate. Optional value sets the saved filename. |
| title | Any text | Tooltip text shown on hover. |
The <img> tag embeds an image. It is a void element — it has no closing tag. The src and alt attributes are mandatory for every image. The alt attribute is not optional decoration — it is a legal accessibility requirement in many jurisdictions and directly impacts SEO.
The alt text should describe what the image shows to someone who cannot see it: "A golden retriever puppy sitting on green grass" not "image123.jpg" or "photo." If the image is purely decorative and adds no information, use an empty alt: alt="" — this tells screen readers to skip it entirely.
Linking to the correct file location is one of the most common sources of broken images and links for beginners. There are two types of paths: absolute (full URL including domain) and relative (path from the current file's location).
✏️ Day 2 Exercise
- Create a multi-page project with at least 3 HTML pages (index.html, about.html, contact.html) and link them all to each other using relative paths in a navigation menu built with <nav><ul><li><a>.
- On the home page, add a hero image with proper alt text and a figure+figcaption. Include an embedded YouTube video using an iframe.
- Use at least 6 different text formatting tags semantically — mark important information with <strong>, abbreviations with <abbr>, and a quote with <blockquote>.
- Add your telephone number and email address as clickable links using tel: and mailto: protocols.
Tables & Form Fundamentals
Organising data in rows and columns, merging cells, and building the structure of HTML forms with all input types
HTML tables should be used only for tabular data — data that belongs in rows and columns, like a spreadsheet: schedules, pricing comparisons, results tables, financial data. Do not use tables for page layout (a practice from the 1990s that is now completely wrong). Use CSS Grid or Flexbox for layout.
A table has a clear structure: <table> wraps everything. <thead> holds the header row. <tbody> holds the data rows. <tfoot> holds summary or footer rows. Inside rows (<tr>), header cells use <th> and data cells use <td>. This structure is not optional — it matters for accessibility, CSS styling, and correct browser rendering of print and scroll behaviour.
colspan makes a cell stretch across multiple columns. rowspan makes a cell stretch down multiple rows. Both require careful planning — when you span cells, you must remove the equivalent number of regular cells from affected rows/columns or the table will break.
An HTML form is a way to collect data from users and submit it to a server (or process it with JavaScript). Forms are the mechanism behind every login page, registration form, search bar, checkout process, and contact page on the web. Understanding forms thoroughly is one of the most important HTML skills.
The <form> element wraps all form controls. Key attributes: action — the URL where data is sent (server endpoint or empty for JS handling). method — GET (data visible in URL, bookmarkable, for searches) or POST (data in request body, for sensitive data like passwords). enctype="multipart/form-data" — required when the form includes file uploads.
The <label> element is not optional decoration. It serves two critical functions: it creates a clickable area that focuses its associated input (improving usability, especially on mobile), and it provides the accessible name that screen readers announce when the input has focus — without it, blind users have no idea what to type in the field.
Always link a label to its input using matching for on the label and id on the input. Alternatively, wrap the input inside the label (implicit association). Never rely on placeholder text as a label — placeholders disappear when typing and are not read consistently by all screen readers.
✏️ Day 3 Exercise
- Create a student results table with at least 5 students, 4 subjects, a total column, and an average row in the tfoot. Use colspan to merge the "Class Average" label across 2 columns, and rowspan to merge a "Term 1 Results" header down 3 rows on the left side.
- Create a partial registration form (structure only, no styling) with fields for: full name, email, password, date of birth, gender (radio), course (to be completed Day 4), and a terms checkbox. Every input must have a properly linked label.
Forms Continued — Select, Textarea, Button, Fieldset & All Form Attributes
Completing the full form element toolkit and mastering every form attribute for validation and user experience
| Attribute | Applies To | Purpose & Example |
|---|---|---|
| placeholder | text, email, password, search, tel, url, textarea | Hint text shown when the field is empty. Disappears on typing. Never use as a substitute for a label. |
| value | All inputs | Sets the initial (or current) value of the field. For checkboxes/radios, the value submitted when checked. |
| name | All inputs | The key used when submitting form data. Essential — without it, the field is not submitted. |
| required | All inputs | Browser prevents form submission if field is empty. <input required> or <input required="required"> |
| readonly | text, textarea, others | User can see but not edit the value. Value IS submitted with the form. Different from disabled. |
| disabled | All inputs, select, button | Prevents interaction and value is NOT submitted. Visually greyed out. |
| maxlength | text, password, email, search, url, tel, textarea | Maximum number of characters allowed. Browser enforces it. |
| minlength | text, password, email, search, url, tel, textarea | Minimum characters required. Validated on submit. |
| min / max | number, date, time, range, month | Minimum and maximum allowed values. min="0" max="100" |
| step | number, range, date, time | Increments for valid values. step="0.5" allows 0, 0.5, 1, 1.5... |
| autofocus | All inputs | Gives this input keyboard focus immediately when the page loads. Use on ONE field only. |
| multiple | email, file, select | Allows multiple values. Multiple emails separated by commas. Multiple files with file input. |
| pattern | text, tel, email, url, password, search | Regular expression the value must match. pattern="[0-9]{11}" = exactly 11 digits. |
| autocomplete | text inputs, form | Hints to browser/password manager: on|off|email|name|current-password|new-password|tel |
| accept | file | Limits file types in picker: accept="image/*", accept=".pdf,.docx" |
| checked | checkbox, radio | Sets the initial checked state. |
| selected | option | Pre-selects an option in a dropdown. |
| rows / cols | textarea | Initial visible size. Use CSS for precise control. |
✏️ Day 4 Exercise
- Build a complete student registration form with: name fields, email, password with confirmation, date of birth, gender (radio), phone (with pattern validation), course selection (grouped with optgroup), multiple interests (checkboxes in a fieldset), a bio textarea (minlength 30, maxlength 300), a profile picture upload (image types only), and a styled submit button. Every field must have proper labels, placeholder text, and appropriate validation attributes.
- Add a second fieldset for "Emergency Contact" with name, phone, and relationship (select dropdown). The fieldset should have a clear legend.
Meta Tags, SEO, Favicon, Accessibility & Character Entities
Making pages findable, shareable, accessible to everyone, and technically complete
Meta tags live inside the <head> and provide information about the page to browsers, search engines, and social media platforms. They are invisible to users but critical for how your page behaves and how it appears in search results and social media shares.
The arrangement of meta tags in the head matters for performance. The charset must be first (browser must know encoding to parse anything else). The viewport meta must come early. Title should come before other meta for SEO tools. CSS links go after meta tags.
Web accessibility means building websites that everyone can use — including people with visual, auditory, motor, or cognitive disabilities. In 2026, accessibility is not optional. It is a legal requirement in many countries (WCAG 2.1 AA is the standard referenced in accessibility laws globally). Beyond legal compliance, accessible sites rank better in search engines, work better on all devices, and are simply better code.
Roughly 15% of the world's population has some form of disability. In Nigeria, this represents millions of potential users. A screen reader is a software program that reads page content aloud and allows keyboard-only navigation — used by people who are blind or have low vision. The most popular screen readers are NVDA (Windows, free), JAWS (Windows, professional), and VoiceOver (Mac/iOS, built-in).
Some characters have special meaning in HTML — < starts a tag, & starts an entity. To display these literally, or to show special characters not on the keyboard, you use HTML character entities. Format: &name; (named) or &#number; (numeric).
| Entity | Character | When to Use |
|---|---|---|
| < | < | Less-than sign. REQUIRED when showing HTML code in a page. |
| > | > | Greater-than sign. Use in code examples. |
| & | & | Ampersand. REQUIRED in URLs inside attributes and in text. |
| " | " | Double quote. Use inside attribute values that use double quotes. |
| ' | ' | Apostrophe. Use in attribute values with single quote delimiters. |
| | [non-breaking space] | Space that won't wrap. Use between values that must stay together: "20 kg", "Section 3.2" |
| © | © | Copyright symbol in footers. |
| ® | ® | Registered trademark. |
| ™ | ™ | Trademark symbol. |
| — | — | Em dash — used in place of commas/brackets for parenthetical statements. |
| – | – | En dash — used for ranges: pages 10–25, 2020–2024. |
| … | … | Ellipsis (three dots as one character). |
| ₦ | ₦ | Nigerian Naira symbol (no named entity — use numeric). |
| £ | £ | British pound sign. |
| € | € | Euro sign. |
✏️ Day 5 Exercise
- Add a complete, properly ordered head section to all your project pages with: charset, viewport, title (50–60 characters), meta description (150–160 characters), Open Graph tags (og:title, og:description, og:image, og:url), and all favicon sizes (16×16, 32×32, 180×180, 192×192).
- Generate a real favicon from your initials or a simple logo at favicon.io. Export all required sizes. Add all the link tags to your HTML.
- Add a skip link, ensure all images have meaningful alt text, and add aria-label to all icon-only buttons on your project pages. Test keyboard navigation by pressing Tab through your page.
- Run your pages through the Wave Accessibility Checker at wave.webaim.org and fix all errors reported.
- Add character entities for: the copyright notice in your footer, the Naira currency symbol (₦) in any price on your page, and display a block of HTML code (with < and > characters) inside a <code> or <pre> element.
Git, GitHub, Commands, Branching, Pull Requests & Deployment
Everything from installation to professional workflow, deployment, and collaborative development
Git is a distributed version control system created by Linus Torvalds (the creator of Linux) in 2005. It tracks changes to files over time, allowing you to see exactly what changed, when, and by whom. It allows you to create multiple independent lines of development (branches), merge them together, and undo any mistake by travelling back in time to any previous state of your project.
Think of Git as a very sophisticated "Save As" system. Instead of save_v1.html, save_v2.html, save_final.html, save_final_REAL.html, Git gives you a single file with a complete, searchable history of every version ever saved — along with descriptions of what each change accomplished.
GitHub is a cloud platform that hosts Git repositories. It is where you push your local Git history so it is backed up online and accessible from any computer. GitHub adds features on top of Git: a web interface to browse code, Pull Requests (a formal code review process), Issues (bug tracking), Actions (automated CI/CD pipelines), GitHub Pages (free website hosting), and a social network of developers sharing code.
The relationship: Git is the tool (software on your computer). GitHub is the hosting service (a website). You use Git locally to track your work, then push to GitHub to share and back up. Alternatives to GitHub include GitLab (popular for private enterprise) and Bitbucket (popular with Atlassian tools like Jira), but GitHub has the largest community and the most open-source projects.
| Aspect | Git | GitHub |
|---|---|---|
| Type | Software tool (runs on your computer) | Web platform / cloud service |
| Works without the other? | Yes — Git works offline, locally | No — GitHub requires Git to push/pull |
| Free? | Yes — completely free and open source | Free for public and private repos (up to certain limits) |
| Made by? | Linus Torvalds, 2005 | Tom Preston-Werner et al., 2008 (acquired by Microsoft 2018) |
| Primary function | Version control — tracking changes locally | Hosting, collaboration, code review, deployment |
Git tracks your project through a three-stage pipeline: Working Directory (where you edit files), Staging Area (files queued for the next snapshot), and Repository (the permanent history of snapshots). Understanding this three-stage model is the key to understanding every Git command.
Working Directory
Where you create and edit files. Git watches this folder but does NOT track changes automatically.
Staging Area (Index)
Files you explicitly add with git add are "staged" — queued for the next commit. You can stage some files but not others.
Repository (.git folder)
When you git commit, staged changes are permanently saved as a snapshot. Every commit has a unique ID (SHA hash), author, timestamp, and message.
Remote Repository (GitHub)
git push sends your local commits to GitHub. git pull brings remote changes to your local machine.
Some files should never be committed to Git: API keys and passwords (security risk), node_modules folders (enormous and automatically re-generated), operating system files (.DS_Store, Thumbs.db), build output folders (dist/, build/), and editor configuration files (.idea/, .vscode/ in some cases). The .gitignore file tells Git to completely ignore specified files and folders as if they don't exist.
Create a .gitignore file in the root of your project. You can generate comprehensive templates for any framework or language at gitignore.io.
git filter-branch or BFG Repo Cleaner to purge the history.A branch is an independent line of development. Think of your main branch as the published, working version of your project. When you want to add a new feature or fix a bug, you create a new branch — your own private workspace where you can experiment freely without affecting the main version. When the work is complete and reviewed, you merge the branch back.
This is the foundation of professional development. No professional developer pushes directly to the main branch. They create a feature branch, develop in isolation, and submit a Pull Request (PR) on GitHub for code review before merging. Even solo developers benefit from branches because they allow you to pause work on one feature and switch to another instantly.
A Pull Request (PR) is a formal request to merge your branch into the main branch, submitted through GitHub's web interface. It gives teammates an opportunity to review your code, leave comments, request changes, and approve it before it becomes part of the official project. PRs are the standard workflow in every professional development team.
Even when working alone, creating PRs is a good habit — it creates a documented history of what you added and why, forces you to review your own code before merging, and prepares you for team environments.
Deployment means making your website accessible on the internet with a real URL that anyone can visit. Both GitHub Pages and Vercel are free for static websites (HTML, CSS, JavaScript files — no server-side processing). They are the standard choice for student portfolios, project showcases, and small business websites.
The GitHub Flow is the most widely used workflow for web projects. It is simple enough for individuals but scales to teams of hundreds. Master this workflow and you are ready for any professional development environment.
| Git Command | What It Does | When to Use |
|---|---|---|
| git init | Creates a new Git repository in current folder | Starting a brand new project from scratch |
| git clone [url] | Downloads a complete copy of a remote repository | Joining an existing project or working on a new computer |
| git status | Shows current state: staged, unstaged, untracked files | Before every git add — know what you're staging |
| git add . | Stages all changes in current directory | Before committing — after verifying git status |
| git commit -m "message" | Saves a permanent snapshot of staged changes | After completing a logical unit of work |
| git push | Uploads local commits to remote repository | After committing — to back up and share |
| git pull | Downloads remote changes and merges into local | Start of every work session, and before creating a branch |
| git log --oneline | Shows compact commit history | Reviewing recent changes, finding a commit hash |
| git switch -c [branch] | Creates a new branch and switches to it | Starting any new feature or bug fix |
| git merge [branch] | Incorporates changes from another branch | After a feature is complete and reviewed |
| git stash | Temporarily saves uncommitted work | When you need to switch tasks but aren't ready to commit |
| git restore [file] | Discards working directory changes for a file | Undoing unwanted changes before staging |
✏️ Day 6 Exercise
- Setup: Install Git. Configure your name, email, and default branch to "main." Create a GitHub account with a professional username.
- First Repository: Create a folder for your HTML project. Run
git init. Add all your HTML files. Make your first commit with a meaningful message. Create a repository on GitHub. Add the remote origin. Push your project. - .gitignore: Create a
.gitignorefile in your project that ignores: .DS_Store, Thumbs.db, .env, and a /temp/ folder. Commit and push it. - Branching: Create a branch called
feature/about-page. Add a new about.html page. Make two focused commits on this branch. Push the branch to GitHub. Create a Pull Request on GitHub with a description of what you added. Merge it yourself. - GitHub Pages Deployment: Enable GitHub Pages for your repository. Wait for deployment. Share the live URL (https://yourusername.github.io/repository-name/) with your instructor.
- Vercel Deployment: Sign up at vercel.com using your GitHub account. Import your repository. Deploy it. Share the Vercel URL alongside the GitHub Pages URL.
- Collaboration Practice: Exchange GitHub repository URLs with a classmate. Clone their repository. Create a branch called
bugfix/typo-fix. Fix one typo or formatting issue in their HTML. Commit, push, and open a Pull Request to their repository.