title: HTML5 - header, masthead, branding, slider
body: <p>I am trying to tighten up the HTML5 on a website I am building. The nav and logo need to be in the top bar, and I am including a slider, quotes and some buttons. I am not sure if the masthead really should include the quote or the buttons.</p>
  
  <p>If not, would I really need a masthead and branding section? It seems to make sense semantically to include both.</p>
  
  <p>I have quite a few divs - should these be replaced with section?</p>
  
  <p><img src="https://i.stack.imgur.com/pV3hy.jpg" alt="Xmedia Masthead"></p>
  
  <pre><code>&lt;header&gt;
  
      &lt;section id="masthead"&gt;
          &lt;div id="branding" role="banner"&gt;
              &lt;div class="topbar"&gt;
                  &lt;h1 id="site-title"&gt;&lt;a href="#"&gt;&lt;img src="images/logo.jpg" width="180" height="65" alt="Xmedia"&gt;&lt;/a&gt;&lt;/h1&gt;
                  &lt;h2 id="site-description"&gt;Enterprise Solutions&lt;/h2&gt;
                  &lt;nav role="navigation"&gt;
                      &lt;div class="skip-link screen-reader-text"&gt;&lt;a href="#content" title="Skip to content"&gt;Skip to content&lt;/a&gt;&lt;/div&gt;
                      &lt;ul id="dropmenu" class="menu"&gt;
                          &lt;li&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;&lt;!-- nav --&gt;
              &lt;/div&gt;&lt;!-- topbar --&gt;
              &lt;div id="slider"&gt;
                  &lt;div class="slide1"&gt;&lt;/div&gt;
                  &lt;div class="slide2"&gt;&lt;/div&gt;
                  &lt;div class="slide3"&gt;&lt;/div&gt;
              &lt;/div&gt;&lt;!-- slider --&gt;
          &lt;/div&gt;&lt;!-- #branding --&gt;
      &lt;/section&gt;&lt;!-- #masthead --&gt;
  
      &lt;div class="home_header"&gt;
          &lt;h3&gt;&amp;quot;Network Solutions for Small Business. Shared or Dedicated Hosting, 100% Up-Time and Unparalleled Support Providing the Reliability that you Expect.&amp;quot;&lt;/h3&gt;
      &lt;/div&gt;&lt;!--home header--&gt;
  
      &lt;div class="home_header_right"&gt;
          &lt;a href="#"&gt;&lt;img src="" alt="image" width="154" height="50" /&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="" alt="image" width="154" height="50"  /&gt;&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/header&gt;&lt;!-- Header --&gt;
  </code></pre>