I need help with validing the xhtml code from http://validator.w3.org/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>:.Favorite Sites.:</title>
</head>

<body style="background-color: black; background-image: url(images/bluebackground.jpg)">
<h1 style="color: white; text-align: center">Favorite Sites</h1>
<p style="text-align: center; color: white">
<a href="#social">Social Utility</a> &middot; <a href="#entertainment">Entertainment</a> &middot; <a href="#puzzle">Puzzles</a> &middot; <a href="#movies">Movies</a> &middot;<a href="#games">Games</a>
</p>

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="social" style="clear: both; color: #FFF;">Social Utility</h2>
<ul style="color: white;">
    <li><a href="http://www.facebook.com/" target="window"><img src="Images/friends.jpg" alt="friends" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> - Facebook is a social networking site that makes it easy for you to keep in touch with friends, family and employees. It is great way to meet old 
<br />
friends and keep up on what they are doing. People use Facebook to keep up with friends, upload photos and share information. It is similar to
<br />
Myspace but it has more features.</b></li><br />

    <br />
    <br />
    <br />

<li style="clear: both;"><a href="http://www.oovoo.com/" target="window"><img src="Images/chat.jpg" alt="chat" width="120" height="120"style="float: left; margin-right: 20px;" /></a><b> - Oovoo connect people by its high-quality video and audio online. It allow six people to talk or sign face-to-face with each other at the same time.
<br />
ooVoo offers video messaging to an email or another ooVoo account, text messaging, and file sharing. It can be only use for temporary as a demo. 
<br />
Until that is, Itis great tool to chat.</b></li>

    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="entertainment" style="clear: both; color: #FFF;">Entertainment</h2>
<ul style="color: white;">
    <li><a href="http://www.collegehumor.com/" target="window"><img src="Images/laugh.jpg" alt="humor" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> - CollegeHumor is the best humor site on the internet. It is included funny videos, pictures,and jokes. That site allow users to submit items into the 
<br />
website under one condition: it has to be original. The site is specialized into college audience. It has features content that appeal to the universities 
<br />
and colleges.</b></li><br />

    <br />
    <br />
    <br />

<li style="clear: both;"><a href="http://www.youtube.com/" target="window"><img src="Images/youtube.jpg" alt="youtube" width="120" height="120"style="float: left; margin-right: 20px;" /></a><b> - YouTube is a video sharing website where users can upload, view and share video clips. It contained many useful features: browse millions of videos, 
<br />
comment the videos by rating or video responses, upload your videos so everyone can see it, and save your favorite videos. Deaf jokes, vlogs and even 
<br />
poetry are also protrayed through the site.</b></li>

    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="puzzle" style="clear: both; color: #FFF;">Puzzles</h2>
<ul style="color: white;">
    <li><a href="http://www.corsinet.com/braincandy/stupid.html" target="window"><img src="Images/question.jpg" alt="friends" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> - Whenever I want to sit alone, I like to think about those silly questions to make me think. Questions like this can create humor, as I can't stop thinking 
<br />
of the solution even when I try not to think on them! Most of my answers mostly depend on the process of thinking and they are different every time!
.</b></li><br /> 

    <br />
    <br />
    <br />

<li style="clear: both;"><a href="http://www.rinkworks.com/brainfood/p/latreal1.shtml" target="window"><img src="Images/thinking.jpg" alt="chat" width="120" height="120"style="float: left; margin-right: 20px;" /></a><b> - Laterial thinking puzzles are methods of thinking by using different perception than my own. It is about reasoning that is not obvious and about ideas I 
<br />
don't know. It trained me to think outside the box. I able to see things more differently and help me find solutions better. It is also challenging too.</b></li>

    <br />
    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="movies" style="clear: both; color: #FFF;">Movies</h2>
<ul style="color: white;">
    <li><a href="http://www.imdb.com/title/tt0493464/" target="window"><img src="Images/want.jpg" alt="wanted" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> -  Wanted is is a 2008 action film, which James McAvoy is just an ordinary guy who was an ordinary guy , Unitl he found out that his father is a assassin
<br />
and he is dead, Sloan arrives and offering Wesley the job. After training, Fox and Wesley was having dangerous adventures.</b></li><br />

    <br />
    <br />
    <br />

<li style="clear: both;"><a href="http://www.imdb.com/title/tt1059786/" target="window"><img src="Images/FBI.jpg" alt="FBI" width="120" height="120" style="float: left; margin-right: 20px;" /></a><b> - Eagle Eye is a 2008 action/thriller film that has a high rating. It is about a young man and a single mother who are brought together by a caller. That
<br /> caller push them into dangerous situations. If they don't follow them, He/she is using the technology of everyday to track and control their every move.</b></li>

    <br />
    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<h2 id ="games" style="clear: both; color: #FFF;">Games</h2>
<ul style="color: white;">
    <li><a href="http://afro-ninja.com/vflash.php?id=50" target="window"><img src="Images/territory.jpg" alt="territory" width="120" height="120" style="float: left; margin-right: 20px;"/></a><b> -  Territory War Online is strategy-based game where two teams of players against each other with various kinds of weapons. In turn-based fashion, 
<br />
each turn will enable a player from your team to move or use weapon. The concept is to beat the opposing team by using your own strategy. This game
<br />
play online with people all over in United States.</b></li><br />

    <br />
    <br />
    <br />

<li style="clear: both;"><a href="http://www.chess.com/play/" target="window"><img src="Images/chess.jpg" alt="chess" width="120" height="120"style="float: left; margin-right: 20px;" /></a><b> - Chess is a online board game for two players. It start with each beginning with 16 pieces of six kinds. Each pieces that are moved in different ways
<br /> 
such as diagonally, straight or even one square at a time. The objective of game is to checkmate the opposing king.</b></li>

    <br />
    <br />
    <br />
    <br />
    <br />

</ul>
<hr style="text-align:center;height:10px;width:1100px;color:silver" noshade="noshade" />
<p style="text-align:center"><a href="Assignment1/Index.html">Home Page</a>&nbsp;&middot;&nbsp;<a href="Assignment1/WebDev1.html">Web Development I</a>
</p>

</p>
</body>
</html>

Recommended Answers

All 7 Replies

Hey, I think what the main problem here is that the <br /> tags need to be within the <li> elements.

For example:

<ul>
<li>Text<br /></li>
</ul>

Also you are probably better off getting rid of the <br /> tags and using style information increase the padding between each <li>.

You really need to get rid of as many of the <br/>s as possible and also having styling code in your html is not recommended. You should put it all in your style sheet. You should also not have pixel widths of 1100px!?

If you have anymore question, reply.

The validator tells you what is wrong
fix them in order 1 - 51 and keep the fixed page as a template

Markup Validation Service
Check the markup (HTML, XHTML, …) of Web documents

Jump To: Validation Output
Errors found while checking this document as XHTML 1.0 Transitional!
Result: 51 Errors
To ensure your <hr> extends across the page use width=100%
obscenely large pixel measures just create scroll bars on the page

Most of you guys telling me that the <br /> must be removed or be within the <li>. That is alright. I can do that. But the web page won't look good.

Most of you guys telling me that the <br /> must be removed or be within the <li>. That is alright. I can do that. But the web page won't look good.

bulk <br> "won't look good"
css for layout, html for content
<style type='text/css'>
ul li { padding: 1px; padding-top: 14px; margin: 0; /* whatever- I got lazy now */}
</style>

You can put margins outside the ul or ol tags with css.

think semantics - in terms of the design, is that space really half a dozen "line break"s? or is it a really big li - in which case padding is what you need (i.e. increase the space between the content and the element border). If it is space BETWEEN the li's you're after, you will want to give each li a margin.

Remeber elements will share margins so if you have one li with say margin-bottom:10px; and the li below it with margin-top:10px; the two li's will only be 10px apart, not 20.

Hope this helps

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.