Source of markup ghosts:

1. proprietary markup introduced by browser vendors
2. specs which didn*t see uptake like HTML3
3. use case specific markup on devices like WebTV or early smartphones

Some old tags:

• <audioscope> to display the sound over time. A demo https://www.youtube.com/watch?v=tM7YVhar2Dg
• <au> for authors
• <blackface> for double-weight boldface... in HTML 🤡
• <center> oh shit
• <font> and color attributes
• dingbat attribute to embed emojis, extended unicode entities, icon fonts and custom things. Now it is used as < for example and does not rely on the attribute anymore.
• <multicols> ....
• <person> in HTML 3, but it opens the door for so many other tags. Now instead we can rely on <a rel="author"> or with me

and more

It can be a meme: instead of talking about semantics, UX is trendy and can be used as trendy shit word instead.
UX HTML is more accessible, less error-prone, more maintainable because it uses the right tags and attributes. Yes it is semantic at the end.
So UX of HTML matters.

Let's take a look at how to spin up a simple Node server and use custom elements as templates in three popular formats

As always it depends of the need.

A lightweight frameworks for HTML templating

The URL could become https://www.htmhell.dev/adventcalendar/2023/ later on

#idea #project

1. a browser extension shows if a page is in quirk-mode
2. The extension suggests how to make it HTML 5 compliant and in "no-quirk" mode

Great explanation of the rel attributes that provide:

• information to the resource linked
• behaviors while navigating

Create an accessible <marquee> tag

Use <button> if you can count on JavaScript being available, and flipping the switch has an immediate effect.
Use <input type="checkbox" if you want to progressively enhance the control, and flipping the switch will only take effect when the user submits it.

The post explains how.

Ja klar, bei manchen Sachen sollte man das mit ARIA Elementen anreichern, aber bei vielem könnte man es verbessern indem man einfach die richtigen HTML Tags/Attribute verwendet.

Use Cases anzeigen und sie durchsuchen können.

Beispielen:

• Accordion: <details>/<summary>
• <dialog>
• Definitionsliste: <dl> / <dt> / <dd>
• Definition steht im Paragraph <dfn>
• Listen: <ol> / <ul>
• Mehr Kontekt <time>,<kbd>, <abbr>
• Separator zwischen Paragraphen: <hr>
• Abkürzung:
• <address>
• <quote> / <blockquote> / <cite>
• semantische Struktur der Seite: <article> / <section> mit o. ohne Heading / <footer> / <header> / <main> / <aside> / <nav>

A section tag start to be a generic région only when it is labelled. It provides semantics, but nothing else out of the box.

As developer it increase readability and allow to quickly set a specific landmark when needed.

Nice to get it right the first time with a minimal example

box-sizing does not work well with details and summary: it is implemented as shadow DOM in Chrome.