HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

Bootstrap: HTML markup review

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
bootstrapmarkupreviewhtml

Problem

I am using Bootstrap for a front-end project. I would like feedback concerning my HTML markup. I have spent quite some time polishing it, and I feel it is somewhat "mature". I have run the W3C HTML validator on it, and it only complains about three things:

  • My use of center tags (consider this a "known issue")



  • "Element legend not allowed as child of element div in this context." (I do not understand this error.)



  • My use of X-UA-Compatible in the meta tag (common practice, but not standard)



Here are other things I am aware of:

  • All the JavaScript should be bundled in just one file to reduce the number of requests. (I will do this for production.)



  • The same as above, but for CSS.



  • The code is a little lengthy, but I prefer to keep everything in just one file.



  • The code is not commented.



What are best practices I have not followed in my code?

```



DeepFlow

















jQuery.fx.speeds._default = 800;



















DeepFlow


Statistics
Protocols
Tuples
Exports
Users
Network


Log out












×



Welcome to DeepFlow
Please log in







Log in




Network





Packets per second



[No canvas sup

Solution

Other items to consider:

  • Place JavaScript at the bottom (before the closing body tag).



  • Find other ways to avoid the flash of unstyled content.



  • Avoid hard-coding text (e.g., "DeepFlow", "System") with an eye to internationalization.



  • Use CSS to change layout, not multiple


tags.

  • Leave "style='display:none'" in CSS; change the class instead.



  • Accessibility and its corresponding mark-up.



  • Use tools like JSLint, CSSLint, in addition to the W3C validation tool.



  • Good use of unique id attributes.



  • Wrap input fields with label elements when possible; this allows users to click the label associated with the input field to give that field focus.



  • "logo" should probably be "Qosmos Logo".



  • Technically, you don't need © and the word Copyright.



  • Add a body tag to help ensure consistency across all browsers.

Context

StackExchange Code Review Q#20439, answer score: 3

Revisions (0)

No revisions yet.