Search code examples
htmlmarkup

Right markup for HTML5 website?

I developing my new website in HTML5/CSS3. When converting my PSD files to HTML5 / CSS3 I wonder what the correct markup for an HTML5 website.

Below is a simple wireframe of my website, as you can see I want the website to make full width, at least in the different areas.

This is the layout:

As you can see here, I want to have some different section on my homepage for the information.

As you can see here, I want to have some different section on my homepage for the information

And I came up with this markup:

Because when I copy all the list no longer be seen, I have the content, text and images in this code omitted. Where an image or a text would face with a comment below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>

<!-- Meta Tags -->

<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<link href="css/960.css" rel="stylesheet">

<!-- Icons -->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-retina.png">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>

<!-- Start container website -->
<header id="header">
    <div class="container_12">
            <div class="grid_12">

 <!-- // Here will be position the logo with a link \\ -->

                <nav id="primary-navwrapper">
                 <!-- // Here will be an unordered list with menu items \\ -->

            </nav>

        </div><!-- End .grid_12 -->

    <div class="clear"></div><!-- End .clear -->
    </div><!-- End .container_12 -->
</header><!-- End header -->

<section id="hero">
    <div class="sliderbox">

         <!-- // An list of image for a slider \\ -->

    </div><!-- End .sliderbox -->

</section><!-- End section#hero -->

<section id="introduce">
    <article class="container_12">

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->

          <!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->


    </article><!-- End article.container_12 -->


    <article class="container_12">
        <div class="grid_12">

          <!-- // A image tag \\ -->

        </div><!-- End .grid_12 -->

    </article><!-- End article.container_12 -->

</section><!-- End section#introduce -->

<hr class="dark-grey"> <!-- Divider for the section -->

<section id="work" class="alt">
    <article class="container_12">

           <!-- // a h-tag and some text inside a paragraph + 3 column portfolio items \\ -->

    </article><!-- End article.container_12 -->

</section><!-- End section#work.alt -->

<hr> <!-- Divider for the section -->

<section id="blog" class="even">
    <article class="container_12">
        <aside class="grid_4">

            <!-- Sidebar with some text -->

        </aside><!-- End aside.grid_4 -->

        <ul class="recentbox">

             <!-- List of 2 latest blog items -->

        </ul><!-- End ul.recentbox -->

    </article><!-- End article.container_12 -->

    <article class="container_12">
        <div class="grid_12">

            <!-- Contact banner -->

        </div><!-- End .grid_12 -->
    </article><!-- End article.container_12 -->

</section><!-- End section#blog.even -->

<footer id="footer">

     <!-- Footer markup here -->

</footer><!-- End footer -->


</body>
</html>

Some extra information. As you can see I start with the <header> -tag for the header, after that I set some areas up with the <section> -tag inside that I will at the <article> -tag with a class of <article class="container_12"> to be able to use the grid 960. Inside that <article> -tag I will be set text, image etc.

Good to know is that I tag the article in some sections often use, I do this because for several articles in a specific section to distinguish. With Articles do have a connection with each other but are different in one article to post.

I love to hear your opinions regarding my markup so far and how you would tackle.

Thank you.

Solution

  • You're mark up is totally acceptable. I would suggest maybe not going so heavy with the id tags, but instead going for a more OO approach to come of your CSS. For information go here: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

    Otherwise your mark up is fine.