Explore our sites

Stack Exchange
tour help
Take the tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 4 down vote favorite

I've just started learning HTML and CSS. Currently I'm creating a test site to practice with.

I'm just after an early idea if the principles I'm using are correct.The below is an snipit from the main body of my html code. Its just about positioning text and images on a grid at the moment. I seem to be using alot of "divs" with IDs in the CSS for styling etc.

Can someone tell me if the structure is ok, or not and what I'd need to do to change this.

Much thanks in advance.

PS, some of the alt text is work in progress and repeated currently hence why it repeats.

<div id="topmenu" class="grid_4">
    <a href="www.bbc.com">About Us &nbsp &nbsp</a><a href="www.bbc.com">Our Cheeses &nbsp &nbsp</a><a href="www.bbc.com">Contact Us</a>
</div>

<div id="quote_one" class="grid_4">
    <p>"QUOTE 1 - We really love the taste of your cheese, we will be back for more"</p>
</div>

<div id="logo" class="grid_4">
    <img src="logo.jpg" alt="This is the company logo">
</div>

<div id="quote_two" class="grid_4">
    <p>"QUOTE 2 - We really love the taste of your cheese, we will be back for more"</p>
</div>
share|improve this question
 
Validating your code should be your first step if you want to do things the "right" way (ie. you are mising a semicolon for your HTML entities, which the validator would have caught for you). –  cimmanon Aug 15 at 17:09
 
Thanks for the tip. –  Dano007 Aug 15 at 20:53
 
I've found this website to be particularly helpful in learning about the new HTML5 elements: html5doctor.com –  cimmanon Aug 16 at 20:11
add comment

2 Answers

up vote 2 down vote

You should get into a habit of adding the protocol to your anchors, as it can sometimes lead to confusing effects, such as in this case:

<a href="www.website.com">Website!</a>

Let's say, the site where that code is on is called http://www.mywebsite.com/mypage.php

Guess where you would go when clicking the <a>? You would be directed to the address http://www.mywebsite.com/www.website.com instead of the intended http://www.website.com

Also, if you are going to do XTHML or HTML5, you should close your IMG tags like this:
<img src="logo.jpg" alt="This is the company logo" />
Notice the '/' in the end.

The same applies to any tags that do not use a closing tag:
<p>This has a closing tag</p>
<input type="text" name="textField" value="No closing tag in me!" />

A very good tool for testing your HTML is the official validator from W3C: http://validator.w3.org

share|improve this answer
 
Great, thanks for the feedback. –  Dano007 Aug 15 at 13:07
2  
The trailing slash for empty elements like img, br, input, etc. are optional for HTML5. They're only required for XHTML (since it is a dialect of XML). –  cimmanon Aug 15 at 17:06
 
It is still good practice to close all tags though. –  Joe W Aug 15 at 22:06
add comment
up vote 2 down vote

a) Don’t use &nbsp &nbsp to separate the navigation links. You could use ul instead (and style it with CSS display:inline; if required):

<ul>
  <li><a href="…">About Us</a></li>
  <li><a href="…">Our Cheeses</a></li>
  <li><a href="…">Contact Us</a></li>
</ul>

b) div has no meaning. You should only use div if there is no other appropriate, "narrower" element. If you are quoting something, use blockquote. If you have a navigation menu, use nav. Of course you can use div in addition to those appropriate elements, if needed.

c) This is not an error, but an opinion-based advice: If you don’t have a strong reason, don’t add id attributes just because you need a styling hook. You could use the class attribute even for what some call "unique" elements. Good reasons to use id are: in-page links (fragment identifier) and, sometimes, JavaScript hooks.

share|improve this answer
 
Thanks, really helpful ;-) –  Dano007 Aug 15 at 20:59
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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