Fruit score leaderboard I made a basic website to practice HTML and CSS that will display 3 fruits with their given scores in an Olympic podium sort of way.

Have I used any bad practices and what I should do instead?

What can I do to fully optimize and shorten my code?

How readable is my code? How can I make it more readable?



&lt;html&gt;

&lt;head&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'&gt;
    &lt;style&gt;
        .bronze {
            transform: scale(0.75);
        }

        .bronze span {
            background-color: #CD7F32;
        }

        .gold span {
            background-color: #FFD700;
        }

        .silver {
            transform: scale(0.75);
        }

        .silver span {
            background-color: #C0C0C0;
        }

        body {
            background-color: #AAFF00;
        }

        caption {
            color: #000000;
            font-family: 'Lato', sans-serif;
            font-size: 50px;
        }

        span {
            border: 1px solid;
            color: #000000;
            font-family: 'Lato', sans-serif;
            font-size: 25px;
            padding: 12.5px;
            position: relative;
            top: -25px;
        }

        table {
            border-collapse: collapse;
            margin: auto;
            text-align: center;
        }

        td {
            padding-bottom: 50px;
            padding-top: 50px;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;table&gt;
        &lt;caption&gt;Highest Fruit Score: &lt;b&gt;83&lt;/b&gt;&lt;/caption&gt;
        &lt;tr&gt;
            &lt;td class="silver"&gt;&lt;img src="http://i.imgur.com/LGuyqx6.png"&gt;&lt;br/&gt;&lt;span&gt;65&lt;/span&gt;&lt;/td&gt;
            &lt;td class="gold"&gt;&lt;img src="http://i.imgur.com/uBDRMVu.png"&gt;&lt;br/&gt;&lt;span&gt;83&lt;/span&gt;&lt;/td&gt;
            &lt;td class="bronze"&gt;&lt;img src="http://i.imgur.com/eOsWQe5.png"&gt;&lt;br/&gt;&lt;span&gt;34&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/body&gt;

&lt;/html&gt;
HTML

Your HTML should have a DOCTYPE declaration.  Nowadays, the HTML 5 doctype (&lt;!DOCTYPE html&gt;) is considered standard practice.

You should always declare a charset, and the charset should be UTF-8.  The &lt;title&gt; element is required.

In an &lt;img&gt; tag, the alt attribute is considered mandatory, and in this case there are very obviously appropriate descriptions to assign to each image.

You are using a &lt;table&gt; to do the layout, for content which is not semantically tabular.  This is considered vulgar in HTML: the document should represent the meaning, and the layout should be performed using CSS.  (The user agent might not be a typical graphical browser; it might be a screen reader for the sight-impaired.)  The semantically appropriate element to use should be an &lt;ol&gt; ordered list.  The fruits should be listed in first, second, and third place in the document.

CSS

For ease of maintenance, avoid repeating declarations.  For example, you can set the font-family just once on an ancestor element.  Also, you can write the transform: scale(0.75) declaration just once, using a .silver, .bronze selector.

How can we change the display order using CSS?  Using the CSS order property would be really nice, but it relies on CSS flex boxes, which is a newer feature.



body {
    background-color: #AAFF00;
    font-family: 'Lato', sans-serif;
    text-align: center;
}

div.fruits {
    display: inline-block;
    width: auto;
}
div.fruits p {
    margin-top: 0;
    color: #000000;
    font-size: 50px;
}
div.fruits p span.score {
    font-weight: bold;
}

ol, li { /* CSS reset: make lists not work like lists */
    list-style: none;
    margin: 0;
    padding: 0;
}

ol {
    display: flex;
}
li {
    display: inline-block;
}
li.silver {
    order: -1;
}
.silver, .bronze {
    transform: scale(0.75);
}

li img {
    display: block;
}
li span.score {
    position: relative;
    top: -25px;
    border: 1px solid black;
    padding: 12.5px;
    font-size: 25px;
}
li.gold .score {
    background-color: gold;
}
li.silver .score {
    background-color: silver;
}
li.bronze .score {
    background-color: #CD7F32;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Top three fruits&lt;/title&gt;
    &lt;link rel='stylesheet' type="text/css" href='https://fonts.googleapis.com/css?family=Lato'&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="fruits"&gt;
        &lt;p&gt;Highest Fruit Score: &lt;span class="score"&gt;83&lt;/span&gt;&lt;/p&gt;
        &lt;ol&gt;
            &lt;li class="gold"&gt;&lt;img alt="banana" src="//i.imgur.com/uBDRMVu.png"&gt; &lt;span class="score"&gt;83&lt;/span&gt;&lt;/li&gt;
            &lt;li class="silver"&gt;&lt;img alt="apple" src="//i.imgur.com/LGuyqx6.png"&gt; &lt;span class="score"&gt;65&lt;/span&gt;&lt;/li&gt;
            &lt;li class="bronze"&gt;&lt;img alt="raspberry" src="//i.imgur.com/eOsWQe5.png"&gt; &lt;span class="score"&gt;34&lt;/span&gt;&lt;/li&gt;
        &lt;/ol&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;




For compatibility, we can resort to using floats to put the silver element on the left.  A very unfortunate consequence of that hack is that the width of the list needs to be hard-coded to help position the floats properly.



body {
    background-color: #AAFF00;
    font-family: 'Lato', sans-serif;
    text-align: center;
}

div.fruits {
    margin-left: auto;
    margin-right: auto;
    width: 750px; /* Unfortunately hard-coded width */
}
div.fruits p {
    margin-top: 0;
    text-align: center;
    color: #000000;
    font-size: 50px;
}
div.fruits p span.score {
    font-weight: bold;
}

ol, li { /* CSS reset: make lists not work like lists */
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
    width: 250px;
}
.silver, .bronze {
    transform: scale(0.75);
}

/* Change the display order to silver-gold-bronze */
li.silver {
    float: left;
}
li.bronze {
    float: right;
}
ol:after {
    clear: both;
}

li span.score {
    position: relative;
    top: -25px;
    border: 1px solid black;
    padding: 12.5px;
    font-size: 25px;
}
li.gold .score {
    background-color: gold;
}
li.silver .score {
    background-color: silver;
}
li.bronze .score {
    background-color: #CD7F32;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Top three fruits&lt;/title&gt;
    &lt;link rel='stylesheet' type="text/css" href='https://fonts.googleapis.com/css?family=Lato'&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="fruits"&gt;
        &lt;p&gt;Highest Fruit Score: &lt;span class="score"&gt;83&lt;/span&gt;&lt;/p&gt;
        &lt;ol&gt;
            &lt;li class="gold"&gt;&lt;img alt="banana" src="//i.imgur.com/uBDRMVu.png"&gt; &lt;span class="score"&gt;83&lt;/span&gt;&lt;/li&gt;
            &lt;li class="silver"&gt;&lt;img alt="apple" src="//i.imgur.com/LGuyqx6.png"&gt; &lt;span class="score"&gt;65&lt;/span&gt;&lt;/li&gt;
            &lt;li class="bronze"&gt;&lt;img alt="raspberry" src="//i.imgur.com/eOsWQe5.png"&gt; &lt;span class="score"&gt;34&lt;/span&gt;&lt;/li&gt;
        &lt;/ol&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;