Judgement calls in applying basic HTML5 elements

Question 1

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="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>

Question 2

See What you may and may not do after receiving answers.

Question 3

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.

Question 4

really appreciate for the very detailed review of my code.

Question 5

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

Question 6

@TokTok123 What you have is better, go with that - although it's not impossible to include both (though it's not recommended)

Question 7

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

Question 8

Thanks ... I'll have a look at running my code thru a validator ..

ArtOfCode ArtOfCode 5626 silver badges17 bronze badges · Answer 1 · 2015-01-05 18:20:01Z

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.

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
@TokTok123 What you have is better, go with that - although it's not impossible to include both (though it's not recommended)

AllInOne AllInOne 1112 bronze badges · Answer 2 · 2015-01-05 22:16:19Z

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

Thanks ... I'll have a look at running my code thru a validator ..

Stack Exchange Network

Judgement calls in applying basic HTML5 elements

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Judgement calls in applying basic HTML5 elements

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions