Webmasters Gallery

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

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:

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.

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

Léonie Watson:

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 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.

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.

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 . 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:

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
	121,463,561
	67,595,285
	61,746,984
	46,688,572
	34,492,680
	27,845,389
	17,844,667
	15,133,457
	11,740,839
	7,231,827
	2,610,890
	1,690,891
	1,390,339
	1,336,974
	1,025,183
	698,611
	435,877
	389,717
	304,954
	286,380
	237,606
151,757
145,434
	105,688
	77,922
	56,610
	376
	310
	1
	–

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.

Missing alt for images

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.

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.

We did find 21,403 h7 elements too.

A11Y

First rule of ARIA use:

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:

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.

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:

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	2.88%
Using SVG as an	0.05%
Using SVG as an	0.02%
Using SVG as an	–

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 or .

Top 5 data-* values:

1. http://www.w3.org/2000/svg – 471
2. hg-svg – 127
3. svg-siteline-facebook – 114
4. icon-facebook.svg – 95
5. twitter.svg – 95

id*=svg

There are 141,813 elements whose id attribute value contains the string “svg”. Most of the elements are or its inner elements.

Top 5 id values:

1. emotion-header-title-svg – 16,281
2. cicLeftBtnSVG – 5,793
3. cicPauseBtnSVG – 5,793
4. cicPlayBtnSVG – 5,793
5. cicRightBtnSVG – 5,793

class*=svg

There are 329,004 elements whose class attribute value contains the string “svg”. Most of the elements are , , or inner elements.

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);
}