4 ms·

A few things in it that I would not put into a beginner's (or any) guide: - Semantic tags (header, footer, main, section): machine-readable semantics can be fu

A few things in it that I would not put into a beginner's (or any) guide: - Semantic tags (header, footer, main, section): machine-readable semantics can be fun to play with if one is so inclined, one can go even for RDFa, but AFAICT they will not do anything visible or useful, especially for a small beginner's website, but they complicate the guide. - CSS: the page itself uses low-contrast pink text on a pink background, which is hard to read (and goes against W3C accessibility guidelines, which can be checked with one of the online contrast checkers as well), and provides similar low-contrast examples. It also makes links bold on hover, which moves the texts that follow them, and which is annoying. - Viewport meta tag: this can be controversial, I think, but the tag itself is rather a hack to tell a browser "this page is not too broken, it can be rendered with a legible font size without breaking the markup". Teaching beginners to repeat that feels wrong both as promotion of such bad browser behavior, and as a road to potential misuse even of that (and the next version of the guide will have to include a new "this page really is not broken" invocation).

MrJohz 2y ago
> but AFAICT they will not do anything visible or useful They are very useful for people using reader mode. I wouldn't worry about sections, though, they're not really used by many tools, as far as I'm aware. > Viewport meta tag It is not a hack, it is part of the html specification. You don't have to include it, but the browser defaults aren't great, and will not be changed due to backwards compatibility. Please always specify this tag, do not rely on browsers to break backwards compatibility because they won't.
- chrismorgan 2y ago
  >> Viewport meta tag > It is not a hack, it is part of the html specification. You don't have to include it, but the browser defaults aren't great, and will not be changed due to backwards compatibility. Please always specify this tag, do not rely on browsers to break backwards compatibility because they won't. It’s not part of the HTML Standard; what little underspecification there is is in the CSS Viewport Module Level 1 draft <https://drafts.csswg.org/css-viewport-1/#viewport-meta https://drafts.csswg.org/css-viewport-1/#viewport-meta>. The HTML Standard refers to it once, while essentially talking about something completely different <https://html.spec.whatwg.org/multipage/parsing.html#speculative-html-parsing:the-meta-element-3 https://html.spec.whatwg.org/multipage/parsing.html#speculat...>. The spec is incomplete and atrocious, and no one seems interested in improving it—it’s sat stagnant for more than a decade. It does things like use strtod to parse numbers, so that in theory (unless there’s some other document I don’t know about that replaces the meaning of “strtod”) an English user will parse initial-scale=1.5 correctly, while French would parse it as 1.0—but I hope no one has actually implemented it that way. (Why is it part of CSS? Rendering stuff is mostly shifted into CSS’s domain, and also most of the things that started in meta tags arguably because of bad decisions end up being shifted into CSS proper, and that was the idea with @viewport, which was part of CSS Device Adaptation Module Level 1; but since everyone was apparently so supremely bored by the whole thing, they gave up <https://github.com/w3c/csswg-drafts/issues/4766 https://github.com/w3c/csswg-drafts/issues/4766>. But because it’s rendering, CSSWG is still probably the best place for it.) —⁂— Anyway: although it’s underspecified, it is… sufficiently consistent and settled, and absolutely invaluable. Every document being started from scratch, which has any intention of caring about mobile-sized screens at all, should include <meta name=viewport content="width=device-width,initial-scale=1">.
puchatek 2y ago
the page itself uses low-contrast pink text on a pink background, which is hard to read Well, the author does say about herself that she loves making things pink so I guess this is a feature.
assimpleaspossi 2y ago
They are also inconsistent and wrong about the usage of a closing slash on the <img> tag. No HTML tag uses or needs a closing slash and never has in any HTML standard. And before anyone replies, "But...but...XHTML!", XHTML is XML, not HTML.
assimpleaspossi 2y ago
They are also inconsistent and wrong about the usage of a closing slash on the <img> tag. No HTML tag uses or needs a closing slash and never has in any HTML standard. The W3C Validator will flag this and even warn about potential problems doing it that way. And before anyone replies, "But...but...XHTML!", XHTML is XML, not HTML.

MrJohz 2y ago

> but AFAICT they will not do anything visible or useful They are very useful for people using reader mode. I wouldn't worry about sections, though, they're not really used by many tools, as far as I'm aware. > Viewport meta tag It is not a hack, it is part of the html specification. You don't have to include it, but the browser defaults aren't great, and will not be changed due to backwards compatibility. Please always specify this tag, do not rely on browsers to break backwards compatibility because they won't.

chrismorgan 2y ago
>> Viewport meta tag > It is not a hack, it is part of the html specification. You don't have to include it, but the browser defaults aren't great, and will not be changed due to backwards compatibility. Please always specify this tag, do not rely on browsers to break backwards compatibility because they won't. It’s not part of the HTML Standard; what little underspecification there is is in the CSS Viewport Module Level 1 draft <https://drafts.csswg.org/css-viewport-1/#viewport-meta https://drafts.csswg.org/css-viewport-1/#viewport-meta>. The HTML Standard refers to it once, while essentially talking about something completely different <https://html.spec.whatwg.org/multipage/parsing.html#speculative-html-parsing:the-meta-element-3 https://html.spec.whatwg.org/multipage/parsing.html#speculat...>. The spec is incomplete and atrocious, and no one seems interested in improving it—it’s sat stagnant for more than a decade. It does things like use strtod to parse numbers, so that in theory (unless there’s some other document I don’t know about that replaces the meaning of “strtod”) an English user will parse initial-scale=1.5 correctly, while French would parse it as 1.0—but I hope no one has actually implemented it that way. (Why is it part of CSS? Rendering stuff is mostly shifted into CSS’s domain, and also most of the things that started in meta tags arguably because of bad decisions end up being shifted into CSS proper, and that was the idea with @viewport, which was part of CSS Device Adaptation Module Level 1; but since everyone was apparently so supremely bored by the whole thing, they gave up <https://github.com/w3c/csswg-drafts/issues/4766 https://github.com/w3c/csswg-drafts/issues/4766>. But because it’s rendering, CSSWG is still probably the best place for it.) —⁂— Anyway: although it’s underspecified, it is… sufficiently consistent and settled, and absolutely invaluable. Every document being started from scratch, which has any intention of caring about mobile-sized screens at all, should include <meta name=viewport content="width=device-width,initial-scale=1">.

puchatek 2y ago

the page itself uses low-contrast pink text on a pink background, which is hard to read Well, the author does say about herself that she loves making things pink so I guess this is a feature.

assimpleaspossi 2y ago

They are also inconsistent and wrong about the usage of a closing slash on the <img> tag. No HTML tag uses or needs a closing slash and never has in any HTML standard. And before anyone replies, "But...but...XHTML!", XHTML is XML, not HTML.

assimpleaspossi 2y ago

They are also inconsistent and wrong about the usage of a closing slash on the <img> tag. No HTML tag uses or needs a closing slash and never has in any HTML standard. The W3C Validator will flag this and even warn about potential problems doing it that way. And before anyone replies, "But...but...XHTML!", XHTML is XML, not HTML.