How to improve this HTML code_问答_开发者_运维开发者技术经验分享

Follow up question to achieving hover effect answer, most said that the HTML markup below was abysmal. So I implemented one of their suggestion which is to change tables into divs.

<html>
<head>
    <title>Abyssal Warder Fire</title>
    <link href="http://225175.edicypages.com/stylesheets/cards.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div class="pictureholder"&开发者_C百科gt;<img src="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg" /></div>
    <div class="information">
        <div class="Orbs">
                <div class="layout">Orbs:</div>
                <div class="value"><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /> <i>(3)</i></div>
        <div class="Affinity">
                <div class="layout">Affinity:</div>
                <div class="value"><font color="red">Fire</font></div>
            </div>
        <div class="Energy">
                <div class="layout">Energy:</td>
                <div class="value">250</td>
            </div>
        <div class="Type">
                <div class="layout">Type:</td>
                <div class="value">Creature <i>(Giant Destroyer)</i></div>
            </div>
        <div class="Charges">
                <div class="layout">Charges:</div>
                <div class="value">1</div>
            </div>
        <div class="Rarity">
                <div class="layout">Rarity:</div>
                <div class="value">UR</div>
            </div>
        <div class="Edition">
                <div class="layout">Edition:</div>
                <div class="value">Lost Souls</div>
            </div><br />
        <div class="WeaponType">
                <div class="layout">Weapon:</div>
                <div class="value">L</div>
            </div>
        <div class="Size">
                <div class="layout">Size:</div>
                <div class="value">XL</div>
            </div>
        <div class="Attack">
                <td class="layout">Attack:</div>
                <td class="value">2500</div>
            </div>
        <div class="Defense">
                <div class="layout">Defense:</div>
                <div class="value">2500</div>
            </div>
        <div class="CardID">
                <div class="layout">CardID:</div>
                <div class="value"></div>
            </div><br />
        <div class="Abilities">
            <p class="description"><i>
                <img src="http://225175.edicypages.com/photos/Activated.jpg" />Crystal Spikes - Activate to ram Abyssal Warder's crystaline fist into the ground. Crystal Spikes will erupt from the ground and within 4 seconds cover a 20m radius. They deal 570 damage to enemies within it, up to 1710 in total that cannot be warded off with the help of damage reducing abilities as the crystals are able to circumvent every buff or protective shield. Knocks back small and medium units. Only affects ground entities. Reusable every 20 seconds. (Power: 80)<br /><br />
                <img src="http://225175.edicypages.com/photos/Passive_r.jpg" />Infused Breakdown - Upon dying the unit collapses into pieces that will reassemble on their own to form two large sized Abyssal Warders. If those die their remains will again form to medium sized golems each. All smaller variants of Abyssal Warder are enraged and deal increasingly more damage the longer they attack.
            </i></p></div>

    </div>

<div class="upgrades">
    <div class="Upgrade1">
        <div class="L U1"><u>Upgrade I:</u></div>
                    <div class="V Map1">Empire <br />(<font color="green">Standard</font>)</div><br />
        <div class="L HT1">Honor Tokens:</div>
                    <div class="V HTV1">0</div>
        <div class="L VT1">Victory Tokens:</div>
                    <div class="V VTV1">4</div>
        <div class="L BT1">Battle Tokens:</div>
                    <div class="V BTV1">30</div>
        <div class="L PR1">PvP Rank:</div>
                    <div class="V PRV1">8</div>
    </div><div class="Upgrade2">
        <div class="L U2"><u>Upgrade II:</u></div>
                    <div class="V Map2">Empire <br />(<font color="orange">Advance</font>)</div><br />
        <div class="L HT2">Honor Tokens:</div>
                    <div class="V HTV2">0</div>
        <div class="L VT2">Victory Tokens:</div>
                    <div class="V VTV2">30</div>
        <div class="L BT2">Battle Tokens:</div>
                    <div class="V BTV2">60</div>
        <div class="L PR2">PvP Rank:</div>
                    <div class="V PRV2">9</div>
    </div><div class="Upgrade3">
        <div class="L U3"><u>Upgrade III:</u></div>
                    <div class="V Map3">Empire <br />(<font color="red">Expert</font>)</div><br />
        <div class="L HT3">Honor Tokens:</div>
                    <div class="V HTV3">40</div>
        <div class="L VT3">Victory Tokens:</div>
                    <div class="V VTV3">70</div>
        <div class="L BT3">Battle Tokens:</div>
                    <div class="V BTV3">120</div>
        <div class="L PR3">PvP Rank:</div>
                    <div class="V PRV3">10</div></div>
</div>
<div class="comments"></div>

Here is before and after the changes. Before I proceed to CSS, is there any html codes I should add or remove? Any div tags I should change?

P.S. I will be using Microsoft Excel to automate more than 500 html pages and uploading them manually one by one, so it is important that I get this right.

Layouts and individual styling should be done in CSS, agreed. However, if within a layout you have tabular data, you should use tables. You don't want to indulge in "divs for divs' sake"!

Looking at your mark-up, it's very "dense"—there are an awful lot of classes specified in there. For ease of maintenance (and your sanity), I'd really try to think about what you're trying to achieve and go from there.

For example, this sort of mark-up, with subtly different (and obscurely-named) classes is a bear to maintain:

<div class="L BT2">Battle Tokens:</div>
                <div class="V BTV2">60</div>

Perhaps you could use a list instead; this seems more readable to me, but your mileage may vary:

<li class="tokens">Battle Tokens:<span class="count">60</span></div>

1st of all, it is great that you changed from <Table> to <div>, however! You have to understand that each tag has it's own purpose, and the fact that you use div for everything, is quite bad HTML etiquette.

Also, the <i>, <font> tags are OBSOLETE, instead of writing your code like that, you can use the styling properties of CSS, for example:

p{font-style: italics}

or if you want to color the element

p{color:red}

and if you already have styled element, it's not a problem adding a sub-style (or an extra style to the element)

<p class='style 1 style2'>bla bla</p>

in this case, the <p> element will make usage of both style1 and style2.

also, I believe that you can be MUCH, MUCH smarter if you'll not create 500 html pages, and you'll make usage of database power, so you could easily change the pages if you'll want later on, and simply parse the pages using simple PHP. Will be MUCH EASIER than to re-write 500+ html pages in the future, incase you'll want to change the layout. Sniff around the topics of PHP and MySQL - it might seem a bit tricky at first, but in the long run, it'll make your life much easier.

I'm not sure, this looks pretty tabular for me, so id try working with tables, making sure to use proper semantic.

This is a reference http://www.htmlcodetutorial.com/tables/_THEAD.html

Although I'd work the layout with divs (html/css stuffs)

GL.