Web Content, Media, and Structured Data

Introduction

A modern web page is more than text and hyperlinks. It may contain photographs, illustrations, audio, video, data tables, maps, documents, and content supplied by another service. HTML provides the semantic structure for these resources; CSS controls their presentation and responsiveness; JavaScript can coordinate interaction, loading, and dynamic updates.

Effective web development requires more than knowing individual elements. A developer must select appropriate file formats, use reliable file paths, provide alternatives for users and devices, respect copyright and privacy, and avoid unnecessary downloads. These concerns affect accessibility, performance, search visibility, maintainability, and legal compliance.

This chapter examines the practical foundations of web content, media, and structured data for diploma-level full-stack programmers.

Learning Objectives

By the end of this chapter, you should be able to:

• distinguish absolute and relative file paths and use them correctly;
• insert accessible images, figures, audio, and video;
• select suitable media formats and provide fallbacks;
• create responsive media that adapts to viewport and display conditions;
• construct semantic tables for structured information;
• embed external content responsibly;
• add useful metadata to HTML documents;
• evaluate licensing, compatibility, privacy, and performance issues; and
• apply these principles in a small, maintainable web page.

1. Resources and File Paths

A URL identifies a resource. It may be an absolute URL, such as https://example.org/assets/logo.svg, or a relative URL, such as assets/logo.svg. Absolute URLs identify a complete location and are commonly used for external services. Relative URLs are resolved in relation to the current document or the site root.

Consider this structure:

project/
├── index.html
├── pages/
│   └── about.html
└── assets/
    ├── images/logo.svg
    └── audio/intro.mp3

From index.html, the logo can be referenced as assets/images/logo.svg. From pages/about.html, the same file is ../assets/images/logo.svg; .. means the parent directory. A root-relative path, /assets/images/logo.svg, begins at the website root, but it may fail when a site is deployed in a subdirectory rather than at the domain root.

Paths are case-sensitive on many web servers. Logo.svg and logo.svg may therefore refer to different files. Spaces, special characters, and inconsistent naming also create deployment problems. Use lowercase names, hyphens, and stable directory conventions. Never assume that a path working on a case-insensitive development computer will work on a Linux production server.

A missing resource produces a poor user experience and may generate a 404 response. Browser developer tools, network logs, and the document's base URL are useful for diagnosing path errors. A <base> element can change how relative URLs are resolved, so it should be used only when its effect is fully understood.

2. Images and Alternative Text

The basic image element is:

<img src="assets/images/campus.jpg" alt="Students collaborating around a table" width="1200" height="800">

The src attribute identifies the image. The alt attribute supplies a text alternative. Alternative text is not a caption and should describe the image's purpose in context. A decorative image should normally use an empty alternative, alt="", so assistive technology can ignore it. An informative image needs a concise description of its meaningful content. An image functioning as a link should describe the destination or action.

Do not write alternative text such as “image of” or “photo of” unless that fact is important. If an image contains substantial text, reproduce that information in surrounding HTML or provide an equivalent accessible transcript. Avoid putting essential information only inside a bitmap.

Width and height attributes reserve layout space before an image loads. They should represent the intrinsic aspect ratio. If an image has an intrinsic width of 1200 pixels and height of 800 pixels, its aspect ratio is 1200 ÷ 800 = 1.5. CSS should preserve that ratio unless cropping is intentional.

img {
  max-width: 100%;
  height: auto;
  display: block;
}

The object-fit property is useful when a fixed box is required:

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

cover fills the box and may crop the image; contain displays the complete image but may leave empty space. The choice should follow the content's purpose, not merely visual preference.

Figures and Captions

Use <figure> when media and its caption form a meaningful unit:

<figure>
  <img src="assets/images/network-diagram.svg"
       alt="Three application layers connected from browser to database">
  <figcaption>Figure 4.1: A simplified three-tier web architecture.</figcaption>
</figure>

A figure may contain an image, code example, chart, or other self-contained content. A caption should explain the media's significance. If a long explanation is needed, place it in nearby text rather than making the alt value excessively long.

3. Responsive Images and Media

A single large image may be wasteful on a mobile connection, while a small image may appear blurry on a high-density display. Responsive image techniques allow the browser to select an appropriate resource.

The srcset attribute lists candidates and sizes describes the rendered width:

<img src="assets/images/article-800.jpg"
     srcset="assets/images/article-480.jpg 480w,
             assets/images/article-800.jpg 800w,
             assets/images/article-1400.jpg 1400w"
     sizes="(max-width: 700px) 100vw, 700px"
     alt="A technician inspecting a solar panel"
     width="1400" height="933">

The w descriptors state intrinsic widths, not display widths. The browser considers viewport size, display density, and network conditions. sizes should describe the layout accurately; otherwise the browser may select a poor candidate.

Use <picture> when the image itself must change by art direction or format:

<picture>
  <source media="(max-width: 600px)" srcset="assets/images/product-square.webp">
  <source type="image/avif" srcset="assets/images/product.avif">
  <img src="assets/images/product.jpg" alt="Blue reusable water bottle" width="1200" height="1200">
</picture>

The fallback <img> remains essential. The browser evaluates <source> elements in order and uses the first suitable option. Art direction is different from merely serving different resolutions: a portrait crop for a narrow screen may focus on the subject more effectively than a scaled landscape image.

Lazy loading can defer images that are initially outside the viewport:

<img src="assets/images/gallery-02.jpg" loading="lazy"
     alt="Aerial view of the campus" width="1200" height="800">

Do not lazy-load the main above-the-fold image by default, because doing so can delay the page's primary content. Dimensions, compression, modern formats, and correct prioritisation should be considered together.

4. Image Formats and Performance

Format selection depends on content and browser requirements.

Compression is a trade-off between file size and visual fidelity. A developer should inspect the result at realistic display sizes, not merely trust a numerical quality setting. Remove unnecessary metadata from public images when it does not serve a purpose, but retain copyright or accessibility information where required.

Performance is also affected by dimensions. A 4000-pixel image displayed at 400 pixels can cause needless transfer and decoding work. Content delivery networks, caching headers, responsive variants, and modern image pipelines can reduce this cost. Performance should be measured using browser tools and real user data rather than guessed from source code alone.

5. Audio

The <audio> element provides native controls and a semantic interface:

<audio controls preload="metadata">
  <source src="assets/audio/welcome.mp3" type="audio/mpeg">
  <source src="assets/audio/welcome.ogg" type="audio/ogg">
  <p>Your browser cannot play this audio. <a href="assets/audio/welcome.mp3">Download it</a>.</p>
</audio>

controls exposes playback controls. preload="metadata" asks the browser to obtain basic information without necessarily downloading the entire file; it is a request rather than an absolute command. Avoid autoplay, especially with sound. Autoplay can be disruptive and is restricted by browser policies. If autoplay is genuinely necessary, muted playback and an obvious control are generally more acceptable, but user choice remains the priority.

Audio should have a meaningful title and, when it contains spoken information, a transcript. A transcript supports deaf and hard-of-hearing users, search indexing, translation, and users who cannot play sound. Ensure that keyboard users can operate custom controls; native controls are usually safer than an improvised JavaScript player.

6. Video and Captions

<video controls preload="metadata" width="1280" height="720"
       poster="assets/images/lecture-poster.jpg">
  <source src="assets/video/lecture.mp4" type="video/mp4">
  <source src="assets/video/lecture.webm" type="video/webm">
  <track kind="captions" src="assets/captions/lecture-en.vtt"
         srclang="en" label="English" default>
  <p>Your browser cannot play this video. <a href="assets/video/lecture.mp4">Download the video</a>.</p>
</video>

poster displays an image before playback. Explicit dimensions help prevent layout shifts. A <track> element can provide WebVTT captions. Captions include spoken dialogue and relevant sound cues; subtitles may focus only on dialogue and translation. A transcript should also be available where appropriate, and audio description may be required when visual information is not conveyed in the soundtrack.

Video files are large, so resolution, bitrate, duration, and codec influence both quality and delivery cost. Multiple sources provide compatibility, but they should not be added without a reason. Test on representative browsers and devices. A video background should not obscure text, consume excessive mobile data, or remove an accessible alternative.

7. Tables as Structured Data

Tables represent relationships among row and column headings. They are not layout tools. A basic semantic table is:

<table>
  <caption>Workshop timetable</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Topic</th>
      <th scope="col">Room</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Monday</th>
      <td>HTML structure</td>
      <td>Lab 2</td>
    </tr>
    <tr>
      <th scope="row">Tuesday</th>
      <td>Responsive CSS</td>
      <td>Lab 2</td>
    </tr>
  </tbody>
</table>

<caption> identifies the table. Header cells use <th>, and scope clarifies whether a heading applies to a column or row. Complex tables may require id and headers relationships, but simpler structures are preferable when possible. Do not merge cells merely to create a visual design that makes relationships difficult to interpret.

A responsive table may scroll horizontally rather than forcing unreadable text:

.table-wrapper {
  overflow-x: auto;
}

The wrapper should not hide information, and an explanatory label may help users understand that horizontal scrolling is available. For genuinely card-like mobile presentation, JavaScript or CSS transformations must preserve reading order, headers, and keyboard access.

8. Embedded Content

An <iframe> places another browsing context inside the document:

<iframe src="https://maps.example.edu/campus"
        title="Interactive map of the university campus"
        loading="lazy"
        referrerpolicy="strict-origin-when-cross-origin">
</iframe>

A useful title is essential for assistive technology. loading="lazy" can defer a below-the-fold frame. Embedding creates privacy, security, performance, and availability dependencies. The external provider may set cookies, collect analytics, change its content, or become unavailable.

Use the sandbox attribute to restrict an embedded document where compatible with the service:

<iframe src="https://example.org/widget"
        title="Course registration widget"
        sandbox="allow-forms allow-scripts"></iframe>

Sandbox permissions must be selected carefully. Avoid granting capabilities that are not needed. allow-same-origin and allow-top-navigation have significant implications, particularly when combined with other permissions. Content Security Policy, frame-ancestors controls, and permissions policies should be configured at the server level where possible.

Do not use <iframe> as a substitute for ordinary HTML when the content is under your control. Native HTML is usually faster, more searchable, easier to style, and easier to make accessible. Obtain consent before loading third-party marketing, analytics, or social-media content where privacy law or organisational policy requires it.

9. Metadata and Document Information

Metadata describes the document to browsers, search engines, social systems, and assistive technologies. A practical document head may contain:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Media Laboratory | Computing Department</title>
  <meta name="description" content="A laboratory exercise on accessible and responsive web media.">
  <link rel="canonical" href="https://example.edu/labs/web-media">
  <link rel="stylesheet" href="/css/site.css">
</head>

UTF-8 supports a broad range of characters. The viewport declaration tells mobile browsers to use the device width rather than rendering a desktop-width virtual page. The title should be specific and useful in browser history, bookmarks, and search results. A meta description may influence search-result presentation, but it is not a guaranteed ranking mechanism.

Canonical URLs help communicate the preferred address when equivalent content exists. They must be accurate; a wrong canonical declaration can hide the intended page from search systems. Metadata should describe real content and must not be used to mislead users.

Social platforms may use Open Graph or other metadata conventions. Structured data formats such as JSON-LD can express entities and relationships for machines:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Introduction to Web Technologies",
  "provider": {
    "@type": "CollegeOrUniversity",
    "name": "Example University"
  }
}
</script>

Structured data does not automatically improve ranking or guarantee a rich result. It should accurately reflect visible, current content and follow the relevant vocabulary and search-provider guidelines. Never insert fabricated ratings, prices, or reviews.

10. Licensing, Ethics, and Governance

Images, music, video, fonts, and code may be protected by copyright. Finding a file through a search engine does not grant permission to use it. Record the source, licence, creator, required attribution, modification status, and applicable restrictions. Creative Commons licences differ: some require attribution, some prohibit commercial use, and some prohibit derivatives. “Royalty-free” does not mean “copyright-free.”

Use institutionally licensed repositories, public-domain material, or media created with documented permission. Keep licence records in the project repository. Respect moral rights, privacy, publicity rights, cultural restrictions, and takedown requests. Do not publish identifiable people, private locations, or sensitive recordings without an appropriate legal and ethical basis.

Accessibility is an ethical and often legal requirement. Provide text alternatives, captions, transcripts, sufficient contrast, keyboard access, clear controls, and a non-media route to essential information. Avoid flashing content that could trigger photosensitive reactions, and provide pause controls for moving content.

Third-party resources should be assessed for supply-chain risk. A remote script or embedded widget can introduce vulnerabilities, track users, or change without review. Use integrity controls where applicable, minimise providers, monitor changes, and establish a process for removing failed or unsafe dependencies.

11. A Practical Workflow

A professional media workflow can be organised as follows:

1. Define the communication purpose. Decide what the user must learn or do.
2. Choose the semantic element. Use image, figure, table, audio, video, or ordinary HTML according to meaning.
3. Prepare alternatives. Write alt text, captions, transcripts, fallback links, and text equivalents.
4. Select formats and variants. Consider content type, compatibility, quality, and file size.
5. Implement paths and dimensions. Verify case, directory location, intrinsic dimensions, and aspect ratio.
6. Make the layout responsive. Test narrow and wide viewports, zoom, touch, keyboard navigation, and high-density screens.
7. Check licensing and privacy. Record permissions and review third-party dependencies.
8. Measure and test. Inspect network transfer, loading sequence, accessibility, console errors, and real devices.
9. Maintain the asset. Update captions, metadata, licences, and obsolete formats as the site changes.

Applied Case: A Responsive University Course Page

Background

This illustrative case concerns a university department replacing a course page that contains a lecturer photograph, a weekly timetable, a recorded introduction, and a campus map.

Problem

The original page used a 5 MB uncompressed photograph, a table used for visual layout, an autoplay video without captions, and a map that loaded several third-party scripts immediately. On mobile devices the page shifted during loading, consumed excessive data, and was difficult to navigate with a keyboard.

Analysis

The photograph was larger than its displayed size and had no useful alternative text. The timetable had no header relationships. The video communicated essential information only through speech. The map was below the fold but loaded during the initial page request. The department also lacked a record of image and music licences.

Approach and Solution

The team created JPEG, WebP, and AVIF variants, supplied srcset and sizes, and added intrinsic dimensions. The image received concise alt text. The timetable was rebuilt with <caption>, <thead>, <tbody>, and scoped headings. Autoplay was removed; the video received a poster, captions, a transcript, and a fallback download link. The map was lazy-loaded and given a descriptive title. The team replaced background music with properly licensed audio and stored licence records in the project repository.

Outcome

The revised page communicated the same information with less initial transfer, no major layout shift, and improved keyboard and screen-reader navigation. The result was not achieved by a single “magic” format: semantic structure, alternatives, appropriate loading, and governance were all necessary.

Learning Points

Media optimisation is a design and engineering activity. Accessibility must be planned before implementation, and performance improvements should never remove essential information. External content should be treated as a dependency with privacy and maintenance costs.

Challenges and Limitations

No format is best in every context. AVIF may reduce file size but require more encoding work; SVG is excellent for vectors but can be unsafe when untrusted content is allowed; responsive images add build and testing complexity; captions require editorial effort; and third-party embeds may provide valuable functionality while increasing risk. Browser support changes over time, so compatibility decisions should be based on the actual audience and current testing data.

Automated tools can detect missing alt attributes, some contrast failures, and certain performance problems, but they cannot determine whether alternative text is meaningful or whether a caption accurately represents a lecture. Human review, user testing, and content governance remain necessary.

Contemporary Practice

Modern build systems often generate responsive image variants, compress assets, create WebP or AVIF files, and fingerprint filenames for reliable caching. Content delivery networks can serve resources near users, while HTTP caching reduces repeated transfers. Resource hints such as preload should be used sparingly because prioritising one resource can delay another. Core Web Vitals and real-user monitoring can reveal layout instability, slow loading, and interaction problems, but metrics must be interpreted alongside accessibility and task completion.

AI-based tools can generate captions, alt-text drafts, image crops, and metadata. These outputs require human verification: captions may misrecognise names, generated descriptions may omit important context, and training or processing may raise privacy and copyright concerns. AI can assist a governed workflow; it does not replace editorial responsibility.

Chapter Summary

Web content should be selected and implemented according to meaning, audience, and purpose. Images require correct paths, useful alternative text, dimensions, and often responsive variants. Figures connect media with captions. Audio and video need controls, compatible sources, transcripts, captions, and careful loading policies. Tables should express data relationships semantically rather than provide visual layout. Iframes and third-party embeds introduce security, privacy, performance, and availability dependencies. Metadata improves document identification and machine interpretation, but it must be accurate and must not mislead. Format selection, licensing, accessibility, performance measurement, and maintenance are integrated professional responsibilities.

Key Terms

Alternative text: A textual substitute that communicates an image’s purpose or meaning.

Aspect ratio: The proportional relationship between a media resource’s width and height.

Caption: Text that identifies or explains a figure, video, or audio resource.

Canonical URL: The preferred URL declared for equivalent or duplicated content.

Content Security Policy: A server-delivered policy that restricts permitted content sources and behaviours.

Fallback: Alternative content used when a browser or user cannot use the primary resource.

Figure: A self-contained unit of media or other content, commonly paired with a caption.

Intrinsic dimensions: The natural width and height of a media resource.

Lazy loading: Deferring resource loading until it is likely to be needed.

Metadata: Information describing a document or resource.

Responsive image: An image implementation that selects an appropriate resource for conditions such as viewport width.

Sandbox: A mechanism that restricts capabilities of embedded content.

Structured data: Machine-readable information describing entities, properties, or relationships.

Transcript: A text version of spoken audio or video content.

WebVTT: A text format commonly used for timed captions and subtitles.

Review Questions

Short Answer Questions

1. What is the difference between an absolute URL and a relative URL?
2. Why should an image normally include width and height information?
3. What is the purpose of the scope attribute on a table header?
4. Why is a transcript useful for audio and video content?
5. State two risks associated with third-party iframes.

Long Answer Questions

1. Explain how srcset, sizes, and <picture> support responsive image delivery. Include the difference between resolution switching and art direction.
2. Discuss the accessibility requirements of an educational video, including captions, transcripts, controls, and alternatives.
3. Compare JPEG, PNG, SVG, WebP, and AVIF, giving an appropriate use and limitation for each.
4. Explain how semantic tables differ from tables used for page layout, and describe a responsive implementation strategy.
5. Describe a complete workflow for publishing licensed, responsive, and maintainable media on a university website.

Analytical / Application Questions

1. A course page loads a 6 MB photograph, an autoplay video, and an interactive map below the fold. Analyse the likely performance, accessibility, privacy, and governance problems, then propose a prioritised solution.
2. Design the HTML structure for a page containing a product photograph, a price table, a product demonstration video, and a downloadable transcript. Justify each semantic element and fallback.
3. A website uses an external social-media iframe that tracks visitors and changes its content without notice. Evaluate the technical and ethical options available to the site owner, including consent, sandboxing, replacement, and monitoring.

Multiple Choice Questions with Answers

Question 1

Which attribute provides a text alternative for an informative image?

A. title

B. alt

C. caption

D. description

Correct Answer: B. alt

Question 2

What is the main purpose of the sizes attribute used with responsive images?

A. To define the image licence

B. To describe the image’s expected rendered width

C. To set the image’s intrinsic height

D. To provide a video fallback

Correct Answer: B. To describe the image’s expected rendered width

Question 3

Which HTML element semantically groups media with its caption?

A. section

B. figure

C. article

D. aside

Correct Answer: B. figure

Question 4

Which element identifies a table’s column or row heading?

A. td

B. caption

C. th

D. thead

Correct Answer: C. th

Question 5

What is a primary accessibility benefit of captions?

A. They compress video files

B. They provide text access to spoken dialogue and relevant sounds

C. They prevent all autoplay restrictions

D. They replace the video poster

Correct Answer: B. They provide text access to spoken dialogue and relevant sounds

Question 6

Which attribute commonly defers an off-screen image until it is likely to be needed?

A. defer

B. async

C. loading="lazy"

D. poster

Correct Answer: C. loading="lazy"

Question 7

What is a significant concern when using third-party iframe content?

A. It always disables CSS

B. It can introduce privacy, security, and availability dependencies

C. It cannot display interactive content

D. It automatically becomes accessible

Correct Answer: B. It can introduce privacy, security, and availability dependencies

Question 8

Which format is generally resolution-independent and suitable for logos and diagrams?

A. JPEG

B. GIF

C. SVG

D. MP3

Correct Answer: C. SVG

Question 9

What does a canonical URL identify?

A. The preferred URL for equivalent content

B. The physical location of a server

C. The audio codec used by a page

D. The table’s primary key

Correct Answer: A. The preferred URL for equivalent content

Question 10

Why should essential information not be placed only inside an image?

A. Images cannot be cached

B. It may be inaccessible to users who cannot see or load the image

C. Images always have poor colour

D. Browsers cannot display text in images

Correct Answer: B. It may be inaccessible to users who cannot see or load the image