HTML Text, Links & Media

What You Will Learn

After completing this level, you should be able to create meaningful text content, navigation links and multimedia content using HTML.

1. Text Content in HTML

HTML is not only about creating boxes on a screen. One of its most important jobs is to communicate the structure and meaning of written content.

A browser needs to understand whether a piece of content is a heading, paragraph, quotation, code sample or emphasized statement.

2. Paragraphs and Line Breaks

The <p> element represents a paragraph.

<p>HTML gives structure to web content.</p>

<p>CSS controls presentation.</p>

<p>JavaScript adds behaviour.</p>

Line Break — <br>

The <br> element creates a line break within text.

<p>
    CodeBhavya<br>
    From Learning to Limitless Possibilities.
</p>

3. Headings and Heading Hierarchy

HTML provides six heading levels:

<h1>Main Heading</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Detailed Subsection</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

Think of headings as the outline of your document.

4. Bold, Italic and Semantic Emphasis

<p>
    HTML is <strong>important</strong> for web development.
</p>

<p>
    Learn <em>step by step</em>.
</p>

<p>
    Water = H<sub>2</sub>O
</p>

<p>
    Area = x<sup>2</sup>
</p>

5. Quotations and Citations

Short quotation — <q>

<p>
    The instructor said:
    <q>Learn by building.</q>
</p>

Long quotation — <blockquote>

<blockquote>
    Learning web development requires understanding
    how structure, presentation and behaviour work together.
</blockquote>

Citation — <cite>

<p>
    Source:
    <cite>HTML Living Standard</cite>
</p>

6. <code> and <pre>

The <code> element represents a fragment of computer code.

<p>
Use the <code>console.log()</code> function.
</p>

The <pre> element preserves whitespace and line breaks.

<pre>
function hello() {
    console.log("Hello");
}
</pre>

7. Hyperlinks with <a>

The anchor element creates hyperlinks.

<a href="https://codebhavya.com/">
    Visit CodeBhavya
</a>

8. Absolute vs Relative URLs

<a href="https://codebhavya.com/">
CodeBhavya
</a>

<a href="index.html">
Web Technologies
</a>

9. Internal Page Links

An element can have an id, and a link can use that ID with #.

<section id="media">
    <h2>Media</h2>
</section>

<a href="#media">
    Jump to Media
</a>

This technique is useful for long documentation pages.

10. Opening Links in a New Tab

<a
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer"
>
    Open Website
</a>

11. Email and Telephone Links

<a href="mailto:hello@example.com">
    Email Us
</a>

<a href="tel:+911234567890">
    Call Us
</a>

These links allow devices to hand the action to an appropriate email or telephone application.

12. Images with <img>

Images are embedded using the <img> element.

<img
    src="images/codebhavya.png"
    alt="CodeBhavya learning platform"
>

13. Alternative Text — alt

The alt attribute provides a text alternative for an image.

<img
    src="http-flow.png"
    alt="Diagram showing an HTTP request from a browser to a server"
>

<img
    src="decorative-line.png"
    alt=""
>

14. Image Dimensions

<img
    src="course.jpg"
    alt="Web Technologies course"
    width="800"
    height="450"
>

Width and height can communicate the intrinsic dimensions of an image. CSS can then control its responsive display.

15. <figure> and <figcaption>

<figure>

    <img
        src="browser-flow.png"
        alt="Browser request and response flow"
    >

    <figcaption>
        Basic browser-server communication.
    </figcaption>

</figure>

16. Audio with <audio>

HTML provides native audio support.

<audio controls>

    <source
        src="audio/lesson.mp3"
        type="audio/mpeg"
    >

    Your browser does not support audio playback.

</audio>

17. Video with <video>

<video
    controls
    width="720"
>

    <source
        src="video/lesson.mp4"
        type="video/mp4"
    >

    Your browser does not support video playback.

</video>

18. Why Use <source>?

A media element can contain multiple source files. This allows the browser to choose a supported source.

<video controls>

    <source
        src="lesson.webm"
        type="video/webm"
    >

    <source
        src="lesson.mp4"
        type="video/mp4"
    >

    Your browser does not support video.

</video>

19. <iframe>

An iframe embeds another browsing context inside the page.

<iframe
    src="https://example.com"
    title="Example website"
    width="100%"
    height="400"
>
</iframe>

20. Making Media More Useful

21. Responsive Media Basics

Images, video and embedded content should not overflow smaller screens.

img,
video,
iframe {
    max-width: 100%;
}

CSS will become much more powerful for responsive layouts when we reach the CSS section of this course.

22. Common Text, Link and Media Mistakes

23. HTML Text, Links & Media Playground

Write HTML on the left and see the browser-rendered result on the right.

24. Practice Challenges

Try these challenges without looking at the solution first.

25. Test Your Understanding

26. Interview Preparation

Hover over a card to reveal the answer.

27. Quick Revision

28. Glossary

Hover over each card to reveal the definition.

29. Build a Complete HTML Media Lesson

Create one complete HTML page called web-learning-resources.html.