Scribd
Upload
2 views17 pages

Complete HTML Course

The document is a comprehensive guide to HTML, detailing its role as a markup language essential for web development. It covers the structure of HTML documents, semantic elements, and practical applications such as creating forms, tables, and media. By the end of the course, learners will be equipped to create valid HTML documents and understand the foundational concepts of web development.

Uploaded by

Dada michael segun
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views17 pages

Complete HTML Course

The document is a comprehensive guide to HTML, detailing its role as a markup language essential for web development. It covers the structure of HTML documents, semantic elements, and practical applications such as creating forms, tables, and media. By the end of the course, learners will be equipped to create valid HTML documents and understand the foundational concepts of web development.

Uploaded by

Dada michael segun
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

THE COMPLETE

HTML COURSE
A clear, thorough and practical guide to the language that structures the web

FROM FIRST TAG TO


PROFESSIONAL PRACTICE
Trainer: Othniel Victor
Othniel-Phantasy Technology

Theory - examples - reference - practical workflow


Course orientation
HTML is the first language to learn for web development. It is not a programming language: it does not calculate, make
decisions, or store variables. It is a markup language, meaning it marks content with labels that describe what each part
is. A browser reads that structure and turns it into a web page.

What you will be able to do


A useful mental model: HTML is the building plan of a house. CSS is the interior design. JavaScript is the electricity
and moving parts. A strong building plan comes first.

By the end of this course, you will be able to create a valid HTML document; select meaningful elements; organize
content into accessible page regions; build links, images, lists, tables and forms; write correct metadata; check your
work; and prepare an HTML page for CSS and JavaScript.

How to use this guide: type every sample yourself. Change the text and deliberately make a small error, then repair it.
That feedback loop is how the rules become natural.

1. What HTML is, where it came from, and why it


matters
HTML means HyperText Markup Language. Hypertext is text that links to other text or resources. Markup is a set of
labels placed around content. The current standard is the living HTML Standard, maintained by WHATWG and
implemented by modern browsers.

A brief history
In 1989-1991, Tim Berners-Lee proposed the World Wide Web at CERN to help researchers share linked documents.
The early HTML language described headings, paragraphs and links. Later HTML versions added tables, forms,
multimedia and richer semantics. HTML5, introduced as a modern platform in the 2010s, clarified semantic elements
such as main, article and nav, and added native audio, video and form features.

HTML matters because it is universal. Browsers, search engines, screen readers, translation tools and assistive
devices all depend on its structure. Good HTML gives your content meaning before any visual design is applied.

The browser's job


When a browser loads an HTML file, it parses the source from top to bottom and builds a DOM (Document Object
Model): a tree of objects representing the document. CSS then styles that tree; JavaScript can read or change it. A
syntax error may cause the browser to guess what you intended, but professional practice is to write valid, explicit
markup.

2. The anatomy of an HTML element


Most HTML elements have an opening tag, content, and a closing tag. Tags use angle brackets. The element is the
complete unit, including its tags and its content.

Nesting rule: elements must close in the reverse order in which they open. Correct:
<strong><em>text</em></strong>. Incorrect: <strong><em>text</strong></em>.

<p>This is a paragraph.</p>
<!-- opening tag content closing tag -->

<a href="[Link] [Link]</a>


<!-- tag name attribute name and value link text -->

An attribute gives extra information to an element. In href="...", href is the attribute name and the URL is its value.
Attributes belong inside the opening tag. Quote values consistently with double quotes.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 2


Some elements have no content and no closing tag. These are called void elements. Common examples are img,
meta, link, input, br and hr. Do not write a closing tag for a void element.

3. Your first complete document


Create a folder called html-course. Inside it, create a file named [Link]. The .html extension tells the operating
system and browser it is an HTML document. Open it in a browser, edit it in a code editor, save, then refresh the
browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, web!</h1>
<p>I created this page with HTML.</p>
</body>
</html>

Line-by-line explanation
Part What it does

Tells the browser to use modern standards mode. It is a declaration, not a normal HTML element.

The root element. lang identifies the document language for screen readers, translators and search
engines.

Holds metadata: information about the page, not the main visible content.

charset UTF-8 Allows a broad range of letters, symbols and punctuation to display correctly.

viewport Makes the layout's viewport match the device width - essential on phones.

title Names the browser tab, bookmark and often the search-result title.

body Contains all visible page content: headings, paragraphs, images, forms and more.

4. Text, headings and document outline


HTML headings describe a hierarchy, not a font-size choice. h1 is the most important heading; h2 begins a major
subsection; h3 begins a subsection within that. A page usually has one main h1. Do not choose a heading solely
because it looks large - CSS controls appearance.
<main>
<h1>How to Care for Houseplants</h1>
<p>A beginner's guide to keeping indoor plants healthy.</p>
<section>
<h2>Light</h2>
<p>Most plants need bright, indirect light.</p>
<h3>Signs of too little light</h3>
<p>Leggy growth and pale leaves can be warning signs.</p>
</section>
</main>

p is for a paragraph - a complete block of prose. Use strong for strong importance and em for spoken emphasis; they
convey meaning, while bold or italic styling alone does not. Use small for side comments or legal text, mark for a
relevant highlighted passage, and time for a machine-readable date or time.

5. Semantic structure: meaning before


appearance
Semantic HTML means choosing elements according to their meaning. A page made entirely of div elements can look
correct, but it tells a screen reader almost nothing about the page. Semantic regions let visitors navigate directly to the
main content, navigation, article or footer.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 3


<body>
<header>
<a href="/">Green Journal</a>
<nav aria-label="Primary navigation">
<a href="/articles">Articles</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<header><h1>Five Quiet Weekend Walks</h1></header>
<section><h2>Along the river</h2><p>...</p></section>
</article>
<aside><h2>Popular this week</h2><p>...</p></aside>
</main>
<footer><p>Copyright 2026 Green Journal</p></footer>
</body>

header introduces a page or section. nav identifies a set of major navigation links. main contains the unique core
content and should occur once. article is independently reusable content, such as a post, news story or product
review. section is a thematic grouping, usually with a heading. aside is related but secondary content. footer contains
closing information. div is an unsemantic grouping: it is useful for layout hooks, but not a replacement for these
elements.

6. Links and navigation


The anchor element, a, creates a hyperlink. Its href attribute is the destination. Link text must describe where the link
goes; avoid vague text such as “click here.”

Use target='_blank' only when opening a new tab genuinely helps the user. With it, include rel='noopener' for
safety. Use a button for an action (submit, open a menu); use a link for navigation.

<a href="[Link]">About our studio</a>


<a href="[Link] Example</a>
<a href="#contact">Jump to contact details</a>
<a href="[Link] our team</a>
<a href="[Link]" download>Download the guide</a>
<a href="[Link] target="_blank" rel="noopener">Open trusted resource</a>

A relative URL points within your site, for example [Link] or images/[Link]. An absolute URL includes the
complete address, such as [Link] A fragment URL begins with # and targets an element whose id
matches the fragment. An id must be unique on a page.

7. Images, figures and responsive media


An image uses the void img element. The src attribute supplies its file location. The alt attribute supplies a text
alternative. Alt text is read to people who cannot see the image and shown if it fails to load.

Picture, audio and video


<img src="images/[Link]"
alt="A blue ceramic cup of tea on a wooden table"
width="800" height="533">

<figure>
<img src="images/[Link]" alt="Wildflowers beside a stone path">
<figcaption>The north garden in late spring.</figcaption>
</figure>

Describe the image's purpose, not every pixel. If an image is purely decorative and adds no information, use alt="".
Never omit alt: an omitted value makes assistive technology announce an unhelpful filename. Width and height reserve
space while the image loads; later CSS can make the image responsive.
<picture>
<source media="(max-width: 600px)" srcset="[Link]">
<source srcset="[Link]" type="image/webp">
<img src="[Link]" alt="Yellow flower in a meadow">
</picture>

<video controls width="640">


<source src="intro.mp4" type="video/mp4">
<track kind="captions" src="[Link]" srclang="en" label="English">
Your browser does not support video.
</video>

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 4


picture chooses the best image source in the listed order. video and audio need controls and meaningful alternatives.
Captions are essential for spoken video. Do not autoplay media with sound.

8. Lists, descriptions and quotations


Use a list when content is a list. This is clearer than using line breaks or manually typed bullets. An unordered list, ul, is
for items without a required order. An ordered list, ol, is for instructions or ranking. Each item is an li.
<h2>Pack for a day walk</h2>
<ul>
<li>Water bottle</li>
<li>Map</li>
<li>Light rain jacket</li>
</ul>

<h2>Make pour-over coffee</h2>


<ol>
<li>Heat the water.</li>
<li>Wet the grounds for 30 seconds.</li>
<li>Pour slowly in circles.</li>
</ol>

<dl>
<dt>HTML</dt><dd>Structure and meaning of a web page.</dd>
<dt>CSS</dt><dd>Presentation and visual design of a web page.</dd>
</dl>

A description list (dl) pairs terms (dt) with descriptions (dd). Use blockquote for an extended quotation from another
source and cite for the title or source of a work. Use q for a short inline quotation; browsers usually add quotation
marks.

9. Tables: data, not layout


A table represents a relationship between rows and columns. It is not a tool for positioning page content. Use a table
only when the content would be harder to understand without its row-column relationship.
<table>
<caption>Workshop schedule</caption>
<thead>
<tr><th scope="col">Time</th><th scope="col">Session</th></tr>
</thead>
<tbody>
<tr><th scope="row">09:00</th><td>HTML foundations</td></tr>
<tr><th scope="row">11:00</th><td>Forms and accessibility</td></tr>
</tbody>
</table>

table is the container. caption names the table. thead, tbody and tfoot group rows. tr is a row. th is a header cell;
scope tells assistive technology whether it labels a row or column. td is a data cell. Do not use tables to create
columns, sidebars or page layouts.

10. Forms: collecting information correctly


A form groups controls that a visitor fills in and submits. The action attribute is the address that receives the data;
method says how it is sent. GET is normally used for a search because the terms appear in the URL. POST is
normally used to submit or change data. HTML builds the interface; a server or service is required to actually process
submitted data.
<form action="/subscribe" method="post">
<fieldset>
<legend>Join the newsletter</legend>

<label for="name">Full name</label>


<input id="name" name="name" type="text" autocomplete="name" required>

<label for="email">Email address</label>


<input id="email" name="email" type="email"
autocomplete="email" required>

<button type="submit">Subscribe</button>
</fieldset>
</form>

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 5


Every control needs a name; this is the key sent with the value. Every visible control also needs a label. The label's for
value must equal the input's id. Placeholder text is a short example, not a replacement for a label - it disappears when
users type.

Useful input types and attributes


Type / attribute Purpose and correct use

text A short free-text value, such as a name.

email Email address; browser can validate its basic shape.

password Masks typed characters. Always send forms over HTTPS.

tel Telephone number; provides a phone-friendly keyboard on many devices.

number Numeric value; use min, max and step where appropriate.

date A calendar date; browser UI may vary.

checkbox Independent yes/no choices. Use checked only for a preselected value.

radio Exactly one choice in a group; all radios in the group share the same name.

file Lets user choose a file. Form needs enctype='multipart/form-data'.

required Blocks submission when the control is empty; still validate on the server.

disabled Makes a control unavailable and excludes it from submitted data.

readonly Prevents editing but includes the value in submitted data.

11. Advanced form controls and feedback


Use select when users must choose from a known set. Use textarea for longer, multi-line writing. Use button types
explicitly: submit sends the form, reset restores initial values, and button has no default submission behavior.
<label for="topic">Topic</label>
<select id="topic" name="topic">
<option value="">Choose a topic</option>
<option value="order">Existing order</option>
<option value="product">Product question</option>
</select>

<label for="message">Message</label>
<textarea id="message" name="message" rows="6"></textarea>

<label><input type="checkbox" name="terms" required> I accept the terms</label>


<button type="submit">Send message</button>

Use fieldset and legend to group related controls, particularly radio buttons and checkboxes. Native validation
attributes such as required, minlength, pattern and type=email improve the experience, but they are not security: the
server must validate all submitted data again. Provide clear error messages in the page when a field is invalid.

12. Metadata, the head, and discoverability


The head contains data about the page. None of it appears as the main page content, but it affects browser behavior,
sharing, search results and mobile presentation.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn HTML Clearly | Othniel-Phantasy Technology</title>
<meta name="description" content="A practical, beginner-friendly HTML course.">
<link rel="icon" href="/[Link]">
<link rel="stylesheet" href="[Link]">
<script src="[Link]" defer></script>
</head>

title should be specific and unique. description is a concise summary that search engines may display. link relates the
page to another resource: a stylesheet, icon or canonical URL. script loads JavaScript; defer tells the browser to
download it without blocking document parsing, then run it after the HTML is parsed. Metadata supports discovery, but
meaningful body content remains the most important factor.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 6


13. Global attributes, classes, IDs and data
Some attributes work on many elements. class identifies one or more reusable groups, commonly for CSS and
JavaScript. id identifies exactly one element on the page. title may provide advisory information, but it must not contain
essential content because it is unreliable on touch devices and not always announced.
<article id="featured-post" class="post post-featured" data-category="travel">
<h2>Weekend in Calabar</h2>
<p lang="en">A short travel note.</p>
</article>

<a href="#featured-post">Read featured post</a>

Custom data-* attributes store small, private data for scripts, such as data-category. They do not replace visible text or
semantic attributes. hidden hides content from all users; do not use it for content that must remain accessible.
tabindex changes keyboard focus order - avoid positive values because they create confusing navigation.

14. Accessibility: HTML for every visitor


Accessibility means creating a page people can use regardless of vision, hearing, movement, cognition, device or
connection. Semantic HTML is the most reliable accessibility tool because it works before custom scripts and styles
load.

Use a logical heading hierarchy. Provide a visible keyboard focus style in CSS later. Make all interactive elements
reachable with the keyboard. Use labels, not placeholder-only fields. Add captions to video. Give informative images
useful alt text. Write link text that makes sense out of context. Declare document language with lang. Use native
buttons, inputs and controls before attempting custom versions.
<a class="skip-link" href="#main-content">Skip to main content</a>
<header>...</header>
<main id="main-content" tabindex="-1">
<h1>Course lessons</h1>
</main>

A skip link is a useful first link on pages with repeated navigation. It lets keyboard users jump to main content. ARIA
attributes can add information when HTML alone cannot, but follow the first rule of ARIA: prefer a native HTML element
that already has the right behavior. For example, use <button>, not <div role='button'>.

15. Character references, comments and special


content
Some characters have special meaning in HTML. The character < must be written as &lt; when you want it to appear
as text. & must be written as &amp;. Other named references include &copy; for copyright and &nbsp; for a
non-breaking space, though non-breaking spaces should be rare.
<p>To write a tag in a lesson, use &lt;p&gt; and &lt;/p&gt;.</p>
<p>Copyright &copy; 2026.</p>

<!-- This comment explains why the next link opens a new tab. -->
<a href="[Link]" target="_blank" rel="noopener">Open report</a>

<pre><code>const greeting = "Hello";</code></pre>

Comments are notes for people reading source; users do not normally see them. Never put passwords, private notes or
secrets in comments. pre preserves whitespace, and code marks a code fragment. Use kbd for keyboard input such
as Ctrl+C, samp for program output, and var for a variable name.

16. A professional HTML workflow


A dependable workflow prevents small errors from becoming a confusing page. Start by outlining the content, then
choose semantic regions, then write a small valid first version, then test it in a browser. Add CSS only after the content
and hierarchy make sense.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 7


Step What to do

1. Plan content Write the page purpose, primary audience, required sections and calls to action.

2. Sketch hierarchy Choose h1, h2 and h3 topics before writing paragraphs.

3. Choose semantics Use header, nav, main, article, section, aside and footer where they truly describe content.

4. Build valid HTML Indent nested elements, close normal tags, quote attributes, and keep one concern per line.

5. Test interaction Open links, tab through controls, submit the form, and test a narrow screen.

6. Validate Use the official Nu HTML Checker to find structural and syntax errors.

7. Review access Check headings, alt text, labels, page language and keyboard behavior.

8. Maintain Use clear names and small reusable patterns; update metadata as content changes.

Formatting is not merely cosmetic. Consistent indentation makes nesting visible, which makes bugs easier to spot.
A code formatter can handle spacing, but it cannot choose the correct semantic element for you.

17. Common mistakes and their corrections


These issues are common because browsers try to recover from bad HTML. They may appear to work today but make
future maintenance, accessibility and responsiveness harder.

Avoid Use instead

<div onclick='...'>Menu</div> A real button for an action, with accessible keyboard behavior.

<br><br><br> for spacing CSS margins later; br is only a line break in content.

An image without alt Useful alt text, or alt='' only when it is decorative.

A heading chosen for its size Heading chosen for its level; style it with CSS.

Placeholder as the only label A visible label connected by for and id.

Table for layout Semantic regions plus CSS Flexbox/Grid.

Repeated id values Unique id values; use class for reusable groups.

'Click here' links Specific link text such as 'Download course outline'.

Skipping form name attributes A name for every value you need to submit.

18. The 70-tag reference


This reference names 70 valuable HTML elements. Learning tags is useful, but the professional skill is selecting the tag
whose meaning matches the content.

Tag Function How / when to use it

<html> Document root Wraps the full document.

<head> Metadata container Contains title, meta, links and scripts.

<title> Document title Names browser tab and bookmarks.

<meta> Metadata item Charset, viewport and description.

<link> Related resource Connects CSS, favicon and other files.

<style> Embedded CSS Use sparingly; external CSS is usually cleaner.

<script> JavaScript Load scripts, preferably with defer.

<body> Visible document Contains page interface.

<header> Intro region Page or section introduction.

<nav> Navigation Major navigation links.

<main> Main content One unique primary-content region.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 8


Tag Function How / when to use it

<article> Independent content Post, story, review or comment.

<section> Thematic grouping Usually has a heading.

<aside> Supporting content Related but secondary material.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 9


Tag Function How / when to use it

<footer> Closing region Copyright, contacts, related links.

<div> Generic block Use only where no semantic element fits.

<span> Generic inline Wrap a phrase for a limited purpose.

<h1> Top heading Main page topic.

<h2> Section heading Major subsection.

<h3> Subsection heading Topic inside an h2 section.

<h4> Lower heading Further nested topic.

<h5> Lower heading Rare deep nesting.

<h6> Lowest heading Rarely needed.

<p> Paragraph A block of prose.

<br> Line break Content line break, not spacing.

<hr> Thematic break Change in topic.

<strong> Strong importance Important warning or word.

<em> Stress emphasis Emphasized phrase.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 10


Tag Function How / when to use it

<small> Side comment Fine print or legal text.

<mark> Relevant highlight Highlighted search match or passage.

<time> Date/time Use datetime for machine-readable value.

<a> Hyperlink Links to a destination.

<img> Image Use src and meaningful alt.

<figure> Self-contained media Image, chart or code with caption.

<figcaption> Figure caption Explains a figure.

<picture> Responsive image Provides alternate sources.

<source> Media source Used in picture, audio or video.

<audio> Audio player Use controls and alternatives.

<video> Video player Use controls and captions.

<track> Timed text Captions or subtitles for video.

<ul> Unordered list Items with no sequence.

<ol> Ordered list Steps or ranked items.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 11


Tag Function How / when to use it

<li> List item Child of ul or ol.

<dl> Description list Term-description pairs.

<dt> Description term Term in a dl.

<dd> Description detail Definition/value in a dl.

<blockquote> Long quotation Quote another source.

<q> Inline quotation Short quotation in prose.

<cite> Work title/source Title of a cited work.

<pre> Preformatted text Preserves whitespace.

<code> Code fragment Marks computer code.

<kbd> Keyboard input Keys user should press.

<samp> Program output Example output.

<form> Form container Groups submitted controls.

<label> Control label Connect using for and id.

<input> Single-value control Text, email, checkbox and more.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 12


Tag Function How / when to use it

<textarea> Multi-line control Long user message.

<select> Choice control Choose from option list.

<option> Select choice A selectable option.

<button> Action control Submit, reset or custom action.

<fieldset> Control group Groups related inputs.

<legend> Group caption Names a fieldset.

<datalist> Suggested options Suggestions for an input.

<output> Calculation result Shows result of a form calculation.

<table> Data table Rows and columns of data.

<caption> Table title Names the table.

<thead> Header group Groups header rows.

<tbody> Body group Groups main rows.

<tfoot> Footer group Groups summary rows.

<tr> Table row Contains cells.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 13


Tag Function How / when to use it

<th> Header cell Labels a row/column.

<td> Data cell Contains data.

19. Final practical project: a complete profile


page
This short page uses the core concepts together. Create [Link], paste the code, open it in your browser, and read
each element from outside to inside. Then replace the content with your own profile.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ada Okafor - Product Designer</title>
<meta name="description" content="Portfolio and contact details for Ada Okafor.">
</head>
<body>
<header>
<nav aria-label="Primary navigation">
<a href="#about">About</a>
<a href="#work">Work</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Ada Okafor</h1>
<p>Product designer creating calm digital tools.</p>
</header>
<section id="about">
<h2>About</h2>
<p>I design useful, accessible experiences for everyday tasks.</p>
</section>
<section id="work">
<h2>Selected work</h2>
<ul><li>Transit ticketing app</li><li>Clinic booking service</li></ul>
</section>
<section id="contact">
<h2>Contact</h2>
<form action="/contact" method="post">
<label for="email">Your email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Send hello</button>
</form>
</section>
</article>
</main>
<footer><p>© 2026 Ada Okafor</p></footer>
</body>
</html>

Before considering this page complete, check: Does it have a valid document shell? One clear h1? Logical headings?
A main region? A label for the input? Unique IDs? A real form action for production? If yes, you have used HTML as
intended.

20. Where HTML ends and your next steps


begin
HTML is the durable foundation. CSS will control layout, color, typography and responsive presentation. JavaScript will
add behavior such as dynamic menus, form enhancement and data-driven updates. But even complex sites should
remain understandable when you inspect their HTML.

Keep practising by rebuilding ordinary pages: a recipe, event schedule, article, contact page and product detail page.
For each one, begin with a content outline. Ask what every piece of content is, not what it should look like. Then choose
the matching element.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 14


Final checklist: include ; set lang; include charset, viewport and title; use semantic page regions; keep headings
ordered; use descriptive links and alt text; label every field; use tables only for data; test keyboard navigation; and
validate before publishing.

Course prepared by Othniel Victor

Othniel-Phantasy Technology - Building practical digital confidence through clear technology education.

21. File systems and project structure


Every website is a collection of files arranged in folders. The browser follows paths in your HTML to locate each file.
Learning this system prevents the common beginner problem: an image, stylesheet or link that appears broken
because the browser cannot find its file.

Treat the project root as the starting point for paths. Keep source files organized by type. A predictable structure
lets you and collaborators find anything quickly.

A folder (also called a directory) holds files and other folders. A file name has a base name and extension. In
[Link], index is the name and .html identifies the file type. On most web servers, names are case-sensitive:
[Link] and [Link] may be different files. Use lowercase names, hyphens, no spaces, and clear labels.

The project root is the top-level folder for one website. Keep every asset used by that website inside it. [Link] is
commonly the first page because web servers look for it by default.
my-website/
|- [Link] # Home page
|- [Link] # Another page
|- css/
| |- [Link] # Stylesheet
|- js/
| |- [Link] # JavaScript
|- images/
| |- [Link] # Brand mark
| |- [Link] # Main image
| |- products/[Link]
|- media/
| |- welcome.mp3
| |- tour.mp4
|- documents/[Link]
|- [Link]

22. Paths: how HTML finds files


A path is the address of a file. HTML uses paths in attributes such as href, src, srcset and action. The path must be
correct from the location of the HTML file that contains it - not from the location you happen to be viewing in your editor.

Relative paths

Root-relative and absolute paths


Do not use a Windows path such as C:\\Users\\Name\\[Link] in HTML. It works only on that machine. Use web
paths with forward slashes (/).

A relative path starts from the current document's folder. If [Link] is at the project root, images/[Link] means:
go into images, then find [Link]. A single dot, ./, means the current folder and is normally optional. Two dots, ../,
mean go up one folder.
<!-- Inside [Link] at the project root -->
<img src="images/[Link]" alt="Morning light through a studio window">
<link rel="stylesheet" href="css/[Link]">
<script src="js/[Link]" defer></script>
<a href="documents/[Link]">Course outline</a>

<!-- Inside pages/[Link], one level below root -->

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 15


<a href="../[Link]">Return home</a>
<img src="../images/[Link]" alt="Othniel-Phantasy Technology">
<link rel="stylesheet" href="../css/[Link]">

A root-relative path starts with /, such as /images/[Link]. It starts at the website's published root, not your computer
drive. Use it when the project is served from a known root. An absolute URL includes a protocol and host, such as
[Link] Use it for an external resource or a canonical public address.

23. Complete guide to adding and linking assets


An asset is a file that supports a webpage: an image, icon, font, stylesheet, script, video, audio or downloadable
document. First place it in the appropriate project folder; then reference it with the correct HTML element and path.

1. Images and icons


<!-- Image displayed in the page -->
<img src="images/[Link]"
alt="The Othniel-Phantasy Technology training team"
width="1200" height="800">

<!-- Decorative logo already explained by nearby text -->


<img src="images/[Link]" alt="">

<!-- Browser-tab icon -->


<link rel="icon" href="[Link]" sizes="any">
<link rel="icon" href="images/[Link]" type="image/svg+xml">

Use src for the image file. Use alt to communicate the image's purpose. Use a real image element when the image is
meaningful content. SVG is excellent for logos and simple scalable graphics; WebP and AVIF often create smaller
photographs; JPEG works widely for photographs; PNG is useful when you truly need transparency.

2. CSS and JavaScript files


<head>
<link rel="stylesheet" href="css/[Link]">
<script src="js/[Link]" defer></script>
</head>

link rel='stylesheet' attaches CSS. Place it in head so the browser can apply design while it renders the page. script
src attaches JavaScript. The defer attribute avoids blocking HTML parsing and runs the script after the document is
ready.

3. Documents, downloads and external resources


<a href="documents/[Link]">Read the student handbook</a>
<a href="documents/[Link]" download>Download practice files</a>
<a href="[Link] target="_blank" rel="noopener">Open the reference site</a>

A normal link opens a document in the browser when it can. download asks the browser to download a same-origin file;
browser settings may still decide the final behavior. When sending a person to another site in a new tab, include
rel='noopener'.

24. Linking responsive images, audio and video


Large media files affect speed, data use and accessibility. Choose appropriate formats, optimize before uploading, and
provide an alternative when people cannot see or hear the media.

Avoid autoplaying audio. Do not put essential information only inside a video or image. Make a page useful even
when an asset fails or a visitor has a slow connection.

<img src="images/[Link]"
srcset="images/[Link] 480w,
images/[Link] 800w,
images/[Link] 1400w"
sizes="(max-width: 600px) 92vw, 800px"
alt="Othniel Victor teaching an HTML class"
width="800" height="533">

<audio controls>

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 16


<source src="media/welcome.mp3" type="audio/mpeg">
<a href="media/[Link]">Read the audio transcript</a>
</audio>

<video controls width="800" poster="images/[Link]">


<source src="media/html-tour.mp4" type="video/mp4">
<track kind="captions" src="media/[Link]" srclang="en" label="English" default>
<p>Your browser cannot play this video. <a href="media/html-tour.mp4">Download the video</a>.</p>
</video>

srcset lists available image widths; sizes tells the browser how much display space the image is expected to use,
allowing it to choose an efficient file. For video, poster is the image shown before playback. track kind='captions'
connects caption data in a WebVTT (.vtt) file. Audio needs a text transcript; video with speech needs captions.

25. Asset troubleshooting and deployment


readiness
A broken image icon, unstyled page or silent script almost always comes down to a path, file name or server issue.
Diagnose it systematically rather than guessing.

Publishing checklist
A browser path is not a search instruction. If HTML says images/[Link], the browser looks at exactly that
location. It will not automatically hunt through other folders.

Symptom Likely cause How to fix it

Image is broken Wrong path, spelling, extension or letter Compare src character-by-character with the actual file.
case.

CSS is not applied Wrong href or stylesheet outside project. Check link is in head and href is correct from that HTML file.

JavaScript does not run Wrong src, script runs too early, or error in Use defer, check browser console, then confirm the file path.
code.

Works locally, breaks Capitalization, computer path, or Use lowercase web paths and upload every referenced file.
online unuploaded asset.

PDF link gives 404 File moved or wrong starting folder. Use a relative path and test the published URL.

Media is slow Source file is too large. Resize/compress it; offer responsive images.

Use browser developer tools when possible. The Console reports JavaScript and loading errors. The Network panel
shows the requested address and response; a 404 status means the server could not find that address. The Elements
panel lets you inspect the final src or href value.

1. Click every internal and external link. 2. Open every image address in a new tab. 3. Test a narrow phone-size
viewport. 4. Do not rename files after linking without updating references. 5. Publish the full project folder, not only
[Link]. 6. Validate HTML and check titles, descriptions, alt text and labels.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title | Site name</title>
<meta name="description" content="A clear, accurate summary of this page.">
<link rel="icon" href="/[Link]">
<link rel="stylesheet" href="/css/[Link]">
<script src="/js/[Link]" defer></script>
</head>

Expanded HTML course edition prepared by Othniel Victor

Othniel-Phantasy Technology - clear foundations for reliable web development.

COMPLETE HTML COURSE - OTHNIEL-PHANTASY TECHNOLOGY 17

You might also like