WGU C777 Web Development Applications |
Western Governors University | Academic
Year 2026/2027
Section 1: HTML5 Structure & Semantic Elements
Question 1
A developer is building a blog and needs the top banner with the company logo
and navigation menu to be recognized as the page header by assistive technology.
Which approach best achieves this?
A) Use a <div class="header"> for the banner
B) Use the semantic <header> element
C) Use <section> without a heading
D) Use <footer> at the top of the page
Correct Answer: B
Rationale: The <header> element provides native semantic meaning for
introductory content, including logos and navigation. A generic <div> lacks native
semantics for assistive technology and SEO. <section> without a heading is
semantically incomplete, and <footer> is designed for closing content, not
headers.
Question 2
A web page renders in quirks mode. A developer inspects the first line of the
HTML source to diagnose the issue. What is the most likely cause?
A) Too many CSS links in the head
B) Missing or incorrect <!DOCTYPE html> declaration
C) Scripts placed only in the <head> section
D) Images without width attributes
Correct Answer: B
, Rationale: A missing or invalid DOCTYPE triggers quirks mode. HTML5 uses
<!DOCTYPE html> to instruct the browser to render in standards mode. Without
it, browsers may use legacy rendering rules that cause inconsistent layout
behavior.
Question 3
A product image fails an accessibility audit because screen readers cannot
describe it. What should the developer add?
A) Only a title attribute
B) Use background-image only
C) A meaningful alt attribute
D) Remove the image entirely
Correct Answer: C
Rationale: The alt attribute supplies alternative text required for
informative images. Screen readers rely on this attribute to convey the image's
content. A title attribute is insufficient as the primary accessibility mechanism.
Question 4
An email field is not announced properly when focused by a keyboard user. Which
issue most likely causes this?
A) Missing name attribute only
B) Form method is GET
C) Input type is text instead of email
D) Input not associated with a <label> via for/id
Correct Answer: D
Rationale: Explicit label association via the for attribute is required for
accessible form controls. Without it, screen readers cannot programmatically
determine which label describes the input.
,Question 5
A mobile site appears zoomed out on smartphones. The developer reviews the
document head. What is the most likely cause?
A) Missing viewport meta tag
B) Missing charset declaration only
C) Too many scripts in the head
D) Using table-based layout
Correct Answer: A
Rationale: The viewport meta tag controls mobile scaling. Without it,
mobile browsers render pages at a default desktop width, causing content to
appear zoomed out. The correct declaration is <meta name="viewport"
content="width=device-width, initial-scale=1.0">.
Question 6
A developer needs a self-contained section of content with its own heading that
could be syndicated independently. Which element is most appropriate?
A) <div> only
B) <section> with a heading
C) <span>
D) <br> tags
Correct Answer: B
Rationale: The <section> element represents a thematic grouping of
content and should include a heading. For self-contained compositions like blog
posts or forum entries, <article> is more appropriate, but <section> with a
heading provides proper semantic structure for thematic grouping.
Question 7
Navigation links for the main menu should be marked up for structure and
accessibility. Which approach is best?
, A) Plain text separated by pipe characters
B) Only <a> tags with no container
C) A <nav> element containing a list of links
D) A table of links
Correct Answer: C
Rationale: The <nav> element identifies major navigation blocks for
assistive technologies. Organizing links within a list improves structure and
accessibility, allowing screen readers to announce the number of items in the
navigation region.
Question 8
A long article needs a footer with author information and related links specific to
that article. What should the developer use?
A) Page-level <footer> only
B) A <div> at the bottom of <body>
C) Meta tags only
D) An article-scoped <footer>
Correct Answer: D
Rationale: The <footer> element can be scoped to an <article> element,
providing semantic meaning for article-specific footer content such as author
information, related links, or publication dates.
Question 9
Which HTML5 element is used to define independent, self-contained content that
could be distributed and reused, such as a forum post or magazine article?
A) <section>
B) <article>
C) <div>
D) <aside>
Western Governors University | Academic
Year 2026/2027
Section 1: HTML5 Structure & Semantic Elements
Question 1
A developer is building a blog and needs the top banner with the company logo
and navigation menu to be recognized as the page header by assistive technology.
Which approach best achieves this?
A) Use a <div class="header"> for the banner
B) Use the semantic <header> element
C) Use <section> without a heading
D) Use <footer> at the top of the page
Correct Answer: B
Rationale: The <header> element provides native semantic meaning for
introductory content, including logos and navigation. A generic <div> lacks native
semantics for assistive technology and SEO. <section> without a heading is
semantically incomplete, and <footer> is designed for closing content, not
headers.
Question 2
A web page renders in quirks mode. A developer inspects the first line of the
HTML source to diagnose the issue. What is the most likely cause?
A) Too many CSS links in the head
B) Missing or incorrect <!DOCTYPE html> declaration
C) Scripts placed only in the <head> section
D) Images without width attributes
Correct Answer: B
, Rationale: A missing or invalid DOCTYPE triggers quirks mode. HTML5 uses
<!DOCTYPE html> to instruct the browser to render in standards mode. Without
it, browsers may use legacy rendering rules that cause inconsistent layout
behavior.
Question 3
A product image fails an accessibility audit because screen readers cannot
describe it. What should the developer add?
A) Only a title attribute
B) Use background-image only
C) A meaningful alt attribute
D) Remove the image entirely
Correct Answer: C
Rationale: The alt attribute supplies alternative text required for
informative images. Screen readers rely on this attribute to convey the image's
content. A title attribute is insufficient as the primary accessibility mechanism.
Question 4
An email field is not announced properly when focused by a keyboard user. Which
issue most likely causes this?
A) Missing name attribute only
B) Form method is GET
C) Input type is text instead of email
D) Input not associated with a <label> via for/id
Correct Answer: D
Rationale: Explicit label association via the for attribute is required for
accessible form controls. Without it, screen readers cannot programmatically
determine which label describes the input.
,Question 5
A mobile site appears zoomed out on smartphones. The developer reviews the
document head. What is the most likely cause?
A) Missing viewport meta tag
B) Missing charset declaration only
C) Too many scripts in the head
D) Using table-based layout
Correct Answer: A
Rationale: The viewport meta tag controls mobile scaling. Without it,
mobile browsers render pages at a default desktop width, causing content to
appear zoomed out. The correct declaration is <meta name="viewport"
content="width=device-width, initial-scale=1.0">.
Question 6
A developer needs a self-contained section of content with its own heading that
could be syndicated independently. Which element is most appropriate?
A) <div> only
B) <section> with a heading
C) <span>
D) <br> tags
Correct Answer: B
Rationale: The <section> element represents a thematic grouping of
content and should include a heading. For self-contained compositions like blog
posts or forum entries, <article> is more appropriate, but <section> with a
heading provides proper semantic structure for thematic grouping.
Question 7
Navigation links for the main menu should be marked up for structure and
accessibility. Which approach is best?
, A) Plain text separated by pipe characters
B) Only <a> tags with no container
C) A <nav> element containing a list of links
D) A table of links
Correct Answer: C
Rationale: The <nav> element identifies major navigation blocks for
assistive technologies. Organizing links within a list improves structure and
accessibility, allowing screen readers to announce the number of items in the
navigation region.
Question 8
A long article needs a footer with author information and related links specific to
that article. What should the developer use?
A) Page-level <footer> only
B) A <div> at the bottom of <body>
C) Meta tags only
D) An article-scoped <footer>
Correct Answer: D
Rationale: The <footer> element can be scoped to an <article> element,
providing semantic meaning for article-specific footer content such as author
information, related links, or publication dates.
Question 9
Which HTML5 element is used to define independent, self-contained content that
could be distributed and reused, such as a forum post or magazine article?
A) <section>
B) <article>
C) <div>
D) <aside>
