1. 2

When it comes to web dev, I just clobbering together html but I manage. While looking into current standards I just realized all tabbed web pages are a hack! It is just radio button or check boxes masquerading as tabs. Sad. Is this true? The W3 doesn’t have a real TAB tag?


  2. 11

    While looking into current standards I just realized all tabbed web pages are a hack!

    Keep looking, and you’ll discover that all front end development is a hack.

    Contrary to popular belief, HTML is not a language for describing the user interface to an application. HTML is a serialization format for a data structure called the DOM- the Document Object Model. The DOM also isn’t itself a presentational structure, but instead is a semantic structure for organizing data elements into a hierarchy. As the name implies, it’s a Model object. It is data. Would you say “tabbed navigation” is a data structure? Of course not! It’s a UI pattern.

    Modern web development ends up in a weird place- the DOM is simultaneously an extremely complex and abstract data structure, but also is too low-level to provide a lot of useful UI features. I mean, it doesn’t even have a native concept of a “view”, and instead people just generate snippets of DOM-data and pretend that these are distinct views.

    1. [Comment removed by author]

      1. 6

        It is a bit ahistoric, but perhaps not as much as you think. HTML has always struggled with the conflict between being a semantic data structure and a presentational layer- so much so that deciding whether or not to include was a huge debate at the time, because it was arguably too presentational and too use-case specific.

        One thing that’s important to note is that DOM level 0 was not an API created for JavaScript to consume- it was the browser’s own internal model exposed to be automated via JavaScript. Now, in the bad old days, there was no standard controlling this, so yes, it would be very misleading to say that the DOM and HTML had a predictable relationship- each browser would “deserialize” it very very differently.

        But nowadays, the DOM is the canonical state of a page, from the browser’s perspective, and it is what the browser renders. There is a clear and documented relationship between HTML and the DOM tree that should be constructed as a result.

        In the end, the statement “HTML is a serialization format for DOM” is a very opinionated way of expressing their relationship. Browsers don’t render HTML, they render DOM. They use HTML to construct that DOM.

    2. 3

      It doesn’t. Isn’t tab presentational? Like the way you may style the beginning of a paragraph? That’s all part of the style given by CSS. For tabular data on the other hand you have tables, and PRE for pre-formatted text.

      1. 3

        I think they mean tabs as in layout/windowing, not spaces.

        1. 3

          I was confused too. First I thought of tabs, as in \x09, the thing that shouldn’t be used when indenting source code. Then I thought of things that can be reached and navigated through when the TAB key is pressed, i.e., using tabindex, but finally realized this is about tabs to switch between windows (as in tabbed browsing)

        2. 2

          Well, iframes and the target attribute on anchor tabs kinda used to be the way of solving this.

          I haven’t looked at this in years, but something like:

          <a href="/tab1" target="currentTab">Tab 1</a>
          <a href="/tab2" target="currentTab">Tab 2</a>
          <a href="/tab3" target="currentTab">Tab 3</a>
          <iframe name="currentTab"></iframe>

          The thing is is that that breaks a lot, doesn’t make indexing and searching the page easier for other uses, doesn’t quite offer dynamic tabs in ways we’d want, etc. etc.

          1. 0

            Bootstrap uses a <ul><li><a> structure, as you can view in the source code of their tab examples.