Semantic layout

by Ivan Gerasimenko

HTML

<p>Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look.</p>
<p>Here are some examples of the new semantic elements in HTML5:</p>
<ul>
    <li>address</li>
    <li>article</li>
    <li>audio</li>
    <li>aside</li>
    <li>code</li>
    <li>cite</li>
    <li>dd</li>
    <li>dl</li>
    <li>dd</li>
    <li>em</li>
    <li>figcaption</li>
    <li>figure</li>
    <li>footer</li>
    <li>header</li>
    <li>hgroup</li>
    <li>mark</li>
    <li>nav</li>
    <li>samp</li>
    <li>section</li>
    <li>time</li>
    <li>video</li>
</ul>
<dl>
    <dt>address</dt>
    <dd>Used to specify address of <code>article</code> tag</dd>
    <dt>article</dt>
    <dd>Independent, self-contained content.<br/>Internal structure: h1, p, p.</dd>
    <dt>aside</dt>
    <dd>For side-bars or inserts into original content. Related to the surrounding content.</dd>
    <dt>audio</dt>
    <dd></dd>
    <dt>code</dt>
    <dd>Piece of computer code</dd>
    <dt>cite</dt>
    <dd>Defines the title of a work (Not author name!). E.g.: *The Scream* by Edward Munch</dd>
    <dt>dd</dt>
    <dd>Description Description in Description List</dd>
    <dt>dl</dt>
    <dd>Description List</dd>
    <dt>dt</dt>
    <dd>Description Title in Description List</dd>
    <dt>em</dt>
    <dd></dd>
    <dt>figcaption</dt>
    <dd>First or last child of <code>figure</code> tag</dd>
    <dt>figure</dt>
    <dd>Container for image and it's caption</dd>
    <dt>footer</dt>
    <dd></dd>
    <dt>header</dt>
    <dd>Introductory content or set of navigation links</dd>
    <dt>hgroup</dt>
    <dd>Group of headers h1,h2... Not included in HTML5</dd>
    <dt>mark</dt>
    <dd>Used to highlight text (e.g. marker style)</dd>
    <dt>nav</dt>
    <dd>Defines a set of navigation links (<code>nav -> a</code> OR <code>nav -> ul -> li</code>)</dd>
    <dt>samp</dt>
    <dd>Sample output of a computer program</dd>
   ...

CSS

code {
    background-color: #eee;
    padding: 1px 5px 1px 5px;
}

JavaScript

/*
Advantages of semantic layout:

*/