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:
no-js HTML class
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:
We found 3,536,247 noscript elements within the 8 million top twenty Google results.
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
(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.
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.
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.
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%!
The average web page has around 71 divs. 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.
Links are not buttons
Neither are div‘s and span‘s.
Attribute & Value
In exchange, here are the native buttons statistics:
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 buttons found in the wild.
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
I would have expected more.
1,866,241 pages, from the total that we analyzed, contain . 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:
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.
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.
1,690,891 1,390,3391,336,974 1,025,183 698,611435,877