-
Notifications
You must be signed in to change notification settings - Fork 22.4k
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
<meter> examples have confusing meter bars inline #34413
Comments
I didn't escape the html for the example & my solution. This is the html from the example on MDN.
This is what I think it should look like:
My bad. Hope this makes it clearer. |
Hello! This is a bit confusing but intentional. The idea is that the text and the meter bar show the exact same content, so only one of them is displayed. 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. Is this a bad example? I'd say yes because you would never do this. I think both examples on this page should be replaced with something more realistic. |
Thank you for the response & clarifying what was intended. From the perspective of someone unfamiliar with the |
* 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>
* 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>
MDN URL
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter
What specific section or headline is this issue about?
Examples: Simple Example: HTML: first example shown
What information was incorrect, unhelpful, or incomplete?
What did you expect to see?
I suspect the page author intended the example to render as:
![image](https://cdn.statically.io/img/private-user-images.githubusercontent.com/132648930/342966664-5bef1238-c97e-4429-b82c-ff3abf20774a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE0Mzk0MjYsIm5iZiI6MTcyMTQzOTEyNiwicGF0aCI6Ii8xMzI2NDg5MzAvMzQyOTY2NjY0LTViZWYxMjM4LWM5N2UtNDQyOS1iODJjLWZmM2FiZjIwNzc0YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyMFQwMTMyMDZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wMDRiNjQwODlkNWY4ZDA0NDY3M2NhZTYyM2FjZjI3NTI1M2QxNzI1YzRjNzUzYTkwY2YzY2M4NDRiYzcyMmIzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.3u7gvGiVlu5clqaAuZu4GPdxYSez-suHdj-E_TcZyGE)
I produced this output by moving the closing tag:
This tag closure is more consistent with the 2nd example in the same section on the same page.
I'm not entirely certain what the example's author intended to happen in the example, but I think its reasonable to assume the text "350 degrees." was meant to be displayed after the meter.
Do you have any supporting links, references, or citations?
No response
Do you have anything more you want to share?
I am using MS Edge (Version 125.0.2535.85 (Official build) (64-bit)) to view the MDN examples. I don't currently have access to other browsers for comparison. Sorry I couldn't be more helpful. This is my first Git issue submission.
MDN metadata
Page report details
en-us/web/html/element/meter
The text was updated successfully, but these errors were encountered: