CODEWITHSUNDEEP
htmlarticle
John Darling
John Darling

Reputation: 99

HTML5 section and article layout for web application

I know this is a common question among web devs and designers today, "when do I use a section or article element?" I have done quite a bot of research about the semantics meanings for each, but i wanted some feedback from stack users.

Currently I am developing an HTML5 web application, dashboard of sorts. Each channel in the dashboard contains widgets that relate to that category. Each widget is independent of each other. The app also contains a user settings area (sidebar) tangentially related to the main content. In effort to create the most semantic markup, I thought of the following structure:

<body>
  <section class="channel">
    <header>
      <h1>Travel</h1>
      <nav>
        <button>Add widget</button>
        <button>Edit</button>
        <button>Share</button>
      </nav>
    </header>
    <article class="widget">
      <header>
        <h1>Expedia</h1>
        <nav>
          <button>Move up</button>
          <button>Move down</button>
          <button>Settings</button>
        </nav>
        <!-- Widget content (lists, paragraphs, etc) -->
      </header>
      <footer>
         <time>(Time and date of last widget update)</time>
      </footer>
    </article>

    <article class="widget">
      <header>
        <h1>Kayak</h1>
        <nav>
          <button>Move up</button>
          <button>Move down</button>
          <button>Settings</button>
        </nav>
        <!-- Widget content (lists, paragraphs, etc) -->
      </header>
      <footer>
         <time>(Time and date of last widget update)</time>
      </footer>
    </article>
  </section>

  <section class="channel">
    <header>
      <h1>Shopping</h1>
      <nav>
        <button>Add widget</button>
        <button>Edit</button>
        <button>Share</button>
      </nav>
    </header>
    <article class="widget">
      <header>
        <h1>Craigslist</h1>
        <nav>
          <button>Move up</button>
          <button>Move down</button>
          <button>Settings</button>
        </nav>
        <!-- Widget content (lists, paragraphs, etc) -->
      </header>
      <footer>
         <time>(Time and date of last widget update)</time>
      </footer>
    </article>

    <article class="widget">
      <header>
        <h1>eBay</h1>
        <nav>
          <button>Move up</button>
          <button>Move down</button>
          <button>Settings</button>
        </nav>
        <!-- Widget content (lists, paragraphs, etc) -->
      </header>
      <footer>
         <time>(Time and date of last widget update)</time>
      </footer>
    </article>
  </section>

  <aside id="sidebar">
    <h1>App Name</h1>
    <div>
      <!-- Clock element -->
    </div>
    <!-- Username and profile pic -->
    <ul>
      <!-- List of settings actions/buttons -->
    <ul>
    <footer>
      <p>Copyright...</p>
    </footer>
  </aside>

</body>

Thoughts? Suggestions?

Upvotes: 3

Views: 1907

Answers (1)

Neil
Neil

Reputation: 8111

An article should make sense on its own, that is its title and content should not need supporting content to be understood. Articles can be nested in further articles or sections.

A section can be used inside an article or indeed nested in another section, you should not use a section just as a hook for styling. So as a rule of thumb, if you don't have a header element inside it, use a div instead. Even if you don't need to see a header in your design, you can still provide one for semantic purposes but hide it.

My two favorite bookmarks on this topic are:

HTML5 doctor

Bruce Lawson (personal blog) writes for the above.

Upvotes: 1

Related Questions