5
\$\begingroup\$

My code will display a Hearthstone deck list.

I'm still learning HTML and I'd like help with a few things:

How readable is my code? How can I improve readability?

Have I used any bad practices? What should I do instead?

Is there any redundancy in my code?

<!DOCTYPE html>
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <meta charset="UTF-8">
    <title>Hearthstone Deck List</title>
    <style>
        body {
            font-family: 'Lato', sans-serif;
        }

        img {
            vertical-align: middle;
        }

        * {
            box-sizing: border-box;
        }

        .card-list ul {
            list-style-type: none;
            margin: 0px;
            max-width: 250px;
            padding: 0px;
        }

        .card-list ul li {
            margin: 1px;
            position: relative;
        }

        a.card-frame {
            background-color: #191919;
            display: block;
            font-size: 12.5px;
            height: 25px;
        }

        a.card-frame:hover {
            background-color: #646464;
        }

        a.card-frame span.card-cost,
        a.card-frame span.card-count {
            color: #FFFFFF;
        }

        a.card-frame span.card-cost,
        a.card-frame span.card-name,
        a.card-frame span.card-count {
            height: 25px;
            padding-top: 6.25px;
            position: absolute;
            text-align: center;
        }

        a.card-frame span.card-cost {
            background-color: #005580;
            left: 0px;
            width: 25px;
        }

        a.card-frame span.card-name {
            font-size: 9.375px;
            left: 31.25px;
            z-index: 1000;
        }

        a.card-frame span.card-count {
            background-color: #323232;
            right: 0px;
            width: 25px;
        }

        a.card-frame span.card-image {
            position: absolute;
            right: 25px;
        }

        a.free-card span.card-name {
            color: #FFFFFF;
        }

        a.common-card span.card-name {
            color: #FFFFFF;
        }

        a.rare-card span.card-name {
            color: #3296FA;
        }

        a.epic-card span.card-name {
            color: #9632FA;
        }

        a.legendary-card span.card-name {
            color: #FA9632;
        }
    </style>
</head>

<body>
    <div class="card-list row">
        <ul>
            <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Inner_Rage"><span class="card-cost">0</span><span class="card-name">Inner Rage</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/eNXNgqA.png"></span></a></li>
            <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Acidic_Swamp_Ooze"><span class="card-cost">2</span><span class="card-name">Acidic Swamp Ooze</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/SuBSGCs.png"></span></a></li>
            <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Cleave"><span class="card-cost">2</span><span class="card-name">Cleave</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/XWjnQc8.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Cruel_Taskmaster"><span class="card-cost">2</span><span class="card-name">Cruel Taskmaster</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/vluCfAS.png"></span></a></li>
            <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Fiery_War_Axe"><span class="card-cost">2</span><span class="card-name">Fiery War Axe</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/44gyjvy.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Flame_Juggler"><span class="card-cost">2</span><span class="card-name">Flame Juggler</span><span class="card-count">2</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/EfXoFc4.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Haunted_Creeper"><span class="card-cost">2</span><span class="card-name">Haunted Creeper</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/vcJeyH2.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Ship%27s_Cannon"><span class="card-cost">2</span><span class="card-name">Ship's Cannon</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/5oayV5r.png"></span></a></li>
            <li><a class="card-frame rare-card" href="http://hearthstone.gamepedia.com/Sparring_Partner"><span class="card-cost">2</span><span class="card-name">Sparring Partner</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/M0NBfsq.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Unstable_Ghoul"><span class="card-cost">2</span><span class="card-name">Unstable Ghoul</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/MOPFW2Z.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Scarlet_Crusader"><span class="card-cost">3</span><span class="card-name">Scarlet Crusader</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/ZOIUwv3.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Arathi_Weaponsmith"><span class="card-cost">4</span><span class="card-name">Arathi Weaponsmith</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/Q7x98If.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Dark_Iron_Dwarf"><span class="card-cost">4</span><span class="card-name">Dark Iron Dwarf</span><span class="card-count">2</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/IrIovTL.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Dragonkin_Sorcerer"><span class="card-cost">4</span><span class="card-name">Dragonkin Sorcerer</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/CiXAN9A.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Frigid_Snobold"><span class="card-cost">4</span><span class="card-name">Frigid Snobold</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/aENN7T6.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Hungry_Dragon"><span class="card-cost">4</span><span class="card-name">Hungry Dragon</span><span class="card-count">2</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/yn3ddha.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Piloted_Shredder"><span class="card-cost">4</span><span class="card-name">Piloted Shredder</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/ayqsVa1.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Tomb_Spider"><span class="card-cost">4</span><span class="card-name">Tomb Spider</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/WMFO9yi.png"></span></a></li>
            <li><a class="card-frame rare-card" href="http://hearthstone.gamepedia.com/Violet_Teacher"><span class="card-cost">4</span><span class="card-name">Violet Teacher</span><span class="card-count">2</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/egV3JLT.png"></span></a></li>
            <li><a class="card-frame rare-card" href="http://hearthstone.gamepedia.com/Azure_Drake"><span class="card-cost">5</span><span class="card-name">Azure Drake</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/huHFaVO.png"></span></a></li>
            <li><a class="card-frame epic-card" href="http://hearthstone.gamepedia.com/Brawl"><span class="card-cost">5</span><span class="card-name">Brawl</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/WotY3lV.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Clockwork_Knight"><span class="card-cost">5</span><span class="card-name">Clockwork Knight</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/XHnknFn.png"></span></a></li>
            <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Archmage"><span class="card-cost">6</span><span class="card-name">Archmage</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/jXhBQrK.png"></span></a></li>
            <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Boulderfist_Ogre"><span class="card-cost">6</span><span class="card-name">Boulderfist Ogre</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/nMfmbT9.png"></span></a></li>
            <li><a class="card-frame legendary-card" href="http://hearthstone.gamepedia.com/Illidan_Stormrage"><span class="card-cost">6</span><span class="card-name">Illidan Stormrage</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/Xid9PyZ.png"></span></a></li>
            <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/North_Sea_Kraken"><span class="card-cost">9</span><span class="card-name">North Sea Kraken</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/LlOdZs9.png"></span></a></li>
        </ul>
    </div>
</body>

</html>

            body {
                font-family: 'Lato', sans-serif;
            }
            
            img {
                vertical-align: middle;
            }
            
            * {
                box-sizing: border-box;
            }
            
            .card-list ul {
                list-style-type: none;
                margin: 0px;
                max-width: 250px;
                padding: 0px;
            }
            
            .card-list ul li {
                margin: 1px;
                position: relative;
            }
            
            a.card-frame {
                background-color: #191919;
                display: block;
                font-size: 12.5px;
                height: 25px;
            }
            
            a.card-frame:hover {
                background-color: #646464;
            }
            
            a.card-frame span.card-cost,
            a.card-frame span.card-count {
                color: #FFFFFF;
            }
            
            a.card-frame span.card-cost,
            a.card-frame span.card-name,
            a.card-frame span.card-count {
                height: 25px;
                padding-top: 6.25px;
                position: absolute;
                text-align: center;
            }
            
            a.card-frame span.card-cost {
                background-color: #005580;
                left: 0px;
                width: 25px;
            }
            
            a.card-frame span.card-name {
                font-size: 9.375px;
                left: 31.25px;
                z-index: 1000;
            }
            
            a.card-frame span.card-count {
                background-color: #323232;
                right: 0px;
                width: 25px;
            }
            
            a.card-frame span.card-image {
                position: absolute;
                right: 25px;
            }
            
            a.free-card span.card-name {
                color: #FFFFFF;
            }
            
            a.common-card span.card-name {
                color: #FFFFFF;
            }
            
            a.rare-card span.card-name {
                color: #3296FA;
            }
            
            a.epic-card span.card-name {
                color: #9632FA;
            }
            
            a.legendary-card span.card-name {
                color: #FA9632;
            }
       <div class="card-list row">
            <ul>
                <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Inner_Rage"><span class="card-cost">0</span><span class="card-name">Inner Rage</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/eNXNgqA.png"></span></a></li>
                <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Acidic_Swamp_Ooze"><span class="card-cost">2</span><span class="card-name">Acidic Swamp Ooze</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/SuBSGCs.png"></span></a></li>
                <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Cleave"><span class="card-cost">2</span><span class="card-name">Cleave</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/XWjnQc8.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Cruel_Taskmaster"><span class="card-cost">2</span><span class="card-name">Cruel Taskmaster</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/vluCfAS.png"></span></a></li>
                <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Fiery_War_Axe"><span class="card-cost">2</span><span class="card-name">Fiery War Axe</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/44gyjvy.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Flame_Juggler"><span class="card-cost">2</span><span class="card-name">Flame Juggler</span><span class="card-count">2</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/EfXoFc4.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Haunted_Creeper"><span class="card-cost">2</span><span class="card-name">Haunted Creeper</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/vcJeyH2.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Ship%27s_Cannon"><span class="card-cost">2</span><span class="card-name">Ship's Cannon</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/5oayV5r.png"></span></a></li>
                <li><a class="card-frame rare-card" href="http://hearthstone.gamepedia.com/Sparring_Partner"><span class="card-cost">2</span><span class="card-name">Sparring Partner</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/M0NBfsq.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Unstable_Ghoul"><span class="card-cost">2</span><span class="card-name">Unstable Ghoul</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/MOPFW2Z.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Scarlet_Crusader"><span class="card-cost">3</span><span class="card-name">Scarlet Crusader</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/ZOIUwv3.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Arathi_Weaponsmith"><span class="card-cost">4</span><span class="card-name">Arathi Weaponsmith</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/Q7x98If.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Dark_Iron_Dwarf"><span class="card-cost">4</span><span class="card-name">Dark Iron Dwarf</span><span class="card-count">2</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/IrIovTL.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Dragonkin_Sorcerer"><span class="card-cost">4</span><span class="card-name">Dragonkin Sorcerer</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/CiXAN9A.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Frigid_Snobold"><span class="card-cost">4</span><span class="card-name">Frigid Snobold</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/aENN7T6.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Hungry_Dragon"><span class="card-cost">4</span><span class="card-name">Hungry Dragon</span><span class="card-count">2</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/yn3ddha.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Piloted_Shredder"><span class="card-cost">4</span><span class="card-name">Piloted Shredder</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/ayqsVa1.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Tomb_Spider"><span class="card-cost">4</span><span class="card-name">Tomb Spider</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/WMFO9yi.png"></span></a></li>
                <li><a class="card-frame rare-card" href="http://hearthstone.gamepedia.com/Violet_Teacher"><span class="card-cost">4</span><span class="card-name">Violet Teacher</span><span class="card-count">2</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/egV3JLT.png"></span></a></li>
                <li><a class="card-frame rare-card" href="http://hearthstone.gamepedia.com/Azure_Drake"><span class="card-cost">5</span><span class="card-name">Azure Drake</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/huHFaVO.png"></span></a></li>
                <li><a class="card-frame epic-card" href="http://hearthstone.gamepedia.com/Brawl"><span class="card-cost">5</span><span class="card-name">Brawl</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/WotY3lV.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/Clockwork_Knight"><span class="card-cost">5</span><span class="card-name">Clockwork Knight</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/XHnknFn.png"></span></a></li>
                <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Archmage"><span class="card-cost">6</span><span class="card-name">Archmage</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/jXhBQrK.png"></span></a></li>
                <li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Boulderfist_Ogre"><span class="card-cost">6</span><span class="card-name">Boulderfist Ogre</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/nMfmbT9.png"></span></a></li>
                <li><a class="card-frame legendary-card" href="http://hearthstone.gamepedia.com/Illidan_Stormrage"><span class="card-cost">6</span><span class="card-name">Illidan Stormrage</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/Xid9PyZ.png"></span></a></li>
                <li><a class="card-frame common-card" href="http://hearthstone.gamepedia.com/North_Sea_Kraken"><span class="card-cost">9</span><span class="card-name">North Sea Kraken</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/LlOdZs9.png"></span></a></li>
            </ul>
        </div>

\$\endgroup\$
  • 4
    \$\begingroup\$ Just curious, did you type up all those links in the HTML yourself or use a script to get them there? If you used a script, feel welcome to include it as well. \$\endgroup\$ – Phrancis Apr 21 '16 at 19:58
  • 3
    \$\begingroup\$ @Phrancis Those were manually added. \$\endgroup\$ – Owen Apr 21 '16 at 20:13
  • 2
    \$\begingroup\$ That must have been a lot of work! Hope you get good answers. \$\endgroup\$ – Phrancis Apr 21 '16 at 20:19
  • 1
    \$\begingroup\$ There's an official API, which allows you to retrieve most of the data that you have hard coded. Did you create the images that are hosted on imgur yourself? Are they based on the card images? \$\endgroup\$ – I'll add comments tomorrow Apr 23 '16 at 17:27
3
\$\begingroup\$
<li>
    <a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Inner_Rage">
        <span class="card-cost">0</span>
        <span class="card-name">Inner Rage</span>
        <span class="card-count">1</span>
        <span class="card-image card-count-ex">
            <img src="http://i.imgur.com/eNXNgqA.png">
        </span>
    </a>
</li>

VS.

<li><a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Inner_Rage"><span class="card-cost">0</span><span class="card-name">Inner Rage</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/eNXNgqA.png"></span></a></li>

when you have tags inside of tags you should always give them their own line, this makes it easier to see what you have inside of each tag.

Personally I would have done this a little differently, I think I would have used a table instead of an un-ordered list. the reason that I would have used a table is because you are really displaying data here and not a list, but then I look at the way that your link is the entire row and then it makes a little more sense that you used a list item.

You should look into using some kind of data store for this though, that way you can have this list dynamically created and then you only have to enter the data into the data store and it is automatically updated.

Otherwise, it looks pretty good, I like what you have done so far.

|improve this answer|||||
\$\endgroup\$
3
\$\begingroup\$

It's a bit hard to read, not because you wrote a bad HTML code, just because you did not use any framework or library to make your content dynamic and you end up writing 20 lines with all the cards you had to display. The day you have to add more cards, for example 80+ cards, it is going to take you a lot of time to add them. You should think of a faster/dynamic way of adding those cards to your html, maybe you could take a look at AngularJS (AngularJS Tutorial), it will speed up your development process in the future.

Also, you could move all your css to a new file and reference it from your index.html (Tutorial to move your css to a external file), so your html is going to be more readable. Hope this helped you!

|improve this answer|||||
\$\endgroup\$
1
\$\begingroup\$

Spaces

You should use spaces between the span elements. Currently your content looks like

<a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Fiery_War_Axe"><span class="card-cost">2</span><span class="card-name">Fiery War Axe</span><span class="card-count">1</span><span class="card-image card-count-ex"><img src="http://i.imgur.com/44gyjvy.png"></span></a>

2Fiery War Axe1

instead of

<a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Fiery_War_Axe"><span class="card-cost">2</span> <span class="card-name">Fiery War Axe</span> <span class="card-count">1</span> <span class="card-image card-count-ex"><img src="http://i.imgur.com/44gyjvy.png"></span></a>

2 Fiery War Axe 1

The spaces are meaningful for your content. Currently you only make it readable by using CSS, but not all user agents support CSS (text browsers, bots, feed readers, etc.).

alt attribute

The alt attribute is required for img.

The images you show would probably get the card name as alt content (unless you want to describe what the image contains/shows, but in that case they should probably be bigger), but as this would be redundant, you should provide empty values.

<img src="http://i.imgur.com/egV3JLT.png" alt="">

cite element

You could use the cite element for the card names:

<cite class="card-name">Fiery War Axe</cite>

table vs. ul

Instead of a ul element, a table element would be more appropriate for the kind of content. This would also allow you to provide labels for the different values (e.g., card costs and card counts).

But if your desired design isn’t possible with a table, using ul is fine. In that case you might want to provide title attributes that explain the value (not a perfect solution, but better than nothing):

<span class="card-cost" title="Card cost">2</span>

<span class="card-count" title="Card count">1</span>

Link type external

As the links point to an external site (unless you want to publish this list on that site), you could use the external link type:

<a class="card-frame free-card" href="http://hearthstone.gamepedia.com/Fiery_War_Axe" rel="external">…</a>

lang

You could denote the language of the page content:

<html lang="en">
|improve this answer|||||
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.