Last time, we saw how the average web page looks like using data from about 8 million websites. That’s a lot of data, and we’ve been continuing to sift through it. We’re back again this time to showcase some random and hopefully interesting facts on markup usage.
Hiding DOM elements
There are various ways of hiding DOM elements: completely, semantically, or visually.
Considering the current practices and recommendations, check out the findings on the most used methods to hide things via HTML or CSS:
Selector | Count |
---|---|
[aria-hidden] |
2,609,973 |
.hidden |
1,556,017 |
.hide |
1,389,540 |
.sr-only |
583,126 |
.visually-hidden |
136,635 |
.visuallyhidden |
116,269 |
.invisible |
113,473 |
[hidden] |
31,290 |
no-js HTML class
When JavaScript libraries like Modernizr run, the no-js
class is removed and it’s replaced with js
. This way you can apply different CSS rules depending on whether JavaScript is enabled or not in your browser.
We found a total number of 844,242 elements whose HTML class list contains the no-js
string. More than 92% of them are html
elements.
If you’re wondering about the remaining 8%, check out the top 10:
Element | Count |
---|---|
html |
782,613 |
body |
31,256 |
a |
17,833 |
div |
7,364 |
meta |
1,104 |
ul |
905 |
li |
789 |
nav |
768 |
span |
431 |
article |
263 |
noscript
The HTML noscript
element defines a section of markup that acts as an alternate content for users that have client-side scripting disabled, or whose browser lacks support. The client-side scripting language is usually JavaScript.
We found 3,536,247 noscript
elements within the 8 million top twenty Google results.
AMP
Accelerated Mobile Pages (AMP) is a Google initiative which aims to speed up the mobile web. Most publishers are making their content available in parallel in the AMP format.
To let Google and other platforms know about it, you need to link the AMP and non-AMP pages together.
Within the 8 million pages we looked at, we found only 1,944 non-AMP pages referencing their AMP version using rel=amphtml
.
Links attributes & values
href=”javascript:void(0)
We found 2,002,716 a
elements with href="javascript:void(0)"
. Whether you’re coding a button or coding a link, you’re doing it wrong.
href=”javascript:void(0)”
(a) You’re coding a button with the wrong element
(b) You’re coding a link with the wrong technology
– Heydon Pickering
target=_blank w/ or w/o rel=noopener
43,924,869 of the anchors we analyzed are using target="_blank"
without a rel="noopener"
conjunction. In this case, if rel="noopener"
is missing, you are leaving your users open to a phishing attack and it’s considered a security vulnerability.
Anchor/Link | Count |
---|---|
[target=_blank] |
43,924,869 |
[rel=noopener] |
40,756 |
[target=_blank][rel=noopener] |
35,604 |
MDN:
When using target you should consider adding rel=”noopener noreferrer” to avoid exploitation of the window.opener API.
Ben Halpern and Mathias Bynens also wrote some good articles on this matter and the common advice is: don’t use target=_blank
, unless you have good reasons.
href=#top
It seems it is a common practice to use #top
as a href
value to redirect the user to the top section of the current page. There were found 377,486 a
elements with href=#top
values.
lang
The HTML lang attribute is used to identify the language of text content on the web. This information helps search engines return language specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation.
Of the 8,021,323 pages that we were able to look into, 5,368,133 use the lang
attribute on the html element. That’s about 70%!
div
The average web page has around 71 div
s. This number was computed after counting all the div
elements (576,067,185) encountered within 8,021,323 million pages.
header vs footer
2,358,071 of pages use the header
element while the footer
is used by 2,363,665 pages. Also we found that only 2,117,448 of pages are using both header
and footer
.
Element | Count |
---|---|
footer |
2,363,665 |
header |
2,358,071 |
Links are not buttons
Neither are div
‘s and span
‘s.
Element | Attribute & Value | Count |
---|---|---|
a |
class=btn | 3,251,114 |
a |
class=button | 2,776,660 |
span |
class=button | 292,168 |
div |
class=button | 278,996 |
span |
class=btn | 202,054 |
div |
class=btn | 131,950 |
In exchange, here are the native buttons statistics:
Selector | Count |
---|---|
button |
4,237,743 |
input[type=image] |
1,030,802 |
input[type=button] |
916,268 |
Buttons without a specified type
Speaking of buttons, the button
element has a default type of submit
. Make sure you always specify the button type, because we found around 1,336,990 button
elements with missing type
attribute. That’s around 31.5% from the total of button
s found in the wild.
BEM syntax
If you’re a CSS addict, you may have heard about BEM, which is a popular naming convention for HTML classes.
Knowing the BEM naming style that consists of strings containing double-underscores or/and double-dashes, we were able to guess that only 20,463 elements use the BEM naming style.
Bootstrap & Font Awesome
Apparently, we found only 1,711 pages that link to CSS or JavaScript resources that contain the bootstrap[.min.].js|.css
. Also, it looks like 379 pages link to CSS resources that contain the font-awesome[.min.].css
.
I would have expected more.
WordPress
1,866,241 pages, from the total that we analyzed, contain <meta name="generator" content="*WordPress*">
. We can only assume there are more that use WordPress, but some chose to remove this meta info from their sources.
.clearfix VS .clear VS .cf
There are many naming styles for this well-known CSS utility that help clearing the floats. Here’s the breakdown:
Selector | Count |
---|---|
.clearfix |
19,573,521 |
.clear |
10,925,887 |
.cf |
1,102,698 |
Favicon
Modern browsers fetch /favicon.ico
automatically and asynchronously. So don’t manually specify its root location, just place it in there. Unless, for some reasons you prefer a different location for it.
It looks like 354,024 publishers still link the /favicon.ico
in the head
.
Void elements
To close or not to close the void elements, that is the question. Although fine with HTML either way, it is recommended to not close the void elements. At least for the sake of brevity.
Element | Count |
---|---|
<img/> |
121,463,561 |
<br/> |
67,595,285 |
<link/> |
61,746,984 |
<meta/> |
46,688,572 |
<br> |
34,492,680 |
<input/> |
27,845,389 |
<img> |
17,844,667 |
<meta> |
15,133,457 |
<link> |
11,740,839 |
<input> |
7,231,827 |
<hr/> |
2,610,890 |
<hr> |
1,690,891 |
<param/> |
1,390,339 |
<area/> |
1,336,974 |
<area> |
1,025,183 |
<param> |
698,611 |
<source/> |
435,877 |
<base/> |
389,717 |
<embed/> |
304,954 |
<source> |
286,380 |
<wbr> |
237,606 |
<col/> |
151,757 |
<col> |
145,434 |
<base> |
105,688 |
<wbr/> |
77,922 |
<embed> |
56,610 |
<track/> |
376 |
<track> |
310 |
<keygen/> |
1 |
<keygen> |
– |
tabindex
On hijacking the tab order, when using tabindex
to solve some disconnected UI elements, usually that only pushes the issue up to the document level.
The common advice is to use it with caution. We did notice that 552,109 HTML elements are using the tabindex
attribute to override the defaults when navigating with a keyboard.
alt
for images
Missing This eternal SEO and accessibility issue still seems to be pretty common after analyzing this set of data. From the total of 139,308,228 images, almost half are missing the alt
attribute or use it with a blank value.
Element | Count |
---|---|
img |
139,308,228 |
img alt="*" |
73,430,818 |
img alt="" |
32,603,650 |
img w/ missing alt |
33,273,760 |
Custom elements
Excluding the Web Component tags, here is a list of made up tags or custom elements, different to MDN’s HTML element reference.
Element | Count |
---|---|
<o:p> |
808,253 |
<g:plusone> |
273,166 |
<fb:like> |
111,806 |
<asp:label> |
76,501 |
<inline> |
53,026 |
<noindex> |
51,604 |
<icon> |
42,703 |
<block> |
34,167 |
<red> |
33,424 |
<ss> |
27,451 |
We did find 21,403 h7
elements too.
A11Y
If you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
Landmark roles
ARIA Landmark Roles help users using assistive technology devices to navigate your site.
You might have seen this warning message when validating a document: “The banner role is unnecessary for element header”. This happens because browsers like iOS Safari do not currently support the above implicit mappings and for now it’s a good practice to keep adding these landmark roles and avoid the HTML validation warnings.
Regarding the HTML5 implicit mappings, here’s the stats:
Element | Count |
---|---|
<nav role=navigation> |
1,144,750 |
<header role=banner> |
675,970 |
<footer role=contentinfo> |
613,454 |
<main role=main> |
236,484 |
<article role=article> |
129,845 |
<aside role=complementary> |
105,627 |
<section role=region> |
4,326 |
autoplay
Video and audio autoplay
is considered a bad practice, not only for accessibility, but also for usability.
So, don’t auto-play and it will please all of your users.
Check out below the findings from the total of 108,321 video
and 64,212 audio
elements.
Element | Count |
---|---|
<video autoplay> |
31,653 |
<video autoplay=true> |
5,601 |
<audio autoplay> |
2,595 |
<audio autoplay=true> |
339 |
<video autoplay=false> |
79 |
<audio autoplay=false> |
22 |
maximum-scale
Maximum-scale define maximum zoom and when set like maximum-scale=1
it won’t allow the users to zoom your page. You shouldn’t do that, since zooming is an important accessibility feature that is used by a lot of people because it provides a better experience by meeting users’ needs.
Warning from HTML 5.2 Editor’s Draft, 4 October 2016:
Authors should not suppress or limit the ability of users to resize a document, as this causes accessibility and usability issues.
However, we did find 1,047,294 websites using maximum-scale=1
and 87,169 websites with a user-scalable=no
value set. At the same time, 326,658 pages are using both maximum-scale=1
and user-scalable=no
.
role=button
Setting role=button
for a button
is allowed but not recommended as the button
already has role=button
as default implicit ARIA semantic. Still, we did find 26,360 button
elements having set a role=button
.
Here’s a breakdown on other notable elements, whose behavior was overridden by role=button
:
Element | Count |
---|---|
<a role=button> |
577,905 |
<div role=button> |
85,565 |
<span role=button> |
21,466 |
<input role=button> |
8,286 |
On making clickable things correctly, MDN sums it up:
Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered using the Enter key. In other words, when links are used to behave like buttons, adding role=”button” alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.
SVG
There are several ways of including SVG in HTML, we sum them up and found a total of 5,610,764 SVG references.
How to use SVG | % |
---|---|
Inline SVG code within HTML | 97.05% |
Using SVG as an <img> |
2.88% |
Using SVG as an <object> |
0.05% |
Using SVG as an <embed> |
0.02% |
Using SVG as an <iframe> |
– |
The object, iframe and embed methods usage is under 1%.
data-*=svg
There are 17,920 elements whose data-*
attribute value contains the string svg
. Most of the elements are <svg>
or <img>
.
Top 5 data-* values:
http://www.w3.org/2000/svg
– 471hg-svg
– 127svg-siteline-facebook
– 114icon-facebook.svg
– 95twitter.svg
– 95
id*=svg
There are 141,813 elements whose id
attribute value contains the string “svg”. Most of the elements are <svg>
or its inner elements.
Top 5 id values:
emotion-header-title-svg
– 16,281cicLeftBtnSVG
– 5,793cicPauseBtnSVG
– 5,793cicPlayBtnSVG
– 5,793cicRightBtnSVG
– 5,793
class*=svg
There are 329,004 elements whose class attribute value contains the string “svg”. Most of the elements are <svg>
, <i>
, <img>
or inner elements.
Top 10 class values:
sqs-svg-icon--social
– 58,501nav_svg
– 29,826svg
– 28,604mk-svg-icon
– 24,193svg-icon
– 12,255icon_svg
– 7,956ico ico-svg ico-40-svg
– 3,980svg temp_no_id temp_no_img_src
– 3,794svgIcon-use
– 3,127svg temp_no_img_src
– 3,017
Regarding the above top, maybe it’s worth mentioning that sqs-svg-icon--social
is a (BEM-like) naming convention used by Squarespace website templates.
currentColor
There are 868,194 SVG inner elements that contain the value currentColor
, mainly for the fill
or stroke
attributes.
Top 10 SVG elements
<symbol>
– 845,626<path>
– 12,834<g>
– 6,073<path>
– 3,207<circle>
– 1,885<svg>
– 1,061<polygon>
– 575<rect>
– 480<line>
– 412<use>
– 206
SVG as background-image (The journey!)
To figure out if an element used SVG for a background-image, things were more complicated. Most of our data only used the HTML documents, but we worked out a solution to get the active stylesheets.
From the total of 6,359,031 domains we were able to gather data from, 84.5% (5,371,806) are using HTML elements with CSS background images, whilst only 1.2% (82,008) domains were using at least one SVG background image.
Also, from the total of 92,388,615 HTML elements with CSS background images, 0.5% (439,447) of them are using a SVG background image.
The process
We went through all of the HTML files and transformed local/relative CSS file references into absolute ones, e.g. <link rel="stylesheet" href="style.css">
became <link rel="stylesheet" href="http://www.domain.com/style.css">
.
This took some time, since we sampled a couple of the results from our first runs, found inconsistencies with the results and had to restart the process. With a zipped file size of 65GB (and unzipped 323GB), it wasn’t a surprise why processing needed a couple of days to produce the above set of results.
Trying and aborting PhantomJS
Since background images can be applied via CSS, we needed something to render the DOM and apply styles to it. We thought of a tool we were very familiar with: PhantomJS. We ran a couple of tests with actual pages and saw that everything seemed to work properly. We then built our Java client to interface with the PhantomJS webserver: starting, opening pages, extracting output, handling responses, saving results and then cleaning up, but ran into disastrous performance results when trying to use and scale the rendering process on even one machine.
Rendering one HTML file would take anything from a couple of seconds to a couple of minutes and we had no way of knowing what PhantomJS was doing. This, coupled with the fact that the resources usage goes up exponentially the larger the DOM is, caused us to ditch it and look for alternatives.
Better luck with Selenium
As luck would have it, a colleague was experimenting with Selenium on top of headless Chrome. Since he had encouraging results in all areas where PhantomJS was lacking, we thought about leaving the Java-do-it-all comfort zone and delegating stuff to other tools if needed. The test results were very promising – headless Chrome looked like it suited our needs marvelously: super fast startup time, great rendering time, and full control over stopping a process.
The Selenium web driver would actually close the binary, as opposed to us sending an exit
command to PhantomJS and hoping it wasn’t in 100% load so it would actually process it. This allowed us to control each process individually, without having to use killall
every couple of minutes and stopping all processes in case just one of them went rogue and throttled the CPU.
The only problem with this approach was that the JavaScript could no longer be contained in a single, standalone JS file we’d pass onto the PhantomJS executable, but had to be included inline in the actual HTML files. Here’s a simplified version of the script we used, relying on the Window.getComputedStyle() method:
let backgroundImages = [],
allElem = document.querySelectorAll("*"),
allElemLength = allElem.length;
for (let i = 0; i < allElemLength; i++) {
let style = window.getComputedStyle(allElem[i], false),
backgroundImage = style.backgroundImage.slice(4, -1);
backgroundImages.push(backgroundImage);
}
Saving data would be done by calling a simple PHP script. We ran a couple of larger-scale tests to validate our choice and everything performed flawlessly, so we went on with setting up a scalable environment.
We processed all HTML files (again) and injected the above JavaScript snippet. The next challenge was uploading everything to Amazon. S3Browser, which we use for “casual” listing and downloading/uploading, didn’t seem fast enough for this job (not the free version, at least). So, we looked for an alternative and came across s3-parallel-put.
We set it up on a local Linux machine, moved over the SSD and had 65GB worth of zipped text data uploaded in no time. It crippled our machine and the local Jenkins server that was running on it – until we upgraded the old Q9550 CPU :).
The problems showed up when starting to scale up. We saw that our single web server would become overwhelmed and stop saving results, even though the Selenium driver was reporting the page had rendered successfully. This also meant many of our queue messages would be wasted (consumed and deleted from the queue), without producing any results.
We thus decided to have a more scrutinized system for keeping track of processed/unprocessed files by using Redis: each time we’d start processing a file, we’d insert the domain name into a Redis set. Each time we’d process a file (our PHP script would be called), we’d insert the domain name into another Redis set. The point was to keep the difference between the two to a minimum (anything over a certain value would mean something wasn’t working properly) and to make retrying easy if it was ever going to be needed.
Hardware setup
For our hardware setup, we started by running 10 threads * 1 Chrome instance each on 10 Amazon c4.large machines, served by one Apache webserver running on a m3.medium initially doing a very lousy job. After toying with Apache’s settings, we scaled everything up gradually and got to 40 c4.large machines being served by Apache webservers running on 4 m3.medium machines behind a load balancer. Our Redis instance was serving all 10 threads * 40 machines * 3-4 requests per 5-20 seconds off a r3.large machine. So, that’s about 60-320 requests per second.
On costs, it’s pretty hard to give a total amount of money spent or CPU-time, since we ran into many issues before having a fully functional and stable ecosystem. Ideally, a single machine would need about 45 seconds for processing 100 files: downloading, unzipping, rendering and cleaning up.
Q&A / Follow up
Why so many tbody elements?
For the above new data, we did perform another full scan for the 8 million documents and also fixed a parsing sanitization issue where the jsoup parser was adding the tbody
element automatically for all the tables. This is the answer to the question asked by some of you in the comments: “Why so many tbody elements?”.
As a consequence, the number of elements used on the most pages is now 25, tbody
stats being now lessened.
body
at 99%?
A little refresher: according to the specifications, omitting the body
is fine: Start tag: optional, End tag: optional.
So, one of the most surprising results number, based on your comments, was the missing 1% of body
elements. I guess I owe you an answer, for that I went a bit further and ran the parser again to get some insights:
- As some of you already guessed, most of the pages are missing the
body
tag due to the highframeset
usage. - The client-side redirect method using
meta http-equiv="refresh"
, followed by nobody
content is another reason. - Pretty disappointing to see that, among the pages expected to rank high on Google, there are lots of them that use the rough JavaScript
window.location
solution in order to redirect people to other domains. Again, these kinds of pages are not including thebody
section at all. - Some of the pages marked with missing
body
were completely broken due to PHP errors for example. Some were omitting the startingbody
tag but not the end tag.
Want more?
Have an element/attribute you’d want to see the numbers for? Give me a shout on Twitter or leave a comment below and we’ll figure out something!
Also, make sure you check out the full stats here.
These SVG numbers seem weird:
A symbol is useless without a use. Some discrepancy is reasonable from pages importing a set of symbols and only using a few, or from scripts that test for inline SVG support before dynamically upgrading a span or img into an SVG with
<use>
. But I can’t believe those factors make that much a difference.Hi Amelia,
The numbers you are mentioning above represent only the inner SVG elements that are using the attribute/value pairs like
fill=currentColor
orstroke=currentColor
.Here are the actual numbers, when talking about
<symbol>
and SVG with<use>
– from a total of 5,445,493 inline SVG elements:10.36% –
<symbol>
‘s4.94% – with
<use>
from https://www.advancedwebranking.com/html/#inline-svg
Ah, okay, that makes more sense! It wasn’t clear from the text that those numbers were an extension of the
currentColor
description.And thanks for the link to the full numbers. Still a bit surprising to see twice as many
<symbol>
as<use>
, but that can be explained by the reasons I mentioned above.Indeed, it’s most likely a page to contain a set of
<symbol>
s rather than actually<use>
them.And I think you perfectly pointed out the reasons, thanks for that!
Using
img
with a blankalt
value is a decent way to use it, so long as the image is considered decorative and should be ignored by screen readers.I’m not a Bootstrap or Font Awesome user myself, but I suspect the numbers are lower than expected because those types of assets often get minified and combined into a single
app.css
(or similar) file.Same here. In my personal projects and even ones at my work, we usually build all of our assets down to a handful of minified assets that don’t have a .min denotation because having to relink the asset in our view files is an unnecessary burden for our build tooling.
I believe this is acceptable for our code since we’re not distributing it for public consumption. Use of 3rd party scripts delivered by CDN’s however make more sense to use the .min denotation.
This was a neat little read. But… unclosed void elements? They look so naked and cold.
Haha, I guess I will never look at unclosed void elements the same way again.
Thanks for the
target="_blank"
note – I wasn’t aware of the security implications. After reading about it, it seems to me like the default behavior of browsers is incorrect and (if at all) a special rel attribute should be required to get the effect that they have by default.With respect to the favicon, there’s a really simple reason to keep including it. If you use the link tag to specify a touch icon, many browsers will rescale that to use instead of favicon in the bookmark bar. But the icons used for a touch icon are designed to look good at decent sizes, ranging to 192×192 on Android. They look like crud when scaled down to 16×16.
So with browsers like FireFox and Chrome, you have to still specify a link tag with the favicon format in it and specify it as the last link with a
rel="icon"
attribute so that they will use it for the actual favicon purpose of a graphic next to site name in bookmarks or browser tab.Otherwise they downscale the last link tag intended to be used as a touch icon for mobile devices and that can look like crud.
To expand on the favicon note, this is what I do –
That makes Android and I believe gnome aware of the touch icons (I don’t know if webp is supported for touch icons but just in case) but with the 32×32 favicon as the last, FireFox and Chromium on Linux were grabbing the 192×192 png and downsizing it – even though I do have a favicon.ico in the root (mod_rewrite rule pointing to the 16×16 version)
iOS with touch icons is funny – the only way to specify them with link tags violates the spec, so if you want a validating page the only way to do touch icons for iOS is to put them in the root directory with expected names (or mod_rewrite rule)
I don’t know if the touch icon issue is why so many people still specify a favicon, but it is why I do.
Interesting read, thanks for taking the time to do this!
Wondering how hard it would be to look for document.write in use? Google recently announced they were going to penalize sites using it, and I’m curious to see just how many sites that is.
Hey Albert,
Searching for
document.write
in the HTML documents is something doable. But, speaking of accuracy, I’m not quite sure about the results we’d obtain. That’s because we would search only in the markup (for inline scripts) and not within the included JavaScript files as well.The above data comes from analyzing only HTML documents. It’s true we worked out a solution to get the active stylesheets for the SVG as background-image stats but we don’t have the associated JavaScript files. Not yet.
Wow interesting – ever since I discovered DOMDocument about 15 years ago or so, most of my personal projects have been generated using DOMDocument and served as proper XML. Internet Explorer users before IE 9 didn’t matter to me.
A consequence of serving content as XML meant no document.write() and no document.write() meant no adsense or other Google services and for years I asked them to change that and my requests fell on deaf ears.
Are they going to penalize themselves or did they finally fix all of their services?
Although I wonder about the sample this is very interesting and, as usual, a bit grim. This is data we need.
It is impossible to compare this set of data with other studies like Web Authoring Statistics by Google for example.
But I like to think this set has its own unique thing, comparing to the studies that came before. :)