patternhtmlModerate

HTML website practice exercise

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

practicewebsiteexercisehtml

Problem

Here is a problem I solved. Please review this.


    
            BLA| Welcome 
    
    
            Meet Jack
             
             He is Jack.He is an odd little boy that just got an empty box for his birthday. He may look  happy but is a little  disappointed. Now he will have to put a little things in the box.
            Jack would really like...
                
                    Roller blades
                    Magic tricks
                    Anything Pokemon
                    A motorized Lego set
                
                
                You can get all this (and more) at an online toy store. Two very popular ones are toysrus.com and eToys.

Solution

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)

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.

Don't use the

tags for other things than actual line-breaks (that is, to break text). I would remove all

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; }.

Do not put a ul inside a p tag. Close the p tag and then add another p tag after the ul instead.

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)


    
        
            h1 { text-align: center; }
            img { display: block; }
        
        BLA| Welcome 
    
    
            Meet Jack
            
            He is Jack. He is an odd little boy that just got an empty box for his
               birthday. He may look happy but is a little
               disappointed. Now he will have to put a little things in the box.
               Jack would really like...
            
                Roller blades
                Magic tricks
                Anything Pokemon
                A motorized Lego set
            
            You can get all this (and more) at an online toy store. Two very popular
               ones are toysrus.com and
               eToys.

Code Snippets

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            h1 { text-align: center; }
            img { display: block; }
        </style>
        <title>BLA| Welcome </title>
    </head>
    <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>Roller blades</li>
                <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>

Context

StackExchange Code Review Q#3209, answer score: 11

Revisions (0)

No revisions yet.