WDE™ Exam Syllabus

Exam: WDE™ – Certified Entry-Level Web Developer

Exam Version: WDE-40-01

Status: ACTIVE

The WDE exam consists of 40 single-select and multiple-select items that assess a candidate’s ability to write semantic HTML and apply foundational CSS to create well-structured, responsive, and accessible web pages. Coverage centers on core document structure, content organization, links and media, forms with basic styling, and essential accessibility and modern HTML practices.

Each item is worth a maximum of 10 points. After completion, the candidate’s raw score is normalized and presented as a percentage.

The exam is organized into five blocks aligned with essential web development practices in HTML and CSS. Block weights indicate the relative importance of each area in the overall exam.

WDE-40-01 Badge

The table below summarizes the distribution of exam items and their respective weight in the total exam score.

Block Number

Block Name

Number of Items

Weight

1

HTML Fundamentals

6

15%

2

Text Formatting & Structure

8

20%

3

Multimedia & Hyperlinks

8

20%

4

Forms & Styling

10

25%

5

Accessibility, Best Practices, and Modern HTML

8

20%

 

TOTAL

40

100%

Exam Syllabus

Last updated: September 18, 2025

Aligned with Exam WDE-40-01

Exam Syllabus Contents


Block 1: HTML Fundamentals

6 objectives covered by the block → 6 exam items

1.1 Document Skeleton & Doctype (1)

Objective 1.1.1 Describe the basic structure of an HTML document, including the <!DOCTYPE> declaration

  1. Place <!DOCTYPE html> at the top to ensure standards mode and predictable rendering.
  2. Wrap all content in a single <html lang="…"> element with appropriate language.
  3. Separate metadata in <head> (e.g., <meta charset="utf-8">, title) from content in <body>.

1.2 Block vs. Inline Elements (1)

Objective 1.2.1 Understand the distinction between block-level and inline elements

  1. Differentiate default layout behavior: block elements create new lines; inline elements flow within text.
  2. Recognize common examples (block: <div>, <p>; inline: <span>, <a>) and choose based on meaning.

1.3 Text Entities & Character Encoding (2)

Objective 1.3.1 Identify and correctly use basic HTML entities

  1. Escape reserved characters with entities such as &amp;, &lt;, &gt;, &quot;, &apos;.
  2. Use non-breaking space &nbsp; only when needed; prefer CSS for spacing.
  3. Ensure entities render correctly across encodings and user agents.

Objective 1.3.2 Explain the importance of character encoding

  1. Specify UTF-8 early in <head> with <meta charset="utf-8"> to avoid mojibake.
  2. Keep editor, server, and document encodings consistent to prevent corruption.
  3. Test pages with multilingual content and special symbols.

1.4 Comments in HTML (1)

Objective 1.4.1 Utilize comments to document HTML code

  1. Use <!-- comment --> to explain structure or intent without affecting layout.
  2. Avoid exposing secrets, credentials, or debug notes in shipped HTML.
  3. Keep comments concise and relevant to future maintenance.

1.5 Core Tags: html, head, title, body (1)

Objective 1.5.1 Demonstrate the use of basic tags (html, head, title, body)

  1. Provide a unique, descriptive <title> per page for usability and SEO.
  2. Place metadata, icons, and styles in <head>; present page content within <body>.
  3. Validate the basic skeleton to avoid parsing and rendering issues.

Block 2: Text Formatting and Structure

8 objectives covered by the block → 8 exam items

2.1 Emphasis & Inline Semantics (1)

Objective 2.1.1 Implement text formatting tags such as strong, em, u, del, sup, sub, and mark

  1. Use semantic emphasis (<strong>, <em>) to convey meaning, not just style.
  2. Apply <del>, <u>, <mark>, <sup>, <sub> where appropriate and avoid overuse.
  3. Style the visual appearance with CSS rather than misusing tags.

2.2 Headings, Paragraphs & Separation (3)

Objective 2.2.1 Demonstrate the use of headings (h1-h6) and their importance in structuring content and enhancing accessibility

  1. Create a logical outline with a single page-level <h1> and nested headings.
  2. Use headings to label sections for screen readers and in-page navigation.
  3. Avoid skipping levels purely for visual size; use CSS for sizing.

Objective 2.2.2 Structure content with paragraphs (p) and manage text flow

  1. Wrap each idea in a distinct <p> and avoid empty paragraphs for spacing.
  2. Control flow and spacing with CSS rather than multiple <br> tags.
  3. Use inline semantics for quotes, code, and emphasis within paragraphs.

Objective 2.2.3 Apply line breaks (br) and horizontal rules (hr) for content separation

  1. Insert <br> for meaningful single line breaks (e.g., addresses, poetry), not layout.
  2. Use <hr> to indicate thematic shifts between sections.
  3. Prefer CSS margins and borders for visual spacing.

2.3 Quotations, Citations, Abbreviations & Code Semantics (2)

Objective 2.3.1 Use the blockquote, q, cite, and abbr tags appropriately

  1. Mark long quotations with <blockquote> and inline quotes with <q>.
  2. Provide sources with <cite> and expansions with <abbr title="…" >.
  3. Retain quotation punctuation as content, not styling.

Objective 2.3.2 Employ code, pre, kbd, and samp tags to display preformatted text and format code snippets and user input

  1. Wrap code fragments with <code> and preserve whitespace with <pre> when needed.
  2. Indicate user input with <kbd> and program output with <samp>.

2.4 Lists & Tables (2)

Objective 2.4.1 Create and manipulate ordered (ol), unordered (ul), and definition lists (dl), including nesting

  1. Choose list types that reflect meaning and keep nesting clear and minimal.
  2. Use <dl> with paired <dt>/<dd> for term–definition content.

Objective 2.4.2 Create and manipulate tables with headers, captions, and merged cells

  1. Use <table> for data, add <caption>, and group rows with <thead>, <tbody>, <tfoot>.
  2. Provide header scope via <th scope="col|row"> and merge cells with colspan/rowspan sparingly.

Block 3: Multimedia and Hyperlinks

8 objectives covered by the block → 8 exam items

3.1 Images (1)

Objective 3.1.1 Embed images with img, focusing on alt text and basic responsive attributes

  1. Provide informative alt text or empty alt for decorative images.
  2. Use srcset/sizes and intrinsic width/height to improve responsiveness and stability.
  3. Consider lazy loading with loading="lazy" for non-critical images.

3.2 Hyperlinks (1)

Objective 3.2.1 Create hyperlinks with the a tag, including internal, external, email, and telephone links

  1. Use clear, descriptive link text and valid href values (e.g., mailto:, tel:).
  2. Open new windows sparingly and add rel="noopener noreferrer" with target="_blank".
  3. Provide anchor links for in-page navigation and skip links for accessibility.

3.3 Audio & Video Embeds (1)

Objective 3.3.1 Embed multimedia with audio and video, including sources and responsiveness

  1. Include controls and provide multiple <source> formats for compatibility.
  2. Add captions/subtitles via <track kind="captions"> and a poster for video.
  3. Size media responsively and avoid autoplay unless essential and muted.

3.4 Image Maps (1)

Objective 3.4.1 Design interactive image maps with map and area

  1. Define accurate coordinates and meaningful alt/aria-label for clickable regions.
  2. Ensure keyboard accessibility and provide text alternatives for regions.
  3. Test image maps across devices and resolutions.

3.5 Figure & Figcaption (1)

Objective 3.5.1 Use figure and figcaption to associate media with captions

  1. Wrap related visuals in <figure> with a concise <figcaption>.
  2. Keep captions close to media for context and accessibility.

3.6 Iframes & External Embeds (1)

Objective 3.6.1 Embed external web content with iframe, including responsive handling

  1. Provide a descriptive title and consider security attributes like sandbox and referrerpolicy.
  2. Maintain aspect ratio responsively via CSS or the aspect-ratio property.
  3. Defer non-critical iframes and avoid performance bottlenecks.

3.7 Linked Media (1)

Objective 3.7.1 Integrate multimedia elements as clickable links

  1. Wrap images or icons in <a> with clear alternative text describing the destination.
  2. Provide focus styles and large tap targets for linked media.
  3. Ensure linked media is distinguishable from decorative content.

3.8 Favicons (1)

Objective 3.8.1 Integrate favicons for brand identity and user recognition

  1. Link appropriate icon formats and sizes in <head> (e.g., ico, png, svg).
  2. Provide a web app manifest where applicable.
  3. Verify appearance in tabs, pinned tiles, and bookmarks.

Block 4: Forms and Styling

10 objectives covered by the block → 10 exam items

4.1 Forms: Inputs, Submission, Grouping, Validation & Selects (5)

Objective 4.1.1 Design forms with a variety of input types and understand their use cases

  1. Choose appropriate controls (input, textarea, button) and types (text, email, url, number, password, checkbox, radio, submit, reset).
  2. Assign meaningful name/id values and associate labels for accessibility.
  3. Provide helpful placeholders and helper text without replacing proper labels.

Objective 4.1.2 Discuss form submission methods (GET vs. POST) and their appropriate use cases

  1. Use GET for idempotent queries and bookmarkable results
  2. Use POST for data creation or changes.
  3. Set action, choose enctype when needed (e.g., file uploads), and consider autocomplete.
  4. Handle server responses and errors gracefully.

Objective 4.1.3 Implement field grouping with fieldset and legend; use form attributes to customize behavior

  1. Group related inputs within <fieldset> and label groups with a clear <legend>.
  2. Apply attributes such as value, placeholder, disabled, and readonly appropriately.

Objective 4.1.4 Use validation techniques and attributes

  1. Leverage built-in constraints (required, min, max, maxlength, pattern, step) before scripting.
  2. Provide clear inline messages and preserve user input on errors.
  3. Respect user privacy and avoid exposing sensitive data in URLs.

Objective 4.1.5 Create dropdown menus with select and option

  1. Group related options with <optgroup> and provide a meaningful default.
  2. Use multiple and size attributes when appropriate and ensure keyboard operability.
  3. Pair selects with labels and helper text for clarity.

4.2 CSS Application: Inline/Internal Styles, Classes & IDs (2)

Objective 4.2.1 Apply CSS for styling HTML elements, including inline and internal styles

  1. Embed small page-specific rules in <style> and reserve inline styles for one-off overrides.
  2. Prefer external stylesheets for reuse, caching, and maintainability.
  3. Keep specificity low and avoid overusing !important.

Objective 4.2.2 Explore the use of CSS classes and IDs for element styling

  1. Use classes for reusable patterns and IDs for unique elements that require anchors or scripting.
  2. Avoid styling by ID alone; prefer class-based selectors for flexibility.
  3. Adopt consistent naming conventions.

4.3 Styling & Layout Fundamentals: Color, Typography, Box Model & Generic Containers (3)

Objective 4.3.1 Incorporate color and font properties for consistent website styling

  1. Set readable typography (family, size, weight, line height) and establish a type scale.
  2. Apply color and background color with sufficient contrast for accessibility.
  3. Use CSS custom properties to centralize tokens for color and typography.

Objective 4.3.2 Differentiate and apply the use of span and div for styling and layout

  1. Use <span> for inline semantics and <div> for block-level grouping when no semantic element fits.
  2. Prefer semantic HTML5 elements over generic containers when meaning exists.
  3. Keep markup lean and avoid unnecessary wrappers.

Objective 4.3.3 Incorporate basic styling attributes to manipulate container appearance (border, padding, margin)

  1. Control spacing with the box model and consider box-sizing: border-box; for predictable layouts.
  2. Use logical properties (e.g., margin-inline, padding-block) for internationalization.
  3. Apply consistent spacing scales to improve rhythm and maintainability.

Block 5: Accessibility, Best Practices, and Modern HTML

8 objectives covered by the block → 8 exam items

5.1 Accessibility Foundations & ARIA (2)

Objective 5.1.1 Explain the core principles of web accessibility and the importance of following WCAG guidelines

  1. Apply POUR principles (Perceivable, Operable, Understandable, Robust) to content and UI.
  2. Provide alternatives, keyboard access, visible focus, and sufficient contrast.
  3. Document accessibility acceptance criteria during development.

Objective 5.1.2 Utilize ARIA roles, states, and properties to make web content more accessible

  1. Use ARIA to enhance semantics only when native elements cannot express behavior.
  2. Apply roles and states (e.g., role="dialog", aria-expanded, aria-hidden) correctly and update them dynamically.

5.2 Semantic Structure (1)

Objective 5.2.1 Implement semantic markup and integrate modern HTML5 structural elements

  1. Organize documents with <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
  2. Provide skip links and landmark regions for efficient navigation.
  3. Pair structure with headings for a clear document outline.

5.3 Structured Data (1)

Objective 5.3.1 Apply microformats, microdata, and Schema.org for enriched content semantics

  1. Annotate content with microdata.
  2. Use consistent properties (e.g., itemprop, itemscope) and validate structured data.
  3. Consider microformats when required by legacy tools or contexts.

5.4 Platform Features: HTML APIs & SVG (2)

Objective 5.4.1 Understand and apply the basics of HTML APIs (Geolocation, Web Storage)

  1. Request location via the Geolocation API with explicit user consent and graceful fallbacks.
  2. Store small key-value data with localStorage/sessionStorage and handle quota and privacy.
  3. Avoid blocking the UI and handle permission errors robustly.

Objective 5.4.2 Utilize SVG for scalable vector graphics

  1. Embed SVG inline for styling and accessibility, and set appropriate roles and titles when needed.
  2. Style with CSS and manage icon systems via <symbol> and <use>.

5.5 Best Practices & Performance (1)

Objective 5.5.1 Discuss HTML5 development best practices focusing on code readability and performance

  1. Keep markup semantic, minimal, and consistently formatted.
  2. Defer non-critical resources, minimize blocking assets, and audit performance regularly.
  3. Use version control and code reviews to sustain quality.

5.6 Accessibility Testing (1)

Objective 5.6.1 Understand and apply the basics of testing web accessibility

  1. Run automated checks (e.g., Lighthouse, axe) and fix common issues.
  2. Perform manual keyboard and screen reader spot checks on key flows.
  3. Document findings and regressions as part of the release process.

Download WDE-40-01 Exam Syllabus in PDF

MQC Profile

A Minimally Qualified Candidate (MQC) for the WDE exam is an individual with foundational skills in semantic HTML and introductory CSS. The candidate can assemble valid pages, structure and format content clearly, embed links and media responsibly, build basic forms, and apply simple styling to achieve readable, consistent layouts.

The MQC understands the document skeleton and metadata, block vs. inline elements, entities and character encoding, common text and code semantics, lists and tables, hyperlinks and multimedia, form inputs and submission, basic validation attributes, and core CSS concepts (inline/internal styles, classes/IDs, color and typography, and the box model).

This profile represents a blend of standards awareness, practical markup, and foundational styling and accessibility skills needed to produce maintainable entry-level web content.

Block 1: HTML Fundamentals

Minimum Coverage – the candidate can:

  • Assemble a valid HTML page with <!DOCTYPE html>, language on <html>, and essential <head> metadata (e.g., <meta charset="utf-8">, title).
  • Distinguish block-level and inline elements and choose appropriately for meaning, not appearance.
  • Use entities for reserved characters and explain the role of UTF-8 character encoding.
  • Document code with HTML comments and validate the basic page skeleton.

Block 2: Text Formatting and Structure

Minimum Coverage – the candidate can:

  • Apply emphasis and inline semantics (e.g., <strong>, <em>, <abbr>, <code>) appropriately.
  • Structure content with a clear heading outline, paragraphs, and meaningful separation (<br>, <hr> used sparingly).
  • Create lists (ordered, unordered, definition) and simple data tables with captions and headers.
  • Use quotation and code elements (<blockquote>, <q>, <pre>, <kbd>, <samp>) to convey intent.

Block 3: Multimedia and Hyperlinks

Minimum Coverage – the candidate can:

  • Embed images with informative alt text and basic responsiveness (width/height, srcset/sizes when appropriate).
  • Create hyperlinks (internal, external, email, telephone) with clear anchor text and safe attributes (e.g., rel="noopener" with target="_blank").
  • Embed audio and video with controls, compatible sources, and captions/subtitles via <track>.
  • Use figures and captions, image maps, and iframes responsibly; add favicons for basic site identity.

Block 4: Forms and Styling

Minimum Coverage – the candidate can:

  • Build forms with labels, common input types, selects, and textareas; choose GET vs. POST appropriately and set action/enctype when needed.
  • Group related fields with <fieldset>/<legend> and apply basic validation attributes (required, min/max, pattern, maxlength).
  • Apply CSS via inline/internal styles for simple scenarios; use classes and IDs to target elements predictably.
  • Use color and typography for readability and apply the box model (border, padding, margin; box-sizing: border-box;) for consistent spacing.

Block 5: Accessibility, Best Practices, and Modern HTML

Minimum Coverage – the candidate can:

  • Apply accessibility fundamentals: semantic landmarks, labels and associations, visible focus, and sufficient contrast.
  • Use ARIA roles and states only when native semantics are insufficient, without creating conflicts.
  • Organize documents with modern HTML5 structural elements and add basic structured data where appropriate.
  • Demonstrate awareness of HTML platform features (e.g., Web Storage), SVG basics, simple performance practices, and accessibility testing methods.

Passing Requirement

To pass the WDE exam, a candidate should achieve a cumulative average score of at least 75% across all exam blocks.