The foundation of every website is HTML. There are rules and best practices as there are with all languages when it comes to HTML and following them to the best of your ability is important.
Poorly written HTML can affect your website’s rankings, future developers and even future functionality later on. So it’s important to write clean and intuitive HTML.
<output>
The output tag is greatly under appreciated in HTML. The output tag will help you dictate where the calculation results of any progress meters or sliders on your website might sit. This is important for WCAG or ADA compliance when it comes to your website. This provides a value for your screen reader to announce.
<wbr>
We use a lot of methods of adjusting and controlling your text on your screen. Doing this we use overflow and text wrap styles within the CSS. However there are some cases that we have issues with text breaking where we don’t want it to, or not at all when we do.
Using the <wbr> tag in your markup will help you dictate where it is acceptable to change the format and ignore the styles you’ve set.
<fieldset>
This attribute is scarce it seems on the internet these days but I happen to find it immensely helpful when grouping items together when yes/no type options or select items are available.
When grouping <input> items together in a <fieldset>, you’re grouping those options together.
Note: Don’t forget your <label> tag. This is important for screen readers and WCAG/AODA compliance.
There are many more tags to consider for further consideration such as:
- <optgroup> — To add definition between groups
- <cite> — When a blockquote tag is not exactly what you’re needing
- <datalist> — To help define options for inputs where <select> isn’t possible (similar to autocomplete).
- <caption> — For adding details and information to components such as tables, graphs or other forms of displaying data.
It can be hard to really keep a structured list of all the possibilities with coding languages. The options are so extensive that often we overlook the most basic items we could harness.
I’ve listed a few here, but I would suggest a browse through W3Schools and Mozilla Developer Network once in a while as a refresher. Eventually using these items strictly will become second nature.
Did you know if you hold the “clap” button a while, that more people have a chance of seeing this story? — I also have a mailing list if you’d like updates on newly published stories.
