6 ms·

Can anyone explain how HTML/CSS/etc. can be "semantic" at the syntax layer when it is largely a means of specifying a UI? The era when HTML was a markup for te

Can anyone explain how HTML/CSS/etc. can be "semantic" at the syntax layer when it is largely a means of specifying a UI? The era when HTML was a markup for text documents is gone -- what sense is there in supposing it can be 'semantic' ?

atoav 3y ago
A h1 is still likely a heading, a meter is some value and a div could be everything. This is semantic. The opposite of semantic would be having all divs and using them for everything.
froddd 3y ago
Every element has a function or hierarchy in the document. The ‘semantic’ association helps define that role. This is useful for technologies that rely on something else than the visual output of the document, for instance, screen readers. As an example, a heading might contain the content: “A brief summary”. Without a semantic role, this does not convey the hierarchical position of that element within the document. Using the correct tag (in this case, `h{1|2…}` does provide this extra information and helps provide structure to the document.
- mjburgess 3y ago
  I suspect tag names are not the right place for screen readers to be getting that information. The web isnt hypertext any more, it's hypogui. If we defined a "WebGUI Markup Language" it could be a requirement that all UI elements have semantic attributes, etc., eg., <Text type="heading" purpose="page title"> My Web Page </Text> It just seems we're hobbled by this 1992 idea that the web is wikipedia, and our markup languages should be foremost about how text documents are described.
  - notpushkin 3y ago
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... seems to be close to what you want.
  - graemep 3y ago
    I think there is a bias here because a lot of us (myself included) prefer text with markup for a lot of things. Most of my usage of the web is served better by text with markup than a (front end) application platform and every site having masses of JS makes things worse (I have JS off by default and turn it on when sites refuse to work with JS and fail with reader view).
  - froddd 3y ago
    Every element has _implied_ semantic attributes, which can be extended/overridden by using the `role` and some `aria-` attributes. For instance, the `<button>` element has a default `role` of `button`, to indicate that it is a button, that can be clicked, and will perform an action when that is done. The role can be changed, for instance to `link`, to indicate that it now functions as a link. Similarly, a paragraph tag (`<p>`) can be assigned a role of `button`. It’s very easy to abuse this, but it also means the underlying markup is a lot clearer, IMO. This may not be true to people who are not used to or don’t know about the semantic side of HTML, but herein lies a lot of the associated knowledge of that syntax, often unfortunately overlooked, sometimes leading to HTML being derided as a “beginner’s language”. There is a huge amount of knowledge around HTML.
thih9 3y ago
I don’t follow, why can’t means of specifying an UI be semantic too? And isn’t html is still markup for text documents? All kinds of web apps output just that as their result.
lifthrasiir 3y ago
Even UIs have to be semantic, otherwise you have to implement every interaction that will be ever used. Tab key tends to work even when you haven't specifically handled it because you have used elements that are intended to interact with users and enable `tabindex` by default. This is also why game UIs have been traditionally horrible, because game developers often prefer to make everything from scratch...
- berkes 3y ago
  It's also why many of the UI toolkits on JS "spa"s suck. They often lack interaction that people do use, but the developer wasn't aware of. DoubleClick on buttons, enter in text fields, home-end in selectlists, typing in selectlists and so on. The the better UI toolkits slowly start to accumulate all these, grow wieldy, sluggish and get replaced by a "fresh" and "snappy" alternative and the circle continues.
- mananaysiempre 3y ago
  ... And yet the UI in the original Deus Ex (2000) supports not only tabbing and arrow keys, but Alt accelerator keys on every button as well, indicated with Windows-standard underlines. This includes the UI for interacting with in-game objects such as news kiosks. (I’ve just checked, and the table view supports sorting by clicking on a table header.) I don’t expect it’s accessible to screen readers, but, well, it’s a 3D game.
- mjburgess 3y ago
  I'm not arguing the immediate-mode vs. retained-mode point -- having OS-based GUI components exposed by the browser (etc.) is consistent with my point. Semantic here doesnt mean buttons arent buttons, etc. it means the components are named for their role as components -- rather than their role in structuring text markup.
  - lifthrasiir 3y ago
    Your question was ambiguous then: > Can anyone explain how HTML/CSS/etc. can be "semantic" at the syntax layer when it is largely a means of specifying a UI? "Semantic" HTML means that you have to use a purpose-made element when it's available. A link should preferably be done with <a>, not <div> or <span>. (<button> is more debatable.) HTML doesn't provide a calendar so you should roll your own with `<div class="my-calendar">`, or more recently, custom elements like <my-calendar>. You would have many internal parts within that element, unless hidden under a shadow tree, but at least that particular element can be said "semantic". "Semantic" CSS means that you have to pick a sensible name. This is different from HTML because CSS itself has no semantics attached---you attach a tree and name subtrees with class or id. So the sensible name is not means to do anything other than managing complexity, and became out of fashion once other approaches like Tailwind were found and became feasible. In any case you would name something semantically, which may or may not translate to actual CSS class names.
wayfinder 3y ago
Practically speaking, if you have to involve any libraries or tooling one day, if you stuck to standards or de-facto standards, you save yourself some pain because you got a lot interoperability for free.
pjc50 3y ago
This is an is/ought problem. Certainly a lot of the web is mere UI, just boxes containing content, but sometimes it's worth asking if the content might contain some meaning.

atoav 3y ago

A h1 is still likely a heading, a meter is some value and a div could be everything. This is semantic. The opposite of semantic would be having all divs and using them for everything.

froddd 3y ago

Every element has a function or hierarchy in the document. The ‘semantic’ association helps define that role. This is useful for technologies that rely on something else than the visual output of the document, for instance, screen readers. As an example, a heading might contain the content: “A brief summary”. Without a semantic role, this does not convey the hierarchical position of that element within the document. Using the correct tag (in this case, `h{1|2…}` does provide this extra information and helps provide structure to the document.

mjburgess 3y ago
I suspect tag names are not the right place for screen readers to be getting that information. The web isnt hypertext any more, it's hypogui. If we defined a "WebGUI Markup Language" it could be a requirement that all UI elements have semantic attributes, etc., eg., <Text type="heading" purpose="page title"> My Web Page </Text> It just seems we're hobbled by this 1992 idea that the web is wikipedia, and our markup languages should be foremost about how text documents are described.
- notpushkin 3y ago
  https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... seems to be close to what you want.
- graemep 3y ago
  I think there is a bias here because a lot of us (myself included) prefer text with markup for a lot of things. Most of my usage of the web is served better by text with markup than a (front end) application platform and every site having masses of JS makes things worse (I have JS off by default and turn it on when sites refuse to work with JS and fail with reader view).
- froddd 3y ago
  Every element has _implied_ semantic attributes, which can be extended/overridden by using the `role` and some `aria-` attributes. For instance, the `<button>` element has a default `role` of `button`, to indicate that it is a button, that can be clicked, and will perform an action when that is done. The role can be changed, for instance to `link`, to indicate that it now functions as a link. Similarly, a paragraph tag (`<p>`) can be assigned a role of `button`. It’s very easy to abuse this, but it also means the underlying markup is a lot clearer, IMO. This may not be true to people who are not used to or don’t know about the semantic side of HTML, but herein lies a lot of the associated knowledge of that syntax, often unfortunately overlooked, sometimes leading to HTML being derided as a “beginner’s language”. There is a huge amount of knowledge around HTML.

thih9 3y ago

I don’t follow, why can’t means of specifying an UI be semantic too? And isn’t html is still markup for text documents? All kinds of web apps output just that as their result.

lifthrasiir 3y ago

Even UIs have to be semantic, otherwise you have to implement every interaction that will be ever used. Tab key tends to work even when you haven't specifically handled it because you have used elements that are intended to interact with users and enable `tabindex` by default. This is also why game UIs have been traditionally horrible, because game developers often prefer to make everything from scratch...

berkes 3y ago
It's also why many of the UI toolkits on JS "spa"s suck. They often lack interaction that people do use, but the developer wasn't aware of. DoubleClick on buttons, enter in text fields, home-end in selectlists, typing in selectlists and so on. The the better UI toolkits slowly start to accumulate all these, grow wieldy, sluggish and get replaced by a "fresh" and "snappy" alternative and the circle continues.
mananaysiempre 3y ago
... And yet the UI in the original Deus Ex (2000) supports not only tabbing and arrow keys, but Alt accelerator keys on every button as well, indicated with Windows-standard underlines. This includes the UI for interacting with in-game objects such as news kiosks. (I’ve just checked, and the table view supports sorting by clicking on a table header.) I don’t expect it’s accessible to screen readers, but, well, it’s a 3D game.
mjburgess 3y ago
I'm not arguing the immediate-mode vs. retained-mode point -- having OS-based GUI components exposed by the browser (etc.) is consistent with my point. Semantic here doesnt mean buttons arent buttons, etc. it means the components are named for their role as components -- rather than their role in structuring text markup.
- lifthrasiir 3y ago
  Your question was ambiguous then: > Can anyone explain how HTML/CSS/etc. can be "semantic" at the syntax layer when it is largely a means of specifying a UI? "Semantic" HTML means that you have to use a purpose-made element when it's available. A link should preferably be done with <a>, not <div> or <span>. (<button> is more debatable.) HTML doesn't provide a calendar so you should roll your own with `<div class="my-calendar">`, or more recently, custom elements like <my-calendar>. You would have many internal parts within that element, unless hidden under a shadow tree, but at least that particular element can be said "semantic". "Semantic" CSS means that you have to pick a sensible name. This is different from HTML because CSS itself has no semantics attached---you attach a tree and name subtrees with class or id. So the sensible name is not means to do anything other than managing complexity, and became out of fashion once other approaches like Tailwind were found and became feasible. In any case you would name something semantically, which may or may not translate to actual CSS class names.

wayfinder 3y ago

Practically speaking, if you have to involve any libraries or tooling one day, if you stuck to standards or de-facto standards, you save yourself some pain because you got a lot interoperability for free.

pjc50 3y ago

This is an is/ought problem. Certainly a lot of the web is mere UI, just boxes containing content, but sometimes it's worth asking if the content might contain some meaning.