Refactoring 3: HTML code

[stlim0730]

Readability is the key of sustainable project and standard-compliance is the key of sustainable web! We aim to achieve both readability and standard-compliance in this issue since they are also the two biggest issues in terms of the project's HTML code base.

The followings are the problems we address in this issue.

1. Wrong syntax of HTML; really. It exists.
   • I found several HTML elements with the same id attribute. Clearly wrong. Should have been class.
   • Also, their styles are defined per id. Clearly wrong. Should have been class.
   • There are incomplete pairs of open-close tags. Wrong and unreadable.
   • We want all the other kinds of wrong syntax gone, if any.
2. Too many inline styles
   • Inline styles are syntactically correct. However, as far as the separation of styles from data was the biggest motivation of introduction of CSS, this is not standard-compliant. Inline styles are valid only in case... almost no case. They also make the code unreadable.
   • There is always a good way to classify a group of elements and consistently style them as a group using class attribute.
     • This will be how you separate the styles from the data
3. Indentation

   • Believe it or not, the biggest factor for readability is indentation.

   • Collaborative coding process is innately patchy, so I understand there could be irregular indentation. However, we want to fix it right now.

   • We use two-space indentation per level. Note that level is in italics. Level is important.

     <grandparent>
       <parent>
         <children>
           ...
         </children>
         <children>
           ...
         </children>
       </parent>
     </grandparent>
     

   • You may leave the opening tag, closing tag, and the content in the same line if it's just a one-liner that looks fine. This helps the source code being compact. Use your discretion.

     <span class='span-example'>This is a one-liner. You don't have to add new lines.<span>

   • The same indentation rules apply to javascript.

   • Feel free to use existing formatter tools, but at your own risk. They might not be designed to properly format Django-templated HTML codes, which we're using. Also, they might not have the same rule for formatting as our local rule.

     • In my case, I rather manually go through the code to learn how it works while formatting. And then, I verify the format using such tools. Just a suggestion.
     • One of highly recommended tools in that regard is W3C Validator with Validate HTML fragment option.

[sohyeonlee]

Do we want to clean out all the unused/commented css/html code or just leave it there?

[stlim0730]

Let's leave it there for a while.