2
\$\begingroup\$

I was asking if the following code has a correct semantically markup, or can it better, and so yes, how:

    <!-- Start container website -->
    <header id="header">
        <div class="container_12">
            <div class="grid_12">
                <a href="#" id="logo"><img src="images/logo.png" alt="Logo"></a>

                <a href="#" id="nav-icon"><img src="images/list-icon.png" alt="Responsive list icon"></a>
                <nav id="primary-navwrapper" class="inactive">
                    <ul id="listnav">
                        <li><a href="index.html" id="current">Home</a></li>
                        <li><a href="pages/portfolio.html">Portfolio</a></li>
                        <li><a href="pages/blog.html">Blog</a></li>
                        <li><a href="pages/service.html">Service</a></li>
                        <li><a href="pages/about.html">About</a></li>
                        <li><a href="pages/contact.php">Contact</a></li>
                    </ul><!-- End ul#listnav -->
                </nav><!-- End nav#primary-navwrapper -->

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

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

    </header><!-- End header#header -->

<div id="container">
    <section id="hero">
        <div class="flexslider">
            <ul class="slides">
                <li>
                    <img src="images/flexslider/slide-1.jpg" alt="" />
                    <div class="flex-caption">
                        <div class="container_12">
                            <header class="grid_12">
                                <h1>Fris. Responsive. Retina Ready.</h1>
                                <p>
                                    Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet.  
                                </p>
                                <a href="#" class="button tertiaire custom">Read the blog &rarr;</a>
                            </header><!-- End header.grid_12 flex-caption -->

                        <div class="clear"></div><!-- End div.clear -->
                        </div><!-- End div.container_12 -->
                    </div><!-- End div.flex-caption -->
                </li>

                <li>
                    <img src="images/flexslider/slide-5.jpg" alt="" />
                </li>
            </ul><!-- End ul.slides -->
        </div><!-- End div.flexslider -->

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

    <section id="introduce">
        <div class="container_12">
            <ul id="featured-list">
                <li class="grid_4 centered">
                    <img src="images/branding.png" alt="Branding & Logo">

                    <h3>Branding & Logo</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque. Donec tristique bibendum vulputate. 
                        <br>
                        <br>
                        Vivamus aliquam semper sapien, quis aliquet purus rutrum id. 
                    </p>
                </li><!-- End li.grid_4 -->

                <li class="grid_4 centered">
                    <img src="images/webdesign.png" alt="Web Design">

                    <h3>Web Design</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque. Donec tristique bibendum vulputate. 
                        <br>
                        <br>
                        Vivamus aliquam semper sapien, quis aliquet purus rutrum id. 
                    </p>
                </li><!-- End li.grid_4 -->

                <li class="grid_4 centered">
                    <img src="images/webdevelopment.png" alt="Web Development">

                    <h3>Web Development</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros. Aliquam in eros mauris, sed adipiscing neque. Donec tristique bibendum vulputate. 
                        <br>
                        <br>
                        Vivamus aliquam semper sapien, quis aliquet purus rutrum id. 
                    </p>
                </li><!-- End li.grid_4 -->
            </ul><!-- End ul#featured-list -->

        <div class="grid_12">
            <div id="flick-through">
                <div id="placer"><img src="images/flick/flick.jpg" alt=""></div>
                <ul id="image-loop">
                    <li><img src="images/flick/image-1.jpg" alt=""></li>
                    <li><img src="images/flick/image-2.jpg" alt=""></li>
                    <li><img src="images/flick/image-3.jpg" alt=""></li>
                    <li><img src="images/flick/image-4.jpg" alt=""></li>
                    <li><img src="images/flick/image-5.jpg" alt=""></li>
                    <li><img src="images/flick/image-6.jpg" alt=""></li>
                    <li><img src="images/flick/image-7.jpg" alt=""></li>
                    <li><img src="images/flick/image-8.jpg" alt=""></li>
                </ul><!-- End #image-loop -->
            </div><!-- End div#flick-through -->

            <img src="images/large-cinema-display.png" alt="Cinema Display" id="cinema-display">
        </div><!-- End div.grid_12 -->

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

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

    <hr>

    <section id="portfolio-entry" class="alt">
        <div class="container_12">
            <header class="centered">
                <h1>Latest work</h1>
                <p>
                    Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. 
                    <br>
                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
                </p>
            </header><!-- End header.centered -->

            <ul class="entrybox">
                <li class="grid_4 portfolio-post">
                    <header class="post-thumb">
                        <a href="#"><img src="images/portfolio-thumb.png" alt="Post thumbnail"></a>
                    </header><!-- End header.post-thumb -->

                    <aside>
                        <h3><a href="#" title="">Title Project</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </aside><!-- End aside -->

                </li><!-- End li.grid_4 portfolio-post -->

                <li class="grid_4 portfolio-post">
                    <header class="post-thumb">
                        <a href="#"><img src="images/portfolio-thumb.png" alt="Post thumbnail"></a>
                    </header><!-- End header.post-thumb -->

                    <aside>
                        <h3><a href="#" title="">Title Project</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </aside><!-- End aside -->

                </li><!-- End li.grid_4 portfolio-post -->

                <li class="grid_4 portfolio-post">
                    <header class="post-thumb">
                        <a href="#"><img src="images/portfolio-thumb.png" alt="Post thumbnail"></a>
                    </header><!-- End header.post-thumb -->

                    <aside>
                        <h3><a href="#" title="">Title Project</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </aside><!-- End aside -->

                </li><!-- End li.grid_4 portfolio-post -->

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

            <div class="grid_12">
                <a href="#" class="button primary">View the Portfolio &rarr;</a>
            </div><!-- End div.grid_12 -->

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

    </section><!-- End section#portfolio-entry .alt -->

    <hr>

    <section id="blog-entry">
        <div class="container_12">
            <header class="centered">
                <h1>Recent blog posts</h1>
                <p>
                    Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. 
                    <br>
                    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
                </p>
            </header><!-- End header.centered -->

            <ul class="entrybox">
                <li class="grid_12 blog-post">
                    <header class="post-thumb">
                        <a href="#"><img src="images/blog-thumb.png" alt="Post thumbnail"></a>
                    </header><!-- End header.post-thumb -->

                    <aside class="entry-post"> 
                        <span class="capitalize">Entry</span>

                        <h1 class="entry-title">
                            <a href="#" title="">Fris. Responsive. Retina Ready.</a>
                        </h1><!-- End h2 .entry-title -->

                        <ul class="entry-meta">                   
                            <li class="author">
                                By <a href="#">Casper Biemans</a>
                            </li>
                            <li class="published">
                                On <a href="#">September 1, 2012</a>
                            </li>
                            <li class="entry-categories">
                                In <a href="#">Digital Art</a>
                            </li>
                            <li class="comment-count">
                                With <a href="#">22 Comments</a>
                            </li>
                            <li class="permalink">
                                <img src="images/permalink_icon.png" alt="Permalink post"> <a href="#">Permalink</a>
                            </li>
                        </ul><!-- End ul.entry-meta -->
                    </aside><!-- End aside.entry-post -->

                </li><!-- End li.grid_12 blog-post -->

                <li class="grid_12 blog-post">
                    <header class="post-thumb">
                        <a href="#"><img src="images/blog-thumb.png" alt="Post thumbnail"></a>
                    </header><!-- End header.post-thumb -->

                    <aside class="entry-post"> 
                        <span class="capitalize">Entry</span>

                        <h1 class="entry-title">
                            <a href="#" title="">Fris. Responsive. Retina Ready.</a>
                        </h1><!-- End h2 .entry-title -->

                        <ul class="entry-meta">                   
                            <li class="author">
                                By <a href="#">Casper Biemans</a>
                            </li>
                            <li class="published">
                                On <a href="#">September 1, 2012</a>
                            </li>
                            <li class="entry-categories">
                                In <a href="#">Digital Art</a>
                            </li>
                            <li class="comment-count">
                                With <a href="#">22 Comments</a>
                            </li>
                            <li class="permalink">
                                <img src="images/permalink_icon.png" alt="Permalink post"> <a href="#">Permalink</a>
                            </li>
                        </ul><!-- End ul.entry-meta -->
                    </aside><!-- End aside.entry-post -->

                </li><!-- End li.grid_12 blog-post -->
            </ul><!-- End ul.entrybox -->

            <div class="grid_12">
                <a href="#" class="button primary">View the Blog &rarr;</a>
            </div><!-- End div.grid_12 -->

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

    </section><!-- End section#blog-entry -->

    <section id="twitter" class="alt">
        <div class="container_12">
            <div class="grid_12 centered">
                <img src="images/twitter.png" alt="Tweet birdie">
                <article id="tweet"></article>
                <p>You should follow us on <a href="#">Twitter</a> for our latest updates.</p>
            </div><!-- End div.grid_12 centered -->

        <div class="clear"></div><!-- End div.clear -->
        </div><!-- End div.container_12 -->
    </section><!-- End section#twitter -->

    <hr>

    <section id="hire-me">
        <div class="container_12">
            <div class="grid_8">
                <h3>Get in touch</h3>
            </div><!-- End div.grid_8 -->

            <div class="grid_4 button-group">
                <a href="#" class="button tertiaire grid_2">About</a>
                <a href="#" class="button tertiaire custom grid_2">Contact</a>
            </div><!-- End div.grid_4 -->

        <div class="clear"></div><!-- End div.clear -->
        </div><!-- End div.container_12 -->
    </section><!-- End section#hire-me -->

</div><!-- End div#container -->
\$\endgroup\$
3
  • \$\begingroup\$ Your HTML is not valid. You should validate it and correct the errors first (e.g. your div with the ID image-loop contains li elements, which is not allowed). \$\endgroup\$
    – unor
    Commented Jun 22, 2013 at 14:04
  • \$\begingroup\$ @unor thank you for your feedback. Your right. I have edit the code. \$\endgroup\$
    – Casper
    Commented Jun 22, 2013 at 15:19
  • \$\begingroup\$ When you are pasting so much code, why not the complete document? It doesn't matter if the markup is correct, if the surrounding document isn't. \$\endgroup\$
    – Guffa
    Commented Jun 23, 2013 at 10:00

1 Answer 1

Reset to default
1
\$\begingroup\$

First of all: You have a lot of meaningless div elements nested in eachother. I'm sure you can remove most of them and just add those classes to their parent or child element.

Then some semantical tips. Please note that semantic is somewhat an opinion, so I'm just posting my thoughts:

  • Why do you have anchor elements around the images in the header? Anchors mean links to places on the docs, not just links to #.
  • an element for clearing is codesmell imo. I'd recommend to use pseudo-elements (like #header::after)
  • The header element in .flex-caption is not correct. There is no sectioning-element before it.
  • Use figure and figcaption for the .flexsider slides

  • Put the list items in #featured-list in an article element. And then use h1 for the headline, to follow the new document outline:

    <div id=introduce>
    <ul id=featured-list>
        <li>
            <article>
                <header>
                    <img ...>
                    <h1>...</h1>
                </header>
                ...
            </article>
        </li>
    </ul>
</div>
  • #portfolio-entry is an article with multiple sections in a list.
  • aside is incorrect used. The content in it is the main content for that portfolio item
  • #blog-entry is also an article and the previous 2 comments are related to this one too
  • article#tweet is empty and should be removed
  • #hire-me is an article too
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.