HTML5 Semantic Elements

Question 1

Why are their new layout elements?

Answer 1

Indicate the role different parts of the layout play.

Assists with making content more usable for different devices

Question 2

How are header and footer elects to be used?

Answer 2

They can be used for main header and footer of a page

Also used for header and footer of a section or article

Question 3

How is the navigation tag to be used?

Answer 3

Use for primary navigation - not for sub navigation

Question 4

How is the article tag to be used

Answer 4

Used for marking up major content elements e.g. a blogpost, essay, article.

Content that standalone and could be syndicated

Question 5

How is the aside element to be used

Answer 5

If inside an article, it’s related content not essential to the article

If outside an article its content related to the entire page

Question 6

What is the section element

Answer 6

It groups related content together

It would include headeings

Question 7

What role does figure element have

Answer 7

Can be used to mark up any visual accompaniment to an article e.g. video, diagram

must include a caption

Question 8

What if someone is using an older browser that doesn’t recognise new html5 elements?

Answer 8

You need to specify a rule to set all elements as block level (Other wise they’ll be treated as incline

<code>
header, footer, article, section, aside {
display: block;
}
</code>

You can use html5Shiv to create elements using javascript write as a conditional comment