Geek Answers Handbook

Semantic HTML5 for user interface elements

With HTML5, many additional elements have been added to structure documents, such as blog posts or long texts. But I'm having problems with the semantic way of structuring user interface components.
In a typical webapp, you have many different components, such as modals, button elements, interactive forms, containers, etc. Often I see that those things are built using divand spanonly or by using elements header, footerand nav, and I feel like I missed something.

Is it really semantical to create all structural rather than content elements using only the element div? Will there be a more diverse selection of items in the future?

EDIT: Here is a brief 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>
+4
source share
2 answers

The latest W3C working draft for HTML 5.1 was released two days ago, on April 13, and it was "semantically centered": see

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

This is an interesting read, expecting all of these bizarre things to be implemented by the most common browsers.

Is it really semantical to create all structural rather than content-related elements using only the div element?

-. " - " - , "" "" , .

?

! , , , .

+3

div span ( , ), :

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

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

<!-- content -->

<i>?</i>

<p>Enter your barbaz.</p>

, . , .

:

<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>

header/footer , ( , !). , / header ( , , ).

HTML 5.1, , menu dialog, .

+2

More articles:


All Articles