Tidbits tagged with #html (9)

I am working on the <pico-viewport-stats> element examples. The web site is a simple HTML page, which I stripped down to the bare minimum. A bit too much!
Continue reading →

HTML is getting more and more semantic it seems. I am seriously wondering what this means for building things like a blog, like this one here. It becomes more and more reasonable to write pure HTML, instead of markdown, doesn't it? Maybe I am just late and just learned about some HTML elements now. What a shame.
Continue reading →

On a friend's linkedin profile I saw some links to his content and since linkedin picks up in traffic and professional relevance, I thought I need to get my site's traffic better shareable.
Continue reading →

More HTML provides a CBE (Customized Built-in Element) for upgrading heading tags such as H1, H2, ... to render a link-icon beside them, as many know it from github readme files.
I wanted to upgrade all picostitch sites automatically by just including a <script> which upgrades all headings on the page and adds this functionality.
It is not possible to upgrade a parsed and rendered element (like an H1) afterwards.
Continue reading →

There is nothing new about websites being backwards compatible. The HMTL Design Principles from the W3C are from November 2007 and they are not outdated!
Continue reading →

I read the real book a long time ago, but I just moved this blog to use proper <aside>, <article> and alikes today, I had forgotten a lot. But I remember it being the best HTML(5) in depth I ever saw. https://diveinto.html5doctor.com/ a must read!

• validator.nu seems to be the same used at validator.w3.org. Describes itself as "Validator.nu is validation 2.0".
• Structured Data Linter, linter.structured-data.org "The Linter understands the microdata, JSON-LD and RDFa formats according to their latest specifications." they say
• yandex's Structured data validator "it also checks if the markup meets the requirements of Yandex's services".
• Bing Markup Validator requires a sign-in and than it "shows the markup we’ve discovered, including HTML Microdata, Microformats, RDFa, Schema.org, and OpenGraph".
• Google's structured data testing tool verifies the schema.org (structured data) validity, I assume they validate as it is relevant for their search engine.

Click below to see the code which creates this kinda dropdown, it is the <details> element.
Continue reading →

Wondering how to layout and use <section>, <h1>, <h2>, etc. I came across the first place one should read on MDN Using HTML sections and outlines also very insightful and more specific is this on the W3C wiki HTML/Usage/Headings/Missing. If you have 27 minutes to learn how to use all those semantic tags watch Brian Haferkamp's Semantic Elements and Structure a very well explained video.