Game Development Reference
In-Depth Information
<p>Lorem Ipsum...</p>
</div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
While using the <div> tag for any purpose under the heavens was one way to get
the job done, you can see how this can quickly get out of hand, and turn the doc-
ument into something hard to understand without great inspection. Looking at this
type of code becomes especially troublesome when you see a long series of closing
<div > tags—how can you know what each closing tag is actually closing, since all
the tags have the same name? Worse yet, how can you know if you have just the
right number of closing tags?
Another major problem with designing HTML structures after the <div> paradigm
was that each tag was completely meaningless from a semantic point of view. In or-
der to make each <div> tag slightly more meaningful and self-describing, extra at-
tributes were added, normally in the form an an ID or a class. Again, this solution
only added to the problem, since larger, more complex documents required more
and more of these attributes, which one had to keep track of, thus increasing the
complexity of what should be a simple solution.
Thankfully, in HTML5 this problem is solved in a very elegant manner. Seeing that
a lot of documents used the <div> tags for the same purpose, namely to define
common sections such as the header, footer, navigation, and main content, new tags
were added to represent such common sections. With these new tags, you are now
able to visually scan a design structure, and very quickly understand the way inform-
ation is to be laid out. Furthermore, the need to create endless ID attributes in order
to distinguish each <div> tag is completely gone.
Using some of the new tags provided by HTML5, the same design concept from fig-
ure 1 can be represented as follows:
<header></header>
<section>
<article>
Search WWH ::




Custom Search