Putting Common Sense in your UI Code — part 1 (HTML)
UI Development Best Practices
If you don’t pay attention to the code in the beginning, you are harming yourself in the same way as the woodcutter in the image. Bad code will eventually lead you to unreadable and inefficient code which is hard to manage in the long run.
Putting common sense in your code means using some basic best practices which makes it more readable and understandable.
In this series of articles, we will have a look at these basic best practices for UI development, starting with HTML specifically in this one.
1. Don’t “divify” everything
i.e. use proper semantic tags as and when needed.
2. NEVER EVER use block element inside inline element
In case of a nested structure like in the above example, always remember to wrap an inline element with a block level element.
Here is a list of inline elements:
And the block level elements are:
The above example also covers one more point:
3. Use “alt” attribute (Alternative Text Attribute)
- It is used for meaningful description of images.
- It provides the alternate text to the screen reader user.
- Also when image is not loaded/removed from server, it provides information to the user about what the image was about.
4. Use proper and meaningful names for class and id attributes
Never use naming convention based on style properties, instead name the class/id based on its actual use. In the above example we can use more meaningful class names like “alert” or “warning” instead of “red”.
5. Use structural elements efficiently
- Use <!Doctype> to save your code from quirk mode.
- Use <meta> tags with description and keywords attributes for better SEO.
- Give a meaningful title to your page using <title> tag.
- Use semantic tags like header, footer, section, h1… h6, aside, nav for better accessibility and readability.
6. Keep your view separate from styles and scripts
- Never use inline styles.
- Never use inline/internal scripts.
Use external .css and .js files as inline styles and scripts are difficult to track and manage.
7. Try to keep it concise
i.e. Use the right HTML Element at the right place.