by Alexis Degryse| HTMHell
by Schepp| HTMHell
by Alexander Muzenhardt| HTMHell
by David Luhr| HTMHell
by Alistair Shepherd| HTMHell
by Steve Frenzel| HTMHell
by J. Pedro Ribeiro| HTMHell
by Daniela Kubesch| HTMHell
by Matthias Kittsteiner| HTMHell
by Scott Jehl| HTMHell
by Alan Dalton| HTMHell
by Marco Bretschneider| HTMHell
by Maureen Holland| HTMHell
by Corina Murg| HTMHell
by Kristin Rohleder| HTMHell
by Anastasiia Batarei| HTMHell
by Julia Undeutsch| HTMHell
by Evan Hahn| HTMHell
by Felix Hessenberger| HTMHell
by Vadim Makeev| HTMHell
by Jens Oliver Meiert| HTMHell
by Weston Thayer| HTMHell
by Matthias Zöchling| HTMHell
by Bramus| HTMHell
by Kilian Valkhof| HTMHell
by Rian Rietveld| HTMHell
by Lara Aigmüller| HTMHell
by Cristian Diaz| HTMHell
by Andrea de Souza| HTMHell
by Halvor William Sanden| HTMHell
by Jan Hellbusch| HTMHell
by Stefania Mellai| HTMHell
by Vadim Makeev| HTMHell
by Winnie Bosibori| HTMHell
by Ida Franceen| HTMHell
by Thomas A. Powell| HTMHell
by Alistair Shepherd| HTMHell
by Mayank| HTMHell
by David Luhr| HTMHell
by Ahmad El-Alfy| HTMHell
by Steve Frenzel| HTMHell
by Egor Kloos (aka dutchcelt)| HTMHell
by Phil Nash| HTMHell
by Saptak S| HTMHell
by Chris Ferdinandi| HTMHell
by Jason Cranford Teague| HTMHell
by Daniela Kubesch| HTMHell
by Alexander Muzenhardt| HTMHell
by Kilian Valkhof| HTMHell
by Vasilis van Gemert| HTMHell
Want to trigger an action? Use a button element. They’re great.| HTMHell
While what we mean is usually very clear to us, others may decode our messages differently from what we intended. This is especially true on the web, where there are many ways to consume content. The language, browser type, device model, using a screen reader, navigating with or without a mouse - all of these factors can influence how information is experienced on the web.| HTMHell
When it comes to adding images on the web, you need to consider how to make them accessible and understandable to everyone.| HTMHell
The rel attribute has the potential to take the Internet to the next level… and yet, we usually forget about it.| HTMHell
HTML is such a lovely language. Browsers will almost always display something for you, no matter what you put in the HTML document. Heck, you could omit all tags, and it will still work.| HTMHell
Do you know of color-scheme yet? If not, I bet you still think you do. It will certainly look familiar, as prefers-color-scheme has been around for longer and is clearly related.| HTMHell
Adding an image with HTML is pretty easy, it’s just a simple tag, after all, right?| HTMHell
Reading HTMHell, you might be aware that progressive enhancement is a thing. To sum things up, it's a way to make sure anyone gets a viable version of your page whatever is their context — slow bandwitdh, oldish browser, etc. — but also making the said page more resilient (e.g. to JavaScript errors).| HTMHell
HTML is a beautiful programming language. It comes with many out-of-the-box accessibility benefits—it conveys semantic meaning to assistive technology, enabling people to consume content and complete often important journeys that they may not be able to do outside of the web. So why is all that goodness we can get for free ignored so often?| HTMHell
With the current Y2K fashion trend and JLo being back together with Ben Affleck, the 2000s are having a revival this year. Many brands are jumping onto the boat by creating websites with an “old-school” vibe.| HTMHell
In this article:| HTMHell
Today, I want to look at a proposed HTML feature that may end up replacing a lot of <div>s-based custom input components: <selectmenu>.| HTMHell
Motivation| HTMHell
When it comes to building out forms, it sometimes seems like there are at once both too few field types and too many. This is especially true when it comes to having users choose an option from a pre-defined list, also known as “choose one” fields.| HTMHell
As developers, validation of user input is one of the first things we are taught.| HTMHell
While browsing Mastodon late one night, I came across this excellent blog post called HTML is all you need to make a website. It describes a few websites which are pure HTML. No CSS and no JS.| HTMHell
Summary| HTMHell
If I had a dollar for every time I've had to tell someone to remove an aria-label from an interactive control that has actual visible text, I could have bought Twitter! As a former developer and current accessibility consultant, it is my sincere hope that by reading this article, developers unfamiliar with or unsure about this topic will have a better understanding of the differences between aria-label, aria-labelledby, and aria-describedby.| HTMHell
Getting performance data from real users can transform assumptions about how a user experiences a site into objective, actionable information.| HTMHell
The <meter> element is a little known and rarely used semantic element. It's a non-interactive form element that renders as a partially filled horizontal bar. Browsers provide user-agent styles, but the <meter> element can also be styled.| HTMHell
Heading elements (h1 through to h6) are used to give structure to the content of your page. They're important for SEO, make your pages more readable and, of course, also help people that use assistive technologies navigate through your page. Somewhat less known are landmark elements. These are elements that are used to define the structure of your entire HTML and you probably know some of them already: nav, main and footer are all landmark elements (well, most of the time. We'll get to that.)| HTMHell
At some point of developing a website, there might come a time where we need to progressively enhance using JavaScript. There are few different options of how you add JavaScript. Firstly, we can write our own script using vanilla JS only, and self host the JavaScript file. However, often we find ourselves needing to use a JavaScript framework or library to make our life a little easier. We can definitely download all the JavaScript framework and libraries we are using and self host them in ou...| HTMHell
In web development, writing semantic HTML is important for accessibility, and also provides some nice side effects such as supporting browser "reader" modes, SEO, graceful degradation, and exporting.| HTMHell
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.| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Bad code| HTMHell
Context: A list of images that link to detail pages.| HTMHell
Context: A list of linked cards, each with heading, image, and teaser text.| HTMHell
Context: The main navigation of a personal website.| HTMHell
Context: A simple page that displays the availability of a product.| HTMHell
This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development:| HTMHell
Context: A button that expands and collapses a section of text.| HTMHell
Context: A link to another page.| HTMHell
A collection of bad practices in HTML, copied from real websites.| #23 A card pattern - HTMHell
A collection of bad practices in HTML, copied from real websites.| My favourite colour is Chuck Norris red - HTMHell
A collection of bad practices in HTML, copied from real websites.| Almost, but not quite, entirely unlike... - HTMHell
A collection of bad practices in HTML, copied from real websites.| Smooth Multi-Page Experiences with Just a Few Lines of CSS - HTMHell