Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Further edits to 2020 Markup chapter #1859

Merged
merged 43 commits into from
Jan 4, 2021
Merged
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
d582cf8
Merge pull request #1 from HTTPArchive/main
j9t Nov 8, 2020
ee4c97e
Merge pull request #2 from HTTPArchive/main
j9t Nov 8, 2020
b7846b4
Merge pull request #3 from HTTPArchive/main
j9t Nov 9, 2020
50cd23b
Merge pull request #4 from HTTPArchive/main
j9t Nov 11, 2020
51f03d6
Merge pull request #5 from HTTPArchive/main
j9t Nov 12, 2020
87041d0
Merge pull request #6 from HTTPArchive/main
j9t Nov 13, 2020
8c9e781
Merge pull request #7 from HTTPArchive/main
j9t Nov 15, 2020
69ca37b
Merge pull request #8 from HTTPArchive/main
j9t Nov 16, 2020
66e28ea
chore: review and address TODOs
j9t Nov 16, 2020
750c94b
Merge remote-tracking branch 'origin/main' into main
j9t Nov 16, 2020
4af6840
Merge pull request #9 from HTTPArchive/main
j9t Nov 20, 2020
980e21f
Merge pull request #10 from HTTPArchive/main
j9t Nov 21, 2020
079d2ec
Update src/content/en/2020/markup.md
j9t Nov 22, 2020
0c708bf
Update src/content/en/2020/markup.md
j9t Nov 22, 2020
0da6a62
Merge pull request #11 from HTTPArchive/main
j9t Nov 22, 2020
c7d99ee
Merge pull request #12 from HTTPArchive/main
j9t Nov 24, 2020
37659b4
Merge pull request #13 from HTTPArchive/main
j9t Nov 25, 2020
abaa49c
Merge pull request #14 from HTTPArchive/main
j9t Nov 27, 2020
2b0dba1
Merge pull request #15 from HTTPArchive/main
j9t Nov 29, 2020
9fa288e
Merge pull request #16 from HTTPArchive/main
j9t Dec 1, 2020
5514c08
Merge pull request #17 from HTTPArchive/main
j9t Dec 2, 2020
5ba7822
chore: address TODOs
j9t Dec 2, 2020
39d61e6
chore: update numbers to divide bytes by 1,024 (instead of 1,000)
j9t Dec 3, 2020
79d36b9
Merge pull request #18 from HTTPArchive/main
j9t Dec 3, 2020
c93c67b
Merge remote-tracking branch 'origin/main' into main
j9t Dec 3, 2020
b157073
Merge pull request #19 from HTTPArchive/main
j9t Dec 5, 2020
dbf3a26
chore: update `lang` section wording (via @bazzadp)
j9t Dec 5, 2020
f261f63
chore: compress image
j9t Dec 5, 2020
13d6c58
chore: align graph title and name with other charts
j9t Dec 5, 2020
bca5e67
chore: compress image
j9t Dec 5, 2020
7475b53
Merge pull request #20 from HTTPArchive/main
j9t Dec 6, 2020
f6e171c
docs: add note on little popular elements
j9t Dec 6, 2020
88c936a
chore: remove “unedited” flag
j9t Dec 6, 2020
2def826
Update src/content/en/2020/markup.md
rviscomi Dec 6, 2020
ccf22c0
chore: correct number (per @Tiggerito)
j9t Dec 7, 2020
570a0c3
Merge pull request #21 from HTTPArchive/main
j9t Dec 7, 2020
d3f2d19
Merge remote-tracking branch 'origin/main' into main
j9t Dec 7, 2020
f433593
Merge pull request #22 from HTTPArchive/main
j9t Dec 8, 2020
198e760
Merge pull request #23 from HTTPArchive/main
j9t Dec 9, 2020
0a5d555
Merge pull request #24 from HTTPArchive/main
j9t Dec 9, 2020
9c4fe34
Merge pull request #25 from HTTPArchive/main
j9t Dec 26, 2020
390211c
Merge pull request #26 from HTTPArchive/main
j9t Jan 3, 2021
eed3e50
docs: incorporate review notes
j9t Jan 3, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions src/content/en/2020/markup.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ In this section, we're covering the higher-level aspects of HTML like document t
sql_file="summary_pages_by_device_and_doctype.sql"
) }}

96.82% of pages declare a [_doctype_](https://developer.mozilla.org/en-US/docs/Glossary/Doctype). HTML documents declaring a doctype is useful for historical reasons, "to avoid triggering quirks mode in browsers" as [Ian Hickson wrote in 2009](https://lists.w3.org/Archives/Public/public-html-comments/2009Jul/0020.html). What are the most popular values?
96.82% of pages declare a [_doctype_](https://developer.mozilla.org/en-US/docs/Glossary/Doctype). HTML documents declaring a doctype is useful for historical reasons, "to avoid triggering quirks mode in browsers" as [Ian Hickson explained in 2009](https://lists.w3.org/Archives/Public/public-html-comments/2009Jul/0020.html). What are the most popular values?

<figure>
<table>
Expand Down Expand Up @@ -205,11 +205,11 @@ What `type` attribute values are used with `script` elements?
- `application/ld+json`: 1.68%
- `application/json`: 0.41%
- `text/template`: 0.41%
- `text/html` 0.27%
- `text/html`: 0.27%

When it comes to loading [JavaScript module scripts](https://jakearchibald.com/2017/es-modules-in-browsers/) using `type="module"`, we found that 0.13% of `script` elements currently specify this attribute-value combination. `nomodule` is used by 0.95% of all tested pages. (Note that one metric relates to elements, the other to pages.)

36.38% of all scripts have no values set whatsoever.
36.38% of all scripts have no `type` values set whatsoever.

## Elements

Expand Down Expand Up @@ -338,7 +338,7 @@ Nothing changed in the Top 7, but the `option` element went a little out of favo

#### `details` and `summary`

Another thing we were curious about was the use of the [`details` and `summary` elements](https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements), especially since 2020 brought [broad support](https://caniuse.com/details). Are they being used? Are they attractive for—even popular—among authors? As it turns out, only 0.39% of all tested pages are using them, although it's hard to gauge whether they were all used the correct way in exactly the situations when you need them, "popular" is the wrong word.
Another thing we were curious about was the use of the [`details` and `summary` elements](https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements), especially since 2020 brought [broad support](https://caniuse.com/details). Are they being used? Are they attractive for—even popular among—authors? As it turns out, only 0.39% of all tested pages are using them, although it's hard to gauge whether they were all used the correct way in exactly the situations when you need them, "popular" is the wrong word.

Here's a simple example showing the use of a `summary` in a `details` element:

Expand Down Expand Up @@ -566,7 +566,7 @@ These elements come from three sources: [Yandex Metrica](https://metrica.yandex.

{# TODO(authors, analysts): What do "cases" mean here: pages/elements? And for desktop or mobile? #}

Other groups that stand out include [AMP markup](https://amp.dev/) with `amp-` elements like `amp-img` (11,700 cases), `amp-analytics` (10,256) and `amp-auto-ads` (7,621), as well as [Angular](https://angular.io/) `app-` elements like `app-root` (16,314), `app-footer` (6,745), and `app-header` (5,274).
Other groups that stand out include [AMP markup](https://amp.dev/) with `amp-` elements like `amp-img` (11,700 cases), `amp-analytics` (10,256), and `amp-auto-ads` (7,621), as well as [Angular](https://angular.io/) `app-` elements like `app-root` (16,314), `app-footer` (6,745), and `app-header` (5,274).

### Obsolete elements

Expand Down Expand Up @@ -638,7 +638,7 @@ Even `spacer` is still being used 1,584 times, and present on every 5,000th page

#### `isindex`

If you were wondering: The total number of [`isindex`](https://www.w3.org/TR/html401/interact/forms.html#edef-ISINDEX) elements in this dataset is: one. Exactly one page used an `isindex` element. It was part of the specs until [HTML 4.01 and XHTML 1.0](https://meiert.com/en/indices/html-elements/), yet only properly [specified](https://lists.w3.org/Archives/Public/public-whatwg-archive/2006Feb/0111.html) in 2006 (aligning with how it was implemented in browsers), and then [removed](https://github.com/whatwg/html/pull/1095) in 2016.
If you were wondering: The total number of [`isindex`](https://www.w3.org/TR/html401/interact/forms.html#edef-ISINDEX) elements in this dataset is: one. Exactly one page used an `isindex` element. `isindex` was part of the specs until [HTML 4.01 and XHTML 1.0](https://meiert.com/en/indices/html-elements/), yet only properly [specified](https://lists.w3.org/Archives/Public/public-whatwg-archive/2006Feb/0111.html) in 2006 (aligning with how it was implemented in browsers), and then [removed](https://github.com/whatwg/html/pull/1095) in 2016.

### Proprietary and made-up elements

Expand Down Expand Up @@ -851,7 +851,7 @@ Similar to the section on the most [popular elements](#top-elements), this sect
<figcaption>{{ figure_link(caption="Top 10 attributes by frequency of use.", sheets_gid="1348855449", sql_file="pages_almanac_by_device_and_attribute_name_frequency.sql") }}</figcaption>
</figure>

The most popular attribute is `class`, with nearly 3 billion occurrences in our dataset and constituting 34% of all attributes in use. `class` is by far the most prevalent attribute.
The most popular attribute is `class`, with nearly 3 billion occurrences in our dataset and constituting 34% of all attributes in use.

The `value` attribute, which specifies the value of an `input` element, surprisingly completes the top 10. It's surprising to us because, subjectively, we didn't get the impression `value` attributes were used that frequently.

Expand Down Expand Up @@ -917,7 +917,7 @@ Are there attributes that we find in every document? Not quite, but almost:
)}}</figcaption>
</figure>

These results raise some questions that we cannot answer. For example, `type` is used on other elements too, but why this tremendous popularity? Especially given that it's usually not needed to specify for style sheets or scripts, with CSS and JavaScript being assumed default. Or, how do we really fare with `alt`? Do those 9.25% of pages not contain any images or are they just inaccessible?
These results raise questions that we cannot answer. For example, `type` is used on other elements, too, but why this tremendous popularity? Especially given that it's usually not needed to specify for style sheets or scripts, with CSS and JavaScript being assumed default. Or, how do we really fare with `alt`? Do those 9.25% of pages not contain any images or are they just inaccessible?

### `data-*` attributes

Expand Down Expand Up @@ -983,7 +983,7 @@ The two most popular ones stand out because they are almost twice as popular tha
Attributes like `data-type`, `data-id`, and `data-src` can have multiple generic uses although `data-src` is used a lot with lazy image loading via JavaScript (e.g., Bootstrap 4). [Bootstrap](https://getbootstrap.com/) again explains the presence of `data-toggle`, where it's used as a state styling hook on toggle buttons. The [Slick carousel plugin](https://kenwheeler.github.io/slick/) is the source of `data-slick-index`, whereas `data-element_type` is part of [Elementor's WordPress website builder](https://elementor.com/). Both `data-requiremodule` and `data-requirecontext`, then, are part of [RequireJS](https://requirejs.org/).

{# TODO(authors): Update this interpretation given that the lazy loading stat is in terms of pages, not img elements. #}
Interestingly, the use of native lazy loading on images is similar to that of `data-src`. 3.86% of pages use the `<img loading="lazy">` attribute. This appears to be growing very fast, as back in February, this number was about [0.8%](https://twitter.com/zcorpan/status/1237016679667970050). It's possible that these are being used together for a [cross-browser solution](https://addyosmani.com/blog/lazy-loading/).
Interestingly, the use of native lazy loading on images is similar to that of `data-src`. 3.86% of pages use `loading="lazy"` on `img` elements. This appears to be growing very fast, as back in February, this number was about [0.8%](https://twitter.com/zcorpan/status/1237016679667970050). It's possible that these are being used together for a [cross-browser solution](https://addyosmani.com/blog/lazy-loading/).
j9t marked this conversation as resolved.
Show resolved Hide resolved

## Miscellaneous

Expand Down Expand Up @@ -1183,7 +1183,7 @@ There has been a lot of [discussion](https://adrianroselli.com/2016/01/links-but
<figcaption>{{ figure_link(caption="Adoption of button types.", sheets_gid="410549982", sql_file="pages_markup_by_device.sql") }}</figcaption>
</figure>

Our analysis shows that about 60% of pages contain a button element and more than half of the pages (32.43%) have at least one button that fails to specify a `type` attribute. Note that the button element has a [default type](https://dev.w3.org/html5/spec-LC/the-button-element.html) of `submit`, so the default behavior of buttons on these 32% of pages is to submit the current form data. To avoid possibly unexpected behavior like this, a best practice is to specify the `type` attribute.
Our analysis shows that about 60% of pages contain a button element and more than half of the pages (32.43%) have at least one button that fails to specify a `type` attribute. Note that the `button` element has a [default type](https://dev.w3.org/html5/spec-LC/the-button-element.html) of `submit`, so the default behavior of buttons on these 32% of pages is to submit the current form data. To avoid possibly unexpected behavior like this, a best practice is to specify the `type` attribute.

<figure>
<table>
Expand Down Expand Up @@ -1223,7 +1223,7 @@ Pages in the 10th and 25th percentiles contain no buttons at all, while a page i

### Link targets

The [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), or `a` element, links web resources together. In this section, we analyze the adoption of the protocols included in these link targets.
The [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), or `a` element, links web resources together. In this section, we analyze the adoption of the protocols included in the respective link targets.

<figure>
<table>
Expand Down Expand Up @@ -1362,4 +1362,6 @@ That compels us to close with an appeal: Pay attention to HTML. Focus on HTML. I

For the next edition of the Web Almanac's chapter, let's prepare to look closer at the craft of writing HTML and, hopefully, how we've been improving on it.

We're leaving this open to you. What are your observations? What has caught your eye? What do you think has taken a turn for the worse, and what has improved? [Leave a comment](https://discuss.httparchive.org/t/2039) to share your thoughts!
<p class="note">
We're leaving the rest open to you. What are your observations? What has caught your eye? What do you think has taken a turn for the worse, and what has improved? [Leave a comment](https://discuss.httparchive.org/t/2039) to share your thoughts!
</p>