Before starting this part, you may like to take a look on part 1. We are going to discuss some more important changes in this post. As HTML5 has been taking the top place of tomorrow’s world, it has a lots of flexibility. So, it’s your turn to use the resource that you have in HTML5.

Section, Article and Aside tag

Section is used to separate two or more parts, to make a connection between a heading and it’s excerpt or content. Also, within a section you can use h1 elements without having to worry about whether a particular section is at top level, second level, third level and so on. Section can be nested. One thing you need to remember that, section should not be used for styling. So, use a parent wrapping element to style for a particular section.
[html]

[/html]

About article, many people thinks article is used only for blog posts. This is wrong. Article can be used for the content that are segmented. So, your main content can be wrapped with article tag. Even you can wrap your blog comments with article tag. You can use header tag within article tag.

[html]

[/html]

We have a generic idea that “aside tag is only used for a sidebar”. Well, this is true, but not true if you use the term ‘only’. Aside tag represents the part of the content that is not 100% applicable but still related to the content. So you can use aside tag within a content, just remember the aside tag should represent related content, not the applicable content. You know the use as sidebar. Let’s see different one.

[html]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae nisi metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vulputate tristique iaculis.

[/html]

Make a simple accordion with details tag

Many people thinks some things should be separated for javascript and html. We can build pretty attractive and sexy accordion with javascript. But for the same of simlicity, html5 introduces a very easy approach with details tag. Remember, all browsers don’t support all tml5 tags yet. Google chrome is the best browser to check html5 tags and attributes. So, you should really stick with chrome when you want to check your html5 outputs.

Within details tag, you need to use summary tag to show a part, e.g. question. Other elements will be hidden by default, we can consider it as answers.
[html]

• This is a question

  This is a long answer….

• This is a question

  This is a long answer….

[/html]
It will show only the questions with an arrow behind it. When you click on the arrow, then the rest of the corresponding content will be visible. This is very useful if you want to develop a FAQ quickly.

Now, what about changing the colors of the arrow. We can use a tricky css to change the colow of the arrow.
[html]

[/html]
If you want to keep open an item, just use open attribute in the details tag.
[html]

• This is a question

  This is a long answer….

• This is a question

  This is a long answer….

[/html]
The last item will be open by default. Also, remember details tag need to be used within list items. It should look like below:

Screen Shot 2013-11-30 at 8.20.37 PM

See Part 1 here