CODEWITHSUNDEEP
htmltagsstructure
dotnetnoob
dotnetnoob

Reputation: 11330

How do I structure my web page with HTML5 elements?

I'm updating a website to use some HTML5 structural elements.

I've read lots of articles, but I'm still not 100% clear.

The question I have is regarding the content, rather than header or footer elements. Here is a typical example:

<div id="main-content" class="grid-8">
    <section>
        <h1 class="grey-heading">How It Works</h1>
        // some section content here  
    </section>
</div>
<div id="sidebar" class="grid-4">
    <aside>
        // some related stuff here
     </aside>
</div>

As you can see, its a simple main content/sidebar setup. The question is, am I right in keeping the structural divs (because thats all they do), or is it ok to add the structural stuff in with the content? In other words, remove the divs and add classes/id's to the sections and asides?

Thanks.

Upvotes: 2

Views: 1924

Answers (4)

derek_duncan
derek_duncan

Reputation: 1377

HTML5 elements that are assigned classes/id are not fully supported across browsers. For example, if aside had a class and you tried to add css to that class, it would not render. If you use HTML5 Shiv though, it should fix this issue and then your code will be cleaner and just awesome!

Upvotes: 1

Joan Caron
Joan Caron

Reputation: 1970

http://html5doctor.com/element-index

here you can read useful resources

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

and

Section represents a generic document or application section. In this context, a section is a thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site's home page could be split into sections for an introduction, news items, contact information.

Upvotes: 2

Daniel Imms
Daniel Imms

Reputation: 50189

You can replace them if your styles allow, they provide additional semantic meaning to the browser which is particularly useful to assistive technologies and web crawlers. Your markup is perfectly fine but feel free to remove the <div>s if you don't need them for styling. Also you may want to use <nav> on your sidebar if it's for navigation.

I'd like to emphasise that it's up to you whether you keep the <div>s or not, if you provide the HTML5 semantic tags then you are losing no meaning by having 20 inner <div>s for your layout if you want them for styling or organisation. The HTML5 semantic tags are just like <div>s apart from the fact they carry the additional semantic meaning.

Here is an example HTML5 layout:

<header></header>
<nav></nav>
<section>
   <header></header>
   <article></article>
   <article></article>
   <footer></footer>
</section>
<aside></aside>
<footer></footer>

Also make sure you use a library like modernizr as a polyfill for older browsers if you're using the HTML5 tags.

Reference

Upvotes: 5

Nathan White
Nathan White

Reputation: 1080

Your wrappers should be replaced with the new tags, like Kolink said.

For example, your class="main-wrapper" could be replaced with the <main> tag. Likewise, why are you wrapping your sidebar when <aside> would be fully customisable?

<main>
    <section>
        <p>content</p>
    </section>
<main>

<aside>
    <p>content</p>
</aside>

All of these can have specific CSS layout ruling for them, making your markup 'readable' and easy to understand. Obviously, you may need classes, but this may help your workload by using new and pre-existing tags instead of arbitrary <div>s

Upvotes: 2

Related Questions