Validate the wrapped HTML

A trend emerges for specialized specification file (such as LICENSE or README). The author proposes one for HTML.md:

* Use the elements most appropriate semantically.
* Use as little HTML as possible.
* Validate all HTML output against an HTML validator (preferably the W3C one), and fix any errors.

About the <picture> syntax which the author finds great.

On the contrary, the srcset and sizes attributes on one image are hard to use. "So, we are left describing the all of the sizes that an element will be, across every breakpoint and container query, as a single string, in an HTML attribute. How disgusting."

A tool is neede to write media queries in the sizes attribute.

How is a tool supposed to generate (min-width: 1340px) 257px, (min-width: 1040px) calc(24.64vw - 68px), (min-width: 360px) calc(28.64vw - 17px), 80px though?

The author proposes to bury this attribute and use sizes="auto". The developer can rely on loading="lazy" to load the images after the layout is computed, thus the browser know the size in advance.
sizes values remain a must have for images displayed way up at the top of the page... well sizes="100vw" is a good fit for it, isn't it?
All other images? loading="lazy" sizes="auto"

Sounds logic :)

Render #html where the data lives.
If its stored on the backend in a database or cache, render HTML there and avoid sending potentially sensitive data to the client.
If state lives only on the client, render it there with plain old JS or your library of choice.

It's self-explanatory based on the semantic!

Mon code en PHP qui mange du HTML et sort du text/plain, sans les tags, mais en conservant au mieux les retours à la ligne, retirant les liens du corps du texte pour les lister tout à la fin.

En particulier, il s’agit ici de parser des e-mails au format HTML, et de les convertir en text/plain. Problème : beaucoup d’e-mails HTML sont fait avec des tableaux et beaucoup de bruit bien dégueulasse.

The author provides an history about the base, reset ,normalize and classless stylesheets.

The page itself is a demo of base.css, a classless stylesheet, and document itself.

Each topic is covered by a description, the rules and the relying css implementation. Each rule is well meant for accessibility such as "You should read a caption without having to scrol". It starts with the CSS Properties.

Use CSS properties for customization. There is the root style rules:

1. Set customization options on the the root element for all elements
2. Use native properties for font family and font size options.a
3. For font size, CSS has font relative units to create variations from the root or parent value.
4. For font family, it's useless to use custom property. Its value, a string value, can't create variations. Variation of font family would be by, if possible, using font variant alternates. a
5. Use custom property for line height. This maintains unitless value while creating automatic variations for blocks. b
6. Use custom property for pseudo content. This enables fallback trick for its native counterpart. c
7. Use custom property for the others due to lack of native properties. d
8. Prevent adjustments of font size orientation changes in iOS
9. Remove padding and margin, use box model of border box, and inherit color and font on all elements.

The library defines carefully the font-family, font-size, line-height, line-length, color, styles, blocks, mixes and phrases.

A font family declaration is a set of typefaces to create safer designs. Using multiple typefaces requires a sound knowledge of type pairings: space, type (sans, serif, cursive), wight, width, style normal and italic, cases: smalls, caps and smapp caps, roles: caption, body and display.

Font-sizes are defined with the em unit and relative calculations based on a --font-scale value.

The line height is computed based on the element around it. For example the paragraph following a hgroup with a heading. It creates a cohesive design.
All line height are derived from a --line-height value.

To respect the support of dark and light mode, developers must use the light-dark() function. Prefer human-based color mdoels such as LCH or OKLCH. The primary color component is Hue. Lightness and Chroma creates variations. Variations for one hue is a monochromatic pallete; for 2 hues is diadic; for 3 hues is triadic; and so on. CSS can programmatically create a live pallete from one hue using calc(). A 90deg deviation creates a complementary scheme; a type of diadic.

The web is filled with unsemantic styles: the absence of styles, the misuse of styles, the lack of unique styles. This can be seen through the lens of base stylesheets, as of writing.
All components — blocks, mixes, and phrases of media and forms — should have unique styles.

Blocks define region in the HTML document. Subsections uses one _ for each nesting level.

Mixes use all-round borders to define the boundary of their content

Phrases is all about content and forms. They are inline content, so their block content is maintained within a line height. Each phrase is clearly identified

No event listeners. No state tracking. No ARIA updates handled in JavaScript. I focused the button, and the tooltip appeared. I pressed the Esc key, and it disappeared.

• popovertarget connects the button to a popover element
• popovertargetaction specifies what should happen (show, hide, toggle as default)
• popover declares an HTML element can be targeted by popovertarget (ou .showPopover())

Note Floating UI already solves many of these issues. CSS anchor positioning should solve most of the layout stuff

A decision tree: https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/getting-started-popover-api/5-popover-api-browser-support.png

It feels wrong to write HTML that way, but maybe I am too used to the HTML we daily use as web developer.

I like the research though.

Des définitions avec des exemples de locales.

i18n: The design and development of a product that is enabled for target audiences that vary in culture, region, or language.
i10n: The tailoring of a system to the individual cultural expectations of a specific target market or group of individuals.
Locale: an identifier for a set of international preferences
international

Ainsi que les RFCs les définissant, avec notamment l'exemple de l'en-tête HTTP "Content-Language", "Accept-Language".
Les locales sont aussi utilisées via l'attribut lang, la spécificité de translate, dir, hreflang en HTML; et les possiblités d'usages en CSS via les sélecteurs

<details>  
  <summary class="video-summary">
    <!-- Video Placeholder Image -->
    <img src="https://lab.n8d.studio/htwoo/htwoo-core/images/videos/big-bug-bunny.webp" class="video-thumbnail">
    <!-- Play Button -->
    <svg class="video-playicon" data-id="icon-play-filled" viewBox="0 0 32 32" data-icontype="filled"><path d="m11.167 5.608 16.278 8.47a2.169 2.169 0 0 1 .011 3.838l-.012.006-16.278 8.47a2.167 2.167 0 0 1-3.167-1.922V7.529a2.167 2.167 0 0 1 3.047-1.981l-.014-.005.134.065z"></path></svg>
  </summary>

  <!-- we'll get here... -->
</details>

When a visitor decides to watch the video and clicks on the thumbnail, the open attribute will be placed by the browser on the details attribute, which means the video summary can be hidden.

1. unsystematic
2. valid
3. semantic
4. Accessible
5. Required-only
6. hyper-optimized

a thing you absolutely cannot do is nest one interactive control inside another

it has few examples.

Shadcn makes the radio button overly complex, even if <input type="radio" name="beverage" value="coffee" /> with 30 lines of CSS is enough.
The library uses 3 imports (and 2 components) and 45 lines of code and ARIA.

Text rotating at the borders of an image

Use cases for HTML only:

• Accordions
• input with Autofilter suggestions dropdown (<datalist>)
• modals / popover with popover and popovertarget

Selon le besoin ou une question, le service propose un tag HTML dédié: button, a, output,. ...

The website author is available in different format than HTMLz

The contrary of HTMLHell, a page full of tips: HTML Heaven.