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.
Much of the excitement we’ve seen so far about HTML5 has been for the new APIs: local storage, application cache, Web workers, 2-D drawing and the like.
But let’s not overlook that **HTML5 brings us 30 new elements to mark up documents and applications**, boosting the total number of elements available to us to over 100.
The Importance Of HTML5 Sectioning Elements (Smashing, 2013)
By Heydon Pickering. Nobody wants them, but Heydon is a purist and explains it beautifully. Whatever you call them — blocks, boxes, areas, regions — we’ve been dividing our Web pages into visible sections for well over a decade. The problem is, we’ve never had the right tools to do so. While our interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements; an unbridled stream of content at odds with its own box-like appearance.
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
