10
\$\begingroup\$

This is my first website. I would like to make sure that:

  1. I am using HTML5 sectioning elements correctly.
  2. I didn't forgot anything important for HTML5 compatibility like html5shiv, for example.

Any other advice?

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>DEdesigns</title>
    <script scr="html5shiv.js"></script>    <!-- allows html 5 styling -->
    <link rel="stylesheet" href="style.css">     
</head>

<body>

  <div id="container">
    <header>
       <h1>DEdesigns</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header> <!-- end header -->

<article id="about-me">
   <header>
        <h2>About Me</h2>
    </header>
   <section>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
   </section>
   <aside>
        <figure>
            <img src="#" alt="#" width="#" height="#">
        </figure>
   </aside>
</article> <!-- end #about-me -->

<div id="gallery">
    <header>
        <h2>My Work</h2>
    </header>
    <div id="gallery-conatiner">
        <figure>
            <img src="#" alt="#" width="#" height="#">
        </figure>
        <section>
            <aside>
                <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p>
            </aside>
        </section>
        <!--  ends first row -->
         <section>
            <aside>
                <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p>
            </aside>
        </section>
         <figure>
            <img src="#" alt="#" width="#" height="#">
        </figure>
        <!-- ends second row -->
         <figure>
            <img src="#" alt="#" width="#" height="#">
        </figure>
            <aside>
                <p>rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500</p>
            </aside>
        </section>
        <!-- ends third row -->
    </div>
  </div> <!-- end #gallery -->

  <article id="services">
    <header>
        <h2>Services</h2>
    </header>
    <section>
        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
    </section>
   </article> <!-- end #services -->

   <article id="contact-me">
    <header>
        <h2>Contact Me</h2>
    </header>
    <p>some contact me stuff goes here</p>
   </article> <!-- end #contact-me -->

  <footer>
    <p>This is my fotter</p>
  </footer>    
</div> <!-- end #container -->


   </body>
</html>
\$\endgroup\$
  • \$\begingroup\$ Would you mind editing to post your style.css code as well? This will make the review more useful. Thank you! \$\endgroup\$ – Phrancis Dec 4 '14 at 17:46
  • 1
    \$\begingroup\$ I want to make sure my markup is solid first beofore I move to my CSS. What do you think, am i forgetting anything? \$\endgroup\$ – DEdesigns57 Dec 4 '14 at 17:51
4
\$\begingroup\$

About your use of sections

The body sectioning root is fine: it has a header containing the site-wide heading (h1) and the site-wite navigation (nav) (good!), a footer, and several sections representing the document’s main content. If you want, you could use the main element as a container for the section(s) that represent the main content.

Your first section, the article (#about-me), contains a section and an aside. Without knowing what content these have, it can’t be said if it’s correct or not. To make sure:

  • You should only use such a sub-section if you are dividing your content into, well, sections, typically (but not necessarily) introduced by headings. If the section contains the actual "About me" content, then it’s wrong -- you should simply omit it.

  • Only use the aside for the figure if the figure content is not directly related to the parent article. If, for example, you’d show your portrait in this figure, you should not use aside -- simply omit it.

The next section is created implicitly by the h2 ("My Work"). You should make it explicit, otherwise the following sections, which should be sub-sections, are on the same hierarchy level as "My Work". So simply use section (or article, if the content matches its definition) instead of div.

The (now) third section, article (#services) contains a sub-section where it’s not clear what its purpose is. If it, same as before, contains the actual content, omit this section.

The last section, article (#contact-me") seems to be fine.

So removing anything not related to sections, the document would look like:

<body>

  <h1>DEdesigns</h1>

  <nav></nav>

  <article id="about-me">
    <h2>About Me</h2>
  </article>

  <article id="gallery">
    <h2>My Work</h2>
    <!-- snip, see below -->
  </article>

  <article id="services">
    <h2>Services</h2>
  </article>

  <article id="contact-me">
    <h2>Contact Me</h2>
  </article>

</body>

(Personally, I would use section instead of article for the four top-level sections "About Me", "My Work", "Services", and "Contact Me". I wouldn’t say article is necessarily wrong here, as it would also depend on the actual content, but these are not the best candidates for article.)

Looks fine, except for the content of the gallery:

  • (The last section is missing an opening <section> tag.)

  • Unless you have content not included in the code, it doesn’t make sense to have a section whose only child is an aside. Either use aside (if the content matches its definition), or section. But, depending on your content, you might not need any sub-sections at all here.

  • If it’s some kind of portfolio, you could use article for each entry.


Always check your document outline, for example with the online tool HTML5 Outliner.

\$\endgroup\$
5
\$\begingroup\$

Your formatting is a little off, indentation is very important when reading any code.

I fixed the indentation and I also added some new lines in some of your paragraph tags. they are formatted by the browser pretty nicely so you can added new lines in there to make them more readable with out side scrolling and they will still show up the way you intended.

I also took out all your empty lines, because it is formatted nicely and is easily readable, blank lines make it look messy to me.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>DEdesigns</title>
        <script scr="html5shiv.js"></script>    <!-- allows html 5 styling -->
        <link rel="stylesheet" href="style.css">     
    </head>
    <body>
        <div id="container">
            <header>
                <h1>DEdesigns</h1>
                <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                </nav>
            </header> <!-- end header -->
            <article id="about-me">
            <header>
                <h2>About Me</h2>
            </header>
            <section>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    It has survived not only five centuries, but also the leap into electronic typesetting, 
                    remaining essentially unchanged
                </p>
            </section>
            <aside>
                <figure>
                    <img src="#" alt="#" width="#" height="#">
                </figure>
            </aside>
            </article> <!-- end #about-me -->
            <div id="gallery">
                <header>
                    <h2>My Work</h2>
                </header>
                <div id="gallery-conatiner">
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                    <section>
                        <aside>
                            <p>
                                rem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                            </p>
                        </aside>
                    </section>
                    <!--  ends first row -->
                    <section>
                        <aside>
                            <p>
                                rem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                            </p>
                        </aside>
                    </section>
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                    <!-- ends second row -->
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                        <aside>
                            <p>
                                rem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                            </p>
                        </aside>
                    </section>
                    <!-- ends third row -->
                </div>
            </div> <!-- end #gallery -->
            <article id="services">
                <header>
                    <h2>Services</h2>
                </header>
                <section>
                    <ol>
                        <li>one</li>
                        <li>two</li>
                        <li>three</li>
                    </ol>
                </section>
            </article> <!-- end #services -->
            <article id="contact-me">
                <header>
                    <h2>Contact Me</h2>
                </header>
                <p>some contact me stuff goes here</p>
            </article> <!-- end #contact-me -->
            <footer>
                <p>This is my footer</p>
            </footer>    
        </div> <!-- end #container -->
    </body>
</html>
\$\endgroup\$
5
\$\begingroup\$

Head section

I think you would benefit, SEO-wise, to have additional meta information about your site For instance, for mine I use something like this:

<!DOCTYPE html>
<html class="" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="DESCRIBE YOUR SIDE WITH KEYWORDS HERE">
    <meta name="author" content="github.com/ColonelThirtyTwo">
    <link rel="icon" href="LINK TO SOME ICON">

    <title>DEdesigns</title>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

Search engines use meta information to find and display your pages. There are many articles on the topic, this one seems pretty thorough.

Content

The way your content is layered looks good. Nothing stands out that I would change.


Edit!

It was commented that...

Updating the year "automagically" is not how copyright notices are supposed to work. The year displayed should be the year of first publication of the work. If the notice is covering multiple works published over multiple years, you'd have multiple years (or a range of years) listed in the notice.

So doing the below is not really a good idea. Leaving it for historical purposes.


Footer

I've written this handy little piece of Javascript for footers.

<div class="copyright">
          &copy; Copyright <script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>, DEdesigns.
</div>

Output:

Copyright © 2014, DEdesigns.

It will update the year automagically when the new year comes around.

\$\endgroup\$
  • 3
    \$\begingroup\$ Updating the year "automagically" is not how copyright notices are supposed to work. The year displayed should be the year of first publication of the work. If the notice is covering multiple works published over multiple years, you'd have multiple years (or a range of years) listed in the notice. \$\endgroup\$ – Brian S Dec 4 '14 at 20:05
  • 3
    \$\begingroup\$ Yeah, hey man, auto-updating the year of the copyright notice totally defeats the whole purpose of dating the copyright notice. If it updates automatically, than it serves no purpose other than to remind users of their potential status as time travellers. Really, you might as well just remind users at the bottom of your sites, By the Way, The Year is Currently 2014, and then keep that totally separate from the actual copyright notice below that: Copyright Steve Stevensburg \$\endgroup\$ – ChaseMoskal Dec 4 '14 at 20:11
  • \$\begingroup\$ Ah, did not think about it that way. Let me strike that out. I might need to go back to my design and fix it in this list. Thanks for pointing that out. \$\endgroup\$ – Phrancis Dec 4 '14 at 20:13
  • \$\begingroup\$ @BrianS: In the past, I've made an argument saying year-marks on copyright notices on all websites are all meaningless. The date in a copyright notice exists so that we know when a book written 80 or 100 years ago or whatever officially becomes public domain. Since the web has only existed for a decade, nobody can make an argument that a website they found might be 100 years old thus invalidating your simple copyright notice, which needs only say © Chase Moskal -- the year adds nothing, particularly when half of all web authors out there are cluelessly cheating and auto-updating. \$\endgroup\$ – ChaseMoskal Dec 4 '14 at 20:16
  • \$\begingroup\$ @ChaseMoskal, Strictly speaking (at least by US copyright law), omitting the year from the copyright notice on the thing actually being protected is not what's "done" (I don't want to say "not permitted," because you could omit the notice entirely and still be protected). The year can be omitted from the notice when the copyrighted work is being reproduced (examples given for reproductions include greeting cards, postcards, stationery, jewelry, dolls, and toys). \$\endgroup\$ – Brian S Dec 4 '14 at 20:32
4
\$\begingroup\$

Your document fails the W3C Markup Validator check:

  • Line 7, Column 31: Attribute scr not allowed on element script at this point.

    <script scr="html5shiv.js"></script>    <!-- allows html 5 styling -->
    

    I think you meant src.

  • Line 30, Column 12; Line 48, Column 17; Line 54, Column 18; Line 78, Column 13: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

    <section>
    

I am also skeptical about your use of the <article> element, especially for "Contact Me". According to the recommendation,

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

\$\endgroup\$
  • \$\begingroup\$ I believe OP's the use of <article> is indeed incorrect. They should be <section>'s. \$\endgroup\$ – ChaseMoskal Dec 4 '14 at 23:29
4
\$\begingroup\$

I would follow @Phrancis answer regarding your header and SEO. As far as the rest of the markup, I would do things a little differently and I'll cite some articles to explain why:

The body header section looks fine to me, nothing out of the ordinary. The Content is where I would change somethings. For example:

<header>
    <h2>About Me</h2>
</header>

This <header> isn't necessarily needed. The <h2> tag already tells the browser that this is the header of our article since it's the first one found under the <article> tag. I would also change it to an <h1> tag, since it's the at the beginning of the article.

From HTML5 Doctors Common HTML5 Mistakes

If your <header> element only contains a single heading element, leave out the <header>. The <article> ensures that the heading will be shown in the document outline, and because the <header> doesn’t contain multiple elements (as the definition describes), why write code when you don’t need to?

And since our <article> tag starts a new document outline, we can define a second Header 1 tag to define its title ( The first being DEdesigns ). Here's a good article from Web Design Tuts+ explaining why this is O.K. to use in HTML5 and why we are so used to old practices. TL;DR of the article: The body starts a general document outline but each article also starts a new document outline and needs its specific heading title ( h1 through h6 ).

Another issue I see is that <section> is not necessary as there isn't multiple in your document outline ( in your article ). Semantically you can just add the paragraph after the heading which will automatically define the content of your article, no section necessary. If your page was a wikipedia article, then there would be a reason to use sections but since it likely is just normal page content the section is not necessary here.

In your Gallery I believe if these describe the figures they should be wrapped in <figcaption> to be properly parsed.

It seems odd to have all these <h1> tags but since HTML5 articles defines a new document layout it should be done like this so that each article has the same emphasis on the title.


This is option 1:

<!DOCTYPE html>

    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>DEdesigns</title>
        <script scr="html5shiv.js"></script>    <!-- allows html 5 styling -->
        <link rel="stylesheet" href="style.css">     
    </head>

    <body>

        <div id="container">
            <header>
                <h1>DEdesigns</h1>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header> <!-- end header -->

            <article id="about-me">
                <h1>About Me</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
                <aside>
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                </aside>
            </article> <!-- end #about-me -->

            <article id="gallery">
                <h1>My Work</h1>
                <div id="gallery-conatiner">
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                        <figcaption>
                            rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                        </figcaption>
                    </figure>
                    <!--  ends first row -->

                    <figure>
                        <figcaption>
                            rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                        </figcaption>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                    <!-- ends second row -->

                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                        <figcaption>
                            rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                        </figcaption>
                    </figure>
                    <!-- ends third row -->
                </div>
            </article> <!-- end #gallery -->

            <article id="services">
                <h1>Services</h1>
                <ol>
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                </ol>
            </article> <!-- end #services -->

            <article id="contact-me">
                <h1>Contact Me</h1>
                <p>some contact me stuff goes here</p>
            </article> <!-- end #contact-me -->

            <footer>
                <p>This is my footer</p>
                <small>Copyright in Small</small>
            </footer>    
        </div> <!-- end #container -->

    </body>
    </html>

Another way you could look at it since this is a flat design is wrap EVERYTHING in a <main> and <article> tag. The <header> would be inside your article since it defines navigation ( think back to wikipedia ), then each <article> tag would turn into a <section> or your article. So that semantically it would look like this:

  • DEdesigns
    • About Me
    • My Work
    • My Services
    • Contact

This is assuming of course that the <nav> links are Jump Links or will move down the page to the corresponding section whenever click Versus loading a new page.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>DEdesigns</title>
    <script scr="html5shiv.js"></script>    <!-- allows html 5 styling -->
    <link rel="stylesheet" href="style.css">     
</head>

<body>

    <main id="container">
        <article>
            <header>
                <h1>DEdesigns</h1>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header> <!-- end header -->

            <section id="about-me">
                <h2>About Me</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
                <aside>
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                </aside>
            </section> <!-- end #about-me -->

            <section id="gallery">
                <h2>My Work</h2>
                <div id="gallery-conatiner">
                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                        <figcaption>
                            rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                        </figcaption>
                    </figure>
                    <!--  ends first row -->

                    <figure>
                        <figcaption>
                            rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                        </figcaption>
                        <img src="#" alt="#" width="#" height="#">
                    </figure>
                    <!-- ends second row -->

                    <figure>
                        <img src="#" alt="#" width="#" height="#">
                        <figcaption>
                            rem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
                        </figcaption>
                    </figure>
                    <!-- ends third row -->
                </div>
            </section> <!-- end #gallery -->

            <section id="services">
                <h2>Services</h2>
                <ol>
                    <li>one</li>
                    <li>two</li>
                    <li>three</li>
                </ol>
            </section> <!-- end #services -->

            <section id="contact-me">
                <h2>Contact Me</h2>
                <p>some contact me stuff goes here</p>
            </section> <!-- end #contact-me -->

            <footer>
                <p>This is my footer</p>
                <small>Copyright in Small</small>
            </footer>
        </article>
    </main> <!-- end #container -->

</body>
</html>

Feel free to ask me any questions and I'll try to clarify as best I can or give better reasoning on why I did A over B.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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