patternhtmlMinor

Web page for blog post demonstration

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

Viewed 0 times

postdemonstrationforpagewebblog

Problem

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

`

(Requires two or more characters)

Searching for "gr":
gray
green

Color Likenatorizer

Title
Favorite?

aqua
No

black
No

blue
No

fuchsia
Yes

gray
No

green
No

lime
No

maroon
No

navy
No

olive
No

orange
No

purple
No

red
No

silver
No

teal
No

Solution

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


    
        
        
        
        (Requires two or more characters)
    
    Searching for "gr":
        gray
        green

Stay consistent with your Capitalization, don't use SCREAMCASE for HTML tags

-
Be consistent with your tag terminations, always terminate tags

-
When you comment your code, make sure that you use Comment Tags

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

-
Text should always be housed in a tag

 Searching for "gr":

-
Structure of HTML tags, your `` tag should not follow all that other stuff, it should look like this


    gray
    green

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

these could easily be one div like this

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


    Title
    Favorite?

    aqua
        No

This is how I would write the same HTML


    
        Title
        Favorite?
    
    
        aqua
        
            No

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

Code Snippets

<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>

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

<p> Searching for "<code>gr</code>": </p>

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

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

Context

StackExchange Code Review Q#63158, answer score: 5

Revisions (0)

No revisions yet.