---
#See https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Authors'-Guide#metadata-to-add-at-the-top-of-your-chapters
title: Markup
description: Markup chapter of the 2019 Web Almanac covering elements used, custom elements, value, products, and common use cases.
hero_alt: Hero image of Web Almanac characters as dressed as constructor workers putting together a web page from HTML element blocks.
authors: [bkardell]
reviewers: [zcorpan, tomhodgins, matthewp]
analysts: [rviscomi]
editors: [rviscomi]
translators: []
discuss: 1758
results: https://docs.google.com/spreadsheets/d/1WnDKLar_0Btlt9UgT53Giy2229bpV4IM2D_v6OM_WzA/
bkardell_bio: Brian Kardell is developer advocate at Igalia, standards contributor, blogger, and is currently the W3C Advisory Committee Representative for the Open JS Foundation. He was a founder of the Extensible Web Community Group and co-author of The Extensible Web Manifesto.
featured_quote: As of July 2019, the HTTP Archive has begun collecting all used element names in the DOM for about 4.4 million desktop home pages, and about 5.3 million mobile home pages which we can now begin to research and dissect. This crawl encountered over 5,000 distinct non-standard element names in these pages, so we capped the total distinct number of elements that we count to the 'top' 5,048.
featured_stat_1: 11
featured_stat_label_1: Elements used on more than 90% of pages
featured_stat_2: 15%
featured_stat_label_2: Pages that contain deprecated elements
featured_stat_3: 65
featured_stat_label_3: Variants of carousels found
---
## Introduction
In 2005, Ian "Hixie" Hickson posted some analysis of markup data building upon various previous work. Much of this work aimed to investigate class names to see if there were common informal semantics that were being adopted by developers which it might make sense to standardize upon. Some of this research helped inform new elements in HTML5.
14 years later, it's time to take a fresh look. Since then, we've also had the introduction of [Custom Elements](https://developer.mozilla.org/docs/Web/Web_Components/Using_custom_elements) and the Extensible Web Manifesto encouraging that we find better ways to pave the cowpaths by allowing developers to explore the space of elements themselves and allow standards bodies to act more like dictionary editors. Unlike CSS class names, which might be used for anything, we can be far more certain that authors who used a non-standard *element* really intended this to be an element.
As of July 2019, the HTTP Archive has begun collecting all used *element* names in the DOM for about 4.4 million desktop home pages, and about 5.3 million mobile home pages which we can now begin to research and dissect. _(Learn more about our [Methodology](./methodology).)_
This crawl encountered *over 5,000 distinct non-standard element names* in these pages, so we capped the total distinct number of elements that we count to the 'top' (explained below) 5,048.
## Methodology
Names of elements on each page were collected from the DOM itself, after the initial run of JavaScript.
Looking at a raw frequency count isn't especially helpful, even for standard elements: About 25% of all elements encountered are `
`. About 17% are ``, about 11% are `` -- and those are the only elements that account for more than 10% of occurrences. Languages are generally like this; a small number of terms are astoundingly used by comparison. Further, when we start looking at non-standard elements for uptake, this would be very misleading as one site could use a certain element a thousand times and thus make it look artificially very popular.
Instead, as in Hixie's original study, what we will look at is how many sites include each element at least once in their home page.
## Top elements and general info
In 2005, Hixie's survey listed the top few most commonly used elements on pages. The top 3 were `html`, `head` and `body` which he noted as interesting because they are optional and created by the parser if omitted. Given that we use the post-parsed DOM, they'll show up universally in our data. Thus, we'll begin with the 4th most used element. Below is a comparison of the data from then to now (I've included the frequency comparison here as well just for fun).
2005 (per site)
2019 (per site)
2019 (frequency)
title
title
div
a
meta
a
img
a
span
meta
div
li
br
link
img
table
script
script
td
img
p
tr
span
option
{{ figure_link(caption="Comparison of the top elements from 2005 to 2019.") }}
### Elements per page
{{ figure_markup(
image="hixie_elements_per_page.png",
caption="Distribution of Hixie's 2005 analysis of element frequencies.",
description="Graph showing a decreasing distribution of relative frequency as the number of elements increases",
width=600,
height=318
)
}}
{{ figure_markup(
image="fig3.png",
caption="Element frequencies as of 2019.",
description="Graph showing about 2,500 pages start with approximately 30 elements, this increases peaking at 6,876 pages have 283 elements, before trailing fairly linearly to 327 pages having 2,000 elements.",
chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTbHgqcSepZye6DrCTpifFAUYxKT1hEO56585awyMips8oiPMLYu20GETuIE8mALkm814ObJyktEe2P/pubchart?oid=2141583176&format=interactive"
)
}}
Comparing the latest data in Figure 3.3 to that of Hixie's report from 2005 in Figure 3.2, we can see that the average size of DOM trees has gotten bigger.
{{ figure_markup(
image="hixie_element_types_per_page.png",
caption="Histogram of Hixie's 2005 analysis of element types per page.",
description="Graph that relative frequency is a bell curve around the 19 elements point.",
width=600,
height=320
)
}}
{{ figure_markup(
image="fig5.png",
caption="Histogram of element types per page as of 2019.",
description="Graph showing the average number of elements is a bell curve around the 30 elements marked, as used by 308,168 thousand sites.",
chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTbHgqcSepZye6DrCTpifFAUYxKT1hEO56585awyMips8oiPMLYu20GETuIE8mALkm814ObJyktEe2P/pubchart?oid=1500675289&format=interactive"
)
}}
We can see that both the average number of types of elements per page has increased, as well as the maximum numbers of unique elements that we encounter.
## Custom elements
Most of the elements we recorded are custom (as in simply 'not standard'), but discussing which elements are and are not custom can get a little challenging. Written down in some spec or proposal somewhere are, actually, quite a few elements. For purposes here, we considered 244 elements as standard (though, some of them are deprecated or unsupported):
* 145 Elements from HTML
* 68 Elements from SVG
* 31 Elements from MathML
In practice, we encountered only 214 of these:
* 137 from HTML
* 54 from SVG
* 23 from MathML
In the desktop dataset we collected data for the top 4,834 non-standard elements that we encountered. Of these:
* 155 (3%) are identifiable as very probable markup or escaping errors (they contain characters in the parsed tag name which imply that the markup is broken)
* 341 (7%) use XML-style colon namespacing (though, as HTML, they don't use actual XML namespaces)
* 3,207 (66%) are valid custom element names
* 1,211 (25%) are in the global namespace (non-standard, having neither dash, nor colon)
* 216 of these we have flagged as *possible* typos as they are longer than 2 characters and have a Levenshtein distance of 1 from some standard element name like ``,`` or ``. Some of these (like ``), however, are certainly intentional.
Additionally, 15% of desktop pages and 16% of mobile pages contain deprecated elements.
{{ figure_markup(
image="fig6.png",
caption="Most frequently used deprecated elements.",
description="Bar chart showing 'center' in use by 8.31% of desktop sites (7.96% of mobile), 'font' in use by 8.01% of desktop sites (7.38% of mobile), 'marquee' in use by 1.07% of desktop sites (1.20% of mobile), 'nobr' in use by 0.71% of desktop sites (0.55% of mobile), 'big' in use by 0.53% of desktop sites (0.47% of mobile), 'frameset' in use by 0.39% of desktop sites (0.35% of mobile), 'frame' in use by 0.39% of desktop sites (0.35% of mobile), 'strike' in use by 0.33% of desktop sites (0.27% of mobile), and 'noframes' in use by 0.25% of desktop sites (0.27% of mobile).",
chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTbHgqcSepZye6DrCTpifFAUYxKT1hEO56585awyMips8oiPMLYu20GETuIE8mALkm814ObJyktEe2P/pubchart?oid=1304237557&format=interactive"
)
}}
Figure 3.6 above shows the top 10 most frequently used deprecated elements. Most of these can seem like very small numbers, but perspective matters.
## Perspective on value and usage
In order to discuss numbers about the use of elements (standard, deprecated or custom), we first need to establish some perspective.
{{ figure_markup(
image="fig7_full.png",
caption='Top 150 elements (full detail).',
description="Bar chart showing a decreasing used of elements in descending order: html, head, body, title at above 99% usage, meta, a, div above 98% usage, link, script, img, span above 90% usage, ul, li , p, style, input, br, form above 70% usage, h2, h1, iframe, h3, button, footer, header, nav above 50% usage and other less well-known tags trailing down from below 50% to almost 0% usage.",
chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTbHgqcSepZye6DrCTpifFAUYxKT1hEO56585awyMips8oiPMLYu20GETuIE8mALkm814ObJyktEe2P/pubchart?oid=1694360298&format=interactive",
width=600,
height=778,
data_width=600,
data_height=778
)
}}
In Figure 3.7 above, the top 150 element names, counting the number of pages where they appear, are shown. Note how quickly use drops off.
Only 11 elements are used on more than 90% of pages:
- ``
- ``
- ``
- ``
- ``
- ``
- `