4

With HTML5, there were many additional elements added for structuring documents like blog posts or long texts. But what I have problems coming up with is a semantic way of structuring UI components.
On a typical webapp, you have many different components such as modals, button elements, interacitve forms, containers, and so on. Often, I see those things being constructed using div and span only or by misusing header, footerand nav elements and I get the feeling I missed something out.

Is it really semantic to create all structural, not content-related elements using the div element only? Will there be a more diverse element choice in the future?

EDIT: Here's a short example of what I mean:

<div class="modal foo">
    <div class="inner wrapper">
        <div class="upper bar">
            <div class="inner">
                <div class="window-name">
                    <span class="upper heading">
                        <h1>Foo</h1>
                    </span>
                    <span class="lower heading">
                        <h3>Extra Baz</h3>
                    </span>
                </div>
                <div class="buttons">
                    <div class="button close"><span class="icon"><i>×<i></span></div>
                    <div class="button maximize"><span class="icon"><i class="fa fa-maximize"><i></span></div>
                </div>
            </div>
        </div>
        <div class="content well">
            <!-- 
                Whatever happens inside the modal window named foo.
                Pretty sure it needs many divs as well, though.
            -->
        </div>
        <div class="lower bar">
                <div class="buttons">
                    <div class="button help"><span class="icon"><i>?<i></span></div>
                </div>
                <span class="info">
                <p>Enter your barbaz.</p>
            </span>
        </div>
    </div>
</div>
Community
  • 1
  • 1
Moritz Friedrich
  • 1,371
  • 20
  • 38
  • 1
    Can you give an *actual* example? The snippet in your question only consists of empty `div` elements without any content. – unor Apr 15 '15 at 10:16
  • @unor, have a look at the markup of the google search input, for example: http://pastebin.com/Xzt8uBkg. This is maybe an extreme case of ugly code, but things grow like this sometimes. Otherwise, feel free to inspect major websites (Facebook, Gmail, Twitter, etc.) and have a glance at their source. I'll update my question , though. – Moritz Friedrich Apr 15 '15 at 15:15
  • 1
    Major websites code has another reason to be ugly: it is to break patterns blocking the ads (or they will become poor, without them). – Marco Bernardini Apr 15 '15 at 15:46
  • @MarcoBernardini, I agree. Nevertheless I hope you get my point - HTML becomes complex fast, especially on big projects. – Moritz Friedrich Apr 15 '15 at 16:02

2 Answers2

3

The last W3C working draft for HTML 5.1 was released two days ago, on April, 13, and it is "semantic-centered": see

http://www.w3.org/TR/html51/Overview.html

It is an interesting reading, while waiting to have all those fancy things implemented by the most common browsers.

Is it really semantic to create all structural, not content-related elements using the div element only?

Not in my opinion. Even without to cite "the media is the message", everything has something to do with the content, even "open" and "close" buttons allowing users to see the content.

Will there be a more diverse element choice in the future?

Of course! And with a lot of proprietary prefixes, as usual, just to keep our life busier.

Marco Bernardini
  • 695
  • 6
  • 17
  • First let me say thank you for the excellent answer. Towards the not content related stuff - the point I was trying to make was completely semantically, there are just components you can't describe accurately using the more text-centered elements HTML5 brought us ;) – Moritz Friedrich Apr 15 '15 at 07:01
  • You can create your own elements: see http://stackoverflow.com/questions/5682943/how-to-create-custom-tags-for-html — What about a ` ` tag? :-) – Marco Bernardini Apr 15 '15 at 07:08
  • That's where I'll put my blog posts in :-) – Moritz Friedrich Apr 15 '15 at 08:30
2

Ignoring div and span elements (which are meaningless, except for the case of specifying some meaningful attributes), your snippet consists of this:

<h1>Foo</h1>
<h3>Extra Baz</h3>

<i>×</i>
<i></i>

<!-- content -->

<i>?</i>

<p>Enter your barbaz.</p>

This is what your content looks like from the semantic perspective. Not very clear what gets represented here.

  • Using a heading element for a subtitle (h3 in your case) is not appropriate. (Or, if it’s not a subheading but really a new/own section, don’t skip a heading level; but I’m assuming the former.) Use one heading element, and use p for the subheading, and group them in header.

  • Using i elements for adding icons via CSS is not appropriate. Either use CSS only (with the help of existing elements), or, if you have to add an empty element, use span.

  • Using span/div elements for buttons is not appropriate. Use button instead.

  • As you are already using a heading element, it’s recommended to explicitly specify a sectioning content element. Depending on the context of this content, it may be article or aside (or nav if it’s for navigation), but in all other cases section.

Following this, you’d get:

<section>
  <header>
    <h1>Foo</h1>
    <p>Extra Baz</p>
  </header>

  <button>Close</button>
  <button>Maximize</button>

  <!-- content -->

  <button>Help</button>

  <p>Enter your barbaz.</p>
</section>

Now you may add header/footer elements for those parts that are not part of this section’s (not this document’s, it’s only about this section!) main content.
You may, for example, enclose the maximize/close buttons in a header (however, opinions if this would be appropriate differ).

HTML 5.1 will probably have a menu element and a dialog element, which might be useful in this case.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • From my understanding, `section`/`header`/`footer` etc. should only be used inside the context of a text document, eg. to section an article. At least, the doc explictly [recommends](http://www.w3.org/TR/html51/semantics.html#the-section-element) to *not* use them as generic container elements. I also don't agree with using `p` for subtitles - it is a paragraph after all. And lastly, I was using that many `div` elements on purpose - you need them for styling sometimes (eg. positioning). This example was not perfect, yes, but this is not a real, general answer to the actual question. – Moritz Friedrich Apr 15 '15 at 16:45
  • (*Please don't get me wrong, thank you for your extensive answer. My comment sounds a bit rude, which is due to my english skills. I respect your point! ;-)*) – Moritz Friedrich Apr 15 '15 at 16:47
  • 1
    @MoFriedrich: **Sections:** Section content elements are not only for "classical" documents; in fact, they are especially helpful for documents that mix content and apps, or even typical Web apps. "generic container" means not to use it instead of `div`. You *are* already using a section as soon as you have a heading. By using sectioning content elements, you are making this explicit (which HTML5 encourages!) instead of leaving it implicit. -- **Subheading:** the `p` is not mandatory here, you could also use `div` or `span` etc., it’s just important *not* to use another heading element. -- – unor Apr 15 '15 at 16:56
  • @MoFriedrich: I understand that the `div` elements were only added for CSS/JS reasons, but that’s exactly my point: for deciding if markup is semantic, you can ignore those. They don’t change any semantics (except for the case of attributes, as mentioned). – unor Apr 15 '15 at 16:58
  • But isn't a modal window wrapper the exakt use case of a generic container? – Moritz Friedrich Apr 15 '15 at 16:58
  • Well, the reason I asked this question was that I wanted to know wether there is a better way to construct UI components than using multiple `div` elements, as I find the current `div` mess in common HTML code pretty desturbing. – Moritz Friedrich Apr 15 '15 at 17:04
  • @MoFriedrich: It depends on what it contains and its context, not how it is presented (as modal or somehow else). But again, as soon as you use a heading element (`h1`-`h6`), you already have an implicit section, as the outline algorithm defines. If you then add a `section` element, the semantics do not change at all, you are only making explicit what was already implicit. -- So, there may certainly be some modals that should not use a sectioning element, but in that case you should not use any heading elements in this modal. – unor Apr 15 '15 at 17:05
  • 1
    @MoFriedrich: Oh, and this doesn’t mean that you don’t need a section just because you don’t use headings. In HTML 5.1, the [`dialog` element](http://www.w3.org/TR/html51/semantics.html#the-dialog-element) may be used for some modals, and it’s defined to be a [sectioning root element](http://www.w3.org/TR/html51/semantics.html#sectioning-root), i.e., a sectioning element whose childs play no part in the document outline; it creates its own outline in this document, which makes sense for those modals. – unor Apr 15 '15 at 17:13