CODEWITHSUNDEEP
htmlsemantic-markup
Moritz Friedrich
Moritz Friedrich

Reputation: 1481

Semantic HTML5 for UI elements

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>

Upvotes: 4

Views: 1636

Answers (2)

unor
unor

Reputation: 96737

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.

Upvotes: 2

Marco Bernardini
Marco Bernardini

Reputation: 705

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.

Upvotes: 3

Related Questions