Text Content
Create readable and meaningful text using paragraphs, formatting elements, quotations and code elements.
LEVEL 08 · HTML
HTML Text, Links and Media
Learn how HTML presents text, creates meaningful hyperlinks, displays images, plays audio and video, and embeds external content into web pages.
01
Learning Objectives
What you will learn in this level
In Level 07, you learned the basic structure of an HTML document, tags, elements, attributes, headings, paragraphs, links and images. Now we move deeper into the content that real web pages contain.
Hyperlinks
Create absolute, relative, internal, external, email and telephone links.
Images
Use images correctly with src, alt, dimensions, figure and figcaption.
Media
Add audio, video, multiple media sources and fallback content to a web page.
Embedded Content
Understand iframe and the basic principles of embedding external content.
Practical Skills
Combine text, links and media into a complete HTML learning page.
02
Text Content and Text Semantics
HTML describes what content means
Most web pages contain large amounts of text. HTML provides elements that allow us to organize that text into meaningful structures.
Paragraph
The <p> element represents a
paragraph of text.
<p>
HTML gives structure to web content.
</p>Semantic Meaning
HTML is not primarily a decoration language. It tells the browser and other tools what content represents.
Key idea:
HTML = structure and meaning.
03
Paragraphs, Line Breaks and Whitespace
Understanding <p> and <br>
A paragraph and a line break are not the same thing. A paragraph represents a block of related content. A line break simply moves the next content to a new line.
Paragraph
<p>
First paragraph.
</p>
<p>
Second paragraph.
</p>Line Break
<p>
CodeBhavya<br>
From Learning to Limitless Possibilities.
</p>
Common mistake:
Do not use dozens of
<br>
elements to create page spacing.
HTML should describe structure; CSS should handle visual spacing.
04
Text Formatting
Visual appearance versus semantic meaning
<b> and <strong>
Both may appear bold, but their meaning is different.
<b>Bold appearance</b>
<strong>
Important information
</strong><i> and <em>
<em> communicates emphasis,
while <i> is generally used for
alternate voice or stylistic text.
<i>Technical term</i>
<em>
Read this carefully
</em><mark> and <small>
<mark>Important word</mark>
<small>
Additional information
</small><del> and <ins>
<del>Old price</del>
<ins>
New price
</ins>
Example:
Learn HTML and practice every day. This is a very important concept.
05
Subscript, Superscript and Quotations
Subscript
Use <sub> when content should
appear below the normal text baseline.
H<sub>2</sub>O
CO<sub>2</sub>
H2O CO2
Superscript
Use <sup> for raised content.
x<sup>2</sup>
10<sup>3</sup>
x2 103
<blockquote>
Use <blockquote> for a longer
quotation.
<blockquote>
Learning never stops.
</blockquote><q> and <cite>
<p>
The teacher said
<q>Practice every day.</q>
</p>
<p>
I am reading
<cite>HTML and CSS</cite>.
</p>
06
Code, Preformatted Text and Output
Displaying programming code correctly
<code>
Represents a fragment of computer code.
<p>
Use <code>printf()</code> in C.
</p><pre>
Preserves spaces and line breaks.
<pre>
Line 1
Line 2
Line 3
</pre>
Professional pattern:
For source-code examples, developers commonly combine
<pre>
and
<code>.
07
Hyperlinks and Link Anatomy
The <a> element connects resources
Hyperlinks are one of the foundations of the Web. They allow users to move between pages, sections, websites and other resources.
<a href="https://codebhavya.com">
Visit CodeBhavya
</a>
1
<a>
Anchor element that creates the link.
2
href
Destination of the link.
3
Link text
Visible text the user can select.
08
Absolute and Relative URLs
Understanding where a link points
Choose a path
about.html
Current directory → about.html
Basic rule
A relative URL is interpreted using the location of the current document.
An absolute URL contains the complete destination, including the protocol and domain.
Remember:
page.html
→ current directory
../page.html
→ parent directory
https://example.com
→ complete external address
09
Internal Page Links and Fragments
Jump directly to a section of the same page
An internal link uses an element's
id
together with the
#
fragment syntax.
<h2 id="contact">
Contact Us
</h2>
<a href="#contact">
Go to Contact
</a>
Important:
The value after
#
must match the target element's
id.
10
External Links, target and rel
Opening another website safely
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
>
Open Example
</a>target="_blank"
Requests that the destination open in a new browsing context, commonly a new tab.
rel="noopener noreferrer"
Commonly used as a defensive security and privacy measure when opening external resources.
11
Email and Telephone Links
Contact links using mailto and tel
Email Link
<a href="mailto:hello@example.com">
Email Us
</a>When supported, the user's email application can open with the address already prepared.
Telephone Link
<a href="tel:+919999999999">
Call Us
</a>On supported mobile devices, tapping the link can open the phone application.
12
Images in HTML
The <img> element
<img
src="images/logo.png"
alt="CodeBhavya logo"
>
1
src
Specifies the image resource.
2
alt
Provides alternative text.
3
width
Specifies intended width.
4
height
Specifies intended height.
5
Image meaning
Think about what information the image communicates.
6
File size
Avoid unnecessarily large media files.
13
Alt Text, Figure and Figcaption
Making images meaningful
Meaningful alt text
<img
src="student-record.png"
alt="Student record management dashboard"
>Describe the useful meaning of the image rather than simply writing "image" or "picture".
Decorative image
<img
src="decorative-line.png"
alt=""
>An image that provides no useful information can use an empty alternative text value.
<figure>
<img
src="html-structure.png"
alt="HTML document structure"
>
<figcaption>
Basic structure of an HTML document.
</figcaption>
</figure>
Why figure?
It communicates that the media and its caption belong
together as one meaningful unit.
14
Audio
Adding sound to a web page
Basic Audio
<audio controls>
<source
src="audio/lesson.mp3"
type="audio/mpeg"
>
Your browser does not support audio.
</audio>controls
The controls attribute asks the browser
to display controls such as play, pause and volume.
🎵 Browser controls appear when a valid audio file
is supplied.
15
Video
Adding video content
<video controls width="640">
<source
src="videos/html-introduction.mp4"
type="video/mp4"
>
Your browser does not support video.
</video>
controls
Displays playback controls.
autoplay
Requests automatic playback.
muted
Starts media without sound.
loop
Requests repeated playback.
poster
Image displayed before playback.
fallback
Text shown when media is unsupported.
16
The Source Element
Providing multiple media alternatives
<video controls>
<source
src="lesson.webm"
type="video/webm"
>
<source
src="lesson.mp4"
type="video/mp4"
>
Your browser does not support video.
</video>
Why multiple sources?
Different browsers and environments may support different
media formats. The browser can select a supported source.
17
iframe and Embedded Content
Embedding another browsing context
<iframe
src="https://example.com"
title="Example website"
width="600"
height="400"
>
</iframe>title
A descriptive iframe title helps users understand what the embedded browsing context represents.
Embedding restriction
Not every external website allows itself to be displayed inside an iframe. The destination's security policies can prevent embedding.
18
Responsive Media Basics
Preparing media for different screen sizes
Alternative Text
Use meaningful alt text for informative images.
Appropriate Dimensions
Use suitable dimensions instead of unnecessarily huge media.
Optimize Media
Avoid unnecessarily large image, audio and video files.
Fallback Content
Provide useful fallback content where appropriate.
Coming later:
CSS techniques such as
max-width,
Flexbox and Grid will be covered in the CSS levels.
19
Real-World Example — CodeBhavya Learning Resource Page
Combining text, links and media
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Learning Resources</title>
</head>
<body>
<h1>HTML Learning Resources</h1>
<p>
Welcome to
<strong>CodeBhavya</strong>.
</p>
<h2>Useful Links</h2>
<a href="html-fundamentals.html">
HTML Fundamentals
</a>
<br>
<a
href="https://developer.mozilla.org/"
target="_blank"
rel="noopener noreferrer"
>
MDN Web Docs
</a>
<h2>Learning Image</h2>
<figure>
<img
src="html-structure.png"
alt="HTML document structure"
width="500"
>
<figcaption>
Basic HTML document structure.
</figcaption>
</figure>
<h2>Learning Video</h2>
<video controls width="600">
<source
src="html-basics.mp4"
type="video/mp4"
>
Your browser does not support video.
</video>
</body>
</html>
Real-world lesson:
A useful web page is usually not made from one HTML element.
It combines many meaningful elements into a structured document.
20
Premium Visualizer — URL & Link Anatomy
Click different parts of a URL to understand what each part means.
https://codebhavya.com/Web-Technologies/html-fundamentals.html?mode=learn#html
Protocol
https://
Domain
codebhavya.com
Path
/Web-Technologies/...
Query
?mode=learn
Fragment
#html
Protocol:
HTTPS tells the browser which communication protocol
is being used.
21
Premium Interactive — HTML Media Builder
Build an HTML media element and inspect the generated code.
Generated HTML
Preview
22
Common HTML Mistakes
Problems beginners frequently make
❌ Missing alt
Meaningful images should have useful alternative text.
❌ Using headings for size
Choose headings according to document hierarchy, not simply visual size.
❌ Too many <br>
Do not use line breaks as a replacement for CSS spacing.
❌ "Click here"
Prefer descriptive link text that explains the destination.
❌ Every link opens new tab
Use target="_blank" only when it is actually useful.
❌ Huge media files
Large files increase loading time and waste bandwidth.
❌ Missing iframe title
Give embedded browsing contexts descriptive titles.
❌ Assuming every site can be embedded
External websites may block iframe embedding.
23
Interview Preparation
Click a card to reveal the answer
Question 01
What is the difference between <b> and <strong>?
Click to reveal →
Answer
Both can appear bold, but
<strong>
communicates importance while
<b>
is primarily presentational.
Question 02
What is a relative URL?
Click to reveal →
Answer
A relative URL identifies a resource relative to the location of the current document.
Question 03
Why is alt important for images?
Click to reveal →
Answer
It provides a textual alternative that can communicate the image's useful meaning when the image cannot be displayed and to users relying on assistive technologies.
Question 04
What is target="_blank"?
Click to reveal →
Answer
It requests that the linked resource open in a new browsing context, commonly a new tab.
Question 05
Why is rel="noopener noreferrer" commonly used with external target="_blank" links?
Click to reveal →
Answer
It is commonly used as a defensive security and privacy measure for links opened in a new browsing context.
Question 06
What is the purpose of figure and figcaption?
Click to reveal →
Answer
They group self-contained content such as an image together with its related caption.
Question 07
What is the purpose of the source element?
Click to reveal →
Answer
It allows multiple media sources to be provided so the browser can select a supported format.
Question 08
What is an iframe?
Click to reveal →
Answer
An iframe embeds another browsing context inside the current HTML document.
Question 09
Difference between absolute and relative URL?
Click to reveal →
Answer
An absolute URL gives the complete destination, while a relative URL is interpreted from the current document's location.
24
Quick MCQs
Test your understanding
1. Which HTML element creates a hyperlink?
2. Which attribute provides alternative text for an image?
3. Which element is used to add audio?
4. Which element provides a caption for a figure?
5. Which attribute commonly requests a new browsing context?
6. Which element embeds another browsing context?
7. Which element is normally used for a longer quotation?
8. Which syntax creates an internal page link?
25
Extra Practice
Placement-oriented HTML exercises
01
Personal Introduction Page
Create a page containing your name, education, skills, hobbies, formatted text and a quotation.
02
Useful Links Page
Create internal links, external links, an email link and a telephone link.
03
Image Gallery Structure
Create three figures using images, meaningful alt text and captions.
04
Learning Media Page
Build a page containing audio, video, multiple sources and fallback content.
05
Course Resource Page
Combine headings, paragraphs, formatted text, links, images, figures and media.
06
Interview Profile Page
Create a profile page containing contact links, an image, a short biography and an embedded learning resource.
26
Quick Revision
Everything important at a glance
<p>
— Paragraph
<br>
— Line break
<strong>
— Important content
<em>
— Emphasized content
<mark>
— Highlighted content
<sub>
— Subscript
<sup>
— Superscript
<a>
— Hyperlink
href
— Link destination
alt
— Alternative image text
<figure>
— Self-contained content
<figcaption>
— Figure caption
<audio>
— Audio
<video>
— Video
<source>
— Media source
<iframe>
— Embedded browsing context
27
Glossary
Click a term to reveal its meaning
Hyperlink
Click to revealA connection that allows users to navigate to another resource or location.
Absolute URL
Click to revealA complete web address containing the protocol and destination.
Relative URL
Click to revealA path interpreted relative to the current document or website location.
Alternative Text
Click to revealText that describes the useful meaning of an image.
Fragment
Click to revealThe part of a URL beginning with # that identifies a location within a resource.
Media
Click to revealContent such as images, audio and video presented through a web page.
Fallback Content
Click to revealContent shown when a browser cannot use the requested media or resource.
iframe
Click to revealAn HTML element used to embed another browsing context.
Source
Click to revealAn element used to provide media resources to audio and video elements.
28
Final Challenge
Build a complete HTML learning page
🎯 CodeBhavya HTML Media Profile
Build a single HTML page that represents a personal learning profile.
Your page must contain:
01
One main heading using
<h1>.
02
At least three subheadings and three paragraphs.
03
Bold, emphasized and highlighted content.
04
One quotation and one code example.
05
One internal link and two external links.
06
One email link and one telephone link.
07
At least two images with meaningful alt text.
08
One figure with figcaption.
09
One audio element and one video element.
10
One iframe with a descriptive title.
Completion goal:
Your final page should demonstrate that you can combine
text, links and media into a meaningful HTML document
without depending on CSS.
✓
Level 08 Complete?
Before marking this lesson complete, make sure you can create text content, hyperlinks, images, audio, video and embedded content without referring to the examples.