Fix The HTML <Meter> element example #34413
#34429
Conversation
github-actions
bot
added
Content:HTML
|
Preview URLs (comment last updated: 2024-07-11 05:31:20) |
|
This is not what #34413 (comment) said should be done, but I'll let @estelle decide. |
| @@ -42,7 +42,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib | |||
|
|
|||
| ```html | |||
| <p> | |||
| Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>. | |||
| Heat the oven to <meter min="200" max="500" value="350"></meter> 350 degrees. | |||
There was a problem hiding this comment.
The original was intended. The text between the opening and closing tag was put in there for browsers that did not support the <meter> element . Now that <meter> is supported everywhere, the text can be removed.
The text should not be put after the element as the meter value may change, and the text has no way of being updated to reflect any change.
There was a problem hiding this comment.
As @Josh-Cena wrote in the issue, a good solution would be to either replace the example with a useful one or to add within the example description that the text is meant as a fallback text for (a) screen readers (b) browsers that don't support meter bars (c) any other cases when the bar doesn't show.
There was a problem hiding this comment.
@estelle @Josh-Cena if you can just review new example, i guess this makes much more sense
and the linter is failing again
…into feature/34413
Refined examples for the `<meter>` element to offer more practical use cases: - Updated the simple example to showcase a battery level meter. - Revised the high and low range example to demonstrate a student's exam score meter. Included corresponding screenshots for the new examples to enhance clarity and understanding.
github-actions
bot
added
size/s
![github-actions[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
the meter element is supported everywhere, so screenshots are no longer needed
|
@estelle thanks for cooperation |
I hope everything is ok. |
Done, Thanks :) |
* Fix The HTML `<Meter>` element example * Update `<meter>` element examples for realism and clarity Refined examples for the `<meter>` element to offer more practical use cases: - Updated the simple example to showcase a battery level meter. - Revised the high and low range example to demonstrate a student's exam score meter. Included corresponding screenshots for the new examples to enhance clarity and understanding. * Update files/en-us/web/html/element/meter/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/html/element/meter/index.md Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * removing images the meter element is supported everywhere, so screenshots are no longer needed * fix lint issue * delete images --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Description
Fix the HTML example for the
<meter>element to correctly display the text after the meter.Motivation
The current example didn't render as intended, potentially confusing readers about the proper usage of the
<meter>element. This change provides a more accurate and helpful example.Additional details
The issue was observed in Google Chrome. The current HTML:
should be changed to:
This change is consistent with clearer rendering and better aligns with usage expectations.
Related issues and pull requests
Fixes #34413