A Call for Consensus on HTML Semantics | Stephanie Eckles
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).
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)
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
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
Learn HTML (Estelle Weyl, web.dev von Google, 04/2023)
This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.
Gefunden via Mastodon. Toot:
https://front-end.social/@estelle/110195384954679374#.
How to transfigure wireframes into HTML (Laura Aigmüller, HTMHell.dev Adventskalender, 12/2022)
Sehr schöner Artikel mit einem Beispiel, das etwas komplexer ist als meine Übungswebsite, aber auch nicht zu übertrieben.
Soon enough in your career as a web developer, you encounter the situation where a designer hands over a wonderful web design in all its large-screen glory. Your mission now is to transform it into code to present a prototype as soon as possible, starting with nothing but an empty text file.
So to put it simply, the HTML element is intended to store HTML that is not yet used. The element itself and all its content are invisible, so it can be basically anywhere in the document without much risk. Although you’d typically have your templates at the root level.
Das Web ist nicht am Reißbrett entstanden, sondern im Laufe der letzten gut zwanzig Jahre natürlich gewachsen, und das gilt auch für HTML. Darum hilft ein kurzer Blick in die Entstehungsgeschichte von…
a: The Anchor element - HTML: HyperText Markup Language | MDN
The a HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Linking to element on the same page
Das input-Element (input = Eingabe) wird innerhalb von Formularen genutzt, um Daten vom Benutzer abzufragen. Dabei kann das input-Element ganz unterschiedlich aussehen - vom Eingabefeld bis hin zur Checkbox, zum Radio-Button oder sogar einem Farbwähler.
Mit dem Element audio können Sie Audio-Dateien wie Musik, Reden oder Töne ohne Plugins oder Add-Ons wiedergeben. Sie können Medien entweder über das src-Attribut oder über ein oder mehrere source-Elemente einbinden.
How to build a progressively enhanced accordion component with vanilla JS (Go Make Things, 10/21)
Today, I’m going to look how we can replace the need for a big plugin altogether by progressively enhancing HTML to add a bit more functionality to it.
I love the details and summary elements. You can use them to create interactive expand-and-collapse components without any JavaScript. They work in all modern browsers. In older, unsupported browsers like IE, the content is displayed in full, so the user is always able to access it.
Dieses Tutorial sieht gut aus. Vielleicht eine gute Ergänzung zur Gestaltung von und per CSS.
Current Page Link Styles - Impressive Webs (Louis Lazarus, 2012)
Grundsatzartikel. How to use class names in your HTML to identify the current page and provide custom current page link styles depending on what page the user is on.
Fügt die Klasse den Links zu, aber beschreibt es auch mit Listenelementen.
HTML Boilerplates (CSS-Tricks, Chris Coyier, 05/21)
Chris shows the boilerplate from Manuel Matuzović and also mentions other projects like the famous HTML5 Boilerplate, the HTML index file and the HEAD project.
Every element I use for the basic structure of a HTML document, with explanations why.
Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate.
Recently I didn’t start a new project, but I had to document the structure we use at work for the sites we build. So, simply copying and pasting wasn’t an option, I had to understand the choices that have been made.
Using the address Element in HTML 5.2 (thenewcode.com)
Yesterday Steve Faulkner made me aware that the W3C had changed the HTML 5.2 specification to reflect the common interpretation of the element, much to their credit.
Using the blockquote, cite and q elements (thenewcode.com)
The blockquote, cite and q elements are very useful… especially if they are used for the purposes for which they were intended. Together with the other HTML writing elements, you have a full and rich set of markup elements with which to start treating your content. Mit footer zur Kennzeichnung der Quelle. Coole Idee.
Meta Viewport - iOS Safari and shrink-to-fit (bitsofco.de, 04/2016)
For a long time, the standard viewport meta tag went like this - However, since iOS Safari 9.0 was introduced in September last year, a new additional value is now needed for most responsive websites, making this the new standard meta tag -
NO to HTML5 document outline | HTML5 Doctor (Steve Faulkner, 06/2016)
»For the last few years, the HTML5 specification has included a warning about the lack of implementations and has suggested that the document outline algorithm not be relied upon to convey heading semantics to users. Recently this has been taken a step further. Now the HTML 5.1 specification requires developers to use h1-h6 to convey document structure. The simple reason for this change is that the HTML5 document outline is not implemented and despite efforts to get it implemented, the general response from user agent developers has not been enthusiastic. «
Jeremy Keith's article about »Apple has Apple News. Facebook has Instant Articles. Now Google has AMP: Accelerated Mobile Pages. The big players sure are going to a lot of effort to reinvent RSS. That may sound like a flippant remark, but it’s not too far from the truth.« Sein Fazit: Gemäß der Indie Web Idee von POSSE (Publish (on your) Own Site, Syndicate Elsewhere) ist AMP nur eine weitere Art der Syndikation. Solange das so ist, ist es okay.
Problems with High-Fidelity Static Wireframes - They’re abstractions - They’re full of assumptions - They’re verbose - They’re a crutch Lo-fi HTML Wireframes - They get into the browser quicker - They reinforce the notion that you’re creating a website - They’re interactive - They allow for living, breathing annotations - They lay the foundation for the final product - They allow you to iterate »From Wireframe to Final Product« am Beispiel der Website für die Greater Pittsburgh Community Foodbank
