Hacker News new | ask | show | jobs
by seanwilson 51 days ago
I was thinking more of a document with multiple paragraphs and images, where some paragraphs are grouped with images and some aren't.

In the code from the link, the <body> element is serving as the wrapper element, that gives you a hook to get the layout you want. But when you're not lucky enough to have a semantic wrapper tag like that, you've usually got to add a generic tag help. Or write CSS that's closely coupled with the HTML, so they aren't really separate anyway.
2 comments
matt_kantor 51 days ago
Multiple sequential paragraphs all sitting next to two images? Or multiple rows, each containing a single paragraph + two images?

The latter probably would need an element for each row to be maintainable/scalable, but depending on the content, `<article>` could be a semantically-meaningful container. Or (again, depending on the content) it could make semantic sense to put the `<img>` elements inside the `<p>` elements.

link
seanwilson 51 days ago
This is still adding wrapper elements to get the layout you want. Even if you can force yourself to come up with some vague semantics behind the wrapper elements (that you wouldn't have otherwise added), I don't see how it's much better than using a generic tag and it shows you need to modify HTML to modify the presentation in practice.

Visual design involves a lot of grouping and aligning elements, and there isn't always semantic reasons for it. Grouping is usually best done in the HTML, so it's hard keep this part of the visual design out of your HTML.

link
matt_kantor 51 days ago
Presumably there's some natural semantic relationship between the elements if you're going for that kind of visual layout (and even blind users might benefit from encoding that relationship in the DOM), but I don't necessarily disagree with your overall point.

Sparingly-used non-semantic grouping elements only inserted when absolutely necessary is a pretty different story from the "layers and layers of wrapper elements" that the article mentions, though.

---

> you need to modify HTML to modify the presentation in practice

If you're e.g. grouping together content that was previously unstructured, arguably that's a semantic change as well as a presentational one.

link
lawnmowed 51 days ago
Grouped HTML: p text img img /p Grouped CSS: p:has(img) {...} p img {...}

No group HTML: p text /p img img No group CSS: p:has(+ img) {...} p + img {...} p + img + img {...}

Valid, semantic, easy to target.

link