Skip to content

Migrate HTML Interactive Examples#38257

Merged
LeoMcA merged 5 commits intomainfrom
migrate-html-interactive-examples
Feb 24, 2025
Merged

Migrate HTML Interactive Examples#38257
LeoMcA merged 5 commits intomainfrom
migrate-html-interactive-examples

Conversation

@LeoMcA
Copy link
Copy Markdown
Member

@LeoMcA LeoMcA commented Feb 20, 2025

See https://github.com/orgs/mdn/discussions/782 for further explanation.

This PR migrates the HTML examples, see the results on https://test.developer.allizom.org/en-US/

Also see the results of the visual diff: en-US.zip
The differences here (highlighted in red) are expected due to some small changes to the default interactive examples styles.

@LeoMcA LeoMcA requested review from a team as code owners February 20, 2025 12:45
@LeoMcA LeoMcA requested review from estelle and wbamberg and removed request for a team February 20, 2025 12:45
@github-actions github-actions Bot added Content:HTML Hypertext Markup Language docs Content:WebAPI Web API docs Content:Media Media docs size/xl [PR only] >1000 LoC changed labels Feb 20, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 20, 2025 •
edited
Loading

Preview URLs (140 pages)
Flaws (336)

Note! 76 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/HTML/Attributes/minlength
Title: HTML attribute: minlength
Flaw count: 2

  • broken_links:
    • /en-US/docs/Web/API/validityState/tooShort is ill cased
  • macros:
    • Macro produces link /en-US/docs/Web/API/validityState/tooShort which is a redirect

URL: /en-US/docs/Web/HTML/Attributes/autocomplete
Title: HTML attribute: autocomplete
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Attributes/pattern
Title: HTML attribute: pattern
Flaw count: 4

  • broken_links:
    • /en-US/docs/Web/API/validityState/tooLong is ill cased
    • /en-US/docs/Web/API/validityState/tooShort is ill cased
  • macros:
    • Macro produces link /en-US/docs/Web/API/validityState/tooLong which is a redirect
    • Macro produces link /en-US/docs/Web/API/validityState/tooShort which is a redirect

URL: /en-US/docs/Web/HTML/Element/picture
Title: <picture>: The Picture element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/td
Title: <td>: The Table Data Cell element
Flaw count: 8

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/accessibility is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/accessibility which is a redirect

URL: /en-US/docs/Web/HTML/Element/a
Title: <a>: The Anchor element
Flaw count: 10

  • broken_links:
    • /en-US/docs/Glossary/origin is ill cased
    • /en-US/docs/Glossary/host is ill cased
    • /en-US/docs/Glossary/port is ill cased
    • /en-US/docs/Glossary/character_encoding is ill cased
    • /en-US/docs/Web/API/window/opener is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/origin which is a redirect
    • Macro produces link /en-US/docs/Glossary/host which is a redirect
    • Macro produces link /en-US/docs/Glossary/port which is a redirect
    • Macro produces link /en-US/docs/Glossary/character_encoding which is a redirect
    • Macro produces link /en-US/docs/Web/API/window/opener which is a redirect

URL: /en-US/docs/Web/HTML/Element/details
Title: <details>: The Details disclosure element
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/accessible_description is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/accessible_description which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/iframe
Title: <iframe>: The Inline Frame element
Flaw count: 18

  • broken_links:
    • /en-US/docs/Glossary/browsing_context is ill cased
    • /en-US/docs/Glossary/visual_viewport is ill cased
    • /en-US/docs/Glossary/origin is ill cased
    • /en-US/docs/Glossary/host is ill cased
    • /en-US/docs/Glossary/port is ill cased
    • and 4 more flaws omitted
  • macros:
    • Macro produces link /en-US/docs/Glossary/browsing_context which is a redirect
    • Macro produces link /en-US/docs/Glossary/visual_viewport which is a redirect
    • Macro produces link /en-US/docs/Glossary/origin which is a redirect
    • Macro produces link /en-US/docs/Glossary/host which is a redirect
    • Macro produces link /en-US/docs/Glossary/port which is a redirect
    • and 4 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/bdi
Title: <bdi>: The Bidirectional Isolate element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/code
Title: <code>: The Inline Code element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/track
Title: <track>: The Embed Text Track element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/void_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/area
Title: <area>: The Image Map Area element
Flaw count: 10

  • broken_links:
    • /en-US/docs/Glossary/origin is ill cased
    • /en-US/docs/Glossary/host is ill cased
    • /en-US/docs/Glossary/port is ill cased
    • /en-US/docs/Glossary/browsing_context is ill cased
    • /en-US/docs/Glossary/void_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/origin which is a redirect
    • Macro produces link /en-US/docs/Glossary/host which is a redirect
    • Macro produces link /en-US/docs/Glossary/port which is a redirect
    • Macro produces link /en-US/docs/Glossary/browsing_context which is a redirect
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/summary
Title: <summary>: The Disclosure Summary element
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/accessible_description is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/accessible_description which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/video
Title: <video>: The Video Embed element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect

URL: /en-US/docs/Web/HTML/Element/wbr
Title: <wbr>: The Line Break Opportunity element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/bidi is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/bidi which is a redirect

URL: /en-US/docs/Web/HTML/Element/form
Title: <form>: The Form element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/character_encoding is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/character_encoding which is a redirect

URL: /en-US/docs/Web/HTML/Element/thead
Title: <thead>: The Table Head element
Flaw count: 8

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/semantics is ill cased
    • /en-US/docs/Glossary/semantics is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/semantics which is a redirect
    • Macro produces link /en-US/docs/Glossary/semantics which is a redirect

URL: /en-US/docs/Web/HTML/Element/hr
Title: <hr>: The Thematic Break (Horizontal Rule) element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/void_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/table
Title: <table>: The Table element
Flaw count: 18

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/accessibility is ill cased
    • /en-US/docs/Glossary/markup is ill cased
    • and 4 more flaws omitted
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/accessibility which is a redirect
    • Macro produces link /en-US/docs/Glossary/markup which is a redirect
    • and 4 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/tbody
Title: <tbody>: The Table Body element
Flaw count: 18

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/semantics is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/css_selector is ill cased
    • and 4 more flaws omitted
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/semantics which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/css_selector which is a redirect
    • and 4 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/img
Title: <img>: The Image Embed element
Flaw count: 22

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/cookie is ill cased
    • /en-US/docs/Glossary/aspect_ratio is ill cased
    • /en-US/docs/Glossary/origin is ill cased
    • and 6 more flaws omitted
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/cookie which is a redirect
    • Macro produces link /en-US/docs/Glossary/aspect_ratio which is a redirect
    • Macro produces link /en-US/docs/Glossary/origin which is a redirect
    • and 6 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/tfoot
Title: <tfoot>: The Table Foot element
Flaw count: 8

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/semantics is ill cased
    • /en-US/docs/Glossary/semantics is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/semantics which is a redirect
    • Macro produces link /en-US/docs/Glossary/semantics which is a redirect

URL: /en-US/docs/Web/HTML/Element/kbd
Title: <kbd>: The Keyboard Input element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/caption
Title: <caption>: The Table Caption element
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/accessible_description is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/accessible_description which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect

URL: /en-US/docs/Web/HTML/Element/input
Title: <input>: The HTML Input element
Flaw count: 46

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Web/API/validityState/rangeOverflow is ill cased
    • /en-US/docs/Web/API/validityState/tooLong is ill cased
    • and 18 more flaws omitted
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Web/API/validityState/rangeOverflow which is a redirect
    • Macro produces link /en-US/docs/Web/API/validityState/tooLong which is a redirect
    • and 18 more flaws omitted

URL: /en-US/docs/Web/HTML/Element/input/password
Title: <input type="password">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/week
Title: <input type="week">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/month
Title: <input type="month">
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/time
Title: <input type="time">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/range
Title: <input type="range">
Flaw count: 6

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Web/API/validityState/rangeOverflow is ill cased
    • /en-US/docs/Web/API/validityState/rangeUnderflow is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Web/API/validityState/rangeOverflow which is a redirect
    • Macro produces link /en-US/docs/Web/API/validityState/rangeUnderflow which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/file
Title: <input type="file">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/search
Title: <input type="search">
Flaw count: 6

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/image
Title: <input type="image">
Flaw count: 10

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Web/HTTP/Methods/get is ill cased
    • /en-US/docs/Web/HTTP/Methods/post is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/aspect_ratio is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Web/HTTP/Methods/get which is a redirect
    • Macro produces link /en-US/docs/Web/HTTP/Methods/post which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/aspect_ratio which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/url
Title: <input type="url">
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/regular_expression is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/regular_expression which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/datetime-local
Title: <input type="datetime-local">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/date
Title: <input type="date">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/tel
Title: <input type="tel">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/regular_expression is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/regular_expression which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/email
Title: <input type="email">
Flaw count: 6

  • broken_links:
    • /en-US/docs/Glossary/regular_expression is ill cased
    • /en-US/docs/Glossary/regular_expression is ill cased
    • /en-US/docs/Glossary/regular_expression is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/regular_expression which is a redirect
    • Macro produces link /en-US/docs/Glossary/regular_expression which is a redirect
    • Macro produces link /en-US/docs/Glossary/regular_expression which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/radio
Title: <input type="radio">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/number
Title: <input type="number">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/color
Title: <input type="color">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/text
Title: <input type="text">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/reset
Title: <input type="reset">
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/accessible_description is ill cased
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/accessible_description which is a redirect
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/input/button
Title: <input type="button">
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/accessible_description is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/accessible_description which is a redirect

URL: /en-US/docs/Web/HTML/Element/pre
Title: <pre>: The Preformatted Text element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/character_reference is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/character_reference which is a redirect

URL: /en-US/docs/Web/HTML/Element/embed
Title: <embed>: The Embed External Content element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/void_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/link
Title: <link>: The External Resource Link element
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/void_element is ill cased
    • /en-US/docs/Glossary/void_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/figure
Title: <figure>: The Figure with Optional Caption element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/accessible_name is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/accessible_name which is a redirect

URL: /en-US/docs/Web/HTML/Element/select
Title: <select>: The HTML Select element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/colgroup
Title: <colgroup>: The Table Column Group element
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect

URL: /en-US/docs/Web/HTML/Element/tr
Title: <tr>: The Table Row element
Flaw count: 6

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/script-supporting_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/script-supporting_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/br
Title: <br>: The Line Break element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/void_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/audio
Title: <audio>: The Embed Audio element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect

URL: /en-US/docs/Web/HTML/Element/source
Title: <source>: The Media or Image Source element
Flaw count: 6

  • broken_links:
    • /en-US/docs/Glossary/void_element is ill cased
    • /en-US/docs/Glossary/void_element is ill cased
    • /en-US/docs/Glossary/void_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/th
Title: <th>: The Table Header element
Flaw count: 8

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/accessibility is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/accessibility which is a redirect

URL: /en-US/docs/Web/HTML/Element/ul
Title: <ul>: The Unordered List element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/HTML/Element/figcaption
Title: <figcaption>: The Figure Caption element
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/accessible_description is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/accessible_description which is a redirect

URL: /en-US/docs/Web/HTML/Element/col
Title: <col>: The Table Column element
Flaw count: 6

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/enumerated is ill cased
    • /en-US/docs/Glossary/void_element is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect
    • Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Web/HTML/Element/button
Title: <button>: The Button element
Flaw count: 4

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
    • /en-US/docs/Glossary/accessible_name is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
    • Macro produces link /en-US/docs/Glossary/accessible_name which is a redirect

URL: /en-US/docs/Web/HTML/Global_attributes/contenteditable
Title: contenteditable
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/caret is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/caret which is a redirect

URL: /en-US/docs/Web/HTML/Global_attributes/data-*
Title: data-*
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/kebab_case is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/kebab_case which is a redirect

URL: /en-US/docs/Web/HTML/Global_attributes/hidden
Title: hidden
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/enumerated is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/enumerated which is a redirect

URL: /en-US/docs/Web/HTML/Global_attributes/class
Title: class
Flaw count: 6

  • broken_links:
    • /en-US/docs/Web/API/document/getElementsByClassName is ill cased
    • /en-US/docs/Web/API/element/className is ill cased
    • /en-US/docs/Web/API/element/classList is ill cased
  • macros:
    • Macro produces link /en-US/docs/Web/API/document/getElementsByClassName which is a redirect
    • Macro produces link /en-US/docs/Web/API/element/className which is a redirect
    • Macro produces link /en-US/docs/Web/API/element/classList which is a redirect

URL: /en-US/docs/Web/Media/Guides/Formats/Containers
Title: Media container formats (file types)
Flaw count: 2

  • broken_links:
    • /en-US/docs/Glossary/user_agent is ill cased
  • macros:
    • Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

(comment last updated: 2025-02-21 13:59:28)

@wbamberg wbamberg removed their request for review February 20, 2025 17:14
hamishwillee
hamishwillee reviewed Feb 20, 2025
View reviewed changes
Comment thread files/en-us/web/api/htmlimageelement/usemap/index.md Outdated
shape="poly"
coords="209,249,49,249,130,139"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank"
Copy link
Copy Markdown
Collaborator

@hamishwillee hamishwillee Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FMI, How does the macro pick what code to include? Anything under the current heading? Including sub headings? I assume you are allowed just one HTML and one CSS?

Copy link
Copy Markdown
Collaborator

@caugner caugner Feb 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The macro picks up all interactive-examples code blocks in the current section. Multiple HTML/CSS/JS code blocks get merged with a newline.

FWIW Here's the logic: https://github.com/mdn/yari/pull/12633/files#diff-c74d432e1a65761aabd473c9e289fbb16c12d4ddc158ec626a2b90fb923ffb93R55-R82

Copy link
Copy Markdown
Collaborator

@hamishwillee hamishwillee Feb 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you.

hamishwillee
hamishwillee approved these changes Feb 20, 2025
View reviewed changes
Copy link
Copy Markdown
Collaborator

@hamishwillee hamishwillee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do you want this reviewed?

  • I compared about 30 images. They mostly differ only in a banner that is irrelevant to this (pity that couldn't be excluded). The ones with more significant differences still look good - the difference was things like the new version having video player controls on a video element that weren't present in the the original.
  • I tried 10 pages that had been modified on the test server and they worked in the same way.
  • Inspection of the code looks fine, but I didn't look at the original source and compare.

Upshot a spot check seems to verify this, but I'm not sure what would count as "acceptable review" for something like this?

@LeoMcA
Copy link
Copy Markdown
Member Author

LeoMcA commented Feb 21, 2025 •
edited
Loading

@hamishwillee apologies, I should've expanded in my comment that I wasn't expecting a traditional review of this: we've done a bunch of automated testing to ensure that nothing's changed (that we don't want to change) already: so was expecting a smoke test much like what you've done - thank you!

I think @bsmth will be having a look at this as well, and we'll wait until early next week to merge

caugner
caugner reviewed Feb 21, 2025
View reviewed changes
Comment thread files/en-us/web/api/htmlimageelement/usemap/index.md
bsmth
bsmth reviewed Feb 21, 2025
View reviewed changes
Comment thread files/en-us/web/api/htmlimageelement/usemap/index.md
</map>
<img
usemap="#infographic"
src="/shared-assets/images/examples/mdn-info.png"
Copy link
Copy Markdown
Member

@bsmth bsmth Feb 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we doing some magic for https://mdn.github.io prefixes?

i.e. https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg

Works for me locally, so I presume so:

image

Copy link
Copy Markdown
Member Author

@LeoMcA LeoMcA Feb 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we proxy /shared-assets/ to https://mdn.github.io/shared-assets/

Copy link
Copy Markdown
Collaborator

@caugner caugner Feb 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@LeoMcA Remind me again, why don't we replace the links with a fully qualified link to e.g. https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg? It doesn't work in all cases? (The big advantage is that beginners can copy the code and it will just work.)

Copy link
Copy Markdown
Member

@bsmth bsmth Feb 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

beginners can copy the code and it will just work

This is nice, too, and worth taking into consideration. There aren't many proxy link instances (it's in 19 files), so I don't think it's critical -> changing this later doesn't have a wide impact.

Copy link
Copy Markdown
Member Author

@LeoMcA LeoMcA Feb 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A couple of reasons:

  1. not all examples work with a fully qualified link because of cross origin issues: <track> is the example which demonstrated this, and it wouldn't be easily possible to figure out which others don't work without manually testing them one by one
  2. it makes the example code much longer, and space is already limited within the editors here

I'm not really convinced by the need to make these run without modification after copying: the point of the interactive example is to allow users to edit the code in-page, not locally or elsewhere

@LeoMcA LeoMcA mentioned this pull request Feb 21, 2025
Merged
bsmth
bsmth approved these changes Feb 21, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@bsmth bsmth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything looks good, tnx. Discussion about the proxy URLs is not blocking, although Claas has a convincing opinion there.

Thanks a lot!

@LeoMcA LeoMcA merged commit 8b02826 into main Feb 24, 2025
@LeoMcA LeoMcA deleted the migrate-html-interactive-examples branch February 24, 2025 14:17
This was referenced Feb 24, 2025
Merged
Merged
Merged
This was referenced Feb 24, 2025
Merged
Merged
Merged
Merged
Merged
Cecil0o0 added a commit to Cecil0o0/content that referenced this pull request Feb 24, 2025
@Cecil0o0
Migrate HTML Interactive Examples (mdn#38257)
f628dbe 
<!-- 🙌 Thanks for contributing to MDN Web Docs. Adding details below will help us to merge your PR faster. -->

### Description

correct a little wrong usage

### Motivation

<!-- ❓ Why are you making these changes and how do they help readers? -->

### Additional details

<!-- 🔗 Link to release notes, vendor docs, bug trackers, source control, or other places providing more context -->

### Related issues and pull requests

<!-- 🔨 If this fully resolves a GitHub issue, use "Fixes mdn#123" -->
<!-- 👉 Highlight related pull requests using "Relates to mdn#123" -->
<!-- ❗ If another pull request should be merged first, use "**Depends on:** mdn#123" -->

<!-- 👷‍♀️ After submitting, go to the "Checks" tab of your PR for the build status -->
Josh-Cena pushed a commit that referenced this pull request Feb 24, 2025
@Cecil0o0
Fix grammar (#38310)
815d98e 
Migrate HTML Interactive Examples (#38257)
<!-- 🙌 Thanks for contributing to MDN Web Docs. Adding details below will help us to merge your PR faster. -->

### Description

correct a little wrong usage

### Motivation

<!-- ❓ Why are you making these changes and how do they help readers? -->

### Additional details

<!-- 🔗 Link to release notes, vendor docs, bug trackers, source control, or other places providing more context -->

### Related issues and pull requests

<!-- 🔨 If this fully resolves a GitHub issue, use "Fixes #123" -->
<!-- 👉 Highlight related pull requests using "Relates to #123" -->
<!-- ❗ If another pull request should be merged first, use "**Depends on:** #123" -->

<!-- 👷‍♀️ After submitting, go to the "Checks" tab of your PR for the build status -->
@bsmth bsmth mentioned this pull request Mar 31, 2025
Merged
5 tasks
cssinate pushed a commit to cssinate/content that referenced this pull request Apr 11, 2025
@LeoMcA @paul-grant-hs
Migrate HTML Interactive Examples (mdn#38257)
3d5640e
cssinate pushed a commit to cssinate/content that referenced this pull request Apr 11, 2025
@Cecil0o0 @paul-grant-hs
Fix grammar (mdn#38310)
7bbaf19 
Migrate HTML Interactive Examples (mdn#38257)
<!-- 🙌 Thanks for contributing to MDN Web Docs. Adding details below will help us to merge your PR faster. -->

### Description

correct a little wrong usage

### Motivation

<!-- ❓ Why are you making these changes and how do they help readers? -->

### Additional details

<!-- 🔗 Link to release notes, vendor docs, bug trackers, source control, or other places providing more context -->

### Related issues and pull requests

<!-- 🔨 If this fully resolves a GitHub issue, use "Fixes mdn#123" -->
<!-- 👉 Highlight related pull requests using "Relates to mdn#123" -->
<!-- ❗ If another pull request should be merged first, use "**Depends on:** mdn#123" -->

<!-- 👷‍♀️ After submitting, go to the "Checks" tab of your PR for the build status -->
@dipikabh dipikabh mentioned this pull request Sep 22, 2025
Merged
@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Mar 1, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@caugner caugner caugner left review comments

@hamishwillee hamishwillee hamishwillee approved these changes

@bsmth bsmth bsmth approved these changes

@estelle estelle Awaiting requested review from estelle estelle was automatically assigned from mdn/yari-content-html

Assignees

No one assigned

Labels

Content:HTML Hypertext Markup Language docs Content:Media Media docs Content:WebAPI Web API docs size/xl [PR only] >1000 LoC changed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@LeoMcA @caugner @hamishwillee @bsmth