patternhtmlMinor
Bootstrap: HTML markup review
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:
Here are other things I am aware of:
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
- My use of
centertags (consider this a "known issue")
- "Element
legendnot allowed as child of element div in this context." (I do not understand this error.)
- My use of
X-UA-Compatiblein themetatag (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:
tags.
- 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
idattributes.
- Wrap
inputfields withlabelelements 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
bodytag to help ensure consistency across all browsers.
Context
StackExchange Code Review Q#20439, answer score: 3
Revisions (0)
No revisions yet.