mastodon.ie is one of the many independent Mastodon servers you can use to participate in the fediverse.
Irish Mastodon - run from Ireland, we welcome all who respect the community rules and members.

Administered by:

Server stats:

1.6K
active users

#html5

2 posts2 participants0 posts today
Claudio Pires<p>Build any site design without coding! You can have a fully equipped website up and running within just a few minutes. Spark WordPress theme is not just a theme, it’s a collection of amazing examples with tons of features.<br><a href="https://visualmodo.com/theme/spark-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/spark-wor</span><span class="invisible">dpress-theme/</span></a><br>Build your own website with Visualmodo! 🖥️💻📱<br><a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>template</span></a> <a href="https://mastodon.social/tags/plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plugins</span></a> <a href="https://mastodon.social/tags/themes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>themes</span></a> <a href="https://mastodon.social/tags/WordPress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WordPress</span></a> <a href="https://mastodon.social/tags/ecommerce" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ecommerce</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/retina" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>retina</span></a> <a href="https://mastodon.social/tags/marketing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>marketing</span></a> <a href="https://mastodon.social/tags/SEO" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SEO</span></a> <a href="https://mastodon.social/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>website</span></a> <a href="https://mastodon.social/tags/LandingPage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LandingPage</span></a> <a href="https://mastodon.social/tags/SiteBuilder" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SiteBuilder</span></a></p>
🇩🇪 𝕳𝖆𝖑𝖑𝖊𝕬𝖓𝖉𝖊𝖗𝖙<p>Me, when I'm working on a colleague's <a href="https://social.vivaldi.net/tags/project" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>project</span></a> and see the <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://social.vivaldi.net/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a>.</p><p><a href="https://social.vivaldi.net/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://social.vivaldi.net/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>design</span></a> <a href="https://social.vivaldi.net/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://social.vivaldi.net/tags/wordpress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>wordpress</span></a> <a href="https://social.vivaldi.net/tags/w3c" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>w3c</span></a> <a href="https://social.vivaldi.net/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://social.vivaldi.net/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://social.vivaldi.net/tags/html5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html5</span></a> <a href="https://social.vivaldi.net/tags/tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tech</span></a> <a href="https://social.vivaldi.net/tags/Technology" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Technology</span></a> </p><p><a href="https://youtu.be/wLg04uu2j2o?feature=shared" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">youtu.be/wLg04uu2j2o?feature=s</span><span class="invisible">hared</span></a></p>
Claudio Pires<p>Rare WordPress theme is all about building unique, creative and professional websites through industry-leading options network without having to touch a line of code <a href="https://visualmodo.com/theme/rare-wordpress-theme/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">visualmodo.com/theme/rare-word</span><span class="invisible">press-theme/</span></a> Our amazingly flexible network of options is paired with an easy to use interface that allows anyone from beginner to advanced build beautiful, responsive websites 📱💻🖥️<br><a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://mastodon.social/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> <a href="https://mastodon.social/tags/template" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>template</span></a> <a href="https://mastodon.social/tags/plugins" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plugins</span></a> <a href="https://mastodon.social/tags/themes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>themes</span></a> <a href="https://mastodon.social/tags/WordPress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WordPress</span></a> <a href="https://mastodon.social/tags/ecommerce" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ecommerce</span></a> <a href="https://mastodon.social/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>responsive</span></a> <a href="https://mastodon.social/tags/retina" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>retina</span></a> <a href="https://mastodon.social/tags/marketing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>marketing</span></a> <a href="https://mastodon.social/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>website</span></a> <a href="https://mastodon.social/tags/blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blog</span></a> <a href="https://mastodon.social/tags/bootstrap" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>bootstrap</span></a> <a href="https://mastodon.social/tags/slider" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>slider</span></a></p>
Kevin Karhan :verified:<p><span class="h-card" translate="no"><a href="https://mastodon.social/@mrmasterkeyboard" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>mrmasterkeyboard</span></a></span> I know.</p><p>And I'm shure <span class="h-card" translate="no"><a href="https://oxytodon.com/@fuchsiii" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>fuchsiii</span></a></span> could easily make something like the <em>"Windows XP Tour"</em> just with <a href="https://infosec.space/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> + <a href="https://infosec.space/tags/JS6" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS6</span></a> + <a href="https://infosec.space/tags/CSS3" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS3</span></a> and then ship it in like a self-contained <a href="https://infosec.space/tags/AppImage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AppImage</span></a>-style executeable!</p>
Terence Eden’s Blog<p><strong>HTML Ruby and Bidirectional Text</strong></p><p><a href="https://shkspr.mobi/blog/2022/06/html-ruby-and-bidirectional-text/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">shkspr.mobi/blog/2022/06/html-</span><span class="invisible">ruby-and-bidirectional-text/</span></a></p><p></p><p>The set of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp" rel="nofollow noopener noreferrer" target="_blank">HTML <code>&lt;ruby&gt;</code> elements</a> allow us to add pronunciation above text. For example:</p><p>"When you visit the zoo, be sure to see the panda - <ruby>熊<rp>(</rp><rt>Xióng</rt><rp>)</rp></ruby><ruby>猫<rp>(</rp><rt>māo</rt><rp>)</rp></ruby>."</p><p>This is written as:</p><pre><code>&lt;ruby&gt;熊&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Xióng&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;&lt;ruby&gt;猫&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;māo&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;.</code></pre><p>That is, the word or character which needs text above it is wrapped in <code>&lt;ruby&gt;</code>. The pronunciation is wrapped in <code>&lt;rt&gt;</code>. The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp" rel="nofollow noopener noreferrer" target="_blank"><code>&lt;rp&gt;</code> element</a> indicates the presence of a parenthesis - which isn't usually displayed, but will be shown if the browser doesn't support <code>&lt;ruby&gt;</code> syntax.</p><p>That's fairly easy for scripts written left-to-right. But how does it work for scripts like Arabic where the text is written right-to-left, but the user may want the pronunciations left-to-right?</p><p>Let's take the phrase "Hello World" in Arabic: <span>مرحبا بالعالم</span>. Google Translate tells me this is pronounced "marhaban bialealami".</p><p>For a single word, the directionality can be ignored. The browser should be smart enough to place the pronunciation above the word:</p><pre><code>&lt;p&gt;Hello is: &lt;ruby&gt;مرحبا&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;marhaban&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;. What a useful word!&lt;/p&gt;</code></pre><p>Hello is: <ruby>مرحبا<rp>(</rp><rt>marhaban</rt><rp>)</rp></ruby>. What a useful word!</p><p>What about if we have a few words - or a whole sentence - which is entirely RTL?</p><pre><code>&lt;p dir="rtl"&gt;مرحبا بالعالم&lt;/p&gt;</code></pre><p>Is displayed aligned to the right side of the screen:</p><p>مرحبا بالعالم</p><p>There are a few ways to add pronunciation.</p><p><strong>Separate The Words</strong></p><p>The first is to write each word separately. For example <code>&lt;ruby&gt;1st word&lt;/ruby&gt; &lt;ruby&gt;2nd word&lt;/ruby&gt;</code>. Obviously, this isn't normally how you'd write a RTL language! But it does work:</p><pre><code>&lt;p dir="rtl"&gt;&lt;ruby&gt;مرحبا&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;marhaban&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt; &lt;ruby&gt;بالعالم&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;bialealami&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;&lt;/p&gt;</code></pre><p>Which displays as:</p><p><ruby>مرحبا<rp>(</rp><rt>marhaban</rt><rp>)</rp></ruby> <ruby>بالعالم<rp>(</rp><rt>bialealami</rt><rp>)</rp></ruby></p><p>It helps to think of the way the characters of the script are stored in memory.</p><p>A word that <em>displays</em> as <code>ABC</code> is <em>stored</em> as <code>C</code> <code>B</code> <code>A</code>.</p><p>So the above is written "correctly" - even though it looks odd in the source-code view.</p><p><strong>All At Once</strong></p><p>But there is an alternative if you want the source text to look natural - i.e. <code>[2nd word] [1st word]</code>.</p><p>It's a bit messy, but you can write the LTR text in <em><code>&lt;rt&gt;</code></em> "backwards"!</p><pre><code>&lt;p dir="rtl"&gt;&lt;ruby&gt;مرحبا بالعالم&lt;rt&gt;bialealami marhaban&lt;/rt&gt;&lt;/ruby&gt;&lt;/p&gt;</code></pre><p><ruby>مرحبا بالعالم<rt>bialealami marhaban</rt></ruby></p><p>But, again, that doesn't seem very satisfying! It also divorces the pronunciation from the original word - which is unfortunate for screenreaders.</p><p>The Ruby layout algorithm is usually clever enough to group words separated by spaces:</p><p><ruby>مرحبا بالعالم<rt>B A</rt></ruby></p><p><ruby>مرحبا بالعالم<rt>Bbbbbbbbbbbbbb Aaaaaaaaaaaaa</rt></ruby></p><p>Although, if the pronunciations have a significantly different length than each other, it can get a bit messy:</p><p><ruby>مرحبا بالعالم<rt>Bbbbbbbbbbbbbb A</rt></ruby></p><p><ruby>مرحبا بالعالم<rt>B Aaaaaaaaaaaaa</rt></ruby></p><p>In which case, you probably need to go for the first technique and wrap each word in its own <code>&lt;ruby&gt;</code> element:</p><p><ruby>مرحبا<rp>(</rp><rt>A</rt><rp>)</rp></ruby> <ruby>بالعالم<rp>(</rp><rt>Bbbbbbbbbbbbbb</rt><rp>)</rp></ruby></p><p><strong>BDO</strong></p><p>It's tempting to think that simply using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo" rel="nofollow noopener noreferrer" target="_blank">the <code>&lt;bdo&gt;</code> element</a> can help us here. It can't!</p><p>Using the bidirectional override will display <em>characters</em> RTL, rather than words.</p><pre><code>&lt;p dir="rtl"&gt;&lt;ruby&gt;مرحبا بالعالم&lt;rt&gt;&lt;bdo dir="rtl"&gt;marhaban bialealami&lt;/bdo&gt;&lt;/rt&gt;&lt;/ruby&gt;&lt;/p&gt;</code></pre><p>Becomes:</p><p><ruby>مرحبا بالعالم<rt>marhaban bialealami</rt></ruby></p><p>I guess you could spell each word backwards. Which would be extremely annoying for everyone and a complete nightmare for screen readers!</p><p>Instead, it can be fixed if each word is then given an explicit LTR direction:</p><pre><code>&lt;p dir="rtl"&gt;&lt;ruby&gt;مرحبا بالعالم&lt;rt&gt; &lt;bdo dir="rtl"&gt; &lt;span dir="ltr"&gt;marhaban&lt;/span&gt; &lt;span dir="ltr"&gt;bialealami&lt;/span&gt; &lt;/bdo&gt;&lt;/rt&gt;&lt;/ruby&gt;&lt;/p&gt;</code></pre><p><ruby>مرحبا بالعالم<rt> <span>marhaban</span> <span>bialealami</span> </rt></ruby></p><p><strong>Is that it?</strong></p><p>So, I <em>think</em> those are the only ways to achieving mixing bidirectional text pronunciation. But I'd welcome any corrections and suggestions!</p><p></p><p><a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/html5/" target="_blank">#HTML5</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://shkspr.mobi/blog/tag/i18n/" target="_blank">#i18n</a></p>
Timo Tijhof<p>You'd think Google, having launched schema.org, knows how to produce valid schema.org metadata and HTML5.</p><p>YouTube: How about a `&lt;span&gt;` inside the head, and `&lt;link rel=alternative&gt;` inside the body?</p><p>HTML5 parsers:<br>Thanks, I'll take that span as your implied end of `&lt;head&gt;`, and raise you an implied start of `&lt;body&gt;`. Everything that follows is now part of the body.</p><p>Context:<br><a href="https://github.com/Ranchero-Software/NetNewsWire/issues/902#issuecomment-2990075755" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/Ranchero-Software/N</span><span class="invisible">etNewsWire/issues/902#issuecomment-2990075755</span></a></p><p><a href="https://fosstodon.org/tags/NetNewsWire" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NetNewsWire</span></a> <a href="https://fosstodon.org/tags/WebStandards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebStandards</span></a> <a href="https://fosstodon.org/tags/whatwg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>whatwg</span></a> <a href="https://fosstodon.org/tags/HTML5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML5</span></a> <a href="https://fosstodon.org/tags/schemaorg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>schemaorg</span></a> <a href="https://fosstodon.org/tags/google" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>google</span></a></p>

My version of a Pilot Logbook application reached alpha status. 🙂💪

It stores the minimum data required by the German NfL 2212-21, plus some data recorded in my paper log. And some data I deem interesting, like engine time and fuel consumption.

I even managed to hack together a CSV parser (no native support in Javascript 🙄), so that the program can import data from Vereinsflieger (fleet management web app of my club).

Replied in thread

@ciourte @netopwibby Needless to say I've only heard of some Spanish low-cost #MVNO offering one device only in a #prepaid #bundle when #FirefoxOS was unveiled at the #MWC in #Barcelona based off coverage in @ct_Magazin at the time.

  • Cuz I remember #WebDevs like @fuchsiii really loving it because it was the then hot & fresh #HTML5 + #JS6 + #CSS3 combo to make it super-easy to do #Apps. All one needs to build an app was #Firefox as Browser and the ability to basically zip' it.

Alas @Mozilla deciding on purpose to literally splinter the market by letting #MNO|s and MVNOs run their #AppStore|s instead of a #centralized model, making the situation worse than in the "P.R." #China where there are several vendor-independent #AppStores for #Android.

  • "Conspiracy Theorists" even suggested that this was deliberate self-sabotage to benefit #Google and #Android, tho needless to say Firefox OS aimed at devices & specs that were too low for Android.

Still, I'm #StillMad at #Mozilla for faceplanting Firefox OS cuz it had the easiest way to get started and a good architecture being every #App is just a #WebApp and all the system calls were standard #HTML5 permissions and nothing fancy.

youtube.com/watch?v=p76exsJn7SU

Posting in case this helps someone else.

For the last month or two, I've had problems visiting some sites with #Firefox. The sites use #Cloudflare, and it would give the "prove you're a human by checking this box" prompt. I'd never had problems with this before.

Suddenly that started failing consistently. Clicking the box would do something, but then just reload the challenge. There was no way to pass it. I tried reconfiguring and even disabling the "uBlock Origin" extension, cookie policies, other things - no luck.

Based on a comment on this discussion:
ask.metafilter.com/385480/fixi

... I tried disabling the "Disable HTML5 Autoplay" extension, and ... fixed! That was *not* an obvious candidate for causing the problem, unlike adblockers etc.

So it appears Cloudflare changed their in-browser testing JS such that it requires HTML5 autoplay to pass the check. Which is ... special. I can think of lots of people with very good reasons to have that disabled.

Anyways, I hope this helps someone.

ask.metafilter.comfixing Verify You Are A Human - Firefox + cookies + UBlock OriginCloudflare's 'verify that you are a human' test always fails for me in Firefox, but works in Safari - I can load sites in Safari that won't load in Firefox. I suspect the Firefox problem is my...

Rare WordPress theme is all about building unique, creative and professional websites through industry-leading options network without having to touch a line of code visualmodo.com/theme/rare-word Our amazingly flexible network of options is paired with an easy to use interface that allows anyone from beginner to advanced build beautiful, responsive websites 📱💻🖥️
#webdesign #HTML5 #CSS3 #template #plugins #themes #WordPress #ecommerce #responsive #retina #marketing #website #blog #bootstrap #slider

VisualmodoRare WordPress Theme - Ultimate Responsive Template by VisualmodoRare WordPress Theme can be used for any type of website design building; business, corporate, portfolio, blog, shop, agency and much more in only one tool

Stop using preg_* on HTML and start using \Dom\HTMLDocument instead

shkspr.mobi/blog/2025/05/stop-

It is a truth universally acknowledged that a programmer in possession of some HTML will eventually try to parse it with a regular expression.

This makes many people very angry and is widely regarded as a bad move.

In the bad old days, it was somewhat understandable for a PHP coder to run a quick-and-dirty preg_replace() on a scrap of code. They probably could control the input and there wasn't a great way to manipulate an HTML5 DOM.

Rejoice sinners! PHP 8.4 is here to save your wicked souls. There's a new HTML5 Parser which makes everything better and stops you having to write brittle regexen.

Here are a few tips - mostly notes to myself - but I hope you'll find useful.

Sanitise HTML

This is the most basic example. This loads HTML into a DOM, tries to fix all the mistakes it finds, and then spits out the result.

 PHP$html = '<p id="yes" id="no"><em>Hi</div><h2>Test</h3><img />';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED , "UTF-8" );echo $dom->saveHTML();

It uses LIBXML_HTML_NOIMPLIED because we don't want a full HTML document with a doctype, head, body, etc.

If you want Pretty Printing, you can use my library.

Get the plain text

OK, so you've got the DOM, how do you get the text of the body without any of the surrounding HTML

 PHP$html = '<p><em>Hello</em> World!</p>';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR , "UTF-8" );echo $dom->body->textContent;

Note, this doesn't replace images with their alt text.

Get a single element

You can use the same querySelector() function as you do in JavaScript!

 PHP$element = $dom->querySelector( "h2" );

That returns a pointer to the element. Which means you can run:

 PHP$element->setAttribute( "id", "interesting" );echo $dom->querySelector( "h2" )->attributes["id"]->value;

And you will see that the DOM has been manipulated!

Search for multiple elements

Suppose you have a bunch of headings and you want to get all of them. You can use the same querySelectorAll() function as you do in JavaScript!

To get all headings, in the order they appear:

 PHP$headings = $dom->querySelectorAll( "h1, h2, h3, h4, h5, h6" );foreach ( $headings as $heading ) {   // Do something}

Advanced Search

Suppose you have a bunch of links and you want to find only those which point to "example.com/test/". Again, you can use the same attribute selectors as you would elsewhere

 PHP$dom->querySelectorAll( "a[href^=https\:\/\/example\.com\/test\/]" );

Replacing content

Sadly, it isn't quite as simple as setting the innerHTML. Each search returns a node. That node may have children. Those children will also be node which, themselves, may have children, and so on.

Let's take a simple example:

 PHP$html = '<h2>Hello</h2>';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );$element = $dom->querySelector( "h2" );$element->childNodes[0]->textContent = "Goodbye";echo $dom->saveHTML();

That changes "Hello" to "Goodbye".

But what if the element has child nodes?

 PHP$html = '<h2>Hello <em>friend</em></h2>';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );$element = $dom->querySelector( "h2" );$element->childNodes[0]->textContent = "Goodbye";echo $dom->saveHTML();

That outputs <h2>Goodbye<em>friend</em></h2> - so think carefully about the structure of the DOM and what you want to replace.

Adding a new node

This one is tricky! Let's suppose you have this:

 HTML<div id="page">   <main>      <h2>Hello</h2>

You want to add an <h1> before the <h2>. Here's how to do this.

First, you need to construct the DOM:

 PHP$html = '<div id="page"><main><h2>Hello</h2>';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );

Next, you need to construct an entirely new DOM for your new node.

 PHP$newHTML = "<h1>Title</h1>";$newDom = \Dom\HTMLDocument::createFromString( $newHTML, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );

Next, extract the new element from the new DOM, and import it into the original DOM:

 PHP$element = $dom->importNode( $newDom->firstChild, true ); 

The element now needs to be inserted somewhere in the original DOM. In this case, get the h2, tell its parent node to insert the new node before the h2:

 PHP$h2 = $dom->querySelector( "h2" );$h2->parentNode->insertBefore( $element, $h2 );echo $dom->saveHTML();

Out pops:

 HTML<div id="page">   <main>      <h1>Title</h1>      <h2>Hello</h2>   </main></div>

An alternative is to use the appendChild() method. Note that it appends it to the end of the children. For example:

 PHP$div = $dom->querySelector( "#page" );$div->appendChild( $element );echo $dom->saveHTML();

Produces:

 HTML<div id="page">   <main>      <h2>Hello</h2>   </main>   <h1>Title</h1></div>

And more?

I've only scratched the surface of what the new 8.4 HTML Parser can do. I've already rewritten lots of my yucky old preg_ code to something which (hopefully) is less likely to break in catastrophic ways.

If you have any other tips, please leave a comment.

Terence Eden’s Blog · Stop using preg_* on HTML and start using \Dom\HTMLDocument instead
More from Terence Eden