Title: Introducing the HTML API in WordPress 6.2
Author: Birgit Pauli-Haack
Published: March 7, 2023
Last modified: October 22, 2024
---
[ ](https://profiles.wordpress.org/bph/) [Birgit Pauli-Haack](https://profiles.wordpress.org/bph/)
3:17 pm _on_ March 7, 2023
Tags: [6.2 ( 90 )](https://make.wordpress.org/core/tag/6-2/),
[dev-notes ( 647 )](https://make.wordpress.org/core/tag/dev-notes/), [dev-notes-6.2 ( 19 )](https://make.wordpress.org/core/tag/dev-notes-6-2/),
[html-api ( 6 )](https://make.wordpress.org/core/tag/html-api/)
# Introducing the HTML API in WordPress 6.2
**This post was co-authored by Adam Zielinski [@zieladam](https://profiles.wordpress.org/zieladam/)
and Dennis Snell [@dmsnell](https://profiles.wordpress.org/dmsnell/) **
WordPress 6.2 introduces [WP_HTML_Tag_Processor](https://core.trac.wordpress.org/ticket/57575)–
a tool for blockBlock Block is the abstract term used to describe units of markup
that, composed together, form the content or layout of a webpage using the WordPress
editor. The idea combines concepts of what in the past may have achieved with shortcodes,
custom HTML, and embed discovery into a single consistent API and user experience.
authors to adjust HTMLHTML HyperText Markup Language. The semantic scripting language
primarily used for outputting content in web browsers. tagtag A directory in Subversion.
WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.),
the common convention of tags in version control systems. (Not to be confused with
post tags.) attributes in block markup within PHPPHP The web scripting language
in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher.
It’s the first component in a new HTML processing APIAPI An API or Application Programming
Interface is a software intermediary that allows programs to interact with each
other and share data in limited, clearly defined ways..
Updating HTML in WordPress has always required using uncomfortable tools. Regular
expressions are difficult and prone to all kinds of errors. `DOMDocument` is resource-
heavy, fails to handle modern HTML correctly, and isn’t available on many hosting
platforms.
`WP_HTML_Tag_Processor` takes the first step towards bridging this gap.
## The Tag Processor can reliably update HTML attributes
The Tag Processor finds specific tags and can change its attributes. Here’s an example
setting an `alt` attribute on the first `img` tag within a block of HTML.
```notranslate
$html = '
';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Husky in the snow' );
}
echo $p->get_updated_html();
// Output:
//
```
The `next_tag()` method moves to the next available tag in the HTML, but also accepts
a tag name, a CSSCSS Cascading Style Sheets. class, or both in order to find specific
tags. According to the HTML specification, lookup of tag and attribute names aren’t
case-sensitive, but CSS class names are.
```notranslate
if ( $p->next_tag( array( 'tag_name' => 'DIV', 'class_name' => 'block-GROUP' ) ) ) {
$p->remove_class( 'block-group' );
$p->add_class( 'wp-block-group' );
}
```
Operations are safe by default:
* remove an attribute without first checking if it exists,
* add a CSS class which might already be there,
* set an attribute value without ensuring that it’s not duplicating an existing
one.
You no longer need to be concerned that your code mistakes for a real tag the content
inside a `
HTML;
$p = new WP_HTML_Tag_Processor( $ugly_html );
if ( $p->next_tag( 'div' ) ) {
$p->add_class( 'bold' );
}
echo $p->get_updated_html();
// Output:
//
//
```
The Tag Processor operates fast enough to run in critical hot code paths and incurs
almost no memory overhead. In WordPress 6.2 it replaces bugbug A bug is an error
or unexpected result. Performance improvements, code optimization, and are considered
enhancements, not defects. After feature freeze, only bugs are dealt with, with
regressions (adverse changes from the previous version) being the highest priority.-
prone code relying on regular expressions and string-searching to perform similar
updates.
For more advanced use of the Tag Processor, read through the extensive in-class
documentation and learn how to…
* …set bookmarks to re-visit parts of the document which have already been scanned
and modified.
* …visit closing tags like `` in addition to the opening tags.
* …run advanced and stateful queries by visiting every tag in a document.
## Further considerations
There are many things the Tag Processor doesn’t do: it doesn’t build a DOM document
tree, find nested tags, or update a tag’s inner HTML or inner text. Work on new
HTML-related APIs continues, and a future WordPress release will build upon this
work to enable accessing all of a block’s attributes from within PHP (if the block
supplies a `block.json` file), finding tags using a CSS selector, and modifying
the HTML structure with new tags, removed tags, and updated inner markup.
You can keep up with [further development via this overview issues](https://github.com/WordPress/gutenberg/issues/44410)
on the GutenbergGutenberg The Gutenberg project is the new Editor Interface for
WordPress. The editor improves the process and experience of creating new content,
making writing rich content much simpler. It uses ‘blocks’ to add richness rather
than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/)
GitHubGitHub GitHub is a website that offers online implementation of git repositories
that can easily be shared, copied and modified by other developers. Public repositories
are free to host, private repositories require a paid subscription. GitHub introduced
the concept of the ‘pull request’ where code changes done in branches by contributors
can be reviewed and discussed before being merged by the repository owner. [https://github.com/](https://github.com/)
Repo.
[#6-2](https://make.wordpress.org/core/tag/6-2/), [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/),
[#dev-notes-6-2](https://make.wordpress.org/core/tag/dev-notes-6-2/), [#html-api](https://make.wordpress.org/core/tag/html-api/)
### Share this:
* [ Threads ](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/?share=threads)
* [ Mastodon ](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/?share=mastodon)
* [ Bluesky ](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/?share=bluesky)
* [ X ](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/?share=x)
* [ Facebook ](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/?share=facebook)
* [ LinkedIn ](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/?share=linkedin)
1. 
2. [Hardeep Asrani](https://profiles.wordpress.org/hardeepasrani/) 3:20 pm _on_
March 7, 2023
3. That’s some great stuff. Pretty excited to use this.
4. 
5. [zieladam](https://profiles.wordpress.org/zieladam/) 3:36 pm _on_ March 7, 2023
6. You can also learn WP_HTML_Tag_Processor in this interactive tutorial I wrote:
7. [https://adamadam.blog/2023/02/16/how-to-modify-html-in-a-php-wordpress-plugin-using-the-new-tag-processor-api/](https://adamadam.blog/2023/02/16/how-to-modify-html-in-a-php-wordpress-plugin-using-the-new-tag-processor-api/)
8. Enjoy!
9. 
10. [marybaum](https://profiles.wordpress.org/marybaum/) 12:52 am _on_ March 9,
2023
11. Wow! This just might answer a question I’ve been pondering for a week or so about
filtering strings …
12. 
13. [sinanisler](https://profiles.wordpress.org/sinanisler/) 4:49 pm _on_ March
9, 2023
14. me like it 🙂
15. 
16. [Business Optimizer](https://profiles.wordpress.org/businessoptimizer/) 7:25
pm _on_ March 17, 2023
17. That’s pretty exciting! This will definitely help with more automation 😀
18. 
19. [Amirhossein Hosseinpour](https://profiles.wordpress.org/amirhpcom/) 7:29 pm
_on_ March 17, 2023
20. This is **awesome**, can’t wait to use it in my projects 😍🤝
21. 
22. [Daniel](https://profiles.wordpress.org/danielvoelk/) 8:39 pm _on_ March 17,
2023
23. Awesome news 🙂
24. 
25. [Creative Werk Designs](https://profiles.wordpress.org/creativewerkdesigns/)
2:16 pm _on_ March 20, 2023
26. Great News 🙂
27. 
28. [alexstandiford](https://profiles.wordpress.org/alexstandiford/) 2:29 pm _on_
March 24, 2023
29. OOH! This is awesome! I have so many applications for this!
Comments are closed.
# Post navigation
[← Miscellaneous Editor changes in WordPress 6.2](https://make.wordpress.org/core/2023/03/07/miscellaneous-editor-changes-in-wordpress-6-2/)
[Shadows in Global Styles with WordPress 6.2 →](https://make.wordpress.org/core/2023/03/07/shadows-in-global-styles-with-wordpress-6-2/)