Web Development Zero to Advanced — Class 20 of 120
HTML SEO, Meta Tags & Complete HTML Project
In the previous classes, you learned the core building blocks of HTML: page structure, text, links, images, lists, tables, forms, multimedia, and semantic HTML.
In Class 20, you will bring those concepts together and learn how the <head> section, metadata, semantic structure, headings, links, images, and content organization contribute to a search-engine-friendly HTML page.
You will also build a complete HTML website project.
In this class, you will learn:
• What SEO is
• What on-page SEO is
• What technical HTML SEO means
• The <head> element
• The <title> element
• Meta description
• Character encoding
• Viewport metadata
• Robots meta tag
• Canonical URLs
• Heading hierarchy
• Image alt text
• SEO-friendly links
• Semantic HTML and SEO
• Internal linking
• External links
• Open Graph basics
• Social sharing metadata
• Structured page organization
• Common SEO mistakes
• Complete HTML website project
1. What Is SEO?
SEO stands for:
Search Engine Optimization
SEO is the process of improving a website so that search engines can better discover, crawl, understand, and potentially rank its pages for relevant searches.
Examples of search engines include:
Bing
Suppose someone searches:
web development services
A search engine tries to provide useful and relevant results.
SEO helps make your pages understandable and useful to both users and search engines.
2. SEO Does Not Guarantee Ranking
This is important.
Adding:
<title>
or:
<meta name="description">
does not automatically put a website at position #1.
Search visibility depends on many factors, including:
• Content quality
• Search intent
• Technical accessibility
• Page experience
• Internal linking
• Website reputation
• Competition
• Mobile usability
• Performance
• Crawlability
• Indexability
HTML SEO is one part of the overall process.
3. What Is On-Page SEO?
On-page SEO refers to optimizations made to individual pages and their content.
Examples include:
• Page title
• Headings
• Content structure
• Internal links
• Image descriptions
• Useful content
• Descriptive URLs
• Metadata
Example:
<h1>Professional Web Development Services</h1>
This clearly describes the primary topic of the page.
4. What Is Technical SEO?
Technical SEO concerns technical characteristics that affect how search engines access, process, and understand a website.
Examples include:
• Crawlability
• Indexability
• Canonicalization
• Mobile compatibility
• Performance
• HTTPS
• Structured data
• Sitemaps
• Robots directives
In this HTML class, we will focus primarily on the parts that directly relate to page markup.
5. Understanding the <head> Element
A basic HTML document contains:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>
The <head> contains document metadata and references to resources.
Common elements include:
<title>
<meta>
<link>
Most head metadata is not displayed as ordinary page content.
6. Basic SEO-Friendly Head
Example:
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>
Professional Web Development Services | ABC IT
</title>
<meta
name="description"
content="Professional web development services for business, e-commerce and portfolio websites."
>
</head>
This provides important information about the document.
7. The <title> Element
The <title> element defines the document title.
Example:
<title>
Web Development Services | ABC IT
</title>
The title may be used in places such as:
• Browser tabs
• Search results
• Bookmarks
• Browser history
The title should accurately describe the page.
8. Poor vs Descriptive Titles
Poor:
<title>Home</title>
Better:
<title>
Web Development Services | ABC IT
</title>
Another poor example:
<title>Page 1</title>
Better:
<title>
HTML Web Development Course for Beginners | ABC IT
</title>
9. Every Important Page Should Have a Useful Title
Homepage:
<title>
ABC IT — Web Development & SEO Services
</title>
Services:
<title>
Web Development Services | ABC IT
</title>
Contact:
<title>
Contact ABC IT
</title>
Blog article:
<title>
How to Learn HTML: Beginner Guide | ABC IT
</title>
Titles should reflect the actual content of each page.
10. What Is a Meta Description?
A meta description summarizes the page.
Syntax:
<meta
name="description"
content="Page description goes here."
>
Example:
<meta
name="description"
content="Learn HTML from beginner to advanced with practical examples, assignments, quizzes and real-world web development projects."
>
11. Where Can a Meta Description Appear?
Search engines may use the meta description when generating a search-result snippet.
However, the text shown in search results is not guaranteed to be the exact meta description you provide.
Search engines may generate a different snippet based on the query and page content.
12. Writing a Useful Meta Description
A useful description should:
• Accurately summarize the page
• Be understandable
• Match the actual content
• Give users a reason to visit
• Avoid misleading claims
• Avoid unnecessary repetition
Poor:
<meta
name="description"
content="Best best best website web website best SEO website."
>
Better:
<meta
name="description"
content="Professional website development for business, e-commerce and portfolio projects, including responsive design and ongoing support."
>
13. Character Encoding
Use:
<meta charset="UTF-8">
UTF-8 supports a very large range of characters and languages.
For example:
English
বাংলা
日本語
العربية
Place the character encoding declaration early in the <head>.
14. Viewport Meta Tag
A standard responsive page commonly contains:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
This helps browsers render the page appropriately on mobile devices.
15. What Is lang?
The language of the document should be declared on the <html> element.
English:
<html lang="en">
Bangla:
<html lang="bn">
This helps browsers, assistive technologies, and other systems understand the primary language of the document.
16. Robots Meta Tag
A robots meta tag can provide crawling/indexing directives for compatible search engines.
Example:
<meta
name="robots"
content="index, follow"
>
Conceptually:
index → Page may be indexed
follow → Links may be followed
A page you do not want indexed may use:
<meta
name="robots"
content="noindex"
>
Do not add noindex accidentally to a page that you want available in search results.
17. noindex Is Important
Consider:
<meta
name="robots"
content="noindex"
>
If supported by the crawler, this instructs it not to include the page in its search index.
This can be useful for certain pages, but it can be disastrous if accidentally placed on important public pages.
18. Canonical URL
A canonical link can indicate the preferred URL for a page when duplicate or very similar URLs exist.
Example:
<link
rel="canonical"
href="https://example.com/web-development-services/"
>
This belongs inside:
<head>
19. Why Canonicalization Matters
Imagine the same or very similar content can be accessed through multiple URLs.
Canonicalization helps indicate which URL should be treated as the preferred version.
However, canonical tags should be configured carefully.
Do not blindly point every page to the homepage.
20. Correct Canonical Concept
Suppose the preferred page is:
https://example.com/html-course/
Then that page may contain:
<link
rel="canonical"
href="https://example.com/html-course/"
>
The canonical URL should represent the actual preferred version of that content.
21. Heading Structure and SEO
HTML headings include:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Headings provide structure to the content.
Example:
<h1>
Web Development Services
</h1>
<h2>
Frontend Development
</h2>
<h3>
HTML Development
</h3>
22. The H1 Heading
The main page heading should clearly communicate the primary topic.
Example:
<h1>
Professional Web Development Services
</h1>
Avoid vague headings such as:
<h1>
Welcome
</h1>
when a more descriptive heading would better explain the page.
23. Logical Heading Hierarchy
Example:
<h1>Web Development Course</h1>
<h2>HTML</h2>
<h3>HTML Forms</h3>
<h3>Semantic HTML</h3>
<h2>CSS</h2>
<h3>CSS Selectors</h3>
The headings communicate the content hierarchy.
24. Do Not Choose Headings Only for Font Size
Wrong idea:
“I want large text, so I will use H1.”
Heading elements describe document structure.
Use CSS for visual size.
HTML:
<h2>Our Services</h2>
CSS:
h2 {
font-size: 40px;
}
25. Image SEO and Accessibility
An image should generally have appropriate alternative text when the image conveys meaningful information.
Example:
<img
src="web-development-team.jpg"
alt="Web development team working on a client project"
>
The alt attribute provides a text alternative.
26. Poor Alt Text
Avoid keyword stuffing:
<img
src="team.jpg"
alt="web development best web development SEO website web development"
>
Instead, describe the meaningful image naturally:
<img
src="team.jpg"
alt="Developers reviewing a website interface"
>
27. Decorative Images
If an image is purely decorative and should be ignored by assistive technology, an empty alt attribute can be appropriate:
<img
src="decoration.svg"
alt=""
>
Do not omit alt merely because you do not know what to write.
28. Image File Names
Descriptive file names can improve organization and context.
Less useful:
IMG00125.jpg
More descriptive:
web-development-team.jpg
Keep names clear and practical.
29. Internal Links
Internal links connect pages within the same website.
Example:
<a href="/services/">
View Our Web Development Services
</a>
Another:
<a href="/blog/html-basics/">
Learn HTML Basics
</a>
Internal linking helps users discover related pages and helps establish site structure.
30. Descriptive Anchor Text
Less useful:
<a href="/html-course/">
Click here
</a>
More descriptive:
<a href="/html-course/">
Learn HTML from Beginner to Advanced
</a>
The second link provides more context.
31. External Links
An external link points to another website.
Example:
<a href="https://example.org">
Example Resource
</a>
External links should be relevant and useful to the reader.
32. Opening a Link in a New Tab
Example:
<a
href="https://example.org"
target="_blank"
rel="noopener"
>
External Resource
</a>
noopener prevents the newly opened page from receiving access to the original page through window.opener in relevant contexts.
33. Semantic HTML and SEO
Semantic elements can help communicate page structure.
Examples:
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
Example:
<main>
<article>
<h1>HTML SEO Guide</h1>
<section>
<h2>Meta Descriptions</h2>
<p>
...
</p>
</section>
</article>
</main>
Semantic HTML alone does not guarantee rankings, but it contributes to clear, maintainable markup.
34. Useful Content Is More Important Than Keyword Repetition
Do not create content such as:
HTML course HTML course best HTML course HTML tutorial HTML course...
This creates poor-quality content.
Instead, answer the user’s actual questions clearly and thoroughly.
35. What Is Keyword Stuffing?
Keyword stuffing means unnaturally repeating keywords in an attempt to manipulate search visibility.
Example:
Best laptop shop laptop shop best laptop shop cheap laptop shop best laptop...
Avoid this.
Write for humans first while making the topic clear.
36. What Is Search Intent?
Search intent is the purpose behind a search.
Suppose someone searches:
how to create an HTML form
They probably want educational instructions.
A useful page should actually teach them how to create the form.
Another query:
web development company near me
has a different intent.
The content should match the audience’s real need.
37. Content Structure
A useful educational article might contain:
Title
Introduction
Definition
Syntax
Examples
Explanation
Practical Use
Common Mistakes
Important Terms
Practice
Quiz
Summary
This makes learning material easier to navigate and understand.
38. Open Graph Metadata
Open Graph metadata can influence how a page is represented when shared on compatible social platforms.
Example:
<meta
property="og:title"
content="HTML SEO Guide"
>
<meta
property="og:description"
content="Learn HTML SEO, metadata and page optimization."
>
<meta
property="og:image"
content="https://example.com/images/html-seo.jpg"
>
<meta
property="og:url"
content="https://example.com/html-seo/"
>
<meta
property="og:type"
content="article"
>
39. Social Sharing Image
Example:
<meta
property="og:image"
content="https://example.com/images/class-20-cover.jpg"
>
Use an image that accurately represents the page.
Do not use misleading preview images.
40. Complete SEO Head Example
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>
Web Development Services | ABC IT
</title>
<meta
name="description"
content="Professional web development services for business, e-commerce and portfolio websites."
>
<meta
name="robots"
content="index, follow"
>
<link
rel="canonical"
href="https://example.com/web-development-services/"
>
<meta
property="og:title"
content="Professional Web Development Services"
>
<meta
property="og:description"
content="Build a modern and responsive website for your business."
>
<meta
property="og:image"
content="https://example.com/images/web-development.jpg"
>
<meta
property="og:url"
content="https://example.com/web-development-services/"
>
<meta
property="og:type"
content="website"
>
</head>
41. SEO-Friendly Page Structure
A complete page might follow:
HTML
│
├── HEAD
│ ├── Charset
│ ├── Viewport
│ ├── Title
│ ├── Meta Description
│ ├── Robots
│ ├── Canonical
│ └── Social Metadata
│
└── BODY
│
├── HEADER
│ └── NAV
│
├── MAIN
│ ├── H1
│ ├── SECTION
│ ├── SECTION
│ └── ARTICLE
│
└── FOOTER
42. Complete HTML Project
Now we will combine the major concepts from Classes 1–20.
Create:
html-final-project/
│
├── index.html
├── about.html
├── services.html
├── portfolio.html
├── blog.html
├── contact.html
│
├── images/
│ ├── hero.jpg
│ ├── team.jpg
│ └── project.jpg
│
├── media/
│ └── introduction.mp4
│
└── css/
└── style.css
You have not completed the full CSS course yet, so the CSS file can remain minimal for now.
43. Complete Homepage Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>
ABC IT — Web Development & SEO Services
</title>
<meta
name="description"
content="ABC IT provides professional web development, e-commerce, SEO and website maintenance services."
>
<meta
name="robots"
content="index, follow"
>
<link
rel="canonical"
href="https://example.com/"
>
</head>
<body>
<header>
<h1>ABC IT</h1>
<p>
Professional Web Development & SEO Services
</p>
<nav>
<ul>
<li>
<a href="index.html">
Home
</a>
</li>
<li>
<a href="about.html">
About
</a>
</li>
<li>
<a href="services.html">
Services
</a>
</li>
<li>
<a href="portfolio.html">
Portfolio
</a>
</li>
<li>
<a href="blog.html">
Blog
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
</nav>
</header>
<main>
<section>
<h2>
Build Your Professional Website
</h2>
<p>
We create responsive and user-friendly websites for businesses, online stores and professionals.
</p>
<a href="contact.html">
Request a Website Quote
</a>
</section>
<section>
<h2>Our Services</h2>
<article>
<h3>
Web Development
</h3>
<p>
Modern websites built around your business requirements.
</p>
<a href="services.html">
Explore Web Development Services
</a>
</article>
<article>
<h3>
E-commerce Development
</h3>
<p>
Online stores for businesses that want to sell products through the web.
</p>
</article>
<article>
<h3>
SEO
</h3>
<p>
Technical and on-page improvements designed to help search engines understand your website.
</p>
</article>
</section>
<section>
<h2>About Our Team</h2>
<img
src="images/team.jpg"
alt="Web development team working together"
>
<p>
Our team works on web development, SEO and website maintenance projects.
</p>
<a href="about.html">
Learn More About Our Team
</a>
</section>
<section>
<h2>Company Introduction</h2>
<video
controls
width="700"
>
<source
src="media/introduction.mp4"
type="video/mp4"
>
Your browser does not support HTML video.
</video>
</section>
<section>
<h2>Start Your Project</h2>
<form
action="/project-request"
method="post"
>
<p>
<label for="name">
Full Name:
</label>
<input
type="text"
id="name"
name="name"
required
>
</p>
<p>
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
required
>
</p>
<p>
<label for="service">
Required Service:
</label>
<select
id="service"
name="service"
required
>
<option
value=""
selected
disabled
>
Select a Service
</option>
<option value="website">
Website Development
</option>
<option value="ecommerce">
E-commerce
</option>
<option value="seo">
SEO
</option>
</select>
</p>
<p>
<label for="message">
Project Details:
</label>
</p>
<p>
<textarea
id="message"
name="message"
rows="6"
required
></textarea>
</p>
<button type="submit">
Send Project Request
</button>
</form>
</section>
</main>
<footer>
<p>
© 2026 ABC IT. All rights reserved.
</p>
<nav>
<a href="about.html">
About
</a>
<a href="contact.html">
Contact
</a>
<a href="privacy.html">
Privacy Policy
</a>
</nav>
</footer>
</body>
</html>
44. What You Used in This Project
The project combines concepts from previous HTML classes.
Document structure:
<!DOCTYPE html>
<html>
<head>
<body>
Metadata:
<title>
<meta>
<link>
Semantic elements:
<header>
<nav>
<main>
<section>
<article>
<footer>
Text:
<h1>
<h2>
<h3>
<p>
Links:
<a>
Images:
<img>
Video:
<video>
<source>
Forms:
<form>
<label>
<input>
<select>
<option>
<textarea>
<button>
45. Common HTML SEO Mistakes
Mistake 1 — Missing Title
Avoid:
<head>
</head>
Add an accurate title:
<title>
Web Development Services | ABC IT
</title>
Mistake 2 — Same Title on Every Page
Avoid using:
<title>ABC IT</title>
on every page.
Create page-specific titles.
Mistake 3 — Keyword Stuffing
Avoid:
<title>
Web Development Web Development Best Web Development Cheap Web Development
</title>
Write naturally.
Mistake 4 — Missing Meta Description
Important pages should normally have a useful page-specific description.
Mistake 5 — Duplicate Generic Descriptions
Do not copy the exact same description across every page when the pages have different purposes.
Mistake 6 — Poor Heading Structure
Avoid creating headings randomly based only on desired font size.
Use headings to describe content hierarchy.
Mistake 7 — Missing Image Alt Text
Avoid:
<img src="service.jpg">
for meaningful images.
Prefer:
<img
src="service.jpg"
alt="Developer building a business website"
>
Mistake 8 — Keyword-Stuffed Alt Text
Alt text should describe the image’s purpose, not become a keyword list.
Mistake 9 — Generic Anchor Text Everywhere
Avoid repeatedly using:
Click Here
when a descriptive link would be clearer.
Mistake 10 — Accidental noindex
Always check important public pages for:
<meta
name="robots"
content="noindex"
>
before launch.
Mistake 11 — Incorrect Canonical
Do not point every canonical URL to:
https://example.com/
Each canonical should represent the preferred URL for the relevant content.
Mistake 12 — Expecting Meta Tags to Guarantee Rankings
Metadata helps describe and control aspects of a page, but rankings are not produced by meta tags alone.
Mistake 13 — Creating Content Only for Search Engines
Your page should solve a real user’s problem.
Search-engine optimization should not make the page difficult or unpleasant for humans to read.
New & Difficult Words
SEO = Search Engine Optimization
Search Engine = System used to discover and retrieve information from indexed web content
On-Page SEO = Optimization of individual pages and their content
Technical SEO = Technical optimization affecting crawling, indexing and website processing
Metadata = Information describing a document
Meta Tag = HTML metadata element
Meta Description = Metadata summarizing a page
Charset = Character encoding declaration
UTF-8 = Unicode Transformation Format, 8-bit
Viewport = Visible area of a web page on a device
Robots = Instructions or directives for compatible search crawlers
Index = Search engine database or process of including pages in searchable results
Noindex = Directive requesting that a page not be indexed
Crawl = Automated discovery and retrieval of web resources
Crawler = Software that discovers and retrieves web pages
Canonical URL = Preferred URL for duplicate or substantially similar content
Search Intent = Purpose behind a user’s search
Keyword = Word or phrase associated with a topic or search
Keyword Stuffing = Excessive or unnatural keyword repetition
Internal Link = Link to another page on the same website
External Link = Link to another website
Anchor Text = Clickable text of a hyperlink
Open Graph = Metadata protocol used by compatible platforms for shared-page previews
Alt Text = Alternative text describing the purpose or content of an image
SERP = Search Engine Results Page
Responsive = Able to adapt to different screen sizes
Indexability = Ability or permission for a page to be included in a search index
Crawlability = Ability of crawlers to access and navigate website content
Important Notes
A useful basic <head>:
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>
Page Title
</title>
<meta
name="description"
content="Accurate description of this page."
>
</head>
For appropriate public pages, you may additionally configure:
<meta
name="robots"
content="index, follow"
>
Canonical:
<link
rel="canonical"
href="https://example.com/page/"
>
Remember:
Title → Describes the page
Meta Description → Summarizes the page
H1 → Main visible page topic
Headings → Organize content
Alt Text → Text alternative for meaningful images
Internal Links → Connect related pages
Semantic HTML → Clarifies page structure
Canonical → Indicates preferred URL
Robots → Provides crawler/indexing directives
Practice Questions
- What does SEO stand for?
- What is SEO?
- What is on-page SEO?
- What is technical SEO?
- What does
<title>do? - What is a meta description?
- Does Google always display your exact meta description?
- What does UTF-8 do?
- What is the viewport meta tag?
- What does
lang="en"mean? - What is a robots meta tag?
- What does
noindexmean? - What is a canonical URL?
- Why is heading hierarchy important?
- What is the purpose of H1?
- What is alt text?
- Should decorative images always have descriptive alt text?
- What is an internal link?
- What is anchor text?
- What is keyword stuffing?
- What is search intent?
- What is Open Graph metadata?
- Does semantic HTML guarantee rankings?
- Do meta tags guarantee rankings?
- Why should content be written primarily for users?
Assignment — HTML Final Project
Create a complete six-page IT company website.
Pages:
index.html
about.html
services.html
portfolio.html
blog.html
contact.html
Every page should contain:
• Correct <!DOCTYPE html>
• <html lang="en">
• <head>
• UTF-8
• Viewport metadata
• Unique title
• Unique meta description
• Semantic structure
• Logical headings
• Navigation
• Footer
Your homepage must contain:
• Company introduction
• Services
• Image
• Video
• Internal links
• Contact/project form
Your Services page must contain at least:
• Web Development
• E-commerce Development
• SEO
• Website Maintenance
Your Portfolio page must contain at least three projects.
Your Blog page must contain at least three <article> elements.
Your Contact page must contain:
• Name
• Email
• Phone
• Service selection
• Message
• Submit button
After creating the website:
- Open every page in your browser.
- Test every navigation link.
- Test every image path.
- Test the video.
- Test the contact form structure.
- Inspect every page with Developer Tools.
- Check every page title.
- Check every meta description.
- Check heading hierarchy.
- Check image alt text.
- Check semantic elements.
- Check internal links.
- Check mobile-width behavior.
- Validate that important pages do not accidentally contain
noindex. - Review the source code manually.
Quiz
- What does SEO stand for?
Answer: Search Engine Optimization.
- Which element defines the document title?
Answer: <title>.
- Which meta tag summarizes a page?
Answer: <meta name="description">.
- Which meta declaration defines UTF-8?
Answer:
<meta charset="UTF-8">
- Which meta tag is commonly used for responsive viewport configuration?
Answer:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
- What does
noindexmean?
Answer: It requests that compatible search engines not include the page in their index.
- What is a canonical URL?
Answer: The preferred URL representing a page when duplicate or substantially similar URLs exist.
- What is keyword stuffing?
Answer: Excessive and unnatural keyword repetition intended to manipulate search visibility.
- What is an internal link?
Answer: A link connecting one page to another page on the same website.
- What is anchor text?
Answer: The clickable text of a hyperlink.
- What does
altprovide?
Answer: A text alternative for an image.
- Does a meta description guarantee rankings?
Answer: No.
- Does semantic HTML guarantee rankings?
Answer: No.
- What does SERP stand for?
Answer: Search Engine Results Page.
- What should SEO content primarily do?
Answer: Provide accurate, useful content that satisfies the user’s need while remaining accessible to search engines.
Interview Questions
Q: What is SEO?
Answer: SEO, or Search Engine Optimization, is the process of improving a website so search engines can better discover, crawl, understand, index, and potentially rank relevant pages.
Q: What is a title tag?
Answer: The HTML <title> element defines the document title and can be used by browsers and search engines when representing the page.
Q: What is a meta description?
Answer: A meta description is HTML metadata that summarizes a page. Search engines may use it when generating a search-result snippet.
Q: Does the meta description directly guarantee a higher ranking?
Answer: No. A meta description does not guarantee ranking improvements, although a clear description can help users understand a search result.
Q: What is a canonical tag?
Answer: A canonical link indicates the preferred URL for duplicate or substantially similar page content.
Q: What is the difference between crawling and indexing?
Answer: Crawling is the process of discovering and retrieving web resources. Indexing is the process by which a search engine processes eligible content for potential inclusion in its searchable index.
Q: What is keyword stuffing?
Answer: Keyword stuffing is the unnatural repetition of keywords in content or metadata in an attempt to manipulate search visibility.
Q: Why is semantic HTML useful for SEO?
Answer: Semantic HTML creates clearer document structure and meaning, which can help software systems understand page organization. It also supports accessibility and maintainability.
Q: Why is alt text important?
Answer: Alt text provides a text alternative for meaningful images and improves accessibility. It can also provide useful context about image content.
Q: What is search intent?
Answer: Search intent is the purpose or goal behind a user’s search query.
Q: What is internal linking?
Answer: Internal linking connects related pages within the same website, helping users navigate and helping establish website structure.
Class Summary
In Class 20, you completed the core HTML stage of the Web Development Zero to Advanced course.
You learned:
SEO → Search Engine Optimization
<title> → Document Title
Meta Description → Page Summary
UTF-8 → Character Encoding
Viewport → Mobile Rendering Configuration
Robots → Search Crawler Directives
Canonical → Preferred URL
H1–H6 → Content Hierarchy
Alt Text → Image Text Alternative
Internal Links → Connect Website Pages
Anchor Text → Clickable Link Text
Open Graph → Social Sharing Metadata
Semantic HTML → Meaningful Page Structure
You also combined the HTML topics from previous classes into a complete multi-page website project.
At this point, you should be able to create the structural HTML for:
• Business websites
• Portfolio websites
• Blog websites
• Service websites
• Contact pages
• Forms
• Product pages
• Educational websites
The key principle is:
HTML provides structure and meaning.
HTML alone does not create the final professional visual design.
The next major technology is CSS.
CSS will teach you how to control:
• Colors
• Fonts
• Spacing
• Borders
• Backgrounds
• Width and height
• Layout
• Flexbox
• Grid
• Responsive design
• Animations
• Professional website interfaces
Next Class:
Class 21 — CSS Introduction: What Is CSS, Syntax & How to Add CSS