Choosing image formats, writing accessible alt text, optimizing performance, captioning media, embedding video, and using images responsibly
Visual and media content are central to almost every website. Images communicate meaning faster than paragraphs. Video explains what text alone cannot. Audio extends reach to learners and users who prefer listening. But images and media also carry responsibilities: they must be described for users who cannot see them, they must load efficiently so pages stay fast, and they must be used with attention to copyright and attribution.
In this chapter, you learn how to use images and media thoughtfully, correctly, and accessibly — not as decoration dropped onto a page, but as content that must be referenced correctly, described meaningfully, sized efficiently, and sourced ethically.
A news site needs a photograph to appear almost instantly for a reader on a slow mobile connection. A travel blog wants a screen reader user to experience the same sense of place that a photo of a cathedral at sunset gives a sighted visitor. A student club embeds a recruitment video hosted on YouTube directly into its homepage. A nonprofit wants to use a striking photograph it found online without breaking copyright law. What do these four situations have in common? Each one depends on the same small set of HTML tools — and the same set of habits — covered in this chapter: correct markup, accessible description, efficient sizing, and responsible sourcing.
By the end of this chapter, you should be able to:
img element using src, alt, width, and height.figure and figcaption to provide a visible caption, and explain how a caption differs from alt text.audio and video elements, including controls, multiple source formats, and captions.iframe, including a required title attribute.img Elementsrc and alt attributes; width and height; void elements; preventing layout shiftfigure and figcaptionWrapping images with visible captions; how captions differ from alt text; when to use figurevideo and audio elements; controls; multiple source formats; captions and transcriptsiframe element; embedding external video players; performance, privacy, and accessibility considerationsOpen almost any website and images appear immediately. A news site leads with photographs. A recipe blog places a finished dish front and center. A school homepage features students and faculty. An online store shows every product from multiple angles. Images are so common on the web that it can be easy to treat them casually — drop one in, move on.
But images on the web carry more responsibility than they might first appear.
An image that lacks a text description is invisible to a screen reader user. An image stored at full camera resolution may add several megabytes to a page that should load in under two seconds. An image with a broken file path shows a placeholder icon that confuses users. An image copied from another website without permission may violate copyright law.
Learning to use images well means learning four things together:
img element.This chapter builds all four skills. By the end, you will be able to place images that display correctly, load efficiently, communicate meaning to every user, and credit their sources honestly.
Not all image files work the same way. Different formats trade off file size, image quality, transparency support, and animation support differently. Choosing the right format matters for both visual quality and page performance.
| Image Type | Recommended Format |
|---|---|
| Photograph | JPEG or WebP |
| Logo or icon | SVG or PNG |
| Image with transparency | PNG or WebP |
| Simple animation | GIF |
| Scalable illustration | SVG |
img ElementHTML uses the img element to embed images in a page. Unlike most HTML elements, img is a void element — it does not have a closing tag. It takes attributes that specify the image source and its accessible description.
The most basic img element looks like this:
<img src="images/dog.jpg" alt="A golden retriever running through autumn leaves">This single line tells the browser three things: what kind of content this is (an image), where to find the image file (the src attribute), and what the image shows for users who cannot see it (the alt attribute).
The src attribute provides the path to the image file. The path follows exactly the same rules as links in Chapter 7: it can be a relative path to a file in your project, or an absolute URL to an image on another server.
<!-- Relative path: image is inside an images/ folder -->
<img src="images/hero.jpg" alt="Students collaborating on a project">
<!-- Relative path: image is in the same folder as the HTML file -->
<img src="logo.png" alt="MGU Computer Science logo">
<!-- Absolute path: image from another server -->
<img src="https://example.com/images/photo.jpg" alt="A view of the campus">Relative paths are almost always preferable for images that belong to your project. They keep your project self-contained and continue to work even if the project moves to a different server.
If the src path is broken — because the file is missing, the filename is misspelled, or the folder structure is wrong — the browser will display a broken image placeholder. This is one of the most common beginner web development errors and is almost always caused by a path mistake. Review Chapter 3 if paths feel uncertain.
The alt attribute provides a text alternative for the image. It is used by:
The alt attribute is not optional for meaningful images. Omitting it entirely is an accessibility failure. How to write good alt text is covered in detail in Section 8.5. For now, the key rule is: describe what the image shows and why it matters in context.
The width and height attributes specify the display dimensions of an image in pixels.
<img src="images/portrait.jpg" alt="Dr. Reyes, department chair" width="300" height="400">Setting these attributes in HTML gives the browser important information: it knows how much space to reserve for the image before the file finishes downloading. Without them, the browser must wait for the image to load before it knows its size, which causes layout shifts — sudden page jumps that are visually disruptive and considered a performance problem.
For these attributes to work correctly without distortion, they should reflect the image's actual aspect ratio (or you can control display size with CSS and use the attributes only for layout reservation).
Setting width and height in HTML is used primarily for layout reservation, not for resizing images. You will learn how to properly scale and size images with CSS in Part III. For now, use the attributes when you know the image dimensions and want to prevent layout shifts.
Web projects keep images organized in dedicated folders. A clean, common structure looks like this:
web-project/
index.html
about.html
css/
main.css
js/
main.js
images/
logo.svg
hero.jpg
portrait-reyes.jpg
gallery/
photo-01.jpg
photo-02.jpg
photo-03.jpgWhen writing the src attribute, the path must be written relative to the HTML file that contains the img element — not relative to the project root, not relative to the CSS file, not relative to wherever you happen to be thinking from.
If index.html is at the root of the project and the images folder is also at the root:
<!-- In index.html -->
<img src="images/hero.jpg" alt="A student working at a computer">
<img src="images/logo.svg" alt="MGU Computer Science">
<img src="images/gallery/photo-01.jpg" alt="Students at the spring showcase">If about.html is inside a pages/ subfolder, the path to the images folder must go up one level first:
<!-- In pages/about.html -->
<img src="../images/portrait-reyes.jpg" alt="Dr. Reyes, department chair">The ../ moves up one folder level. From inside pages/, going up one level reaches the project root, and then images/ finds the images folder.
Image filenames must follow the same rules as all web filenames:
| Poor Filename | Better Filename |
|---|---|
IMG_20240315.jpg | campus-entrance.jpg |
photo 1.jpg | workshop-lab-students.jpg |
LOGO FINAL v3.png | mgu-cs-logo.png |
image001.png | contact-form-header.png |
Descriptive filenames help you maintain large projects, help search engines understand content, and prevent the confusion of a folder full of files named image01 through image47.
Alternative text — the alt attribute value — is one of the most important accessibility tools in web development. It deserves careful attention.
When a screen reader encounters an image, it reads the alt text aloud. Without alt text, a screen reader may announce the filename or say "image" with no further information, leaving blind and low-vision users without the content that sighted users receive.
Alt text also matters when images fail to load, for example on a slow connection or when the path is broken. The alt text displays in place of the image and maintains meaning.
Good alt text is specific, accurate, and written for context.
Be specific. Vague alt text is nearly useless.
<!-- Poor alt text -->
<img src="images/dog.jpg" alt="dog">
<!-- Better alt text -->
<img src="images/dog.jpg" alt="A golden retriever puppy sitting on a porch step, wearing a red collar">Write for context. The right alt text depends on why the image is there. The same photograph of a bridge would receive different alt text on a travel blog ("The Ponte Vecchio stretching across the Arno River at dusk"), an engineering site ("A medieval arch bridge showing load distribution across three stone arches"), and a news article about flooding ("The Ponte Vecchio photographed at high water following recent storms").
Do not start with "Image of" or "Photo of." Screen readers already announce that something is an image. Starting the alt text with "Image of" is redundant.
<!-- Redundant -->
<img src="lab.jpg" alt="Photo of students in the computer lab">
<!-- Better -->
<img src="lab.jpg" alt="Students working at desktop computers in the CS lab">Keep alt text reasonably concise. Alt text is not a caption or an essay. It should communicate the essential meaning in one or two clear sentences. Very long alt text is exhausting to listen to.
Not every image carries meaning. Some images are purely decorative — dividing lines, abstract background patterns, small repeated design elements. These images do not need to communicate anything, and screen readers should skip them entirely.
For decorative images, use an empty alt attribute: alt="". Note that an empty alt attribute is different from a missing alt attribute.
<!-- Decorative background texture — screen reader should skip it -->
<img src="images/texture-bg.png" alt="">
<!-- Meaningful photograph — needs descriptive alt text -->
<img src="images/students-at-showcase.jpg" alt="Three students presenting their web projects at the spring showcase">An empty alt="" tells the screen reader: "This image is decorative. Skip it." A missing alt attribute tells the screen reader: "The developer forgot the alt text," and the reader may announce the filename instead.
If you removed the image and the page still communicated all its meaning, the image is probably decorative. If the image adds information a text reader would miss, it needs descriptive alt text.
Images that are also links (such as a logo that links to the homepage) serve a function. Their alt text should describe the function, not just the visual.
<!-- Logo as a link to the homepage -->
<a href="index.html">
<img src="images/mgu-logo.svg" alt="MGU Computer Science — Return to home page">
</a>Images are the largest contributors to page weight on most websites. A single full-resolution photograph from a modern camera can be 6–12 megabytes. A page with several unoptimized images can take fifteen seconds to load on a mobile connection — long enough for most users to give up and leave.
Performance is an accessibility and usability issue, not just a technical one. Users on slow connections, limited data plans, or older devices are disproportionately affected by large images. Optimizing images is one of the most effective things a web developer can do to make a site more usable for everyone.
The most common performance mistake is uploading large image files when only a small display size is needed.
If your page displays a thumbnail at 200 pixels wide, an image file 3000 pixels wide wastes the additional 2800 pixels entirely — the browser downloads all of them and then throws away most of the data. Save the image at approximately the size it will be displayed, with a modest extra factor for high-density screens.
| Display Use | Maximum File Width |
|---|---|
| Icon or thumbnail | 150–300 px |
| Card image | 400–600 px |
| Content image | 800–1200 px |
| Hero / banner image | 1400–2000 px |
These are starting points. Actual sizes depend on your layout. As you learn CSS in Part III, you will learn to design layouts that inform the right image dimensions.
Resizing is necessary but not sufficient. Images should also be compressed to reduce file size without unacceptable quality loss. Many free tools exist for this:
A JPEG photograph that starts at 4 MB can often be reduced to under 200 KB with minimal visible quality change. This is a 95% reduction in file size for the same visible result.
For learning and coursework, a useful starting target is: photographs under 200 KB each; simple graphics and PNG files under 50 KB each; SVG files are typically very small and rarely need further optimization.
These are not strict rules for all real-world sites, but they form reasonable habits during the learning phase.
figure and figcaptionWhen an image needs a visible caption — a brief label, a credit, a description that appears on the page — HTML provides two purpose-built elements: figure and figcaption.
The figure element wraps a piece of content that is referenced from the main text but could be removed without disrupting the flow of reading. This includes photographs, illustrations, diagrams, charts, code examples, and quotations.
The figcaption element provides a caption for the figure.
<figure>
<img src="images/flexbox-diagram.png" alt="Diagram showing flex container with three flex items arranged in a row along the main axis">
<figcaption>Figure 8.1: A flex container with three items. The main axis runs horizontally by default.</figcaption>
</figure>The figcaption can appear before or after the img inside the figure, though it more commonly appears after. Only one figcaption is allowed per figure.
A visible caption and alt text serve different users and different purposes. They are not substitutes for each other.
alt text is for users who cannot see the image at all. It should fully describe the image's meaning.figcaption is a visible label for all users. It might give a title, credit, source, or context.They can overlap in content, but they do not have to. A figure might have alt text that describes the technical content of a diagram, while the figcaption gives a figure number and title for sighted readers.
<figure>
<img
src="images/lab-exterior.jpg"
alt="The CS building entrance with glass doors, a concrete overhang, and students gathered near the steps"
width="800"
height="533">
<figcaption>The MGU Computer Science building, opened in 2019. Photo by Tomas Reyes.</figcaption>
</figure>Here the alt text describes what is in the photograph, while the figcaption gives context (the building name, year, and photo credit) that is useful for all readers.
Use figure when:
Do not wrap every image in a figure. A logo in a navigation bar, a decorative background image, or a small icon within a sentence does not need a figure wrapper.
HTML5 introduced native audio and video elements that allow browsers to play media without plugins. Before HTML5, embedding video required browser plugins like Flash, which were slow, insecure, and not available on mobile devices. Native HTML audio and video are now universally supported.
The video element embeds a video player directly in the page.
<video controls width="640" height="360">
<source src="videos/intro-to-flexbox.mp4" type="video/mp4">
<source src="videos/intro-to-flexbox.webm" type="video/webm">
<p>Your browser does not support the video element. <a href="videos/intro-to-flexbox.mp4">Download the video</a>.</p>
</video>This example introduces several important concepts:
The controls attribute adds browser-native playback controls: a play/pause button, a progress bar, a volume control, and a fullscreen button. Without controls, the video has no visible interface and users cannot interact with it. Always include controls for user-facing video.
Multiple source elements offer the video in different formats. Browsers do not all support the same video formats. Providing both MP4 (widely supported) and WebM (a smaller, open format) ensures most browsers can play the video. The browser picks the first format it can handle.
Fallback content inside the video element is displayed if the browser does not support video at all. This is rare in modern browsers but remains good practice.
| Attribute | Effect |
|---|---|
controls | Shows playback controls |
autoplay | Plays the video automatically (use with extreme caution — see note below) |
muted | Mutes audio on load |
loop | Replays video continuously |
poster | Specifies an image to show before the video plays |
width, height | Sets display dimensions |
Autoplay with sound is almost universally disliked by users. It disrupts reading, wastes mobile data, and is inaccessible to users who rely on screen readers. Most browsers now block autoplay with sound by default. If you ever use autoplay, pair it with muted. In most educational and informational contexts, do not autoplay at all.
Video accessibility requires work beyond the video element itself. Videos with speech need captions so Deaf users and hard-of-hearing users can access the content. Captions also help users in noisy environments, users learning the language, and search engines indexing the content.
The track element adds captions or subtitles to a video:
<video controls width="640" height="360">
<source src="videos/lesson-01.mp4" type="video/mp4">
<track
kind="captions"
src="captions/lesson-01-en.vtt"
srclang="en"
label="English captions"
default>
</video>Caption files use WebVTT format (.vtt), which is a plain text file that pairs timestamps with spoken text. Creating caption files is beyond this chapter's scope, but you should know that captioning is a responsibility, not an afterthought.
For video used in educational contexts, providing a written transcript is also good practice: it helps users who prefer to read, users who cannot play audio, and search engines.
The audio element works similarly to video but plays sound only.
<audio controls>
<source src="audio/pronunciation-guide.mp3" type="audio/mpeg">
<source src="audio/pronunciation-guide.ogg" type="audio/ogg">
<p>Your browser does not support audio. <a href="audio/pronunciation-guide.mp3">Download the audio file</a>.</p>
</audio>The controls attribute is equally important for audio. Without controls, the browser loads the audio file but users have no way to play it.
Audio content spoken in a recording should also have a transcript for Deaf users and users in environments where audio cannot be played.
Some media — especially videos from external platforms — is not hosted in your own project folder. Instead, it lives on external services like YouTube or Vimeo, and you embed a player from that service into your page.
The iframe element embeds a separate web document inside your page. It creates a rectangular frame that loads another URL.
The most common use is embedding external video players:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID_HERE"
title="Introduction to HTML — Web Development Lesson 1"
allowfullscreen>
</iframe>This code places a YouTube video player on the page. The video itself lives on YouTube's servers; your page only contains the embedded player.
On YouTube, click the Share button beneath a video, then choose Embed. YouTube generates the iframe code for you. Copy and paste it into your HTML. Similar options exist on Vimeo and other video platforms.
The title attribute on iframe is required for accessibility. Screen readers use it to announce what the embedded frame contains. Always describe the embedded content meaningfully.
allowfullscreen enables the fullscreen button in the embedded player.
title attribute on iframe is the primary accessibility tool. Use it carefully and describe the embedded content meaningfully.Downloading an image from a search engine or a website and placing it in your project is one of the most common mistakes beginning web developers make — and one of the most legally and ethically significant.
Almost every photograph, illustration, video, and audio recording is protected by copyright from the moment it is created. Copyright belongs to the creator (or whoever the creator assigns it to). Using a copyrighted work without permission is copyright infringement, even if: you found it through a search engine; you cannot identify the creator; you are not making money from it; you only use a small portion of it; or you add attribution after the fact.
For professional web development, copyright infringement can result in legal liability. For school projects, using copyrighted images without permission violates academic integrity standards even if legal consequences are unlikely.
The safe approach is to use images that have been explicitly licensed for reuse.
Creative Commons licenses allow creators to share their work with various levels of permission. Some require attribution; some prohibit commercial use; some allow modifications. The most permissive Creative Commons license (CC0) dedicates work to the public domain, allowing use for any purpose with no attribution required.
Sites offering legally usable images include:
Always read the specific license for any image you plan to use. Licenses vary. An image from a free photography site may still prohibit certain uses.
Using clearly licensed free images is the correct habit. Creating your own photographs or illustrations is always acceptable. Asking your teacher about permitted image sources is the right step when unsure.
Attribution means crediting the creator of an image or media file. Even when attribution is not legally required, it is good professional practice.
The figcaption element is a natural place for attribution:
<figure>
<img src="images/open-laptop.jpg" alt="An open laptop on a wooden desk beside a notebook and pen">
<figcaption>Photo by Domenico Loia on Unsplash.</figcaption>
</figure>A complete attribution typically includes: creator's name, title of the work (if applicable), source platform or URL, and license type.
<figure>
<img src="images/city-library.jpg" alt="The entrance of the main city library, a stone building with arched windows">
<figcaption>
"Main Library Entrance" by City Archives Photo Collection.
Licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
</figcaption>
</figure>The cleanest solution for student web projects is to use images you created yourself: photographs you took, sketches you drew, diagrams you made. Original work avoids copyright questions entirely and often produces images that fit your project's specific content better than stock photography can.
Goal: Create a small photo section for the MGU Student Learning Site that shows three campus locations. Each image should have proper alt text, a visible caption, and a photo credit. Images should be organized in a dedicated folder.
student-learning-site/
index.html
images/
cs-building.jpg
computer-lab.jpg
study-lounge.jpg<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campus Locations — MGU CS</title>
</head>
<body>
<main>
<h1>Campus Locations</h1>
<p>The MGU Computer Science program uses three main spaces. Here is a brief visual tour.</p>
<section>
<figure>
<img
src="images/cs-building.jpg"
alt="The exterior of the MGU Computer Science building, a four-story glass and concrete structure surrounded by maple trees"
width="800"
height="533">
<figcaption>The CS building houses classrooms, labs, and faculty offices. Photo by the MGU Communications Office.</figcaption>
</figure>
<figure>
<img
src="images/computer-lab.jpg"
alt="Rows of desktop computers in a bright classroom with large windows and students seated at workstations"
width="800"
height="533">
<figcaption>Lab 104, the primary teaching lab for introductory courses. Photo by the MGU Communications Office.</figcaption>
</figure>
<figure>
<img
src="images/study-lounge.jpg"
alt="An open lounge area with couches, small tables, and a large display screen showing a code editor"
width="800"
height="533">
<figcaption>The second-floor study lounge, available to CS students during open hours. Photo by the MGU Communications Office.</figcaption>
</figure>
</section>
</main>
</body>
</html>Review of this example: Each img element has a src pointing to an image inside the images/ folder (a relative path from index.html), a descriptive alt attribute that communicates the content of the photograph to users who cannot see it, and width and height attributes that match the image dimensions to help the browser reserve space during loading.
Each figure wraps one image and one figcaption. The figcaption gives a brief contextual description and a photo credit — information for all readers that complements but does not duplicate the alt text.
The section uses semantic HTML: a section element groups the related figures, and a main element wraps the page's primary content.
img element is a void element using src for the file path and alt for a text description. width and height reserve layout space and help prevent layout shift.img element. Clean project structure keeps images in a dedicated folder. Filenames should be lowercase, hyphenated, and descriptive.alt="" so screen readers skip them; functional images describe their purpose.figure and figcaption provide a visible caption for an image. A caption is not a substitute for alt text — captions serve all readers, while alt text serves users who cannot see the image.video and audio elements embed native media. controls is essential, multiple source elements support different browsers, and the track element adds captions for accessibility.iframe element embeds external content such as YouTube video players. A meaningful title attribute is required for accessibility. Performance, privacy, and reliability are real tradeoffs of embedding.img element is a void element.alt attribute of an img element, communicating image content to users who cannot see the image.alt="" so screen readers skip it.figure.video or audio that specifies a media file and its format.video or audio element.Answer these questions before beginning the full review activities. They check basic understanding, not deep analysis.
img element need?src?alt="" attribute tell a screen reader, and how is that different from a missing alt attribute?video element, and what attribute is required for accessibility on an iframe?figcaption?figcaption serve different audiences and different purposes. Alt text is for users who cannot see the image at all and should fully describe its meaning. A figcaption is a visible label for every reader and might give a title, credit, or context. They can overlap, but writing only one leaves either sighted readers or screen reader users without information the other group receives.width and height attributes primarily tell the browser how much space to reserve for the image before it loads, preventing layout shift. They do not compress or optimize the underlying file — an oversized image file with small width and height attributes still downloads at its full file size. Actual image dimensions should be resized and compressed before upload, as covered in Section 8.6.alt="" so screen readers skip them entirely. Giving a decorative image descriptive alt text forces screen reader users to listen to irrelevant description for content that carries no meaning. The rule of thumb: if removing the image would not remove any meaning from the page, it is decorative.Read each code block and answer the questions that follow.
<img src="photos/workshop.jpg" alt="Students at computers in the afternoon workshop session" width="640" height="427">alt attribute communicate?width and height attributes tell the browser?<figure>
<img src="images/river-trail.jpg" alt="A narrow dirt trail winding along a tree-lined riverbank in early spring">
<figcaption>The Westfield River Trail, April 2024. Photo by K. Okonkwo.</figcaption>
</figure>figure element here?alt text and the figcaption text? What does each one serve?<img src="images/divider.png" alt="">alt="" indicate about this image?alt="" different from omitting the alt attribute entirely?<video controls poster="images/lesson-thumbnail.jpg" width="720" height="405">
<source src="videos/lesson-02-css-intro.mp4" type="video/mp4">
<source src="videos/lesson-02-css-intro.webm" type="video/webm">
<p>Video playback is not supported. <a href="videos/lesson-02-css-intro.mp4">Download the video</a>.</p>
</video>controls attribute add to this video?poster attribute used for?source elements provided?<p> element's content be shown?A student's file structure is:
site/
about.html
images/
team-photo.jpg<img src="team-photo.jpg" alt="The full development team gathered outside the office">Predict: will the image display correctly? If not, what is wrong, and what should the path be?
<img src="images/logo.svg">Predict: what will a screen reader announce when it encounters this element? What should the student fix?
Exercise 8.7 — Find the error in each code block and explain how to fix it.
<img src="images/banner.jpg"><figure>
<figcaption>Diagram 3: Box model layers.</figcaption>
<img src="images/box-model.png" alt="">
</figure><video width="640" height="360">
<source src="videos/overview.mp4" type="video/mp4">
</video><img src="Images/Portrait.JPG" alt="A portrait photograph of the team lead">The file is actually stored as images/portrait.jpg. The page will work on a Windows computer but may fail when deployed to a web server. Explain why.
img element for a photograph stored at images/campus-library.jpg. Write alt text that describes a library building with glass doors and stone walls. Add appropriate width and height values.images/grid-layout-diagram.png in a figure element. Write meaningful alt text that describes the diagram's content. Add a figcaption that gives the figure a number and title and credits the creator as "MGU Web Development Program."images/divider-line.svg. Write the correct img element for this decorative image.video element for a file stored at videos/flexbox-intro.mp4. Include a WebM alternative at videos/flexbox-intro.webm. Add playback controls, a poster image at images/flexbox-poster.jpg, and a fallback paragraph with a download link.title attribute that describes the content: "Introduction to web accessibility, presented by the MGU CS department."
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/exampleID"
allowfullscreen>
</iframe>Review the following page section and identify every accessibility problem you can find. For each problem, explain what is wrong and how to fix it.
<section>
<h2>Our Team</h2>
<img src="photos/director.jpg">
<img src="photos/team-group.jpg" alt="image of team">
<a href="index.html">
<img src="images/home-icon.png">
</a>
<figure>
<img src="images/office.jpg" alt="The office, a modern open-plan workspace with plants and natural lighting">
</figure>
</section>portfolio/
index.html
projects/
project-01.html
images/
profile-photo.jpg
project-01-screenshot.pngsrc path for the profile-photo.jpg image as it would appear in index.html. Then write the correct src path for the same image as it would appear in projects/project-01.html.
figure, figcaption, and meaningful alt text contribute to a document that is meaningful to all users?images/mgu-logo.svg that links back to index.html. Write alt text appropriate for a functional linked image.Build a page for the MGU Student Learning Site called gallery.html. The page presents a visual tour of five locations. Each location has a photograph, a title, descriptive alt text, a caption, and a photo credit.
lang, charset, and viewport metadata.main element containing the gallery content.h1 heading for the page title.figure elements, each containing one img and one figcaption.figcaption.images/gallery/ subfolder with correctly written relative paths.Use placeholder image services such as https://placehold.co/800x533 for development, and write alt text as if describing real photographs. When real images are available, replace the placeholder URLs with correct relative paths.
img has a meaningful alt attribute.figure includes a figcaption with a caption and credit.gallery.html.img element with src, alt, width, and height.figcaption differs from alt text.controls and multiple source formats.track element.iframe with a meaningful title attribute.figure and figcaption.Chapter 9 introduces three additional content structures you will use throughout your web development work: lists, tables, and forms. You have already seen that HTML provides ordered and unordered lists — but HTML also provides description lists for term-and-definition pairs, and tables for presenting rows and columns of data. Forms introduce a new category: interactive elements that allow users to enter and submit information. Chapter 9 teaches how to build all three correctly, and it returns to an important theme: accessibility. Tables need headers and captions so their structure is clear to all users, and form inputs need labels so screen readers can connect each field to its purpose.