Creating HTML5 Layout Container and Optimizing

Creating HTML5 Layout Container

The two most common methods of creating a layout in HTML involve using <div> and <table> elements. The <div>s are often used to divide the page into various sections to create the layout.

<div id="PageHeader"></div>
<div id="LeftSide"></div>
<div id="RightSide"></div>
<div id="Footer"></div>

The <div> element allows for more dynamic capability in page layout. For a more static layout the <table> element is more appropriate.

<table>
    <tr>
      <td colspan="3" id="Header"></td>
    </tr>
    <tr>
      <td rowspan="3" id="LeftBar"></td>
      <td rowspan="3" id="MainContent"></td>
      <td id="RightSideTop"></td>
    </tr>
    <tr>
      <td id="RightSideMiddle"></td>
    </tr>
    <tr>
      <td id="RightSideBottom"></td>
    </tr>
    <tr>
      <td colspan="3" id="Footer"></td>
    </tr>
</table>

The <table> element is very flexible. Additional elements such as <thead> and <tfoot> provide a more semantic approach to labeling the table cells.

Optimizing for search engines

Search engine optimization (SEO) is a technique used to make elements of the website easily discoverable and appropriately indexed by search engines,

Bing and Google constantly scour the Internet for content. When they find webpages, they go through the HTML and index content such as page and image metadata.

The <article> and <section>s elements are the main ones used by the SEO algorithm. These elements are known to contain the main body of the page.

That a page have more than one <article> and <section>s element is acceptable; they all get indexed.

Within each <article> element, the engine then seeks out elements such as <hgroup> or <h1> to get the main topic of the <article> element for relevant indexing.

Optimizing for screen readers

HTML5 introduced semantic elements to create new sections. This means that <section> , <article> , <nav> , and <aside> elements all define new sections.

The following HTML code was going to be the hierarchy of the sample document

<h1>Fruits and Vegetables</h1>
<h2>Fruit</h2>
<h3>Round Fruit</h3>
<h3>Long Fruit</h3>
<h2>Vegetables</h2>
<h3>Green</h3>
<h3>Colorful</h3>

Also recommended is that <h1> elements be used solely throughout an HTML5 document. To produce the same hierarchy in this fashion, you would need to change your HTML to be like the following:

<section>
    <h1>Fruits and Vegetables</h1>
    <section>
        <h1>Fruit</h1>
        <section>
            <h1>Round Fruit</h1>
        </section>
        <section>
            <h1>Long Fruit</h1>
        </section>
    </section>
    <section>
            <h1>Vegetables</h1>
        </section>
            <h1>Green</h1>
        </section>
        <section>
            <h1>Colorful</h1>
        </section>
    </section>
</section>