1
\$\begingroup\$

Having developed a page in HTML4 I'm looking to improve my page by developing it in HTML5 and specifically looking to use the header, nav, section, article, aside and footer elments.

I realise its a judgement call to apply the above elements and I've applied some of these HTML element plus I look forward to using more of them but was wondering if my application of these elements so far is ideal or not?

Here's the body section of my code:

    <body>
    <nav required id="topbar"> 
        <a  required id="logo_link" href="">LOGO TEXT ....</a>

        <ul>
            <li><a href='#'>LOG IN</a></li>
            <li><a href='#'>HOW IT WORKS</a></li>
            <li><a href='#'>FEATURES</a></li>
        </ul>
    </nav>

    <!-- Welcome message -->
    <div class="welcome_message">Welcome message ... Welcome message ... Welcome message ... Welcome message ... Welcome message ... </div>

    <!-- Header Carousel -->
    <header required id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                <div class="carousel-caption">
                     <h2>Caption A</h2>

                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                <div class="carousel-caption">
                     <h2>Caption B</h2>

                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                <div class="carousel-caption">
                     <h2>Caption C</h2>

                </div>
            </div>
        </div>

        <!-- Controls 
        <div class="arrows"> 
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="icon-prev"></span>
            </a>

            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="icon-next"></span>
            </a>
        </div> -->      
    </header>

    <!-- Page Content -->
    <section required id="page_content" class="page_content_div">

        <div class="page_content_heading_div" >
            <p> Log in with: </p>
        </div>

        <div class="page_content_main_div">
            <div class="social_sign_in_div">
                <a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
            </div>

            <div class="social_sign_in_div">
                <a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
            </div>

            <div class="btn_log_in_with_email_div">
                <a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>E-mail</b></a>
            </div>

            <hr class="hr"></hr>

            <div class="page_content_heading_div">
                <p>Sign up:</p>
            </div>

            <div class="form_input_div">
                <div class="form_input_internal_div">

                    <input title="Enter first name" class="firstname" name="firstname" type="text" required id="firstname" placeholder="Enter first name">
                </div>

                <div class="form_input_internal_div">
                    <input title="Enter second name" class="secondname" name="secondname" type="text" required id="secondname" placeholder="Enter second name">
                </div>

                <div class="form_input_internal_div">
                    <input title="Type your e-mail" class="email" name="email" type="email" required id="email" placeholder="Enter email">
                </div>

                <div class="form_input_internal_div">
                    <input title="Enter a password" class="password" name="password" type="password" required id="password" placeholder="Enter password">
                </div>

                <div class="form_input_internal_div">
                    <input title="Re-enter the password" class="reenterpassword" name="reenterpassword" type="password" required id="reenterpassword" placeholder="Re-enter password">
                </div>

                <div class="form_button_internal_div">
                    <button title="Type your second name" type="submit" class="btn_sign_up" id="submit">Sign Up</button>
                </div>

                <div class="form_terms_of_service_internal_div">
                    <p class="terms_of_service">By signing up, I agree to the following <a href='#' id="generic_link_decoration"><b>Terms of Service</b></a> and <a href='#' id="generic_link_decoration"><b>Privacy Policy</b></a>.</p>
                </div>                                

            </div>

        </div>

    </section>      

    <!-- Footer 
    <div class="footer_div">
        <u
            <li><a href='#'>FOOTER MENU OPTION A</a></li>
            <li><a href='#'>FOOTER MENU OPTION B</a></li>
            <li><a href='#'>FOOTER MENU OPTION C</aform_input_internal_div></li>
            <li><a href='#'>FOOTER MENU OPTION D</a></li>
        </ul>        
    </div> -->

    <nav class="footer_div"> 
        <ul>
            <li><a href='#'>ABOUT</a></li>
            <li><a href='#'>TERMS OF SERVICE</a></li>
            <li><a href='#'>FEATURES</a></li>
            <li><a href='#'>HELP</a></li>
        </ul>     
    </nav>    

</body>

\$\endgroup\$
2
\$\begingroup\$

The first thing that struck me is your use of required. The required attribute is meant for forms only, specifically input fields.

Next up: styling. You may not have done styling yet, but in any case I would suggest that you remove your inline styles to an external CSS file and reference it in the <head>:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

Inline styles should be used to change preset styles (such as those set in an external CSS document) for a single use. For example, say you have a pre-defined message box in your CSS file, but you want it to look slightly different for one point on one page only. That should be done inline:

.message {
	display: block;
	padding: 5px;
	width: 80%;
	margin-bottom: 15px;
	margin-top: 10px;
    background: #AD2622;
	color: white;
    font-family: Calibri, sans-serif;
}
<span class="message">This is a normal error message.</span><br/>
<span class="message" style="border-left: 5px solid #8D0602; font-weight: bold;">This is a message with extra styles for emphasis.</span>

Otherwise, your use of the HTML5 elements seems sound: you have appropriately used <section>, <nav>, and <header>. What I will say is, since some people still insist on IE6 with no HTML5, you may want to include a standard HTML5 display-reset CSS file.

\$\endgroup\$
  • \$\begingroup\$ really appreciate for the very detailed review of my code. \$\endgroup\$ – TokTok123 Jan 8 '15 at 19:07
  • \$\begingroup\$ Regarding the HTML5 display-reset CSS file is the option you proposed better than what I have which is normalize.css i.e. necolas.github.io/normalize.css \$\endgroup\$ – TokTok123 Jan 8 '15 at 19:56
  • \$\begingroup\$ @TokTok123 What you have is better, go with that - although it's not impossible to include both (though it's not recommended) \$\endgroup\$ – ArtOfCode Jan 8 '15 at 22:36
1
\$\begingroup\$

Consider running your code against an html validator

Doing so revealed the following errors and warnings:

  • element <head> is missing.
  • required attribute is invalid
  • url encoding issues
  • malformed hr tag
  • duplicate ids
  • sections should be introduced with h2-h6 elements
\$\endgroup\$
  • \$\begingroup\$ Thanks ... I'll have a look at running my code thru a validator .. \$\endgroup\$ – TokTok123 Feb 19 '15 at 22:36

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.