New Section Tags

HTML 5 introduces many new elements that partition webpage content into sections. These partitions should help search engines and other assistive technologies to better process the page. The idea of sections is cool and it is a great relief to the UI designers to better organised their code. Block levels elements like header, section, footer & nav have been added to maximise the production of web application developers. The beauty of sections can be well understood from the above new tags that have been included. Like we have now nav for structuring of navigation links and header for the header elements. These elements are similar to div or span tags except they are having some meaning and context in which they are used.

<h3 id="blog-title">My Blog Name</h3>
<p id="blog-description">Hello World!</p>
In the same way, you can have
<nav></nav>
<ul class="nav">
<li>Home</li>
</ul>


WYSIWYG Signature

Documents created with WYSIWYG editors should include a signature in the head of the document, so that the browser can know the generator and will render the page accordingly.

<meta name="generator" content="Sample Editor 1.0 (WYSIWYG editor)" />


New Block level Elements

aside element

The aside element represents a note, a tip, a sidebar, a pullquote, a parenthetical remark, or something that’s just outside the main flow of the narrative.

<aside>
<h3>Aside Representation</h3>
This is the representation of aside element.
</aside>


dialog element

The dialog element represents conversation. It contains dt elements which represent the speaker and dd elements which represents the speakers quotes. This gives reasonable display even in legacy browsers.

<dialog>
<dt> Costello
</dt>
<dd> Look, you gotta first baseman?
</dd>
<dt> Abbott
</dt>
<dd> Certainly.
</dd>
<dt> Costello
</dt>
<dd> Who's playing first?
</dd>
<dt> Abbott
</dt>
<dd> That's right.
</dd>
<dt> Costello
</dt>
<dd> When you pay off the first baseman every month, who gets the money?
</dd>
<dt> Abbott
</dt>
<dd> Every dollar of it.
</dd>
</dialog>


figure element

figure element is a cool addition to HTML 5. This is a block level element that combines image and its caption. Until this version, HTML was lacking the feature to add captions to the images. The figure element with a child legend element can be used to caption images. For example:

<figure>
<img src="kashit.jpg" alt="Photo: J. Smith" />Credit: Kashit, 2007
</figure>


New Inline Semantic Elements

mark element

As the name suggests, the mark element <m> is meant for marking the text or highlighting the text. As you will be aware of google’s searched keyword highlighting on the pages. This will be used for highlighting the searched keywords inside a page.
This is the test for <m>marked</m> text.

time element

The time element represents time of a specific moment such as 20 July, 2008, 5:30 PM.
This is the example of <time>5:35 PM, July 25, 2007</time>
This is a very important update / feature as it will help browsers to recognize the times very easily. It will also help in better search engine optimization and calendar functions.

progress element

This is similar to the progress bar that is present in today’s GUI showing progress of a particular process or activity. The progress element is very useful in showing the download or upload process with the aid of some scripting language. Its usage is like this :
Downloaded:<progress value="1534602" max="4603807"></progress>
It has value and max as its attributes which represent the current state of process and the total amount of process to be completed respectively.

Enhancements to input element

input element has received a good response from W3C. New types have been added to input element for better differntiation of input text. The new types are :
datetime, datetime-local, date, month, week, time, number, range, email, url
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

datagrid element

According to W3C specifications for HTML 5, datagrid represents an interactive representation of a tree list or tabular data. It’s intended for trees, lists, and tables that can be updated by both the user and scripts. By contrast, traditional tables are mostly intended for static data.
A datagrid gets its initial data from its contents: a table, select, or other group of HTML elements.

<datagrid>
<table><tbody>
<tr>
<td>Jones</td>
<td>Allison</td>
<td>A-</td>
<td>B+</td>
<td>A</td>
</tr>
<tr>
<td>Smith</td>
<td>Johnny</td>
<td>A</td>
<td>C+</td>
<td>A</td>
</tr>
<tr>
<td>Willis</td>
<td>Sydney</td>
<td>C-</td>
<td>D</td>
<td>F</td>
</tr>
<tr>
<td>Wilson</td>
<td>Frank</td>
<td>B-</td>
<td>B+</td>
<td>A</td>
</tr>
</tbody></table>
</datagrid>

What distinguishes this from a regular table is that the user can select rows, columns, and cells; collapse rows, columns, and cells; edit cells; delete rows, columns, and cells; sort the grid; and otherwise interact with the data directly in the browser on the client. The JavaScript code monitors the updates.

Embedded Media

HTML 5 will contain two new elements for media. New audio & video elements will make a uniform way of embedding media inside webpages. As today different vendors are using different media types on their sites (like Microsoft uses Windows Media, Apple uses Quicktime, Adobe uses Flash), thus resulting in diversity in the embedding of media. These elements may contain a way for better searching and accessible to blind or deaf users. Their usage is :

<audio autoplay="autoplay">

This is the podcast on DrupalWelcome to Drupal podcast...
</audio>

Similarly for video the usage will be same with support of deaf & blind people.

<video>
This is the descrption of movie...
</video>

Whether any one format and codec will be preferred is still under debate. Probably Ogg Theora support at least will be strongly recommended, if not required.

Conclusion

HTML 5 is part of the future of the Web and is a reaction to the slow progress made by W3C in delivering replacement to HTML 4. Its new elements enable clearer, simpler markup that makes pages more obvious. Div and span still have their places, but those places are much more restricted than they used to be.
Although not all browsers will support these new elements at first, the same has been true for most elements introduced after HTML was first invented: img, table, object, and many more. Support will come with time. In the meantime, HTML’s must-ignore behavior for unrecognized elements means that users with legacy browsers will still be able to read HTML 5 pages. They can do so today. Users with more modern browsers will get an enhanced experience, but no one will be left out. HTML 5 restores some of the excitement of the early days when Netscape, Microsoft, and others were introducing new elements every other week. At the same time, it takes a much more careful approach to defining these elements so that everyone can use them interoperably. The future looks bright.

Further reading

Latest version of W3c draft for HTML 5
Ogg – The next generation open video format
Conversation with HTML 5 team

Use a browser reset

One of the most common mistakes that designers fall victim to when it comes to CSS is not resetting their browser defaults. This leads to inconsistencies in the appearance of your desing across different browsers. So before doing anything else, when coding a website, you should reset the styling. You can use a simple reset with the universal selector like this

* { margin:0;padding:0;}

But using the universal selector is sometimes a bad idea as it is very heavy on the rendering agent to apply rules to every single element in the document.

One of the most popular browser resets is of CSS Reset by Eric Meyer. As Meyer says, “the styles should list all the actual elements to be reset and exactly how they should be reset.”

Another Browser Reset Library is Yahoo! UI Library: Reset CSS. It removes and neutralizes the default styling of html elements providing a foundation upon which you can explicity declare your extentions.

Another very useful CSS reset is CSS Global Styles Reset by Kyle Neath. A simple CSS Reset with some additional classes for better debugging.

Size text without using pixels

Web Designing best principles is to enable a site to withstand a user enlarging text and setting absolute text sizes is not a good practice. Instead we can size our text relative to the browser. Standard browser font size is 1em which is equal to 16px. A little web designer trick works around the issue and resets the font sizes for the entire site so that 1em is equal to 10 px.

body { font-size:62.5%; }

Simply throwing the font-size to 62.5% for the entire site does the trick. Now you can use em instead of pixels.

Organise your CSS Code

Organising your CSS code helps you with future maintainability of your site. You should make independent style sheets for different purposes and then linke them in your master stylesheet. Like you should maintain your typographic styles and structure selectors independently in different stylesheets and then link them together in your master stylesheet.

@import url("reset.css")
@import url("structure.css")
@import url("typography.css")


Make your code easy to read

While scanning through CSS, I came across a very nicely separated CSS coded probably by Rundle. It looked something like this:

h1 {}
h1#title { font-size:2em; }

div {}
div#error { color:#eee; }

This technique is very useful if you’re sharing code or working on a large site where you are using the same div tag in multiple places.

Document your code

This might be common sense to some of you but sometimes I look at CSS and it’s not documented at all. It is always a good practice to document your code or atleast provide a separate heading for a part of code as it makes working with code months or years later easier.

/**********************************/
/* Primary Navigation - Top Links */
/*********************************/
#nav {
border:1px solid #eee;
margin:10px auto;
padding:5px;
}

/***************/
/* Search Box */
/**************/
#search-box {
position:absolute;
top:30px;
left:30px;
}

Keep containers to minimum

Avoid using too many Divs as it makes your document too much complex and tougher to handle. Avoid block level tags as much as possible and consider all options before using DIVs. New Developers to CSS often mistake DIVs for table cells and maximise their use to achieve the layout. Some people even style their headings with DIVs. Try using small tags or inline tags for goodness sake.

Use Shorthand CSS

Work smarter, not harder with CSS. You can wrap multiple properties within a single declaration by using special syntax. Avoid unnecessary properties as it directly effects your troubleshooting efforts.

Like instead of writing

margin-left:2px;
margin-top:3px;
margin-right:4px;
margin-bottom:5px;


You can write

margin:3px 4px 5px 2px;

Similarly we can use shorthand for border, background, padding, font and other properties.

Specify Units

Always specify units for the Property values unless it is 0. This a very common mistake among CSS beginners. In HTML you can get away with this but in CSS all length values should have a unit. While there’s no wrong in specifying a unit for 0 value, but for me it’s only a wastage of space.

padding:2px 3px 0 10px;

Working with Colors

In hexadecimal notation, a color is represented by three pairs of hexadecimal digits. You can write a color more efficiently by omitting every second digit like this.

#ffffff can be written as #fff

Similarly #ff3366 can be written as #f36

Another color related tip is that you can specify web safe colors by using only digits that are multiples of 3 for the red, green and blue.

Don’t redeclare inherited values

The values of many properties are inherited by any descendants of the element that you specify the property for. So there is no fun of redeclaring those properties again and again. Some of the commonly inherited properties are of font and color.

div { font-size:2em;color:#ef321d; }
div.hello { font-size:2em;color:#ef23ef; }


can be written as

div { font-size:2em;color:#ef321d; }
div.hello { color:#ef23ef; }


Multiple Classes

You can assign multiple classes to a single HTML element. This allows you to write several rules that define different properties and only apply them as needed. The multiple classes (assuming .head & .head-about) can be applied to a single element like this.

<div class="head head-about">This is test for multiple classes</div>


Minimise CSS Hacks

Hacks are the tricks, usually non-standard, to overcome some browser limitations. Don’t use hacks unless it is a known and documented bug as it makes the future maintenance of the code very difficult in absence of proper documentation and standard coding design.

Define pseudo classes for links in the LoVe/HAte order

Link, Visited, Hover & Active, as the above represents. You should define your pseudo classes in this order

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }


Define generic font families

“When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. [Getting into good coding habits]

p { font-family: Arial, Verdana, Helvetica, sans-serif; }


1 ID per page, many classes per page

“Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]

Horizontally Centering an element

It is very easy to center an element horizontally using HTML with the align attribute, but there is no such property in the CSS. Instead we use margin to center the element like this

margin:0 auto;

Here ‘auto’ automatically divides the space left on the sides of element into half and assigns each half on each side of the element

Conditional Comments of IE

IE versions less than 7 adhere to CSS standards very less and often create a nasty CSS bug or issue to deal with. You can come around the issue by creating a different style to address the issue and then include the style for only IE using IE conditional comments like this.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Next Article in Series CSS Best Practices – II