WGU C777 OBJECTIVE ASSESSMENT
2026/2027 TEST BANK WITH 350 QUESTIONS
AND CORRECT VERIFIED ANSWERS / C777 OA
WEB DEVELOPMENT APPLICATIONS (MOST
RECENT!) 2026/2027
350 Scenario-Based Multiple-Choice Questions
6 Comprehensive Sections
Correct Answers with Detailed Rationales
Passing Score: 75% (263/350)
Updated: August 2026
SECTIONS:
1. Section 1: HTML Structure and Semantic Markup
2. Section 2: CSS Styling, Layout, and Design
3. Section 3: JavaScript Programming and DOM Manipulation
4. Section 4: Responsive Design and Web Accessibility
5. Section 5: Web APIs, Frameworks, and Libraries
6. Section 6: Web Performance, Security, and Deployment
,TABLE OF CONTENTS
Section 1: HTML Structure and Semantic Markup Questions 1-60
Section 2: CSS Styling, Layout, and Design Questions 61-120
Section 3: JavaScript Programming and DOM Manipulation Questions 121-180
Section 4: Responsive Design and Web Accessibility Questions 181-240
Section 5: Web APIs, Frameworks, and Libraries Questions 241-300
Section 6: Web Performance, Security, and Deployment Questions 301-350
Total Questions: 350
Passing Score: 75% (263/350)
Answer Key: Located at the end of this document
,Section 1: HTML Structure and Semantic Markup
Q1. A development team is building the header for a news website. The layout includes a logo, a
set of navigation links, and a search form. To ensure the markup is semantic and accessible to
screen readers, which HTML5 element should wrap the logo and navigation links?
A. <div id='header'>
B. <header> [CORRECT]
C. <section>
D. <article>
Rationale: The <header> element is the correct semantic HTML5 element for introductory content or navigation links. <div> is
non-semantic. <section> is a generic thematic grouping. <article> is for self-contained content that could stand alone.
Q2. A developer is marking up the main content area of a blog page that contains a series of
posts. Each post has a title, author, date, and body text. To ensure the content is properly
structured for accessibility and SEO, which element should be used for each individual blog
post?
A. <section>
B. <div>
C. <article> [CORRECT]
D. <aside>
Rationale: The <article> element represents a self-contained composition that could be independently distributed. A blog post
is a classic example. <section> is a generic thematic grouping. <div> is non-semantic. <aside> is for tangentially related
content.
Q3. A developer is creating a sidebar that contains related links and an advertisement widget on
a product page. To ensure the markup is semantically correct and distinguishable from the main
content, which HTML5 element should be used?
A. <section>
B. <nav>
C. <aside> [CORRECT]
D. <article>
Rationale: The <aside> element is designed for content tangentially related to the surrounding content, such as sidebars,
related links, and advertisements. <section> is a generic thematic grouping. <nav> is for major navigation blocks. <article> is
for self-contained content.
Q4. A developer is building a navigation menu for a corporate website with links to Home,
About, Services, and Contact. To ensure screen readers can identify the navigation region and
assistive technology can skip it, which HTML5 element should wrap the navigation links?
A. <div class='nav'>
B. <menu>
C. <nav> [CORRECT]
D. <section>
Rationale: The <nav> element is specifically intended for major navigation blocks. Screen readers can identify it as a
navigation landmark and allow users to skip it. <div> is non-semantic. <menu> is not the standard semantic element for
navigation. <section> is too generic.
Q5. A developer is building a contact form with fields for name, email, phone number, and
message. The phone number field should only accept valid phone formats on mobile devices.
Which input type should be used for the phone number field to trigger the appropriate virtual
keyboard on mobile browsers?
A. <input type='text'>
B. <input type='tel'> [CORRECT]
, C. <input type='number'>
D. <input type='phone'>
Rationale: The <input type='tel'> is the correct HTML5 input type for telephone numbers. It triggers the numeric keypad on
mobile devices while accepting formatting characters. <input type='text'> provides no special keyboard. <input type='number'>
does not allow dashes or parentheses. <input type='phone'> is not a valid HTML5 type.
Q6. A developer is creating a date picker for a hotel reservation system. The input should
restrict users to selecting dates in the future and should display a calendar widget on supported
browsers. Which HTML5 input type is the most appropriate choice for this requirement?
A. <input type='text' placeholder='YYYY-MM-DD'>
B. <input type='date'> [CORRECT]
C. <input type='datetime'>
D. <input type='calendar'>
Rationale: The <input type='date'> is the correct HTML5 input type for date selection. It provides a built-in calendar widget and
accepts min/max attributes to restrict dates. <input type='text'> lacks native date picker support. <input type='datetime'> is not
supported in all browsers. <input type='calendar'> is not a valid HTML5 type.
Q7. A developer is building a video player page and wants to provide fallback content for
browsers that do not support the native video element. Additionally, multiple video formats
should be offered to maximize browser compatibility. Which HTML5 element structure achieves
this goal?
A. <video src='movie.mp4'><p>Fallback</p></video>
B. <video><source src='movie.mp4' type='video/mp4'><source src='movie.webm'
type='video/webm'><p>Fallback</p></video> [CORRECT]
C. <video><track src='movie.mp4'><p>Fallback</p></video>
D. <video autoplay><embed src='movie.mp4'></video>
Rationale: The correct approach is to use multiple <source> elements inside <video> with different formats (MP4, WebM, etc.),
followed by fallback content. This allows the browser to choose the first supported format. Using a single src attribute provides
no format fallback. <track> is for captions, not video sources. <embed> is a non-HTML5 fallback method.
Q8. A developer is building an image gallery where each image needs an accompanying caption
that is semantically associated with the image. To ensure the caption is programmatically linked
to the image for screen readers, which HTML5 element structure should be used?
A. <div class='image'><img src='pic.jpg'><p>Caption</p></div>
B. <figure><img src='pic.jpg'><figcaption>Caption</figcaption></figure> [CORRECT]
C. <section><img src='pic.jpg'><caption>Caption</caption></section>
D. <article><img src='pic.jpg'><label>Caption</label></article>
Rationale: The <figure> and <figcaption> elements are the correct HTML5 semantic pairing for images with captions.
<figcaption> is explicitly designed for figure captions and is programmatically associated. <div> is non-semantic. <caption> is
for tables. <label> is for form elements.
Q9. A developer is building an e-commerce checkout page and needs to group related form
fields under a heading. The group includes shipping address fields: street, city, state, and zip
code. To improve accessibility and associate the group with its label, which HTML5 element
should be used?
A. <div class='group'>
B. <section>
C. <fieldset> [CORRECT]
D. <group>
Rationale: The <fieldset> element is designed to group related form controls, and it can be labeled with <legend>. This is the
correct semantic structure for grouping related fields. <div> is non-semantic. <section> is too generic. <group> is not a valid
HTML element.
2026/2027 TEST BANK WITH 350 QUESTIONS
AND CORRECT VERIFIED ANSWERS / C777 OA
WEB DEVELOPMENT APPLICATIONS (MOST
RECENT!) 2026/2027
350 Scenario-Based Multiple-Choice Questions
6 Comprehensive Sections
Correct Answers with Detailed Rationales
Passing Score: 75% (263/350)
Updated: August 2026
SECTIONS:
1. Section 1: HTML Structure and Semantic Markup
2. Section 2: CSS Styling, Layout, and Design
3. Section 3: JavaScript Programming and DOM Manipulation
4. Section 4: Responsive Design and Web Accessibility
5. Section 5: Web APIs, Frameworks, and Libraries
6. Section 6: Web Performance, Security, and Deployment
,TABLE OF CONTENTS
Section 1: HTML Structure and Semantic Markup Questions 1-60
Section 2: CSS Styling, Layout, and Design Questions 61-120
Section 3: JavaScript Programming and DOM Manipulation Questions 121-180
Section 4: Responsive Design and Web Accessibility Questions 181-240
Section 5: Web APIs, Frameworks, and Libraries Questions 241-300
Section 6: Web Performance, Security, and Deployment Questions 301-350
Total Questions: 350
Passing Score: 75% (263/350)
Answer Key: Located at the end of this document
,Section 1: HTML Structure and Semantic Markup
Q1. A development team is building the header for a news website. The layout includes a logo, a
set of navigation links, and a search form. To ensure the markup is semantic and accessible to
screen readers, which HTML5 element should wrap the logo and navigation links?
A. <div id='header'>
B. <header> [CORRECT]
C. <section>
D. <article>
Rationale: The <header> element is the correct semantic HTML5 element for introductory content or navigation links. <div> is
non-semantic. <section> is a generic thematic grouping. <article> is for self-contained content that could stand alone.
Q2. A developer is marking up the main content area of a blog page that contains a series of
posts. Each post has a title, author, date, and body text. To ensure the content is properly
structured for accessibility and SEO, which element should be used for each individual blog
post?
A. <section>
B. <div>
C. <article> [CORRECT]
D. <aside>
Rationale: The <article> element represents a self-contained composition that could be independently distributed. A blog post
is a classic example. <section> is a generic thematic grouping. <div> is non-semantic. <aside> is for tangentially related
content.
Q3. A developer is creating a sidebar that contains related links and an advertisement widget on
a product page. To ensure the markup is semantically correct and distinguishable from the main
content, which HTML5 element should be used?
A. <section>
B. <nav>
C. <aside> [CORRECT]
D. <article>
Rationale: The <aside> element is designed for content tangentially related to the surrounding content, such as sidebars,
related links, and advertisements. <section> is a generic thematic grouping. <nav> is for major navigation blocks. <article> is
for self-contained content.
Q4. A developer is building a navigation menu for a corporate website with links to Home,
About, Services, and Contact. To ensure screen readers can identify the navigation region and
assistive technology can skip it, which HTML5 element should wrap the navigation links?
A. <div class='nav'>
B. <menu>
C. <nav> [CORRECT]
D. <section>
Rationale: The <nav> element is specifically intended for major navigation blocks. Screen readers can identify it as a
navigation landmark and allow users to skip it. <div> is non-semantic. <menu> is not the standard semantic element for
navigation. <section> is too generic.
Q5. A developer is building a contact form with fields for name, email, phone number, and
message. The phone number field should only accept valid phone formats on mobile devices.
Which input type should be used for the phone number field to trigger the appropriate virtual
keyboard on mobile browsers?
A. <input type='text'>
B. <input type='tel'> [CORRECT]
, C. <input type='number'>
D. <input type='phone'>
Rationale: The <input type='tel'> is the correct HTML5 input type for telephone numbers. It triggers the numeric keypad on
mobile devices while accepting formatting characters. <input type='text'> provides no special keyboard. <input type='number'>
does not allow dashes or parentheses. <input type='phone'> is not a valid HTML5 type.
Q6. A developer is creating a date picker for a hotel reservation system. The input should
restrict users to selecting dates in the future and should display a calendar widget on supported
browsers. Which HTML5 input type is the most appropriate choice for this requirement?
A. <input type='text' placeholder='YYYY-MM-DD'>
B. <input type='date'> [CORRECT]
C. <input type='datetime'>
D. <input type='calendar'>
Rationale: The <input type='date'> is the correct HTML5 input type for date selection. It provides a built-in calendar widget and
accepts min/max attributes to restrict dates. <input type='text'> lacks native date picker support. <input type='datetime'> is not
supported in all browsers. <input type='calendar'> is not a valid HTML5 type.
Q7. A developer is building a video player page and wants to provide fallback content for
browsers that do not support the native video element. Additionally, multiple video formats
should be offered to maximize browser compatibility. Which HTML5 element structure achieves
this goal?
A. <video src='movie.mp4'><p>Fallback</p></video>
B. <video><source src='movie.mp4' type='video/mp4'><source src='movie.webm'
type='video/webm'><p>Fallback</p></video> [CORRECT]
C. <video><track src='movie.mp4'><p>Fallback</p></video>
D. <video autoplay><embed src='movie.mp4'></video>
Rationale: The correct approach is to use multiple <source> elements inside <video> with different formats (MP4, WebM, etc.),
followed by fallback content. This allows the browser to choose the first supported format. Using a single src attribute provides
no format fallback. <track> is for captions, not video sources. <embed> is a non-HTML5 fallback method.
Q8. A developer is building an image gallery where each image needs an accompanying caption
that is semantically associated with the image. To ensure the caption is programmatically linked
to the image for screen readers, which HTML5 element structure should be used?
A. <div class='image'><img src='pic.jpg'><p>Caption</p></div>
B. <figure><img src='pic.jpg'><figcaption>Caption</figcaption></figure> [CORRECT]
C. <section><img src='pic.jpg'><caption>Caption</caption></section>
D. <article><img src='pic.jpg'><label>Caption</label></article>
Rationale: The <figure> and <figcaption> elements are the correct HTML5 semantic pairing for images with captions.
<figcaption> is explicitly designed for figure captions and is programmatically associated. <div> is non-semantic. <caption> is
for tables. <label> is for form elements.
Q9. A developer is building an e-commerce checkout page and needs to group related form
fields under a heading. The group includes shipping address fields: street, city, state, and zip
code. To improve accessibility and associate the group with its label, which HTML5 element
should be used?
A. <div class='group'>
B. <section>
C. <fieldset> [CORRECT]
D. <group>
Rationale: The <fieldset> element is designed to group related form controls, and it can be labeled with <legend>. This is the
correct semantic structure for grouping related fields. <div> is non-semantic. <section> is too generic. <group> is not a valid
HTML element.
