{"id":470,"date":"2026-02-10T20:05:48","date_gmt":"2026-02-10T20:05:48","guid":{"rendered":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/2026\/02\/10\/dennis-snell-html-api-check-for-unclosed-attributes\/"},"modified":"2026-02-10T20:05:48","modified_gmt":"2026-02-10T20:05:48","slug":"dennis-snell-html-api-check-for-unclosed-attributes","status":"publish","type":"post","link":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/2026\/02\/10\/dennis-snell-html-api-check-for-unclosed-attributes\/","title":{"rendered":"Dennis Snell: HTML API: Check for unclosed attributes."},"content":{"rendered":"

Today someone was discussing the goal of linting HTML, specifically of detecting unclosed attributes. Consider the following snippet:<\/p>\n

\n
\n
\n
<<\/span>p<\/span> class<\/span>=<\/span>\"important><img src=\"<\/span>alert.png<\/span>\">This is important!<\/<\/span>p<\/span>><\/span><\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
It\u2019s clear that a mistake led to a missing double-quote on the class<\/code> attribute of the opening <p><\/code> tag. While WordPress\u2019 HTML API doesn\u2019t directly report this (because \u201cunclosed attribute\u201d isn\u2019t particularly an HTML concept), it can be used to roughly detect it.<\/p>\n
Here\u2019s how to use the public functionality of the HTML API to detect unclosed attributes<\/strong>.<\/p>\n
<\/span><\/p>\n
To do this, we have to define what an unclosed attribute means. For the sake of brevity we will assume that if an attribute value contains HTML-like syntax it is probably unclosed. We might be tempted to start with something like this:<\/p>\n
\n
\n
\n
<?php<\/span><\/div>
foreach<\/span> (<\/span> $processor<\/span>-><\/span>get_attribute_names_with_prefix<\/span>(<\/span> ''<\/span> )<\/span> as<\/span> $name<\/span> )<\/span> {<\/span><\/div>
  $value<\/span> =<\/span> $processor<\/span>-><\/span>get_attribute<\/span>(<\/span> $name<\/span> )<\/span>;<\/span><\/div>
  if<\/span> (<\/span> !<\/span> is_string<\/span>(<\/span> $value<\/span> )<\/span> )<\/span> {<\/span><\/div>
    continue<\/span>;<\/span><\/div>
  }<\/span><\/div>
<\/div>
  $checker<\/span> =<\/span> new<\/span> WP_HTML_Tag_Processor(<\/span> $value<\/span> )<\/span>;<\/span><\/div>
  if<\/span> (<\/span> $checker<\/span>-><\/span>next_tag<\/span>(<\/span>)<\/span> )<\/span> {<\/span><\/div>
    throw<\/span> new<\/span> WP_Error(<\/span> 'Found tag syntax within attribute: is it unclosed?'<\/span>)<\/span><\/div>
  }<\/span><\/div>
}<\/span><\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
This approach does get pretty far, but it suffers from the fact that it\u2019s checking decoded<\/em> attribute values, meaning it will detect false positives on any attribute which discusses tags<\/em>, such as alt=\"the &lt;img&gt; tag is a void element\"<\/code>. It\u2019s better to review the raw attribute value instead of the decoded attribute value.<\/p>\n
A sneaky trick hidden in attribute removal<\/h3>\n
The Tag Processor tracks attribute offsets but doesn\u2019t expose them, even to subclasses. The HTML API tries really hard to avoid exposing string offsets! and it does this for good reason. String offsets are easy to misuse, are unclear, and finicky.<\/p>\n
However, the Tag Processor does allow subclasses to access its lexical_updates<\/code>, which is an array of string replacements to perform after semantic-level requests have been converted to text. We can analyze these updates after requesting to remove an attribute; that will return knowledge about all of the places where that attribute and any ignored duplicates appeared in the source document.<\/p>\n
This approach also leans on the fact that static methods of subclasses have access to protected properties of the parent class.<\/p>\n
This is risky code and should be used with extreme caution, code review, and shared understanding among those who will be asked to maintain it.<\/strong><\/p>\n
\n
\n
\n
<?php<\/span><\/div>
<\/div>
class<\/span> WP_Attribute_Walker<\/span> extends<\/span> WP_HTML_Tag_Processor {<\/span><\/div>
   public<\/span> static<\/span> function<\/span> walk<\/span>(<\/span> $html<\/span> )<\/span> {<\/span><\/div>
      $p<\/span> =<\/span> new<\/span> WP_HTML_Tag_Processor(<\/span> $html<\/span> )<\/span>;<\/span><\/div>
<\/div>
      while<\/span> (<\/span> $p<\/span>-><\/span>next_tag<\/span>(<\/span>)<\/span> )<\/span> {<\/span><\/div>
         $names<\/span> =<\/span> $p<\/span>-><\/span>get_attribute_names_with_prefix<\/span>(<\/span> ''<\/span> )<\/span>;<\/span><\/div>
<\/div>
         foreach<\/span> (<\/span> $names<\/span> as<\/span> $name<\/span> )<\/span> {<\/span><\/div>
            $p<\/span>-><\/span>remove_attribute<\/span>(<\/span> $name<\/span> )<\/span>;<\/span><\/div>
            $updates<\/span> =<\/span> $p<\/span>-><\/span>lexical_updates<\/span>;<\/span><\/div>
            $p<\/span>-><\/span>lexical_updates<\/span> =<\/span> array<\/span>(<\/span>)<\/span>;<\/span><\/div>
<\/div>
            $i<\/span> =<\/span> 0<\/span>;<\/span><\/div>
            foreach<\/span> (<\/span> $updates<\/span> as<\/span> $update<\/span> )<\/span> {<\/span><\/div>
               $raw_attr<\/span> =<\/span> substr<\/span>(<\/span> $html<\/span>,<\/span> $update<\/span>-><\/span>start<\/span>,<\/span> $update<\/span>-><\/span>length<\/span> )<\/span>;<\/span><\/div>
               $quote_at<\/span> =<\/span> strcspn<\/span>(<\/span> $raw_attr<\/span>,<\/span> ''\"'<\/span> )<\/span>;<\/span><\/div>
<\/div>
               $might_be_unclosed<\/span> =<\/span> false<\/span>;<\/span><\/div>
               if<\/span> (<\/span> $quote_at<\/span> <<\/span> strlen<\/span>(<\/span> $raw_attr<\/span> )<\/span> )<\/span> {<\/span><\/div>
                  $raw_value<\/span> =<\/span> substr<\/span>(<\/span> $raw_attr<\/span>,<\/span> $quote_at<\/span> +<\/span> 1<\/span>,<\/span> strrpos<\/span>(<\/span> $raw_attr<\/span>,<\/span> $raw_attr<\/span>[<\/span> $quote_at<\/span> ]<\/span> )<\/span> -<\/span> $quote_at<\/span> -<\/span> 2<\/span> )<\/span>;<\/span><\/div>
                  $checker<\/span>   =<\/span> new<\/span> WP_HTML_Tag_Processor(<\/span> $raw_value<\/span> )<\/span>;<\/span><\/div>
                  $might_be_unclosed<\/span> =<\/span> $checker<\/span>-><\/span>next_tag<\/span>(<\/span>)<\/span> ||<\/span> $checker<\/span>-><\/span>paused_at_incomplete_token<\/span>(<\/span>)<\/span>;<\/span><\/div>
               }<\/span><\/div>
<\/div>
               yield<\/span> $p<\/span>-><\/span>get_token_name<\/span>(<\/span>)<\/span> =><\/span> array<\/span>(<\/span><\/div>
                  $name<\/span>,<\/span><\/div>
                  array<\/span>(<\/span> $update<\/span>-><\/span>start<\/span>,<\/span> $update<\/span>-><\/span>length<\/span> )<\/span>,<\/span><\/div>
                  0<\/span> ===<\/span> $i<\/span>++<\/span> ?<\/span> 'non-duplicate'<\/span> :<\/span> 'duplicate'<\/span>,<\/span><\/div>
                  $might_be_unclosed<\/span> ?<\/span> 'contains-tag-like-content'<\/span> :<\/span> 'does-not-contain-tag-like-content'<\/span>,<\/span><\/div>
                  substr<\/span>(<\/span> $html<\/span>,<\/span> $update<\/span>-><\/span>start<\/span>,<\/span> $update<\/span>-><\/span>length<\/span> )<\/span>,<\/span><\/div>
               )<\/span>;<\/span><\/div>
            }<\/span><\/div>
         }<\/span><\/div>
      }<\/span><\/div>
   }<\/span><\/div>
}<\/span><\/div>
<\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
This WP_Attribute_Walker::walk( $html )<\/code> method steps through each tag in the given document and returns a generator which reports each attribute on the tag, as well as some meta information about it.<\/p>\n
\n
\n
\n
$meta === array(<\/div>
    'class',                       \/\/ parsed name of attribute<\/div>
    array( 3, 27 ),                \/\/ (offset, length) of full attribute span in HTML<\/div>
    'non-duplicate',               \/\/ whether this is the actual attribute or an ignored duplicate<\/div>
    'contains-tag-like-content',   \/\/ likelihood of being unclosed<\/div>
    'class=\"important><<\/span>img<\/span> src<\/span>=<\/span>\"', \/\/ full span of attribute in HTML<\/span><\/div>
);<\/span><\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
How to use this walker<\/h3>\n
\n
\n
\n
<?php<\/span><\/div>
<\/div>
$html<\/span> =<\/span> '<p class=\"important><img src=\"alert.png\">This is important!<\/p>'<\/span>;<\/span><\/div>
<\/div>
foreach<\/span> (<\/span> WP_Attribute_Walker::<\/span>walk<\/span>(<\/span> $html<\/span> )<\/span> as<\/span> $tag_name<\/span> =><\/span> $meta<\/span> )<\/span> {<\/span><\/div>
    echo<\/span> \"Found in <<\/span>{<\/span>$tag_name<\/span>}<\/span>> an attribute named '<\/span>{<\/span>$meta<\/span>[<\/span>0<\/span>]<\/span>}<\/span>'<\/span>n\"<\/span>;<\/span><\/div>
    echo<\/span> \"  @ byte offset <\/span>{<\/span>$meta<\/span>[<\/span>1<\/span>]<\/span>[<\/span>0<\/span>]<\/span>}<\/span> extending <\/span>{<\/span>$meta<\/span>[<\/span>1<\/span>]<\/span>[<\/span>1<\/span>]<\/span>}<\/span> bytes<\/span>n\"<\/span>;<\/span><\/div>
    echo<\/span> \"  it is a <\/span>{<\/span>$meta<\/span>[<\/span>2<\/span>]<\/span>}<\/span> attribute on the tag<\/span>n\"<\/span>;<\/span><\/div>
    echo<\/span> \"  its value <\/span>{<\/span>$meta<\/span>[<\/span>3<\/span>]<\/span>}<\/span>n\"<\/span>;<\/span><\/div>
    echo<\/span> \"     `<\/span>{<\/span>$meta<\/span>[<\/span>4<\/span>]<\/span>}<\/span>`\"<\/span>;<\/span><\/div>
}<\/span><\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
The output here tells us what we want to know:<\/p>\n
\n
\n
\n
Found in <P> an attribute named 'class'<\/div>
  @ byte offset 3 extending 27 bytes<\/div>
  it is a non-duplicate attribute on the tag<\/div>
  its value contains-tag-like-content<\/div>
     `class=\"important><img src=\"`<\/div>
<\/div>
Found in <P> an attribute named 'alert.png\"'<\/div>
  @ byte offset 30 extending 10 bytes<\/div>
  it is a non-duplicate attribute on the tag<\/div>
  its value does-not-contain-tag-like-content<\/div>
     `alert.png\"`<\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
For normative HTML the values are not as surprising. In this case, the missing \"<\/code> has been added to the class<\/code> attribute.<\/p>\n
\n
\n
\n
$html = '<<\/span>p<\/span> class<\/span>=<\/span>\"important\"<\/span>><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"alert.png\"<\/span>><\/span>This is important!<\/<\/span>p<\/span>><\/span>';<\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
Found in <P> an attribute named 'class'<\/div>
  @ byte offset 3 extending 17 bytes<\/div>
  it is a non-duplicate attribute on the tag<\/div>
  its value does-not-contain-tag-like-content<\/div>
     `class=\"important\"`<\/div>
<\/div>
Found in <IMG> an attribute named 'src'<\/div>
  @ byte offset 26 extending 15 bytes<\/div>
  it is a non-duplicate attribute on the tag<\/div>
  its value does-not-contain-tag-like-content<\/div>
     `src=\"alert.png\"`<\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
Summary<\/h2>\n
This code is not meant to be normative; it\u2019s probably missing important details. It\u2019s here to demonstrate one way we can take advantage of the already-available aspects of the HTML API to perform more interesting work.<\/p>\n
In this case, we can tug at some of its internals to build linting and reporting tools which investigate aspects not exposed in the public interface: duplicate attributes and raw attribute values.<\/p>\n
For the use-case of checking whether an attribute is closed or not, it\u2019s a tricky problem to solve. We can only truly resolve this with a set of heuristics to determine the likelihood that an attribute isn\u2019t closed, because HTML parsers will universally interpret any given string in a specific way, and regardless of errors, will produce tags and attributes from it.<\/p>\n
Before we reach for custom regular expressions (PCRE), we can look into the HTML API and consider the sliding scale of safety it presents to us; we can take advantage of the parsing it\u2019s already performing to remove the need to replicate all of HTML\u2019s complicated parsing rules in our custom code.<\/p>","protected":false},"excerpt":{"rendered":"
Today someone was discussing the goal of linting HTML, specifically of detecting unclosed attributes. Consider the following snippet: <p class=”important><img src=”alert.png”>This is important!<\/p> It\u2019s clear that a mistake led to a missing double-quote on the class attribute of the opening <p> tag. While WordPress\u2019 HTML API doesn\u2019t directly report this (because \u201cunclosed attribute\u201d isn\u2019t particularly […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-470","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts\/470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=470"}],"version-history":[{"count":0,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/posts\/470\/revisions"}],"wp:attachment":[{"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xn--mnchen-3ya.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}