203 private links
The values of HTML are not exactly the ones of HTML first.
https://html-first.com/
The author recommends to include instead:
- HTML that is actual HTML, i.e., that is valid (common sense, until you start checking)
- HTML that makes full use of HTML features, i.e., that’s not XHTML–HTML
- HTML that is used according to purpose (aka semantic HTML)
- HTML that is accessible
#futurBilletDeBlog
#idea #browserExtension a view source with automatic indentation
Trusted types are interesting indeed. They won't fit all cases though: what happens if I want to insert HTML? These are cases though, and the majority could use these.
Source of markup ghosts:
- proprietary markup introduced by browser vendors
- specs which didn*t see uptake like HTML3
- 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 attributesdingbat
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 withme
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
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>