# HTML website practice exercise

Here is a problem I solved. Please review this.

<!DOCTYPE HTML>
<html>
<title>BLA| Welcome </title>
<body>
<h1 align="center">Meet Jack</h1>
<img src="http://www.htmliseasy.com/exercises/jack.gif" alt="Meet Jack"> <br/>
<p> He is Jack.He is an odd little boy that just got an empty box for his birthday. He may <em>look </em> happy but is a <em>little </em> disappointed. Now he will have to put a little things in the box.<br/>
Jack would really like...<br/>
<ul>
<li>Magic tricks</li>
<li>Anything Pokemon</li>
<li>A motorized Lego set</li>
</ul>
<br/>
You can get all this (and more) at an online toy store. Two very popular ones are <a href="http://www.toysrus.com/">toysrus.com </a>and <a href="http://www.etoys.com/">eToys</a>.
</p>

</body>
</html>


Okay, I am not sure exactly in what limits your exercise is, but I'll answer to what I think is good web standard. (I've been a web developer for ~4 years)

1. Don't use the align attribute. HTML is supposed to be a markup language. Use CSS to control the appearance of your html elements. In this case something like h1 { text-align: center; } should do just fine.
2. Don't use the <br /> tags for other things than actual line-breaks (that is, to break text). I would remove all <br /> tags, since you don't need them in this exercise. Elements like ul, li and p are by default block elements, which flows vertically. If you need more space between elements, use margin/padding instead. However, img is not a block element by default, so you can either wrap it in a div or make it a block element using CSS like img { display: block; }.
3. Do not put a ul inside a p tag. Close the p tag and then add another p tag after the ul instead.
4. Fine detail: insert line breaks in text to increase readability. A typical practice is to keep lines less than 80 characters.

Btw, you do know that there are validator tools for HTML, right?

EDIT: Full code, in a better way: (Note that I chose to preserve one br tag. Maybe it can be an exercise to figure out why)

<!DOCTYPE HTML>
<html>
<style>
h1 { text-align: center; }
img { display: block; }
</style>
<title>BLA| Welcome </title>
<body>
<h1>Meet Jack</h1>
<img src="http://www.htmliseasy.com/exercises/jack.gif" alt="Meet Jack" />
<p>He is Jack. He is an odd little boy that just got an empty box for his
birthday. He may <em>look</em> happy but is a <em>little</em>
disappointed. Now he will have to put a little things in the box.<br />
Jack would really like...</p>
<ul>
<li>Magic tricks</li>
<li>Anything Pokemon</li>
<li>A motorized Lego set</li>
</ul>
<p>You can get all this (and more) at an online toy store. Two very popular
ones are <a href="http://www.toysrus.com/">toysrus.com</a> and
<a href="http://www.etoys.com/">eToys</a>.</p>

</body>
</html>

• @Betamos Thats an excellent and detailed answer! +2 if I could. The only thing I would add is a full CSS example as the OP doesn't have any. It would be good to show some example <style> tags or <link> tag. – James Khoury Jun 30 '11 at 0:00
• @Betamos: Thanks a lot for such a nice answer. I am trying to learn HTML from a long time but do not find good resources to learn.Sorry I don't know about the validator tool too. – fuddin Jun 30 '11 at 0:45
• @fahad A good read would be the HTML Dog site. It has references and articles at beginner,intermediate and advanced levels. – James Khoury Jun 30 '11 at 1:54
• @fahad: The syntax differences between HTML and XHTML are small. It's simple to convert between the two. The most important difference: "Empty" elements don't have a final /. XHTML: <br/>. HTML: <br>. – RoToRa Jun 30 '11 at 15:13
• @RoToRa In both XHTML and HTML5, <tagname /> is allowed. I use them because they increase readability of the code and are more portable. @fahad The br` tag is just there because it probably looks better with a new line there. – Betamos Jun 30 '11 at 15:43