Pages

Labels

Powered by Blogger.
Wednesday, August 29, 2012

IDs and class names


Meaningful elements provide an excellent foundation, but the list of available elements isn’t exhaustive. HTML 4 was created as a simple document markup language rather than an interface language. Because of this, dedicated elements for things such as content areas or navigation bars just don’t exist. You could create your own elements using XML, but for reasons too complicated to go into, it’s not very practical.

HTML 5 hopes to solve some of these problems by providing developers with a richer set of elements to work with. These include structural elements like header, nav, article, section, and footer as well as well as new UI features like data inputs and the menu element. In preparation for HTML 5, many developers have started adopting these as naming conventions for their ID and class names.


The next best thing is to take existing elements and give them extra meaning with the addition of an ID or a class name. This adds additional structure to your document and provides useful hooks for your styles. So you could take a simple list of links, and by giving it an ID of nav, create your own custom navigation element.

<ul id="nav">
<li><a href="/home/">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>

An ID is used to identify a specific element, such as the site navigation, and must be unique to that page. IDs are useful for identifying persistent structural elements such as the main navigation or content areas. They are also useful for identifying one-off elements—a particular link or form element, for example.

While a single ID name can only be applied to one element on a page, the same class name can be applied to any number of elements on a page. This makes classes much more powerful. Classes are useful for identifying types of content or similar items. For instance, you may have a page that contains multiple news stories.

<div id="story-id-1">
<h2>Salter Cane win Best British Newcomer award</h2>
<p>In a surprise turn of events, alt folk group, Salter Cane, won
Best British Newcomer and the Grammys this week…</p>
</div>



<div id="story-id-2">

<h2>Comic Sans: The Movie wins best documentary at the BAFTAs </h2>
<p>The story of this beloved typeface one the best documentary
category. Director Richard Rutter was reported to be speechless…</p>
</div>

Rather than giving each story a separate ID, you would give them all a class of news.

<div class="news">
<h2>Salter Cane win Best British Newcomer award</h2>
<p>In a surprise turn of events, alt folk group, Salter Cane, won
Best British Newcomer and the Grammys this week…</p>
</div>


<div class="news">

<h2>"Comic Sans: The Movie" wins best documentary at the BAFTAs </h2>
<p>The story of this beloved typeface one the best documentary
category. Director Richard Rutter was reported to be speechless…</p>
</div>

0 Comments: