HTML (Hypertext Markup Language) (2)
Making the Web Developer’s Pilgrimage
Have you read the HTML specification? Have you marked highlights, taken notes, and reviewed what you learned? Have you reported issues and made suggestions to the HTML working group, giving back and improving the standard? On our field’s “pilgrimage.”
#80 · · development
Declaring Page Language—and Declaring Changes in Language
Popular screen readers don’t seem to pick up changes in language automatically. We may need a push on screen readers to improve detection of changes in language, and a shift of attention from declaration of page language to marking up changes in language.
#79 · · development, accessibility
Comparing Page Language Declaration Setups in Screen Readers
One best practice in web development is to declare the document language via the lang attribute, on the html start tag. That is useful, but also not the only option. How well are different setups supported in screen readers? A few data points.
#78 · · development, accessibility
HTML Concepts: Indicators for Layout Tables
You use tables for data, and therefore not for layout purposes (as was popular in the past). But how would you recognize a layout table? That’s what we’re looking at today in “HTML Concepts.”
#77 · · development
HTML Concepts: Constraint Validation
When a form element has attributes that define requirements for the element’s value, then these requirements—constraints—are being validated by the user agent. On the validation of constraints, validity states, and a link to CSS.
#76 · · development
CSS: “:has()” and the Lost Paradigm
On the :has() pseudo-class and the forgotten school of ID- and class-less development.
#75 · · development, css, minimalism
The 3-Second Frontend Developer Test
“Do you validate?” Be a frontend developer who ships valid HTML and CSS; hire frontend developers who ship valid HTML and CSS. End the time of unconditionally accepted sloppiness in professional frontend development.
#74 · · development, css, conformance, quality
Use the “i” Element, and Use It Appropriately
“Use em instead of i” is in the Top 25 of bad advice you can get in HTML development. The two elements have different meanings, the blunt rule ignores all context, and i is a valid element with legitimate use cases.
#73 · · development, semantics
HTML Concepts: The “Nothing” Content Model
There’s a content model in HTML that contains—nothing. Details on what this means, and how it relates to “empty” or void elements.
#72 · · development
2021: 98% of the Top 100 U.S. Websites Use Invalid HTML
Is frontend development in the bad shape it’s said to be? Is it hyperbole when frontend developers are accused of poor quality work? When you look at the code of the most popular websites, the answer is clear.
#71 · · development, css, conformance
Upgrade Your HTML III
If you care about HTML as a craft, if you consider yourself an HTML minimalist, if you believe in pushing for boundaries (and sometimes overdoing it), then this is a right book (and a right book series) for you—with 10 fresh examples from the field that get inspected and improved.
#70 · · books, development, minimalism, optimization
HTML Concepts: “Body-Ok”
“body-ok” relates to link type keywords, and denotes what link elements are okay to be used in the document body.
#69 · · development
HTML: The 16 Content Categories and Their Elements
HTML puts elements into content categories. This article serves as a boring, brief, but updated overview over the broad and overlapping categories of HTML, and which elements fall into them.
#68 · · development
In Critical Defense of Frontend Development
The field of frontend development is in another crisis, largely due to an incomplete, misinterpreted definition and a bizarre mess created by “web development as a commodity” and “web development as software development.” How frontend development is more than development, and what we can (and should) do.
#67 · · development, css, javascript, quality, design
Notes on HTML 3.2
Would it still be useful to read the HTML 3.2 specification—from 1997? A few observations.
#66 · · development
Upgrade Your HTML II
If you care about HTML as a craft, if you consider yourself an HTML minimalist, if you believe in pushing for boundaries (and sometimes overdoing it), then this is a right book (and a right book series) for you—with 10 new examples from the field that get inspected and improved.
#65 · · books, development, minimalism, optimization
On HTML (and HTML in 2020)
What seems noteworthy about HTML, and how we’re doing on that in the year 2020.
#64 · · development
The 29 Boolean Attributes of HTML
What is a Boolean, what is a Boolean attribute, how does a Boolean attribute work, and what Boolean attributes are there? Meet the Boolean attributes, from allowfullscreen to shadowrootserializable.
#63 · · development
The 4 Pillars of Good Embed Code
Embed code is third-party code to be integrated on websites and apps, like ads or social media widgets. There have been many problems with embed code for a very long time. This post covers the essence of what makes for good embed code.
#62 · · development, quality, javascript, design
HTML and CSS and the 2019 Web Almanac
The HTTP Archive’s Web Almanac is fantastic because it provides us with data about how we build what kinds of websites. While the release of the 2019 Almanac has been accompanied by some analysis, I had found it interesting to interpret the data, too.
#61 · · development, css
An HTML Optimizer’s Config for HTML Minifier
Jad Joubran asked me about my configuration for HTML Minifier the other week, and in a hurry I pointed him to the config I had worked out for sum.cumo. In my own projects, however, I work with a different, more ambitious setup.
#60 · · development, performance, optimization
Upgrade Your HTML (the Booklet)
I’ve written a very short book on improving HTML code: Upgrade Your HTML. Upgrade Your HTML is about one thing: Picking examples of HTML in the wild, and explaining how to make that code better. Kindly. Constructively. Thoroughly, as finding a balance between detail and brevity permits.
#59 · · books, development, minimalism, optimization
On Writing Better Markup
As HTML is so important and yet also so easy, everyone writes HTML, and everyone says they can write HTML. And with that they don’t just mean they are able to write HTML, but that they write good HTML, where “good” means “high quality.” That would be great news.
#58 · · development, quality
Optional HTML: Everything You Need to Know
Optional HTML can be left out to improve performance, to guide code comprehension, and to hone the craft. An overview over all optional tags, rules around quotes for attribute values, and omissible attribute value defaults, as well as notes on pitfalls and tools.
#57 · · development, performance
When to Use “img,” “img@srcset,” and “picture” and “source”
I’ve disliked srcset and the whole family of ideas around it from the start because doing the same thing for the same purpose several times has usually looked like too much DX cost for too little UX gain to me. Two angles at what to use when.
#56 · · development
The Problem With Web Development Checklists, or: The Frontend Checklist, Revised
Checklists are a great way to make sure nothing gets forgotten, yet they are problematic when they contain items that aren’t important. A few general thoughts and a very specific review of The Frontend Checklist—of which 33 guidelines appear useful, and 41 not (yet).
#55 · · development, css, javascript
Optional “@lang”
The lang attribute is one of HTML’s global attributes. If one doesn’t simply take it for granted, it begs a number of questions—and these suggest to drop W3C requirements around it, and to demand software to do the job.
#54 · · development, accessibility
What Happened on Google+, the Web Development Archives
Following a few philosophy posts to be archived, here are past entries related to web development. Nothing more, nothing less.
#53 · · development, css, design
HTML and Performance: Leave Out Optional Tags and Quotes
As experts we should know what code is optional and leave it out, and our production systems should do a better job assisting us with that. After all the years of neglecting basic HTML optimization, let’s think about taking the next step and not ship optional HTML markup.
#52 · · development, performance, minimalism
HTML, CSS, and Dependency Direction
Adam Wathan wrote one of the most interesting web development articles I’ve read in the last few months: CSS Utility Classes and “Separation of Concerns.” At least until “Phase 3” there’s much to learn about current web development…
#51 · · development, css
The Compact Guide to Web Maintainability: 200 Tips and Resources
The result of reviewing, normalizing, rephrasing, sorting, and testing 134 responses to a maintainability survey that yielded more than 500 data points, to form a new guide, a new and more definite guide to web maintainability.
#50 · · development, css, maintainability
What I Learned Building Google’s Web Frameworks
On building Google’s Go and Maia HTML/CSS frameworks, and succeeding and failing as a tech lead.
#49 · · development, css, frameworks
HTML Statistics: 5 Take-Aways
A few quick comments on Catalin Rosu’s interesting follow-up analysis of his sampling of eight million websites. Some practices are wonderful to note, others have been commented on, yet one or the other point drowned.
#48 · · development
New Book: “The Little Book of HTML/CSS Coding Guidelines”
Out of the blue! My latest book, The Little Book of HTML/CSS Coding Guidelines, is now available. It’s a brief introduction into the theory and practice of coding standards. Emphasis, as the title suggests, is on HTML and CSS, and furthermore on Google’s guidelines…
#47 · · books, development, css
New Book: “On Web Development”
I wrote another book. On Web Development. On Web Development is an ebook that collects most of the articles about web development (and web design) that I wrote between 2005 and 2015. Most articles as in most useful, most important, and also most controversial.
#46 · · books, development, maintainability, css, design
Web Standards: We’re F’ing It Up
It’s a problem to just change specs. But it’s an increasingly bigger problem not to clean and prune them. The intimidating complexity of web standard specs should precisely be a motivation, not a threat, to come up with a plan. It follows the populist version.
#45 · · development, css
A Vision of Web Development
There is one thing every web developer should aspire to: writing the most minimal, semantically appropriate, valid HTML, and then never changing it. “Never” not in a sense of denial and refusal, but in the sense of a guiding light…
#44 · · development, minimalism, semantics, conformance, maintainability, quality
New Book: “The Little Book of HTML/CSS Frameworks”
It’s out! My new book, The Little Book of HTML/CSS Frameworks, is now available. I myself have been surprised by the sudden release, and while I’m still unsure about how print copies can be obtained, the book can now be downloaded for free at O’Reilly.
#43 · · books, development, css, frameworks
On the Deterioration of HTML/CSS Practices
Presentational markup for everyone.
#42 · · development, css, maintainability
Google and HTML/CSS Code Quality
For much of Google’s life time there have been few Google web pages of high code quality. That had changed over the last years, but now there are regressions. On the rise and fall of Google’s websites.
#41 · · development, css, conformance, quality
HTML and Specifying Language
Questioning the importance and ways of marking up language in HTML documents, in particular changes in language.
#40 · · development
HTML Explained in 123 Tweets: The Google #htmltuesday Archive
Did you know that Google’s Webmaster Team tweeted short statements about all HTML elements, every week, for two and a half years? It was called “#htmltuesday” and ran from 2011 to 2013. All of these tweets are now available in one place: here.
#39 · · development, semantics
CSS, HTML, and the Problem of Spec Fragmentation
We have not one but two fundamental problems with CSS. One is unrestricted growth and complexity leading to poor understanding and poor code. Another one is spec fragmentation, also an issue with HTML, which results in inefficiencies. We should look for a better balance.
#38 · · development, css
“No” to DRM in HTML
It has been quiet around DRM lately so I like to share my opinion, in brief: DRM doesn’t belong into nor anywhere near HTML.
#37 · · development
The Curious Case of Breadcrumbs in HTML
We had an interesting thread about breadcrumbs on W3C’s public-html the other day. At first just targeting delimiters, it spawned a debate about the appropriate markup. Here’s my view on breadcrumbs in HTML.
#36 · · development, semantics
Object-Oriented HTML, and OOCSS
“Object-oriented CSS” is the idea of treating page elements as objects, giving all these objects classes, treating objects’ classes as single entities in style sheets, and taking it from there. I reviewed the old OOCSS site and Smashing Magazine’s introduction.
#35 · · development, css
HTML and Non-Script Styling
If you are to style a document differently based on whether certain technology is available, you should keep two things in mind: HTML itself is static and separation of concerns is important for maintainability…
#34 · · development, maintainability
On Semantics in HTML
As web developers we like to talk about “semantic markup,” a somehow inaccurate short form for “markup that is meaningful and used how it’s supposed to be used.” But where is all that meaning coming from? Let’s take a look.
#33 · · development, semantics
HTML, “@width”, and “@height”
As the width and height attributes are to remain part of HTML, limit their use. The reason to avoid @width and @height is that they are presentational and hence constitute potential maintainability issues.
#32 · · development, maintainability
HTML/CSS Frameworks: Useful, Universal, Usable, Unobtrusive
A high quality HTML/CSS framework needs to have four attributes: useful, universal, usable, and unobtrusive. The four U’s.
#31 · · development, css, frameworks, quality