HTML

Very good - on underlining links

We shouldn’t rely on colour alone to indicate that something is interactive.

Take links, for example. Sure, you can give them a different colour to the surrounding text, but you shouldn’t stop there. Make sure there’s something else that distinguishes them. You could make them bold. Or you could stick with the well-understood convention of underlying links.

---- Also see https://adactio.com/journal/22085 follow up for underline and line-height with the unit lh.

Forms are how websites interact with users and can help your organization grow. Think about the forms on your own website or that you use to interact with your favorite companies. For example, login, payment, or event registration forms just to name a few.

Obviously, forms are important to get right. We don’t want a user’s experience to be frustrating or lead to them not being able to complete the form. That can mean the loss of a sale, customer, attendee, or confidence in the organization.

In this article, we’ll briefly go over form functionality that websites often don’t consider. These strategies can make your forms more usable for all users and accessible for users with disabilities.

Autofill and paste functionality Usable and accessible error message pattern Usable and accessible date field Auto formatting fields

A small web development thing I’d missed until yesterday:

When you want a link to open a page in a new tab, you’ve long been able to add the attribute target="_blank" to the tag. The problem was, that actually gave the opened pages rights to their referrer: it opened a security hole that could potentially have leaked user information or opened the door to phishing.

In response to that, the received wisdom was to also add rel="noopener" to the tag — or, more commonly, rel="noopener noreferrer", which strips referrer information from analytics. (Please don’t do this second part. For all kinds of reasons, it’s useful for a publisher to see who’s sending them traffic.) I’ve been adding noopener for years.

It turns out that browsers have been automatically setting this for links where target="_blank" since 2021: for three full years (and, actually, longer for Safari and Firefox). So there’s no need to add it anymore. There’s no harm in setting it, but there’s also no need.

A book about how to create a simple website and publish it on Neocities.

HTML isn’t only for people working in the tech field. It’s for anybody, the way documents are for anybody. HTML is just another type of document. A very special one—the one the web is built on.

I’m Blake Watson. I’ve been building websites since the early 2000s. Though I work professionally in the field, I feel strongly that anyone should be able to make a website with HTML if they want. This book will teach you how to do just that. It doesn’t require any previous experience making websites or coding.

I will cover everything you need to know to get started in an approachable and friendly way.

Sehr ausführliche Referenz!

Recommended Minimum

• meta charset
• meta viewport
• title entspricht dem Grundgerüst aus dem Buch

erklärt auch alle anderen Elemente: <base> <link> <style> <script> und <noscript>

Meta Link Icons Social Meta Browser / Platforms

Netter Artikel von Stephanie Eckles mit schönen Beispielen für K07.

HTML is supposed to be easy to learn. And sure, the basics are pretty clear, like when to use a p over an a. (But, lol, watch out for when to use a vs button).

KilianValkhof.com Mastodocon @kilian@mastodon.social

It's one of the core principles of web development and it means that you should Choose the least powerful language suitable for a given purpose.

Custom Switches (genial)

• Checkbox wird per CSS zu einem Schieberegler
• appearance: none = geil
• input checkbox wird grauer Hintergrund
• ::before wird little white dot
• :checked { background: green }
• :checked::before { transform: translateX(1rem); }

Datalist, a native autosuggest

A color picker that does more <label> <input type="color" /> Color </label>

Accordions Dialog modals

There are dozens more examples I could've added into this article, here are just some you can look into:

• Native smooth scrolling with scroll-behavior: smooth (but only when prefers-reduced-motion: no preference matches!),
• Native carousels with scroll-snap,
• "In-view" elements with position: sticky

…Not to name the whole concept of container queries.

And if we look into the future, we're getting even more cool things:

• Scroll driven animations
• Masonry layouts with grid-template-rows: masonry
• A fully stylable select with the new selectlist element (where you can style each part of a select without destroying all the native functionality it comes with)
• The :has() selector that's going to eliminate a whole class of JS selection