Skip to main content

Ted Szukalski

Gallery of fine art photography.

Adopting my blog to “HTML 5” – part 2 – the structure

 on 

Today I have selected this photograph of leaf veins as it reflects closely on the subject of my code changes behind this blog. Similarly to the leaf’s vein structure, which creates here a beautifully presented hierarchy pattern an Internet page has its own structure called HTML.

There are some beautiful websites on the Internet, created by graphic designers using a “paint” applications, which totally fall apart if seen without CSS style templates. This happens because these graphic designers do not understand information architecture offered by HTML.

If you are here just because of my photographs you may find the text following this point too “technical” and it does not relate to photography directly.

Does it really matter? I know that many people use social networking sites such as WordPress, Flickr, Twitter, Facebook or MySpace. They enjoy the experience without any Internet knowledge. This only happens because the companies behind these websites have written thousands of lines of code to ensure the pages created by their users still conform to some standards.

The key distinction is the web sites presence on the Internet. If you are given an exact URL, you will have no problems navigating to these pages. However, if you are searching for new information or researching a subject you have to relay on search engines such as Google, Bing or Ask. And here is where a well written content underpinned by a well designed HTML layout will make a huge difference. When the search engines index Internet pages they relay on the content to be on subject and be formatted in according to standards.

This is why I have selected HTML 5 to create this WordPress theme for my photography blog. It allows me for a mixture of presentation elements, which make the site look “good” and semantic elements which give the content a meaningful structure. Looking at my layout there is clear distinction which elements are responsible for what information.

I am not sure how successful this design will be in terms of SEO but I am hoping it will certainly improve on theme I have used until recently.

If you are a WordPress theme designer or perhaps you are more interested in HTML 5 implementation in a simple blog I am attaching the basic layout of my page so you can explore it. Please note this is a layout only and it is not intended as a working page or theme. It simply shows the organisation of my content and usage of new HTML 5 tags.

To make this layout work for you in WordPress you would have to modify the WordPress loop and many standard plugins, which you may be using now. In my case I have heavily modified Pagenavi, WPG2, TwitThis, AddThis and Simple-Tags. My modifications are very specific to my website and at this stage are not in a shape, where they could be released as a new generic skin and plugins package. Unlike standard themes and plugins, which work with any WordPress installation the changes I made created strong dependencies.

So, here it is – a basic structure behind Digital Photo

<!DOCTYPE HTML>
<html>
  <head>
    ... standard head content ...
    ... JavaScript specific code to add HTML 5 tags to the DOM ...
  </head>
  <body> 

    <!-- page wrapper -->
    <div> 

      <!-- page header -->
      <header>
        <h1>Site Title</h1>
      </header>
      <!-- /page header -->

      <!-- site menu -->
      <nav>
        ul>
          <li>... page navigation by page name ...</li>
          <li>... search ...</li>
          <li>... syndication ...</li>
        </ul>
      </nav>
      <!-- /site menu -->

      <div>
        Advertisement
      </div> 

      <!--[if lt IE 7]>
      <div>
        Ask people to upgrade fron IE6!
      </div>
      <![endif]--> 

      <!-- content wrapper -->
      <div> 

        <!-- left content wrapper -->
        <div> 

          <!-- left content -->
          <div> 

          <!-- article loop -->
            <article>
              <h2>Article title</h2> 

              <!-- article content -->
              <div>
                <!-- photograph -->
                <div> <!-- WordPress requirement otherwise renders <p> tag -->
                  <figure>
                    photograph
                    <legend>Photograph legend</legend>
                  </figure>
                </div>
                <!-- /photograph -->

                <p>Article abstract</p> 

                <div>... plugin icon links ...</div>

                <!-- article metadata -->
                <div>
                  <!-- article tags -->
                  <ul>
                    <li> ... tags ...</li>
                  </ul>
                  <!-- /article tags -->
                </div>
                <!-- /article metadata -->
              </div>
              <!-- /article content -->

              <section>Advertisment</section> 

              </article>
            <!-- /article loop -->

          </div>
          <!-- /left content -->

        </div>
        <!-- /left content wrapper -->

        <!-- sidebar -->
        <aside> 

          <!-- widgets:1 -->
          <section>
            <ul>
              <li> ... widgets ...</li>
            </ul>
          </section>
          <!-- /widgets:1 -->

          <!-- widgets:2 -->
          <section>
            <ul>
              <li> ... widgets ...</li>
            </ul>
          </section>
          <!-- /widgets:2 -->

        </aside>
        <!-- /sidebar -->

      </div>
      <!-- /content wrapper -->

      <!-- page navigation -->
      <nav>
        <ul>
          <li> ... page navigation by page number ... </li>
        </ul>
      </nav>
      <!-- /page navigation -->

      <!-- footer -->
      <footer>
        <p>Copyright notice</p>
        <ul>
          <li> ... social badges ...</li>
        </ul>
      </footer>
      <!-- /footer -->

    </div>
    <!-- page wrapper -->

  </body>
</html>
  • That photo above looks like an X ray of an unusual body, which connects well with the ‘behind the scene’ body you post 🙂

  • That photo above looks like an X ray of an unusual body, which connects well with the ‘behind the scene’ body you post 🙂