7
\$\begingroup\$

I am a CSS and HTML5 newbie. I'm creating a minimal web page to demonstrate something in a blog post. So although it doesn't need to look great, I would like it to make sure it's solid. It has no errors or warnings when I use the W3C validator.

.navigation  {
   float: left;
}
.content  {
   float: left;
}
table  {
   border:1px solid #000;
   border-spacing: 0px;
   background-color: #EEE;
   border-collapse:collapse;
}
thead  {
   font-weight: bold;
   text-decoration: underline;
}
th  {
   border:1px solid #000;
   padding: 4px;
}
td  {
   text-align: center;
   vertical-align: middle;
   padding: 4px;
   border:1px solid #000;
}
.liked  {
   background-color: #CD0;
}
.unliked  {
   background-color: white;
}
.color_like  {
   text-align: center;
}
.color_name  {
   text-align: right;
}
    <div class="navigation">
        <form id="search_colors_form_id" method="get" action="/colorliker/">
            <input type="text" id="search_text" name="search_text"/>
            <input type='hidden' name='csrfmiddlewaretoken' value='LvwycpyDh8xhACAh9DaqTUaPh6YkqoAe' />
            <input id="id_pic_submit_button" type="submit" value="Search for color"/><BR>
            (Requires two or more characters)
        </form>
        <BR>Searching for "<CODE>gr</CODE>":<UL>
            <LI>gray</LI>
            <LI>green</LI>
        </UL>
    </div>
    <div class="content">
        <div class="content_body">
            <H1>Color Likenatorizer</H1>

            <TABLE><TR>
                <TH>Title</TH>
                <TH>Favorite?</TH>
            </TR><TR>
                <TD CLASS="color_name">aqua</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_12/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">black</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_13/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">blue</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_14/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">fuchsia</TD>
                    <TD CLASS="liked"><A HREF="/colorliker/like_color_15/">Yes</A></TD>
            </TR><TR>
                <TD CLASS="color_name">gray</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_16/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">green</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_17/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">lime</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_18/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">maroon</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_19/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">navy</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_20/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">olive</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_21/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">orange</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_22/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">purple</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_23/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">red</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_24/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">silver</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_25/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">teal</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_26/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">white</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_27/">No</A></TD>
            </TR><TR>
                <TD CLASS="color_name">yellow</TD>
                    <TD CLASS="unliked"><A HREF="/colorliker/like_color_28/">No</A></TD>
            </TR></TABLE>
        </div>
    </div>

\$\endgroup\$
8
  • 3
    \$\begingroup\$ No more need for Code Pan or JSFiddle when we have Stack Snippets See the little present I edited into your post! \$\endgroup\$ – janos Sep 17 '14 at 13:51
  • 1
    \$\begingroup\$ @janos: Thanks for the tip. Updated as a (displaying) stack snippet. I also updated it to pure html. I accidentally put some Django tags in there. \$\endgroup\$ – aliteralmind Sep 17 '14 at 14:13
  • 1
    \$\begingroup\$ Nicely done! And welcome to Code Review! \$\endgroup\$ – janos Sep 17 '14 at 14:18
  • \$\begingroup\$ You should stick to either lower or upper case in your HTML tags, don't mix them. I'm not sure if current conventions recommend lower over upper, though. \$\endgroup\$ – Ivo Coumans Sep 17 '14 at 14:57
  • 3
    \$\begingroup\$ @Malachi Yes, current convention is lowercase. Only with XHTML is it a requirement. \$\endgroup\$ – Kid Diamond Sep 17 '14 at 15:34
4
\$\begingroup\$

Some of your HTML is off and a little bit odd to me

<div class="navigation">
    <form id="search_colors_form_id" method="get" action="/colorliker/">
        <input type="text" id="search_text" name="search_text"/>
        <input type='hidden' name='csrfmiddlewaretoken' value='LvwycpyDh8xhACAh9DaqTUaPh6YkqoAe' />
        <input id="id_pic_submit_button" type="submit" value="Search for color"/><BR>
        (Requires two or more characters)
    </form>
    <BR>Searching for "<CODE>gr</CODE>":<UL>
        <LI>gray</LI>
        <LI>green</LI>
    </UL>
</div>
  1. Stay consistent with your Capitalization, don't use SCREAMCASE for HTML tags
  2. Be consistent with your tag terminations, always terminate tags

    <br/>
    
  3. When you comment your code, make sure that you use Comment Tags

    <!-- (Requires two or more characters) -->
    

    This might not be a comment, if it isn't then see point #4

  4. Text should always be housed in a tag

    <p> Searching for "<code>gr</code>": </p>
    
  5. Structure of HTML tags, your <ul> tag should not follow all that other stuff, it should look like this

    <ul>
        <li>gray</li>
        <li>green</li>
    </ul>
    

You have a div inside of a div and they aren't used for anything.

<div class="content">
    <div class="content_body">

these could easily be one div like this

<div class="content content_body">

because both are surrounding the same piece of HTML.


The way that you wrote your table bothers me, it's not standard formatting, this isn't something that will cause errors but it is harder to read

<TABLE><TR>
    <TH>Title</TH>
    <TH>Favorite?</TH>
</TR><TR>
    <TD CLASS="color_name">aqua</TD>
        <TD CLASS="unliked"><A HREF="/colorliker/like_color_12/">No</A></TD>
</TR><TR>

This is how I would write the same HTML

<table>
    <tr>
        <th>Title</th>
        <th>Favorite?</th>
    </tr>
    <tr>
        <td CLASS="color_name">aqua</td>
        <td CLASS="unliked">
            <a HREF="/colorliker/like_color_12/">No</a>
        </td>
    </tr>
    <tr>
        <!-- ... -->
<table>

There are different variations, but most are very similar to this format

\$\endgroup\$
2
  • \$\begingroup\$ Thank you. Easy and obvious tips. Surprised that the open and close trs shouldn't be on the same line. I've posted updated source in a new answer. \$\endgroup\$ – aliteralmind Sep 18 '14 at 15:25
  • \$\begingroup\$ it's more of a readability thing. before Highspeed internet they used to take out all the whitespace in HTML/JS/CSS so that it would take up less space, it wasn't readable at all, sometimes they still do it with large JS files, the process is call minify I think. \$\endgroup\$ – Malachi Sep 18 '14 at 15:34

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.